PDFビューア設定(Viewer Configuration)
アプリで4種類のビューアから選択して、お客様にPDFをどのように表示するか設定できます。
設定場所
ビューア種類は、PDF詳細ページ の Viewer Configuration セクションで設定します。
この設定は、そのPDFのリンクブロックに適用されます(ボタンのポップアップ と 埋め込みビューア の両方)。
Manual URL blocks は、テーマのブロック設定側でビューアを設定します。Manual URL blocks →
4種類のビューア
Custom Viewer (Full Featured)
最も高機能で、PDF閲覧体験を細かくコントロールできます。
Features:
- すべてのナビゲーション操作
- 検索機能
- ズームと表示オプションのカスタマイズ
- モバイル最適化
Configuration options:
PDF Viewer Settings:
- Initial Page - 最初に表示するページ(1, 2, 3...)
- Initial Zoom - 初期ズーム(Auto Fit / Fit Width / Fit Page / 50% / 75% / 100% / 125% / 150% / 200%)
- Page Layout - ページレイアウト(Single Page / Two Pages Odd / Two Pages Even)
- Scroll Direction - スクロール方向(Vertical / Horizontal / Wrapped / Page Scrolling)
Toolbar & Features:
- Enable Download - お客様にPDFのダウンロードを許可
- Show Toolbar - ナビゲーションツールバーを表示
- Enable Add Image/Stamp Tool - 画像/スタンプ追加ツールを許可
- Enable Highlighter Tool - テキストのハイライト機能
- Enable Drawing Tools - PDFへのフリーハンド描画
- Enable Text Selection - テキスト選択/コピーを許可
Best for:
- ズーム/検索が必要な技術資料
- ナビゲーションが必要な取扱説明書
- ハイライトや注釈が必要な資料
- デスクトップ/モバイル両方
Light Viewer (Fast & Simple)
速度とシンプルさを重視した軽量ビューアです。
Features:
- シンプルで高速に読み込み
- 最小限のUI
- さっと確認したい資料に最適
- モバイル最適化
Configuration options:
- なし(そのまま動作します)
Best for:
- 参照用の短い資料
- 高度な機能が不要なシンプルPDF
- 表示速度を重視するモバイル中心のストア
- 保証書、証明書、簡易フォームなど
Native Browser Viewer (Standard)
ブラウザ内蔵のPDFビューアを使い、標準的で馴染みのある体験を提供します。
Features:
- ブラウザ標準のPDF表示機能を利用
- 安定しており、広く対応
- 追加設定は不要
- 注意: ブラウザ(Chrome / Safari / Firefox など)によ り見え方が異なる場合があります
Configuration options:
- なし(ブラウザ既定値を使用します)
Best for:
- 標準的なブラウザPDF表示に慣れているお客様
- カスタム機能が不要なシンプル資料
- ブラウザ互換性を最大化したい場合
- カスタマイズ不要のシンプル表示
重要: ブラウザ内蔵ビューアを使うため、端末やブラウザによって体験が揃わない場合があります。
Flipbook Viewer (Interactive Pages)
本を読むような「ページめくり」体験を提供します。
Features:
- ページめくりアニメーション
- 本/雑誌のような表示
- ビジュアル重視のカタログに最適
- モバイル最適化されていません
Configuration options:
- Animation Style - Smooth Animation / Fast Animation / No Animation
- Page Shadows - 影や奥行き表現を追加
- Background Color - Light Gray / White / Off White / Medium Gray / Dark Gray
Best for:
- カタログ/パンフレット
- マーケティング資料/ルックブック
- 雑誌風のコンテンツ
- デスクトップ中心の閲覧
Not recommended for:
- モバイル中心のストア
- 技術資料
- 長文テキスト中心のPDF
リンクブロックと手動ブロックの設定差
| フロー | ビューアの設定場所 | 適用範囲 |
|---|---|---|
リンクブロック (pdf_embedded, pdf_button) | アプリのPDF詳細ページ | PDFごと |
手動ブロック (pdf_embedded_manual, pdf_button_manual) | テーマのブロック設定 | ブロックごと |
手動ブロックでも、同じ4種類のビューアを使えます:
- Native Browser
- Custom Viewer
- Flipbook
- Light Viewer
手動ブロックでは、1つのビューア設定が、そのブロック内のURLすべてに適用されます。
ビューア設定の手順
- アプリでPDFライブラリを開きます
- 設定したいPDFをクリックします
- Viewer Configuration セクションを見つけます
- セクションを展開します
- ドロップダウンから Viewer Type を選びます
- そのビューアで利用できる設定を調整します
- Save Configuration をクリックします
ビューア設定はすべてに適用される
選んだビューア設定は、次に適用されます:
- ✅ ボタン拡張のポップアップ(お客様がボタンをクリックしたとき)
- ✅ 埋め込みビューア(ページ内にPDFを表示)
- ✅ このPDFが表示されるすべてのテンプレート
- ✅ このPDFがリンクされているすべてのリソース
1回設定すれば、そのPDFが表示されるすべての場所に反映されます。
手動ブロックの場合は、ブロック自体の設定でビューアを選び、そのブロックに入力したURLすべてに適用されます。
拡張の設定とビューア設定の違い
この2つを混同しないでください:
| Viewer Configuration(アプリ) | Extension Settings(テーマエディタ) |
|---|---|
| Custom / Light / Native Browser / Flipbook | ボタンの色、文言、配置 |
| ズーム 、ツールバー、ダウンロード設定 | ビューアの高さ、見出しテキスト |
| ページレイアウト、スクロール方向 | 枠線、モーダルサイズ |
| PDFごとに1回設定 | テーマ内の拡張ごとに設定 |
| PDFの機能を制御 | 見た目/レイアウトを制御 |
手動ブロックは、URLリスト + ビューア種類 + ビューア設定 をテーマ側でまとめて行います。
Example:
- 例: Custom Viewer を選び、ダウンロード有効 + 初期ズーム100% → これは Viewer Configuration
- 例: ボタン色を青、モーダルサイズを80% → これは Extension Settings
ビューア設定はいつでも変更可能
ビューア種類はいつでも変更できます:
- PDF詳細ページを開きます
- Viewer Configuration を展開します
- 別のビューア種類を選びます
- 設定を調整します
- Save Configuration をクリックします
変更は、そのPDFを表示しているすべての Theme App Extension に即時反映されます。
ビューア設定のヒント
Start with Custom Viewer:
- 最も汎用的です
- ほとんどの用途で使えます
- カスタマイズ性が高いです
Switch to Light Viewer if:
- PDFの読み込みが遅い
- とにかくシンプルにしたい
- モバイル速度が最重要 Use Native Browser Viewer when:
- 標準的なブラウザPDF表示を好む
- 互換性を最優先したい
- カスタム機能が不要 Use Flipbook Viewer when:
- デスクトップ閲覧が中心
- 見た目の演出を重視したい
- カタログのようなコンテンツがある
Test your choice:
- デスクトップとモバイルの両方でプレビューする
- お客様のフィードバックを集める
- PDFの利用状況を確認する