syncfusion-aspnetcore-pdf-viewer について
syncfusion-aspnetcore-pdf-viewerは、ASP.NET Core PDF Viewerのコードサンプルを生成するスキルです。参考資料の表に記載されたAPIだけを使う方針で、ビューアー設定、ナビゲーション、注釈、フォーム、テキスト操作を扱います。
主な機能
- 01RazorとHTMLのサンプル生成
- 02参考資料とのAPI照合を必須化
- 03依頼に応じて参照ファイルを選択
- 04ビューアー設定とナビゲーションに対応
- 05注釈・フォーム・テキスト機能を解説
活用シーン
- 01基本的なPDF Viewerサンプルを作成
- 02資料に記載されたツールバーやナビゲーションを追加
- 03注釈やフォームフィールドのコード例を生成
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ pdf-viewer-sdk-skills --skill syncfusion-aspnetcore-pdf-viewerインストール後、Claude Code で/syncfusion-aspnetcore-pdf-viewerを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
README.mdreferences/annotation-events.mdannotation-operations.mdannotation-overview.mdannotation-settings.mdannotation-use-cases.mdapi-methods.mdbookmark-navigation.mdcontextmenu.mdenable-properties.mdevents.mdform-field-events.mdform-field-settings.mdform-field-validation.mdform-fields-overview.mdform-fields-props.mdform-operations.mdfree-text-annotations.mdgeneral-properties.mdgetting-started.mdimport-export-form-data.mdmagnification.mdmeasurement-annotations.mdnavigation.mdopening-pdfs.mdprinting-and-organizing.mdredaction-annotation.mdsaving-and-downloading.mdshape-annotations.mdshape-label-settings.md詳細
Syncfusion ASP.NET Core Pdfviewer – UI サンプルジェネレーター
NuGet: Syncfusion.EJ2.AspNet.Core
ユーザーのプロジェクト用コードを生成する (デフォルト)
トリガーキーワード:「方法」「pdfviewer の追加」「コードサンプル」「見せて」「例」「スニペット」「統合」「コンポーネント」「サンプルの作成」「ASP.NET Core サンプル」。
**目的:**ユーザーが ASP.NET Core プロジェクトに直接統合できる、最小限のコピー&ペースト可能な Razor + HTML コード(.cshtml)を生成します。
ワークフロー: ⚠️ 重大 — 機能サポートポリシー(厳格モード):
**基本ルール:**リファレンスファイルに明示的に記載されている API とプロパティのみを使用してコードを生成します。これから逸脱する行為はすべて違反です。
-
コードを生成する前に必ず確認すること:
- リファレンスファイルで正確な API/プロパティ名を検索します
- メソッドリファレンス、プロパティ、またはイベントの表に記載されていることを確認します
- どのリファレンスファイルにも見つからない場合は、直ちに作業を停止します
- いかなる状況でも、ドキュメント化されていない API を生成したり提案したりしません
-
厳格な適用 — 一切の例外なし:
- カスタムプロパティは禁止 — リファレンスファイルの表に記載されたプロパティのみを使用します
- メソッドの創作は禁止 — リファレンスファイルの表に記載されたメソッドのみを使用します
- 未定義の API を使った回避策は禁止
- ドキュメント化されていない動作の推測は禁止
- 推測に基づく代替実装は禁止
- サポートされていると装うことは禁止
-
サポートされていない機能に対する必須の回答:
- 要求されたシナリオ/機能/API がどのリファレンスファイルにも記載されていない場合、必ず次のように回答します:
"This feature is not supported in the current Syncfusion ASP.NET Core PDF Viewer implementation." - 続けて、該当するリファレンスファイルに記載されているサポート対象を列挙します
- リファレンスファイルに明示的に記載されていない限り、代替案を提案してはいけません
- 要求されたシナリオ/機能/API がどのリファレンスファイルにも記載されていない場合、必ず次のように回答します:
-
リファレンスファイルの優先順位:
- 各リファレンスファイルには、その領域に関する完全かつ正式なドキュメントが含まれています
- 表(メソッドリファレンス、プロパティ、イベント)が信頼できる唯一の情報源です
- リファレンスファイル内でこれらの表以外に記載された内容は、説明に限られます
- リファレンスファイルの表に記載された内容を超えてはいけません
-
生成内容を監査する:
- コードを提示する前に、使用するすべての API がリファレンスファイルの表に記載されていることを確認します
- 各 API の参照元となるリファレンスファイルを明記します
- リファレンスファイルの表にある記載を引用できない場合は、そのコードを削除します
-
**これは重大な要件です。**違反すると、このスキルの完全性と信頼性が損なわれます。
ステップ 1 — リファレンスファイルのみからコードを生成する (必須)
- 要求された機能に関連する
references/*.mdファイルを読みます - すべての API、プロパティ、メソッドをこれらの表と照合します
- **必須:**コードを生成する前に、リファレンスファイルが存在し、アクセス可能であることを確認します
- 要求された機能に適切なリファレンスファイルを読みます:
- 関連する
references/*.mdファイルにread_fileツールを使用します - ファイルに Methods/Properties/Events の表が含まれていることを確認します
- 表が完全で、読み取り可能であることを確認します
- 関連する
- リファレンスファイルがない場合、または読み取れない場合:
- コード生成を停止します
- 次のように回答します:「この機能のリファレンスファイルを利用できません。すべてのリファレンスファイルが
references/ディレクトリに存在することを確認してください。」 - 不足しているリファレンスファイル名を列挙します
- **これはブロッカーとなるステップです:**リファレンスファイルを検証せずに先へ進むことはできません
- API/プロパティがリファレンスファイルの表に記載されていない場合は、使用してはいけません
- リファレンスファイルに明示的に記載されていない API、メソッド、プロパティ、クラス、名前空間を創作、推測、提案してはいけません
リファレンスファイルのルーティングガイド
すべてのテンプレートと操作スニペットは references/*.md にあります。各ファイルには、サンプルの生成時にエージェントが組み合わせる、用途を絞ったスニペットまたはテンプレートが含まれています。
フロー: 常に getting-started.md から始め、一致する機能をアンカー(PROPS、EVENTS、UI_BUTTONS、HANDLERS)にマージします。一致するキーワードがない場合は、基本サンプルのみを返します。
コード生成前のチェックリスト
- 設定プロパティの数を確認します: 1~3 個? → インラインを使用 | 4 個以上? → 別の razor コードブロックを使用
- コンポーネントのプロパティはインラインにできるほど単純ですか? はい → インラインのままにする | いいえ → 別の razor コードブロックに切り出す
- プロパティの Default 値が明示的に設定されていますか? はい → 削除する | いいえ → 残す
🎯 コアのセットアップと設定
| ファイル | 用途 |
|---|---|
| getting-started.md | documentPath、height、width を指定した最小構成の PDF Viewer。すべてのサンプルのベーステンプレートです。 |
| enable-properties.md | 特定の機能(ツールバー、注釈、フォーム、ナビゲーション、テキスト選択、ダウンロード、印刷)の有効化/無効化。 |
| general-properties.md | ビューアーのコアプロパティと動作(documentPath、width/height、locale、zoom/initialRenderPages)、サーバー/統合設定(serviceUrl、ajaxRequestSettings、serverActionSettings)、リソースの読み込み(resourceUrl、customFonts)、パフォーマンス/再試行オプションを設定します。 |
コンテキストメニュー
| ファイル | 用途 |
|---|---|
| contextmenu.md | テキスト、注釈、フォームフィールドに応じたコンテキストメニュー。addCustomMenu でカスタム項目を追加し、customContextMenuSelect でクリックを処理し、customContextMenuBeforeOpen で項目を動的に表示/非表示にし、contextMenuOption でメニューを無効にします。コンテキストメニューの設定を使用して、デフォルトのコンテキストメニューを構成します。 |
ナビゲーション機能
| ファイル | 用途 |
|---|---|
| navigation.md | ページナビゲーション(最初/最後/前へ/次へ/ページ移動)、サムネイル表示とナビゲーション、ハイパーリンクのサポート(内部リンクと外部リンク)、目次ナビゲーション、プログラムによるナビゲーションメソッド、ナビゲーション関連イベントを有効化/無効化します。 |
| bookmark-navigation.md | ブックマークナビゲーションを有効化/無効化し、表示/非表示にします。ドキュメントのブックマークをプログラムで取得します |
コアの表示と操作
| ファイル | 用途 |
|---|---|
| viewing-and-interaction.md | 操作モード(テキスト選択/パン)、ページのスクロールと表示動作、パン操作、モジュール型アーキテクチャの機能モジュール、特定の表示機能の有効化/無効化、コアの表示機能について説明します。 |
| magnification.md | ズームレベルとズーム率、ズームモード(ページに合わせる/幅に合わせる/表示領域に合わせる/自動)、カスタムズームコントロール、プログラムによるズーム操作、ズームツールバーの設定、マウスホイールによるズーム動作を設定します。 |
ツールバーの設定
| ファイル | 用途 |
|---|---|
| toolbar-customization.md | PDF ビューアーのプライマリ、フォームデザイナー、注釈ツールバーをカスタマイズします。ツールバーをプログラムで有効化/無効化し、ツールバー項目を有効化/無効化、表示/非表示にします。各ツールバーで利用可能なツールバー項目を一覧表示します。初期化時にフォームデザイナー、注釈、プライマリの各ツールバーを有効化/無効化します。カスタムツールバー項目を作成します |
| toolbar-reference.md | ツールバー API のメソッド/プロパティを使用して、プライマリ/注釈/ナビゲーション/墨消しツールバーを表示/非表示にします。 |
| toolbar-customization-scenarios.md | よくあるツールバーのカスタマイズシナリオ |
注釈とマークアップ
| ファイル | 説明 |
|---|---|
| annotation-overview.md | インク/フリーハンド、付箋/コメント、手書き/デジタル署名の注釈、およびプログラムによる追加方法について説明します。注釈の種類全般と、注釈の共通の既定設定の例も紹介します |
| text-markup-annotations.md | テキストマークアップ注釈(ハイライト、下線、取り消し線、波線)をプログラムで追加する方法を説明します。各テキストマークアップ注釈の既定設定を変更する方法も紹介します |
| shape-annotations.md | 図形注釈(線、矢印、四角形、円、多角形)について説明します。図形注釈のプログラムによる追加方法と、各図形注釈の既定設定の変更方法も紹介します |
| measurement-annotations.md | 計測注釈(距離、周長、面積、半径、体積)について説明します。計測注釈のプログラムによる追加方法と、各計測注釈の既定設定の変更方法も紹介します |
| stamp-annotation.md | スタンプ注釈と、使用できるさまざまな種類のスタンプについて説明します。スタンプ注釈をプログラムで追加する方法も紹介します |
| free-text-annotations.md | フリーテキスト注釈について説明します。フリーテキスト注釈をプログラムで追加する方法も紹介します |
| annotation-settings.md | すべての種類の注釈について、外観(色、不透明度、枠線、スタイル)と動作(制限、ロック、印刷)を設定します。設定は全体または注釈の種類ごとに適用できます。注釈セレクター(サイズ変更ハンドル、選択枠)をカスタマイズし、作成者、件名、カスタムデータを設定できます。注釈関連のコンポーネントプロパティ(ツールバーの表示、署名設定、エクスポートオプション、描画制約)も制御できます。 |
| annotation-events.md | 注釈のライフサイクルイベント(追加、削除、移動、サイズ変更、選択、プロパティ変更)を処理します。 |
| annotation-operations.md | 選択、移動、サイズ変更、削除、ロック、注釈のインポートとエクスポートなど、注釈をプログラムで操作する方法を説明します |
| annotation-use-cases.md | 注釈をプログラムで操作する一般的なシナリオを紹介します |
| shape-label-settings.md | 図形注釈と計測注釈のラベルの外観(塗りつぶし色、フォント、フォントサイズ、不透明度)と既定の内容(ラベルテキスト、メモ)を設定します。 |
| redaction-annotation.md | PDF 内の機密情報を非表示にし、完全に削除します。領域またはページ全体を対象として指定し、オーバーレイテキストとスタイルを設定して、墨消しを元に戻せない形で適用できます。テキストの検索と自動墨消し、墨消し注釈のプログラムによる管理にも対応します。 |
フォーム管理
| ファイル | 用途 |
|---|---|
| form-fields-overview.md | PDF フォームへの入力とデザイン、フォームフィールド(テキストボックス/パスワード/チェックボックス/ラジオボタン/ドロップダウン/リストボックス/署名など)の管理、プログラムによるフィールドの作成、フォームデザイナーのツールバー/UI 操作の使用、フィールドのプロパティ/カスタマイズの設定、検証ルールと制約/設定の適用、フォームフィールド API メソッドの使用、カスタムフィールドデータを含むフォームデータのインポート/エクスポートの処理について説明します。 |
| supported-form-fields.md | サポートされているフォームフィールドの種類と、それぞれをプログラムで追加する方法 |
| form-fields-props.md | フォームフィールドのプロパティを一覧表示します。共通プロパティと各フィールド固有のプロパティを紹介し、フォームフィールドの設定を操作します |
| import-export-form-data.md | フォームフィールドデータをプログラムでインポート/エクスポートします |
| form-operations.md | プロパティや値の更新、移動とサイズ変更、削除、グループ化、カスタムデータの追加、フォームフィールドデータの取得など、フォームフィールドをプログラムで操作します |
| form-field-validation.md | フォームフィールドの検証を有効/無効にします。フォームフィールド検証のプログラム上の流れと例を紹介します |
| form-field-settings.md | フォームフィールド(テキスト、チェックボックス、ラジオボタン、ドロップダウン、署名)のデフォルトプロパティを設定します。 |
| form-field-events.md | フォームフィールドの操作イベント(フォーカス、フォーカス解除、値の変更、検証)を処理します。 |
テキスト操作
| ファイル | 用途 |
|---|---|
| text-search.md | PDF 内のテキスト検索を実装します。検索機能、検索オプション(大文字と小文字の区別/単語単位)、検索結果のハイライト表示、次/前の一致箇所への移動、プログラムによるテキスト検索メソッド、検索完了イベント、カスタムハイライト色を扱います。テキスト抽出のオプション/設定を構成し、ページからテキストをプログラムで抽出します |
| text-selection.md | テキスト選択とテキスト抽出を有効にします。選択モード/動作、選択したテキストのコピー、テキスト選択イベント、プログラムによる選択、テキストコレクション/境界を扱います。 |
ドキュメント操作
| ファイル | 用途 |
|---|---|
| opening-pdfs.md | URL/ローカルパス/base64 から PDF を読み込み、暗号化/パスワード保護された PDF を開き、プログラムによるドキュメントの読み込みをサポートし、ドキュメント読み込みイベント/ライフサイクルを処理し、読み込み失敗/エラーを管理します。 |
| saving-and-downloading.md | PDF をダウンロードし、注釈/変更を含む PDF を保存し、フォームデータを含めてダウンロードし、PDF を base64 として取得し、ダウンロードイベントをカスタマイズし、カスタムのダウンロードファイル名を設定します。 |
| printing-and-organizing.md | PDF を印刷し(ページ範囲/品質などの印刷オプションやサイレント印刷を含む)、印刷イベントを処理し、ページを整理し(概要表示/並べ替え/順序変更/回転/削除)、ページをコピー/複製/抽出して新しいドキュメントを作成し、ページオーガナイザーのツールバーを使用したプログラムによるページ整理とモバイルでのページ整理を行います。 |
⚙️ 高度な機能
| ファイル | 用途 | ユーザーが次について尋ねた場合の案内先 |
|---|---|---|
| api-methods.md | プログラムによる制御:ドキュメントの読み込み、フォームの管理、注釈、テキストの抽出、元に戻す/やり直し、ナビゲーション API。 | 「PDF をプログラムで読み込む」、「API メソッド」、「フォームデータをエクスポートする」、「テキストを抽出する」、「元に戻す/やり直し」、「プログラムによる制御」 |
| events.md | すべての PDFViewer イベント(ドキュメントの読み込み、ダウンロード、注釈、フォーム、検索、ナビゲーション)の完全な一覧。 | 「イベント一覧」、「すべてのイベント」、「利用可能なイベント」、「イベントリファレンス」、「イベントハンドラー」 |
クイックスタートの例
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<div class="text-center">
<ejs-pdfviewer id="pdfviewer" style="height:600px"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
annotationAdd="annotationAdded" >
</ejs-pdfviewer>
</div>
⚙️ 設定構成のベストプラクティス
設定(toolbarSettings、annotationSettings、annotationSelectorSettings、arrowSettings、rectangleSettings など)を使用してコードを生成する場合は、不要なインポートや過剰な設計を避けるため、次のガイドラインに従ってください。
ルール 1:シンプルな設定 → Razor のインラインコードとして定義する
次のような場合にこの方法を使用します:
- 設定するプロパティが 1~3 個のみの場合
- カスタム型を使わず、設定が単純な場合
例(このようにします):
<ejs-pdfviewer
annotationSelectorSettings="@(new {
selectionBorderColor = "blue",
resizerBorderColor = "red",
resizerFillColor = "#4070ff",
resizerSize = 8,
selectionBorderThickness = 1,
resizerShape = "Circle",
selectorLineDashArray = new int[] { 5, 6 },
resizerLocation = "Corners|Edges",
resizerCursorType = "grab"
})">
</ejs-pdfviewer>
メリット:
- ✅ シンプルで読みやすい
- ✅ コードの煩雑さを軽減
- ✅ 型チェックも引き続き機能する
ルール 2:複雑な設定 → HTML の外側にある Razor コードブロックとして定義する
次のような場合にこの方法を使用します:
- プロパティが 4 個以上、または関連する設定が複数ある場合
- 列挙型や複雑な設定を使用する場合
- 複数のコンポーネントで同じ設定を再利用する必要がある場合
- 設定が複雑で、個別に定義する必要がある場合
例(複雑なケースに限り、このようにします):
@{
var annotationSelectorSettings = new {
selectionBorderColor = "blue",
resizerBorderColor = "red",
resizerFillColor = "#4070ff",
resizerSize = 8,
selectionBorderThickness = 1,
resizerShape = "Circle",
selectorLineDashArray = new int[] { 5, 6 },
resizerLocation = "Corners|Edges",
resizerCursorType = "grab"
};
}
<ejs-pdfviewer annotationSelectorSettings="@annotationSelectorSettings">
</ejs-pdfviewer>
ルール 3:シンプルなケースを過剰に設計しない
❌ これは避けてください(過剰な設計):
@{
var toolbarSettings = new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings { ShowTooltip = true };
}
<ejs-pdfviewer
toolbarSettings="@toolbarSettings"
>
</ejs-pdfviewer>
✅ 代わりにこちらを使用してください(シンプルですっきり):
<ejs-pdfviewer
toolbarSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings { ShowTooltip = true })">
</ejs-pdfviewer>