syncfusion-angular-pdf-viewer

Syncfusion Angular PDF Viewer UI サンプルジェネレーター

対象パッケージ：@syncfusion/ej2-angular-pdfviewer

必須の3ステップワークフロー（厳守）

すべてのクエリで、以下の手順を順番に実行する必要があります。

STEP 1: Workspace Detection ? STEP 2: Read Reference File ? STEP 3: Generate Code

ブロッキングルール

1. ステップ1と2が完了するまで、コードを生成しないでください
2. 推測は禁止です。必ず最初にワークスペースを確認し、参照ファイルを読んでください
3. ドキュメントに記載されていないAPIは禁止です。参照ファイルに記載されたAPIのみを使用してください

違反した場合は、処理を停止して適切な手順でやり直してください

---

必須ワークフロー

ステップ1：ワークスペースの検出（必須：最初に実行すること）

以下のツールを実行してください：

1. file_search: **/{package.json,angular.json,tsconfig.json}
2. list_dir: src/app/
3. read_file: package.json (if exists)

ユーザーに報告してください：

?? STEP 1 COMPLETE:
- Workspace: [Empty / Angular X.X project detected]
- Files found: [list]
- Decision: [Create new / Use existing]

ステップ2：参照ファイルを読む（必須：2番目に実行すること）

以下の手順を実行してください：

1. Match user query to Reference File Routing Guide below
2. Use read_file on: references\[filename].md
3. Extract ALL steps/APIs from reference file

ユーザーに報告してください：

?? STEP 2 COMPLETE:
- Reference file: [filename.md]
- Steps found: [list sequential steps]
- APIs validated: [list properties/methods used]

ステップ3：コードを生成する（ステップ1と2の完了後にのみ実行すること）

検証チェックリスト：

• すべてのAPIを参照ファイルと照合する
• 独自に追加した、または推測したプロパティを使用しない
• Angularのパターン（コンポーネントバインディング、ライフサイクルフック）に従う
• APIが参照ファイルに記載されていない場合は、削除する

機能が参照ファイルに記載されていない場合：

? FEATURE NOT SUPPORTED
The requested [feature/API] is not documented.
Available alternatives: [list from reference files]

---

参照ファイルの振り分けガイド

コア設定

ユーザーのクエリキーワード	参照ファイル	目的
「基本」、「サンプルを作成」、「はじめに」、「PDFを読み込む」	getting-started.md	最小限のPDFViewerセットアップ
「設定」、「サーバー設定」、「ロケール」	general-properties.md	ビューアーのコアプロパティ
「無効化」、「機能を非表示」、「有効化／無効化」、「読み取り専用」	enable-properties.md	機能の切り替え

ナビゲーション

ユーザーのクエリキーワード	参照ファイル	目的
「ページナビゲーション」、「次／前のページ」、「ページに移動」	page-navigation.md	ページコントロール
「ブックマーク」、「目次」、「TOC」、「アウトライン」	bookmark-navigation.md	ブックマークナビゲーション（ViewChildを使用）
「ハイパーリンク」、「外部リンク」、「URLナビゲーション」	hyperlink-navigation.md	リンク処理
「サムネイル」、「ページのプレビュー」、「サムネイルパネル」	thumbnail-navigation.md	サムネイルパネル

表示と操作

ユーザーのクエリキーワード	参照ファイル	目的
「ズーム」、「拡大率」、「ページに合わせる」、「倍率」	magnification.md	ズームコントロール
「テキスト選択」、「パン」、「スクロールモード」	interaction-mode.md	操作モード
「テキストを選択」、「テキストをコピー」	text-selection.md	テキスト選択
「検索」、「PDF内を検索」、「検索結果をハイライト」	text-search.md	検索機能

ツールバーとコンテキストメニュー

ユーザーのクエリキーワード	参照ファイル	目的
「ツールバーをカスタマイズ」、「ツールバー項目を非表示」、「ボタンを削除」	toolbar-settings.md	ツールバーの設定
「ツールバーを動的に表示／非表示」、「ツールバーを切り替え」	toolbar-methods.md	プログラムによるツールバー制御
「右クリックメニュー」、「コンテキストメニュー」、「カスタムメニュー」	contextmenu.md	コンテキストメニュー

注釈

ユーザーのクエリキーワード	参照ファイル	目的
"注釈の色", "注釈のスタイル", "注釈のカスタマイズ"	annotation-settings.md	注釈の外観
"注釈イベント", "注釈が追加されたとき", "注釈コールバック"	annotation-events.md	注釈のライフサイクル
"注釈ラベル", "図形ラベル", "測定ラベル"	shape-label-settings.md	ラベルのカスタマイズ
"インク注釈", "フリーハンド描画", "署名", "スケッチ", "手書きメモ"	ink-annotation.md	インク注釈
"墨消し", "コンテンツの墨消し", "テキストを黒塗りにする"	redaction-annotation.md	墨消し注釈

フォーム

ユーザーのクエリキーワード	参照ファイル	目的
"フォームフィールドのデフォルト値", "フォームフィールドのスタイル"	form-field-settings.md	フォームフィールドの設定
"フォームフィールドイベント", "フィールドの変更", "検証"	form-field-events.md	フォームフィールドのイベント

ドキュメント操作

ユーザーのクエリキーワード	参照ファイル	目的
"PDFをダウンロード", "PDFを保存", "エクスポート"	download.md	ダウンロード機能
"PDFを印刷", "ドキュメントを印刷"	print.md	印刷機能
"ページの並べ替え", "ページの回転", "ページの追加／削除"	organize-pages.md	ページ操作

高度な機能

ユーザーのクエリキーワード	参照ファイル	目的
"プログラムから読み込む", "API メソッド", "テキスト抽出"	api-methods.md	プログラムからの制御
"イベント一覧", "すべてのイベント", "イベントリファレンス"	events.md	イベントの完全な一覧

---

ツールバー項目名の検証（重要）

ツールバー構成を生成する場合：

1. 必ず最初に toolbar-settings.md を読む
2. 次のセクションに記載された名前のみを使用する：
   • 「利用可能なプライマリツールバー項目」
   • 「利用可能な注釈ツールバー項目」
   • 「利用可能なフォームデザイナー項目」
3. 文字単位での検証が必須 — 誤字は許されません

防ぐべきよくある間違い：

• ? AnotatetionEditTool ? ? AnnotationEditTool
• ? CalibrationOption ? ? CalibrateTool
• ? ShapeAnnotationOption ? ? ShapeTool

---

クイックスタートの例

src/app/app.ts ファイルのテンプレートセクションで <ejs-pdfviewer> セレクターを使用して Angular PDF Viewer を追加し、PDF Viewer コンポーネントをレンダリングします。

import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
         MagnificationService, ThumbnailViewService, ToolbarService,
         NavigationService, TextSearchService, TextSelectionService,
         PrintService, FormDesignerService, FormFieldsService,
         AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
                <ejs-pdfviewer id="pdfViewer"
                    [documentPath]='document'
                    [resourceUrl]='resource'
                    style="height:640px;display:block">
                </ejs-pdfviewer>
             </div>`,
  imports: [ PdfViewerModule ],
  providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
               ThumbnailViewService, ToolbarService, NavigationService,
               TextSearchService, TextSelectionService, PrintService,
               AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resource: string = window.location.origin + "/assets/ej2-pdfviewer-lib";
  
  ngOnInit(): void {
  }
}

設定

ルール 1：シンプルな設定（プロパティが1～3個） ? インライン

public annotationSelection = {
  selectionBorderColor: 'blue',
  resizerSize: 8
};

ルール 2：複雑な設定（プロパティが4個以上、または列挙型） ? 列挙型をインポート

import { AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-angular-pdfviewer';

public annotationSelection = {
  selectionBorderColor: '#0000ff',
  resizerSize: 8,
  resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
  resizerCursorType: CursorType.grab
};

---

プロトコル違反への対応

違反	修正
ステップ 1 を省略した	再実行：まず file_search と list_dir を使用する
ステップ 2 を省略した	再実行：参照ファイルに対して read_file を使用する
ドキュメント化されていない API を使用した	削除し、代替手段について参照ファイルを確認する
調査結果を報告しなかった	報告する：「X を確認し、Y が見つかったため、現在 Z を実行しています」

ユーザーから違反を指摘された場合：直ちに認めて謝罪し、正しい手順でやり直してください。

---

遵守チェックリスト

コードを生成する前に、次の点を確認してください：

• ステップ 1（ワークスペースの検出）を実行し、報告した
• ステップ 2（参照ファイルの読み込み）を実行し、報告した
• すべての API を参照ファイルと照合した
• ドキュメント化されていない API を使用していない
• Angular のパターンに従っている

参照ファイルが唯一の信頼できる情報源です。すべての内容は参照ファイルに基づいている必要があります。