syncfusion-vue-pdf-viewer

Syncfusion Vue Pdfviewer – UI サンプルジェネレーター

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

ユーザーのプロジェクト向けコードを生成する（デフォルト）

トリガーキーワード：「方法」「PDF ビューアーを追加」「コードサンプル」「見せて」「例」「スニペット」「統合」「コンポーネント」「サンプルを作成」「Vue サンプル」。

**目的：**ユーザーが Vue 2 または Vue 3 のプロジェクトに直接統合できる、最小限でコピー＆ペースト可能な Vue SFC（.vue）コードを生成します。

ワークフロー： ⚠️ 重大 — 機能サポートポリシー（厳格モード）：

**基本ルール：**参照ファイルに明示的に記載されている API とプロパティのみを使用してコードを生成します。逸脱はすべて違反です。

• コードを生成する前に必ず確認すること：

  1. 参照ファイルで、正確な API／プロパティ名を検索します
  2. メソッドリファレンス、プロパティ、イベントの各テーブルに記載されていることを確認します
  3. どの参照ファイルにも見つからない場合は、直ちに中止します
  4. いかなる場合も、文書化されていない API を生成したり提案したりしないでください

• 厳格な適用 — 例外なし：

  • カスタムプロパティは禁止 — 参照ファイルのテーブルにあるプロパティのみを使用します
  • メソッドの捏造は禁止 — 参照ファイルのテーブルにあるメソッドのみを使用します
  • 未定義の API を使った回避策は禁止 — 許可されません
  • 文書化されていない動作についての推測は禁止 — 許可されません
  • 当て推量による代替実装は禁止 — 許可されません
  • サポートされていると装うことは禁止 — 許可されません

• サポートされていない機能に対する必須の応答：

  • 要求されたシナリオ／機能／API が参照ファイルに記載されていない場合、必ず次のように応答します：

    "This feature is not supported in the current Syncfusion Vue PDF Viewer implementation."
    

  • 続けて、該当する参照ファイルに記載されたサポート対象を列挙します
  • 参照ファイルに明示的に記載されていない限り、代替案を提案しないでください

• 参照ファイルの優先順位：

  • 各参照ファイルには、それぞれの分野に関する完全かつ権威あるドキュメントが含まれています
  • テーブル（メソッドリファレンス、プロパティ、イベント）が信頼できる情報源です
  • 参照ファイル内のこれらのテーブル以外の内容は、説明のみを目的としています
  • 参照ファイルのテーブルに記載されている内容を超えて拡張しないでください

• 生成内容の監査：

  • コードを提示する前に、使用するすべての API が参照ファイルのテーブルに記載されていることを確認します
  • 各 API の出典となる参照ファイルを明記します
  • 参照ファイルのテーブル項目を引用できない場合は、そのコードを削除します

• **これは重大な要件です。**違反すると、スキルの完全性と信頼性が損なわれます。

ステップ 1 — アプリケーションの種類を判定する（必須 — 省略禁止）

• file_search および read_file ツールを使って、ワークスペースのプロジェクトファイルを調べます：
  • package.json（プロジェクト設定と依存関係）
  • vite.config.js または vite.config.ts（Vue 3 の Vite ビルド設定）
  • vue.config.js（Vue 2 の Vue-CLI 設定）
  • App.vue（ルートコンポーネント）
  • main.js または main.ts（アプリケーションのエントリーポイント — Vue 2 の Vue.use(...) と Vue 3 の createApp(...) を確認）
  • src/ フォルダー内にある既存の .vue ファイル
• **出力：**コンポーネントの登録方法と API のパターンが異なるため、先へ進む前に検出したアプリケーションの種類が Vue 2 か Vue 3 かを確認します。

ステップ 2 — 参照ファイルのみからコードを生成する (必須)

• 生成する前に: ステップ 1 が完了していることを確認します
• 要求された機能に関連する references/*.md ファイルを読みます
• すべての API、プロパティ、メソッドをこれらの表と照合します
• コンポーネントベースのアプローチ（必須 — Vue パターンのみ）：
  • <template>、<script>、<style> セクションを含む Vue SFC（.vue）構文を使用します
  • コンポーネントタグとして <ejs-pdfviewer> を使用します
  • すべての PDF Viewer プロパティを Vue の :prop="value" バインディング構文でバインドします
  • Vue 2： components: { "ejs-pdfviewer": PdfViewerComponent } でコンポーネントを登録し、provide: { PdfViewer: [...] } でサービスを注入します
  • Vue 3 Composition API： PdfViewerComponent as EjsPdfviewer をインポートし、vue の provide('PdfViewer', [...]) を使用します
  • Vue 3 Options API： Vue 2 と同様に components と provide オプションを使用しますが、createApp エントリを使用します
  • プログラムからビューアーにアクセスするには、ref / $refs（Vue 2）、または ref() とテンプレートの ref 属性（Vue 3）を使用します
• 必須： コードを生成する前に、参照ファイルが存在し、アクセスできることを確認します
• 要求された機能に適切な参照ファイルを読みます：
  • 関連する references/*.md ファイルに read_file ツールを使用します
  • ファイルに Methods/Properties/Events の表が含まれていることを確認します
  • 表が完全で、読み取り可能であることを確認します
• 参照ファイルが見つからない、または読み取れない場合：
  • コード生成を停止します
  • 「この機能の参照ファイルは利用できません。references/ ディレクトリにすべての参照ファイルがあることを確認してください。」と応答します
  • 不足している参照ファイル名を列挙します
• これはブロッカーとなるステップです： 参照ファイルの検証なしでは先に進めません
• API／プロパティが参照ファイルの表に記載されていない場合は、使用しないでください
• 参照ファイルに明記されていない API、メソッド、プロパティ、クラス、名前空間を作り出したり、推測したり、提案したりしないでください

---

参照ファイルの振り分け

すべてのテンプレートと操作スニペットは references/*.md にあります。各ファイルには、エージェントがサンプルの生成時に組み合わせる、特定の用途に絞ったスニペットまたはテンプレートが含まれています。

フロー： 常に getting-started.md から始め、該当する機能をそのアンカー（PROPS、EVENTS、UI_BUTTONS、HANDLERS）に統合します。キーワードが一致しない場合は、基本的なサンプルのみを返します。

コード生成前のチェックリスト

• Vue のバージョンを確認しましたか？ Vue 2 → data() + provide:{} を使用 | Vue 3 → ref()／reactive() + provide() を使用
• 設定プロパティの数を数えましたか？ 1～3 個 → インラインバインディングを使用 | 4 個以上 → データ定数を使用
• 列挙型を使用しますか？ はい → 必要な列挙型をインポート | いいえ → 列挙型のインポートを省略
• ほかの箇所でも再利用しますか？ はい → データ／ref 定数を使用 | いいえ → インラインを優先
• コンポーネントのプロパティは十分にシンプルですか？ はい → インラインのままにする | いいえ → データ／ref に切り出す

🎯 コアのセットアップと構成

ファイル	用途	ユーザーが次の内容を尋ねた場合に使用
getting-started.md	documentPath、height、width を指定した最小構成の PDFViewer。すべてのサンプルの基本テンプレートです。	「基本的なセットアップ」、「最小限の例」、「使い始める方法」、「PDF の読み込み方法」
general-properties.md	ビューアーの主要プロパティ（サーバー URL、ドキュメントパス、ロケール、リソースのベースパス）を構成します。	「構成」、「サーバー設定」、「ロケール」、「ドキュメントパスの設定」
enable-properties.md	特定の機能（ツールバー、注釈、フォーム、ナビゲーション、テキスト選択、ダウンロード、印刷）の有効／無効を切り替えます。	「ツールバーを無効にする」、「機能を非表示にする」、「有効／無効」、「読み取り専用モード」、「機能を制限する」

📐 ナビゲーションとページ管理

ファイル	用途	ユーザーが次の内容について質問した場合に参照
page-navigation.md	ページ間を移動します（最初、最後、次、前のページ）。特定のページ番号に移動します。	「ページナビゲーション」、「ページに移動」、「次のページ」、「前のページ」、「ページにジャンプ」
bookmark-navigation.md	ブックマークパネルの PDF ブックマーク／目次を使って移動します。重要：すべてのブックマークメソッドには、ビューアーインスタンスから直接ではなく、this.$refs.pdfViewer.bookmark.*（Vue 2）または pdfViewerRef.value.bookmark.*（Vue 3 Composition API）経由でアクセスする必要があります。	「ブックマーク」、「ブックマーク」、「目次」、「目次ナビゲーション」、「アウトラインパネル」、「ブックマークを取得」、「ブックマークを取得」、「ブックマークを取得」、「プログラムによるブックマーク操作」、「getBookmarks」、「goToBookmark」、「ブックマーク API」、「ブックマーク一覧」、「ブックマークを開く」、「ブックマークを閉じる」
hyperlink-navigation.md	PDF 内のハイパーリンクによるナビゲーションの動作と外部リンクの処理を設定します。	「ハイパーリンク」、「外部リンク」、「URL ナビゲーション」、「クリック可能なリンク」、「URL」、「リンク」
thumbnail-navigation.md	サムネイルパネルでページのサムネイルを表示し、移動します。	「サムネイル」、「ページのプレビュー」、「サムネイルパネル」、「サムネイル」、「ページプレビュー」

🔍 表示と操作

ファイル	用途	ユーザーが次の内容について質問した場合に参照
magnification.md	ズームレベル、ズームモード、拡大率のコントロール（ページに合わせる、幅に合わせる）を設定します。	「ズーム」、「拡大率」、「ページに合わせる」、「ズームレベル」、「ドキュメントの倍率を変更」
interaction-mode.md	選択モード（テキスト選択）とパンモード（タッチスクロール）を切り替えます。	「テキスト選択」、「パン」、「スクロールモード」、「操作モード」、「タッチナビゲーション」
text-selection.md	テキストの選択、コピー、テキスト選択イベントを有効にします。	「テキストを選択」、「テキストをコピー」、「コピーするテキストをハイライト」、「テキスト選択モード」
text-search.md	検索オプションとナビゲーションを備えたテキスト検索機能を実装します。	「テキストを検索」、「PDF 内を検索」、「検索機能」、「検索結果をハイライト」

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

ツールバーの設定

ファイル	用途	ユーザーが次の内容について質問した場合に参照
toolbar-settings.md	ツールバーの表示、ツールチップの動作を設定し、ツールバー項目をカスタマイズ／削除します。	「ツールバーをカスタマイズ」、「ツールバー項目を非表示」、「ツールバーボタンを削除」、「ツールバーの設定」
toolbar-methods.md	実行時にプログラムからツールバーを表示／非表示にし、ツールバー項目を有効／無効にします。	「ツールバーを動的に表示／非表示」、「ツールバーを切り替え」、「プログラムからツールバー項目を有効／無効化」

⚠️ ツールバー項目名の厳密な検証

ツールバー設定を作成する際は、誤ったツールバー項目名を使わないよう、必ず次のルールに従ってください。

1. toolbar-settings.md に記載された正確な項目名を必ず参照してください

   • ツールバー項目名を創作したり、推測したり、決めつけたりしないでください
   • 命名パターンから項目名を導き出さないでください
   • toolbar-settings.md の「Available Primary Toolbar Items」、「Available Annotation Toolbar Items」、「Available Form Designer Items」の各セクションに記載された名前のみを使用してください

2. 項目名を一文字ずつ検証してください

   • 大文字と小文字は区別されます：HighlightTool ≠ HighlightOption
   • 正確な名前のみを使用してください：AnnotationEditTool ≠ AnotatetionEditTool
   • 省略形や短縮形は使用しないでください

3. ツールバー設定コードを作成する前に、次の項目を確認してください

   • 参照ファイル toolbar-settings.md を開く
   • 「Available Primary Toolbar Items」セクションを確認する
   • 「Available Annotation Toolbar Items」セクションを確認する
   • 「Available Form Designer Items」セクションを確認する
   • 項目名をこれらのセクションからのみ正確にコピーする
   • 各項目名を一文字ずつすべて照合する
   • 参照先の各セクションにない項目名は、絶対に使用しない
   • 判断に迷ったら、toolbar-settings.md の「❌ COMMON MISTAKES TO AVOID」表を確認する

4. 防止すべきよくある間違い

   • ❌ AnotatetionEditTool → ✅ AnnotationEditTool（スペルミス）
   • ❌ CalibrationOption → ✅ CalibrateTool（サフィックスの誤り）
   • ❌ ShapeAnnotationOption → ✅ ShapeTool（注釈ツールバー版）
   • ❌ InkAnnotationOption → ✅ InkAnnotationTool（注釈ツールバー版）
   • 避けるべき間違いの完全な一覧は、toolbar-settings.md の「❌ COMMON MISTAKES TO AVOID」表を参照してください

コンテキストメニューのカスタマイズ

ファイル	用途	ユーザーからの問い合わせ内容に応じた案内先
contextmenu.md	コンテキストメニュー項目をカスタマイズし、コンテキストメニューのイベントを処理します。	「右クリックメニュー」、「コンテキストメニュー」、「カスタムコンテキストメニュー」、「コンテキストメニュー項目を無効にする」

📝 注釈

ファイル	用途	ユーザーからの問い合わせ内容に応じた案内先
annotation-settings.md	すべての注釈タイプの外観（色、不透明度、スタイル）と動作を設定します。	「注釈の色」、「注釈のスタイル」、「注釈の外観をカスタマイズ」、「注釈のデフォルト設定」
annotation-events.md	注釈のライフサイクルイベント（追加、削除、移動、サイズ変更、選択、プロパティ変更）を処理します。	「注釈イベント」、「注釈が追加されたとき」、「注釈の変更検出」、「注釈のコールバック」
shape-label-settings.md	図形注釈と計測注釈のラベル（位置、色、フォント、表示状態）をカスタマイズします。	「注釈ラベル」、「図形ラベル」、「計測ラベル」、「ラベルのカスタマイズ」
redaction-annotation.md	機密コンテンツを完全に削除するための墨消し注釈を作成、設定、適用します。	「墨消し」、「コンテンツを墨消しする」、「機密データを削除する」、「テキストを黒塗りする」、「完全な削除」

📄 フォーム

ファイル	用途	ユーザーからの問い合わせ内容に応じた案内先
form-field-settings.md	フォームフィールド（テキスト、チェックボックス、ラジオボタン、ドロップダウン、署名）のデフォルトプロパティを設定します。	「フォームフィールドのデフォルト設定」、「フォームフィールドのスタイル」、「フォームフィールドを設定する」、「フォームフィールドのプロパティ」
form-field-events.md	フォームフィールドの操作イベント（フォーカス、フォーカス解除、値の変更、検証）を処理します。	「フォームフィールドのイベント」、「フィールドが変更されたとき」、「フォーム検証イベント」、「フィールド操作のコールバック」

📋 ドキュメント操作

ファイル	目的	ユーザーから次の質問があった場合に参照
download.md	カスタムファイル名を使用した PDF ダウンロード機能を有効化／設定します。	「PDF をダウンロード」「PDF を保存」「ドキュメントをエクスポート」「ダウンロードボタン」
print.md	PDF 印刷機能を設定し、実行します。	「PDF を印刷」「ドキュメントを印刷」「印刷オプション」「印刷ボタン」
organize-pages.md	PDF ページの並べ替え、回転、挿入、削除、コピー、インポート、抽出を行います。	「ページを並べ替え」「ページを回転」「空白ページを追加」「ページを削除」「ページを再配置」「PDF を結合」

⚙️ 高度な機能

ファイル	目的	ユーザーから次の質問があった場合に参照
api-methods.md	プログラムによる制御：ドキュメントの読み込み、フォームの管理、注釈、テキストの抽出、元に戻す／やり直す、ナビゲーション API。	「プログラムから PDF を読み込む」「API メソッド」「フォームデータをエクスポート」「テキストを抽出」「元に戻す／やり直す」「プログラムによる制御」
events.md	すべての PDFViewer イベント（ドキュメントの読み込み、ダウンロード、注釈、フォーム、検索、ナビゲーション）の完全な一覧です。	「イベント一覧」「すべてのイベント」「利用可能なイベント」「イベントリファレンス」「イベントハンドラー」

クイックスタートの例

<template>
  <ejs-pdfviewer
    ref="pdfViewer"
    :resourceUrl="resourceUrl"
    :documentPath="documentPath"
    style="height: 640px">
  </ejs-pdfviewer>
</template>

<script setup>
import { provide } from 'vue';
import { PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
         BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
         Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-vue-pdfviewer';

const resourceUrl = window.location.origin + "/asset/ej2-pdfviewer-lib";
const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

provide('PdfViewer', [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
                       Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields ]);
</script>

<style>
  /* Refer to the CSS Configuration section for the full import list */
  @import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css';
</style>

⚙️ 設定構成のベストプラクティス

設定（toolbarSettings、annotationSettings、annotationSelectorSettings、arrowSettings、rectangleSettings など）を使用したコードを生成する際は、不要な複雑さを避けるため、次のガイドラインに従ってください。

ルール 1：シンプルな設定 → コンポーネントのバインディング内に直接定義

この方法を使う場合：

• 設定するプロパティが 1～3 個のみの場合
• 複雑な列挙型やカスタム型を使わず、設定がシンプルな場合
• 個別のデータ定数が不要な場合

例（こちらを使用）：

<template>
  <ejs-pdfviewer
    id="container"
    documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    :annotationSelectorSettings="{
      selectionBorderColor: '#0000ff',
      selectionBorderThickness: 2,
      resizerBorderColor: '#ff0000',
    }"
    style="height: 640px"
  />
</template>

メリット：

• ✅ 追加のデータプロパティが不要です
• ✅ シンプルで読みやすくなります
• ✅ コードが煩雑になりにくくなります

---

ルール 2：複雑な設定 → data() / ref() 内（テンプレートの外）に定義

この方法を使う場合：

• 設定するプロパティが 4 個以上、または関連する設定が複数ある場合
• 列挙型や複雑な設定を使用する場合
• 複数のコンポーネントで同じ設定を再利用する場合

例 — Vue 2 Options API（複雑なケースに限り使用）：

<template>
  <ejs-pdfviewer
    id="container"
    :documentPath="documentPath"
    :annotationSelectorSettings="annotationSelectorConfig"
    style="height: 640px"
  />
</template>

<script>
import { PdfViewerComponent, Annotation,
         AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: 'App',
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
      annotationSelectorConfig: {
        selectionBorderColor: '#0000ff',
        selectionBorderThickness: 2,
        resizerBorderColor: '#ff0000',
        resizerFillColor: '#4070ff',
        resizerSize: 8,
        resizerShape: 'Square',
        selectorLineDashArray: [5, 6],
        resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
        resizerCursorType: CursorType.grab,
      },
    };
  },
  provide: { PdfViewer: [Annotation] },
};
</script>

例 — Vue 3 Composition API（複雑なケースに限り使用）：

<script setup>
import { provide } from 'vue';
import { PdfViewerComponent as EjsPdfviewer, Annotation,
         AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-vue-pdfviewer';

const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
const annotationSelectorConfig = {
  selectionBorderColor: '#0000ff',
  selectionBorderThickness: 2,
  resizerBorderColor: '#ff0000',
  resizerFillColor: '#4070ff',
  resizerSize: 8,
  resizerShape: 'Square',
  selectorLineDashArray: [5, 6],
  resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
  resizerCursorType: CursorType.grab,
};

provide('PdfViewer', [Annotation]);
</script>

列挙型をインポートする場合：

• 設定で使用する列挙型をインポートします（例：AnnotationResizerLocation、CursorType）
• インポートは最小限にし、設定で使用するものだけをインポートします

メリット：

• ✅ 列挙型を適切に使用できます
• ✅ 複数のコンポーネントで再利用できます
• ✅ テンプレートコードがすっきりします

---

ルール 3：シンプルなケースを過度に複雑化しない

❌ これは避けてください（過度に複雑）：

<script>
import { PdfViewerComponent } from '@syncfusion/ej2-vue-pdfviewer';
export default {
  components: { 'ejs-pdfviewer': PdfViewerComponent },
  data() {
    return {
      // Unnecessary data property for 1 simple prop
      toolbarSettings: { showTooltip: true },
    };
  },
};
</script>

✅ 代わりにこちらを使用してください（シンプルですっきり）：

<ejs-pdfviewer :toolbarSettings="{ showTooltip: true }" ... />

---