メインコンテンツまでスキップ

PDFビューア設定(Viewer Configuration)

アプリで4種類のビューアから選択して、お客様にPDFをどのように表示するか設定できます。

設定場所

ビューア種類は、PDF詳細ページViewer Configuration セクションで設定します。

この設定は、そのPDFのリンクブロックに適用されます(ボタンのポップアップ埋め込みビューア の両方)。

Manual URL blocks は、テーマのブロック設定側でビューアを設定します。Manual URL blocks →

4種類のビューア

最も高機能で、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すべてに適用されます。

ビューア設定の手順

  1. アプリでPDFライブラリを開きます
  2. 設定したいPDFをクリックします
  3. Viewer Configuration セクションを見つけます
  4. セクションを展開します
  5. ドロップダウンから Viewer Type を選びます
  6. そのビューアで利用できる設定を調整します
  7. 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

ビューア設定はいつでも変更可能

ビューア種類はいつでも変更できます:

  1. PDF詳細ページを開きます
  2. Viewer Configuration を展開します
  3. 別のビューア種類を選びます
  4. 設定を調整します
  5. 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の利用状況を確認する

次のステップ