syncfusion-angular-spreadsheet-editor

Syncfusion Angular スプレッドシートエディター

概要

このスキルは、開発者が Syncfusion Spreadsheet Editor をアプリケーションに統合するための Angular コードを生成するのに役立ちます。Excel のような機能を Angular プロジェクトで構築するための、すぐに使えるコードスニペット、API ガイダンス、ベストプラクティスを提供します。

主な機能

• ファイル操作： Excel ファイル（xlsx、xls、xlsb）および CSV ファイルのインポート／エクスポート、PDF へのエクスポート
• データ管理： データバインディング、編集、並べ替え、フィルタリング、検証
• セル操作： 書式設定（フォント、色、罫線、配置）、セルの結合、テキストの折り返し
• 数式と計算： 組み込みの Excel 数式、カスタム関数、名前付き範囲
• 共同作業： メモ、コメント、スレッド形式のディスカッション
• 高度な機能： グラフ、画像、ハイパーリンク、条件付き書式、ウィンドウ枠の固定、シートの保護、大規模なデータセット向けの仮想化

クイックスタートの例

例 1：書式付きのスプレッドシートを生成する

ユーザー： "データを含むスプレッドシートを作成し、セルのスタイルを適用してください"

結果： 指定されたデータをスプレッドシートに読み込み、基本的なセル書式を適用する Angular コンポーネントのコードスニペットが生成されます。

例 2：ファイルを読み込むコードを生成する

ユーザー： "スプレッドシートを作成し、最初に Excel ファイルを読み込んでください"

結果： スプレッドシートを初期化し、起動時に Excel ファイルをプログラムから開く Angular コンポーネントのコードスニペットが生成されます。

はじめに — 最小限の Angular コード

スタンドアロンコンポーネント（Angular 14 以降）を使った最小限の Angular セットアップ：

app.ts

import { Component, ViewChild } from '@angular/core';
import { SpreadsheetAllModule, SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SpreadsheetAllModule],
  template: `
    <ejs-spreadsheet #spreadsheet (created)="created()">
      <e-sheets>
        <e-sheet>
          <e-rows>
            <e-row>
              <e-cells>
                <e-cell value="Hello, Spreadsheet!"></e-cell>
              </e-cells>
            </e-row>
          </e-rows>
        </e-sheet>
      </e-sheets>
    </ejs-spreadsheet>
  `
})
export class AppComponent {
  @ViewChild('spreadsheet') spreadsheet!: SpreadsheetComponent;

  created(): void {
    // All post-initialization code goes here
  }
}

プレースホルダー：

• #spreadsheet — コンポーネントの Angular テンプレート参照変数
• <e-sheets> — 行とセルを含む宣言的なシート定義
• created() — スプレッドシートの初期化が完了した後に呼び出されるイベントハンドラー

注意： すべての機能を正しく動作させるには、スタンドアロンコンポーネントの imports 配列に必ず SpreadsheetAllModule をインポートしてください。

---

ユーザーのプロジェクト向けに Angular コードを生成する

トリガーキーワード： "angular spreadsheet", "spreadsheet editor", "syncfusion spreadsheet", "excel component", "load excel file", "open excel file", "import excel", "export excel file", "save excel", "export to pdf", "export to csv", "view excel", "configure spreadsheet", "create spreadsheet", "add spreadsheet", "spreadsheet data", "cell formatting", "apply formulas", "insert chart", "data binding", "spreadsheet validation", "freeze panes", "protect sheet"

ワークフロー：

1. 要求されたスプレッドシートの機能（データバインディング、数式、グラフ、エクスポートなど）を特定します。

2. 要求された機能の API とコードパターンを理解するため、該当する references/*.md ファイルを読みます。

   • 作成、初期化、レンダリング、パッケージのセットアップ、CSS のセットアップ、または基本的なスプレッドシートの要求の場合は、まず references/getting-started.md を読みます。

3. コードの生成、パッケージのインストール、ファイルの作成、またはプロジェクトファイルの変更を行う前に停止します。 ユーザーがすでに提供方法を選択しているか確認します。

4. 提供方法がまだ選択されていない場合は、 必ず次の簡潔な選択式の質問を最初にユーザーに尋ねます。

   「生成されたスプレッドシートのコードは、どのように受け取りたいですか？」

   • Option 1: 特定のプロジェクトファイル内のコードを置き換えます（ファイルパスを指定し、確認する必要があります）
   • Option 2: このスキルの出力フォルダー {skill-root}/syncfusion-angular-spreadsheet-editor/output/app.ts（および関連ファイル）にコードを保存します
   • Option 3: チャットウィンドウにコードを直接共有します

5. ユーザーが Option 1 を選択した場合は、コードを生成または置き換える前に、指定されたプロジェクトのファイル／フォルダーパスを検証します。

   • 指定されたパスが既存の Angular プロジェクトで、package.json を含む場合は、これまでの動作を続行します。
   • 指定されたパスが空のフォルダーであるか、Angular プロジェクトを含まない場合は、ファイルを編集せず、チャットも終了しないでください。
   • プロジェクトファイルを置き換えるには Angular プロジェクトが必要であることを説明します。
   • references/getting-started.md を使って Angular を先にセットアップ／インストールするかどうかを尋ねます。
   • ユーザーが明示的に確認しない限り、プロジェクトファイルの作成、パッケージのインストール、セットアップコマンドの実行を自動で行わないでください。

6. ユーザーがコードの提供方法を選択し、Option 1 のパス検証が完了した後に限り、references/*.md の API とスニペットを使い、ユーザーのプロジェクトに合わせて具体的なプレースホルダーを置き換えながら、Angular コードの生成に進んでください。

7. 実装は created イベントハンドラー内に限定してください — ユーザーが別のイベントハンドラー（例：beforeSave、cellSave など）を明示的に指定しない限り、すべてのコード実装を Spreadsheet の created イベント内に記述してください。

8. ユーザーが Option 1 を明示的に選択し、有効な Angular プロジェクトのファイル／フォルダーパスを指定して、許可を与えた場合を除き、ワークスペースのプロジェクトファイルを変更しないでください。

9. Angular プロジェクトまたは package.json が検出されない場合は、まず Angular プロジェクトが必要であることを説明し、references/getting-started.md に基づくセットアップ方法を案内してください。ユーザーが Angular アプリの作成を明示的に依頼し、許可を与えた場合を除き、プロジェクトファイルの作成、パッケージのインストール、セットアップコマンドの実行を自動で行わないでください。

10. 新しい Angular アプリケーション／プロジェクトを作成するのは、ユーザーが明示的に依頼した場合に限ります。たとえば、次のような依頼が該当します。

• 「Angular アプリケーションを作成して Spreadsheet を表示してください」
• 「Spreadsheet を含む新しい Angular アプリを作成してください」
• 「Angular アプリを作成して Spreadsheet を追加してください」
• 「Spreadsheet アプリをゼロからセットアップしてください」

ユーザーが Spreadsheet コンポーネントの作成、追加、表示、設定のみを依頼した場合は、新しい Angular アプリケーションをスキャフォールドしないでください。既存の Angular プロジェクト向けの Spreadsheet コンポーネント／コード生成として扱ってください。 11. 既存の Angular プロジェクト向けにコードを生成する場合は、references/getting-started.md に記載されている必要なパッケージと CSS のセットアップ方法を含めてください。 12. コードを提供した後、完全な Angular スニペットと簡潔な統合手順を提示してください。

運用上の制約（出力ディレクトリ、一時ファイル、使用可能なライブラリなど）については、## Rules セクションを参照してください。

コードリファレンス

すべてのコードスニペットとサンプルは references/ フォルダーにあります。各ファイルには次の内容が含まれています。

• 最小限の Angular コード — 動作する、すぐに使えるスニペット
• プレースホルダー — ユーザーがカスタマイズする必要がある値
• 注記 — Angular のベストプラクティスと制約事項

ファイル	トピック
getting-started.md	プロジェクトのセットアップ、パッケージのインストール、CSS の参照、基本的なレンダリング、初期データバインディング
data-binding.md	ローカル配列、JSON、リモート（DataManager）
formulas.md	数式、集計、名前付き範囲
formatting.md	セルの書式設定、罫線、テキストの折り返し
number-formatting.md	数値の書式設定、小数、通貨、日付
conditional-formatting.md	ルール、条件に基づく強調表示、数式ベースのルール
data-validation.md	検証ルール、無効な値の強調表示
sorting-filtering.md	並べ替え、フィルター
find-replace.md	検索、置換
import-export.md	保存（XLSX/CSV/PDF）、開く、openFromJson
charts.md	グラフの挿入、編集、削除
images.md	画像の挿入、変更
hyperlink.md	ハイパーリンクの追加、削除
comments.md	スレッド形式のコメント、返信、スレッドの解決
notes.md	シンプルなセルのメモ、表示の固定、追加／編集／削除
collaborative-editing.md	リアルタイムの共同編集、共有ワークブックの同期、プレゼンスインジケーター
protection.md	シートの保護、セルのロック、権限
edit-cell.md	startEdit、endEdit、updateCell、編集モード
freeze-panes.md	行／列の固定、ペインの分割
row-column.md	行／列の挿入、削除、サイズ変更、非表示
merge-cells.md	セルの結合、結合解除、複数セルにまたがる表示
print.md	ページ設定、ヘッダー／フッター、拡大縮小、余白
misc-operations.md	オートフィル、クリア、シート管理、goTo
clipboard.md	貼り付け形式を指定したコピー、切り取り、貼り付け
selection.md	セル／範囲の選択、複数選択、getSelectedRange
scrolling-virtualization.md	仮想スクロール、大規模なデータセット、パフォーマンス
wrap.md	テキストの折り返し、複数行表示、行の高さ
defined-names.md	名前付き範囲、名前の定義、refersTo の形式
custom-functions.md	カスタム計算関数、addCustomFunction
ribbon-customization.md	リボンタブ、ツールバー項目、ファイルメニューのカスタマイズ
context-menu.md	右クリックのコンテキストメニュー、contextMenuBeforeOpen
localization.md	多言語、ロケール、RTL、数値／日付形式
events.md	イベント処理、イベントプロパティ、イベントパターン
autofill.md	オートフィルのパターン、フィルの種類、連続データ
rich-text-formatting.md	リッチテキストのセグメント、複合スタイル、下付き／上付き文字

コード生成の重要ルール（Angular 優先）

1. Angular 優先のスニペット — すべての例とスニペットは Angular（インラインテンプレートを含む TypeScript）で記述し、現在の @syncfusion/ej2-angular-spreadsheet npm パッケージでコンパイルできる必要があります。

2. このマニフェストにはインラインコードを記載しない — 実行可能なスニペットについては references/*.md を参照してください。このファイルは簡潔なポリシーとインデックスとして維持してください。

3. イベントのデフォルトのスコープ — ユーザーが別のイベント（例：beforeSave、cellSave など）での実装を明示的に要求しない限り、すべての実装を Spreadsheet の created イベントハンドラー内に配置してください。これにより、Spreadsheet コンポーネントの完全な初期化後にすべての操作が実行されます。

4. スタンドアロンコンポーネント — コンポーネント内で常に standalone: true と imports 配列を使用してください。NgModule、app.module.ts、app.component.css に基づくコードは生成しないでください。

5. 参照ファイルの要件 — 各参照ファイルには、次の内容を含めてください。

   • 最小限の Angular コード（完全で実行可能なコード。インラインテンプレートを含むスタンドアロンコンポーネント）
   • プレースホルダー（置き換える値を明確に表示）
   • 注記（Angular への統合手順とベストプラクティス）

6. ライセンスの取り扱い — ライセンスキーをハードコードしないでください。環境変数またはプロジェクト設定を参照するよう案内してください。

7. データの整合性を維持 — シートを生成または編集する際は、既存の数式、参照、書式を維持してください。

8. 存在しない API を作り上げない — 検証済みの Syncfusion Spreadsheet Editor メソッド名のみを使用してください。

9. 最初に参照ファイルを読む — リクエストされた機能についてコードを生成する前に、必ず関連する references/*.md ファイルを読んでください。

10. 参照ファイルに厳密に基づいて作成する — Angular コードは、参照ファイルに記載されている API、メソッド、プロパティ、イベント、スニペットのみに厳密に基づいて作成してください。参照ファイルに明示されていない API、メソッド、プロパティ、イベントを創作、推測、提案してはいけません。

ルール

• ユーザーがオプション 2 を選択した場合、出力ファイルは {skill-root}/syncfusion-angular-spreadsheet-editor/output/ ディレクトリに配置してください。
• Syncfusion Spreadsheet API のみを使用してください — 代替のスプレッドシートライブラリ（例：handsontable、ag-grid、luckysheet）は推奨も使用もしないでください。
• 一時ファイルを作成しないでください — 出力ディレクトリの外に、一時スクリプト、中間ファイル、スキャフォールディングを作成してはいけません。
• Angular のみのコード — 生成するコードはすべて Angular テンプレート構文を使用した有効な Angular TypeScript でなければなりません。バニラ JavaScript、jQuery、Angular 以外のパターンは生成しないでください。
• オプション 1 のパス検証： ユーザーがオプション 1 を選択した場合、ファイルを編集または置き換える前に、指定されたプロジェクトのファイルまたはフォルダーのパスを必ず検証してください。
  • パスに package.json を含む既存の Angular プロジェクトがある場合は、通常のコード置換フローを続行してください。
  • パスが空、または Angular プロジェクトが含まれていない場合は、ファイルを編集せず、チャットを終了しないでください。
  • 終了するのではなく、必ずフォローアップの質問を返してください。
  • プロジェクトファイルを置き換えるには Angular プロジェクトが必要であることを説明してください。
  • references/getting-started.md を使用したセットアップの案内を希望するか、まず Angular をセットアップ／インストールするかを尋ねてください。
  • ユーザーが明示的に確認しない限り、プロジェクトファイルの作成、パッケージのインストール、セットアップコマンドの実行を自動で行わないでください。
• Angular アプリ作成の制約： ユーザーが「Angular アプリケーションを作成して Spreadsheet を表示する」や「Angular アプリを作成して Spreadsheet を追加する」など、Angular アプリ／プロジェクトの作成を明示的に依頼した場合に限り、新しい Angular アプリケーションを作成またはスキャフォールディングしてください。「データを使ってスプレッドシートを作成する」や「Spreadsheet を追加する」などの通常のプロンプトは、既存の Angular プロジェクト向けのコンポーネントコード生成として扱ってください。