syncfusion-aspnetcore-spreadsheet-editor について
Syncfusion Spreadsheet Editorを組み込むためのASP.NET Core (cshtml)コード生成を支援するスキルです。ドキュメント内の参照に基づく生成を促し、データバインディング、数式、ファイル出力、共同編集などを扱います。
主な機能
- 01ASP.NET Core (cshtml)コードを生成
- 02データバインディングと編集のガイダンス
- 03数式とセル書式の例
- 04Excel、CSV、PDFのインポートと出力
- 05チャート、コメント、共同編集のガイダンス
活用シーン
- 01ASP.NET Coreアプリへのスプレッドシートエディター追加
- 02スプレッドシートファイルの読み込みと出力
- 03数式、書式、チャートを含むシートの作成
- 04検証、保護、共同編集機能の設定
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ spreadsheet-editor-sdk-skills --skill syncfusion-aspnetcore-spreadsheet-editorインストール後、Claude Code で/syncfusion-aspnetcore-spreadsheet-editorを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
README.mdreferences/autofill.mdcharts.mdclipboard.mdcollaborative-editing.mdcomments.mdconditional-formatting.mdcontext-menu.mdcustom-functions.mddata-binding.mddata-validation.mddefined-names.mdedit-cell.mdevents.mdfind-replace.mdformatting.mdformulas.mdfreeze-panes.mdhyperlink.mdimages.mdimport-export.mdinitialization.mdlocalization.mdmerge-cells.mdmisc-operations.mdnotes.mdnumber-formatting.mdprint.mdprotection.mdribbon-customization.md詳細
Syncfusion ASP.NET Core スプレッドシートエディター
概要
このスキルは、開発者が Syncfusion Spreadsheet Editor をアプリケーションに統合するための ASP.NET Core(cshtml)コードを生成できるよう支援します。ASP.NET Core プロジェクトで Excel のような機能を構築するための、すぐに使えるコードスニペット、API のガイダンス、ベストプラクティスを提供します。
主な機能
- ファイル操作: Excel ファイル(
xlsx、xls、xlsb)および CSV ファイルのインポート/エクスポート、PDF へのエクスポート - データ管理: データバインディング、編集、並べ替え、フィルタリング、検証
- セル操作: 書式設定(フォント、色、罫線、配置)、セルの結合、テキストの折り返し
- 数式と計算: Excel 組み込み数式、カスタム関数、名前付き範囲
- コラボレーション: メモ、コメント、スレッド形式のディスカッション
- 高度な機能: グラフ、画像、ハイパーリンク、条件付き書式、ウィンドウ枠の固定、シートの保護、大規模なデータセット向けの仮想化
クイックスタートの例
例 1:書式設定を適用したスプレッドシートの生成
ユーザー: "データを含むスプレッドシートを作成し、セルのスタイルを適用してください"
結果: 提供されたデータをスプレッドシートに読み込み、基本的なセルの書式設定を適用する ASP.NET Core(cshtml)コードスニペットが生成されます。
例 2:ファイル読み込み用コードの生成
ユーザー: "スプレッドシートを作成し、最初に Excel ファイルを読み込んでください"
結果: スプレッドシートを初期化し、起動時にプログラムで Excel ファイルを開く ASP.NET Core(cshtml)コードスニペットが生成されます。
はじめに — 最小限の ASP.NET Core コード
通常の ASP.NET Core プロジェクト向けの、最小限の ASP.NET Core スプレッドシート設定:
コントローラー(HomeController.cs):
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using Syncfusion.EJ2.Spreadsheet;
namespace YourApp.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
public IActionResult Open(IFormCollection openRequest)
{
OpenRequest open = new OpenRequest();
open.File = openRequest.Files[0];
return Content(Workbook.Open(open));
}
public IActionResult Save(SaveSettings saveSettings)
{
if (saveSettings != null && saveSettings.JSONData != null)
{
return Workbook.Save(saveSettings);
}
return View();
}
}
}
ビュー(Index.cshtml):
@using Syncfusion.EJ2.Spreadsheet
<div class="control-pane">
<div class="control-section spreadsheet-control">
<ejs-spreadsheet id="spreadsheet" openUrl="Home/Open" saveUrl="Home/Save">
<e-spreadsheet-sheets>
<e-spreadsheet-sheet name="Sheet1">
<e-spreadsheet-rows>
<e-spreadsheet-row>
<e-spreadsheet-cells>
<e-spreadsheet-cell value="Hello, Spreadsheet!"></e-spreadsheet-cell>
</e-spreadsheet-cells>
</e-spreadsheet-row>
</e-spreadsheet-rows>
</e-spreadsheet-sheet>
</e-spreadsheet-sheets>
</ejs-spreadsheet>
</div>
</div>
ユーザーのプロジェクト向けに ASP.NET Core(cshtml)コードを生成
トリガーキーワード: "aspnet-core 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"
ワークフロー:
-
要求されたスプレッドシート機能(データバインディング、数式、グラフ、エクスポートなど)を特定します。
-
要求された機能の API とコードパターンを確認するため、関連する
references/*.mdファイルを読みます。 -
コードを生成する前に停止します。 ユーザーがすでに出力方法を選択しているか確認します。
-
出力方法がまだ選択されていない場合、まず次の簡潔な複数選択の質問をユーザーに尋ねる必要があります。
「生成したスプレッドシートのコードをどのように受け取りますか?」
- オプション 1: 特定のプロジェクトファイル内のコードを置き換える(ファイルパスを指定し、確認する必要があります)
- オプション 2: このスキルの出力フォルダー
{skill-root}/syncfusion-aspnetcore-spreadsheet-editor/output/index.cshtmlにコードを保存する - オプション 3: チャット画面でコードを直接共有する
-
ユーザーが出力方法を選択した後に限り、
references/*.mdの API とスニペットを使い、ユーザーのプロジェクトの具体的な値でプレースホルダーを置き換えて ASP.NET Core(cshtml)コードを生成します。 -
ユーザーがオプション 1 を明示的に選択し、ファイルパスを指定して許可していない限り、ワークスペース内のプロジェクトファイルを変更してはいけません。
-
コードの提供後、完全な ASP.NET Core スニペットと簡潔な統合手順を提示します。
運用上の制約(出力ディレクトリ、一時ファイル、使用可能なライブラリなど)については、## Rules セクションを参照してください。
コードリファレンス
コードスニペットと例はすべて references/ フォルダーにあります。各ファイルには次の内容が含まれています。
- 最小限の ASP.NET Core(cshtml)コード — 動作する、すぐに使えるスニペット
- プレースホルダー — ユーザーがカスタマイズする必要がある値
- 注意事項 — ASP.NET Core のベストプラクティスと制約
| ファイル | トピック |
|---|---|
| initialization.md | ASP.NET Core の基本的なセットアップとオプション |
| 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 | シンプルなセルのメモ、付箋の表示、追加/編集/削除 |
| 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 | オートフィルのパターン、フィルの種類、連続データ |
| collaborative-editing.md | リアルタイムの共同編集、共有ブックの同期、プレゼンスインジケーター |
| rich-text-formatting.md | リッチテキストのセグメント、複数のスタイル、下付き/上付き文字 |
コード生成の主要ルール(ASP.NET Core(cshtml)優先)
-
ASP.NET Core(cshtml)優先のスニペット — すべての例とスニペットは ASP.NET Core cshtml で記述し、現在の npm パッケージでコンパイルできる必要があります。ユーザーから ASP.NET Core cshtml の提供を求められた場合は、ASP.NET Core cshtml のコードを提供してください。
-
このマニフェストにインラインコードを含めない — 実行可能なスニペットについては
references/*.mdを参照してください。このファイルは簡潔なポリシーおよびインデックスとして維持してください。 -
参照ファイルの要件 — 各参照ファイルには次の内容を含めてください。
- 最小限の ASP.NET Core(cshtml)コード(完全で実行可能)
- プレースホルダー(置き換える値を明確に示す)
- 注意事項(ASP.NET Core への統合手順とベストプラクティス)
-
ライセンスの取り扱い — ライセンスキーをハードコードしないでください。環境変数またはプロジェクト設定を参照するよう案内してください。
-
データの整合性を維持する — シートを生成または編集する際は、既存の数式、参照、書式を維持してください。
-
存在しない API を作り出さない — 検証済みの Syncfusion Spreadsheet Editor のメソッド名のみを使用してください。
-
最初に参照ファイルを読む — 機能をリクエストされた場合は、コードを生成する前に、関連する
references/*.mdファイルを必ず読んでください。 -
参照ファイルに厳密に基づいて構築する — ASP.NET Core コードは、参照ファイルに記載されている API、メソッド、プロパティ、イベント、スニペットのみに厳密に基づいて構築してください。参照ファイルに明記されていない API、メソッド、プロパティ、イベントを作成、推測、提案してはいけません。
ルール
- ユーザーがオプション 2 を選択した場合、出力ファイルは
{skill-root}/syncfusion-aspnetcore-spreadsheet-editor/output/ディレクトリに保存してください。 - Syncfusion Spreadsheet API のみを使用してください — 代替のスプレッドシートライブラリ(例:aspnet-core-spreadsheet、handsontable、ag-grid)を推奨または使用してはいけません。
- 一時ファイルを作成しない — 出力ディレクトリ外に一時スクリプト、中間ファイル、足場ファイルを作成してはいけません。
- ASP.NET Core 専用コード — 生成するコードはすべて有効な ASP.NET Core(cshtml)でなければなりません。Vanilla JavaScript、jQuery、または ASP.NET Core 以外のパターンを生成してはいけません。
セキュリティ
- ドキュメントのみ: このスキルにはドキュメントと参照スニペットのみが含まれ、ランタイムコードは同梱されていません。ランタイムファイルが明示的に追加されていない限り、これはドキュメントとして扱ってください。
- 公式アセットのみ: 例では Syncfusion の公式ドメイン(syncfusion.com、ej2.syncfusion.com、document.syncfusion.com)を参照できます。本番環境では、固定バージョンの NuGet パッケージ(Syncfusion.EJ2.AspNet.Core)、または Subresource Integrity(SRI)とベンダーの承認を得た検証済み CDN アーティファクトを優先してください。
- データの外部流出: リモートエンドポイントの例ではプレースホルダーを使用してください。機密データをサンプル/デモ用エンドポイントに送信してはいけません。サンプルではモックまたはローカルのエンドポイントを使用してください。
- 信頼できない入力: 例では、ユーザーが指定した URL の検証と許可リストによる制限、アップロードのサニタイズ、レンダリング前の出力のエンコードを推奨してください。