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

埋め込みビューア

PDFをページ内に直接表示し、ナビゲーション操作(移動/ズームなど)を提供します。

このページでは次の2つを扱います:

  • PDF Embedded Viewer(リンク済みPDF)
  • PDF Embedded Manual(テーマ設定で手動URLを指定)

埋め込みビューアでできること

埋め込みビューアはPDFをページ上に直接表示します。お客様はストアから離れることなく、閲覧・スクロール・ズーム・ページ移動ができます。

PDFビューア設定

リンクブロック(PDF Embedded Viewer)の場合、アプリのPDF詳細ページにある Viewer Configuration でビューア種類を選択します。

手動ブロック(PDF Embedded Manual)の場合、テーマエディタ内のブロック設定でビューア種類を選択します。

選べるビューア種類:

Custom Viewer(多機能)

  • すべてのナビゲーション操作を備えた多機能ビューア
  • 検索、ズーム、表示オプションのカスタマイズ
  • モバイル最適化
  • 設定例: 初期ページ、ズーム倍率、ページレイアウト、スクロール方向
  • 有効/無効: ダウンロード、ツールバー、画像スタンプ、ハイライト、描画ツール、テキスト選択

Light Viewer(高速・シンプル)

  • 最小限のUIで高速に読み込むシンプルなビューア
  • ちょっとしたプレビューに最適
  • モバイル最適化
  • 設定項目はほぼなく、そのまま使えます

Flipbook Viewer(ページめくり)

  • ページめくりのインタラクティブ体験
  • 本や雑誌を読むような見た目
  • カタログ、パンフレット、販促資料に最適
  • モバイル最適化されていません
  • 設定例: アニメーション、ページ影、背景色

Native Browser Viewer(標準)

  • ブラウザ標準のPDF表示を使用します
  • 追加のビューアスクリプトが不要です
  • 最も軽量な選択肢です
  • ブラウザによって挙動が少し異なる場合があります

リンク済みPDFでは、選んだビューアがそのPDFの表示箇所すべてに適用されます。
手動ブロックでは、選んだビューアがそのブロックに入力したすべてのURLに適用されます。

表示イメージ

埋め込みビューアは、選択したビューア構成でPDFをページ内に表示します:

Custom Viewer の表示例:

  • ナビゲーションツールバー付きのPDF表示
  • ページ操作(前/次、ズーム)
  • 検索機能
  • ダウンロード/印刷ボタン(有効化している場合)
  • 設定に応じたカスタマイズ機能

Light Viewer の表示例:

  • シンプルなPDF表示
  • 基本的なナビゲーション
  • 高速読み込みのための最小限UI

Flipbook Viewer の表示例:

  • ページめくりアニメーション
  • 本のような読書体験
  • インタラクティブなページ操作

埋め込み表示がおすすめの場面

おすすめ:

  • サイト上でしっかり読んでもらいたい長文資料
  • ズームが必要な技術仕様書
  • ブラウジングが重要なカタログ
  • ビューアを置くスペースがあるページ
  • デスクトップ中心のコンテンツ

あまり向かない:

  • 短いPDF(ボタン表示の方が適しています)
  • モバイル優先のストア(窮屈になりやすい)
  • スペースが限られるページ
  • 1ページに多くのPDFを置きたい場合

テーマに埋め込みビューアを追加する

  1. Online Store > Themes を開きます
  2. 適用中のテーマで Customize をクリックします
  3. PDFを表示したいページへ移動します
  4. Add section または Add block をクリックします
  5. Apps の中から PDF Connect を探します
  6. PDF Embedded Viewer を選択します
  7. Save をクリックします

手動モードを使う場合は、代わりに PDF Embedded Manual を追加し、ブロック設定に1つ以上のURLを貼り付けてください。

埋め込み拡張(Extension)をカスタマイズする

テーマエディタでは、埋め込みビューアの表示をカスタマイズできます:

Show heading - 見出しの表示/非表示

Heading text - セクションタイトルの文言(例: 「PDFドキュメント」)

Viewer height - ビューアの高さ(ビューポートに対する割合。デスクトップのみ。モバイルは全画面になります)

Show container border - ビューアの外枠(ボーダー)を表示

これらの設定は、拡張のレイアウト/見た目のみを調整します。実際のビューア機能(ズーム、ダウンロード、ツールバー、ナビゲーションなど)は、各PDFの Viewer Configuration(アプリ側)で設定します。

PDF Embedded Manual の場合は、ビューア機能をブロック設定で指定します(リンク済みPDFは不要です)。

複数PDFを埋め込み表示する場合

1つのページに複数PDFをリンクすると、埋め込みビューアは縦に積み重なって表示されます:

  • 1つ目のPDFは1つ目のビューアに表示
  • 2つ目のPDFは2つ目のビューアに表示
  • お客様は下へスクロールして順に閲覧します

ページが非常に長くなることがあります。複数PDFを扱う場合は、ボタン表示の利用も検討してください。

モバイルでの埋め込みビューア

ビューアはモバイル画面に合わせて表示されますが、次の点に注意してください:

  • 縦の表示スペースを大きく使います
  • ズーム操作が小さく感じる場合があります
  • ビューア内のスクロール操作が難しい場合があります
  • モバイル優先のストアではボタン表示を検討してください

ビューア機能

ズーム - 拡大/縮小できます

ページ移動 - 特定のページへ移動できます

検索 - PDF内の文字を検索できます(一部ビューア)

ダウンロード - 端末に保存できます(有効化している場合)

印刷 - ビューアから直接印刷できます(有効化している場合)

パフォーマンスのヒント

PDFサイズを最適化 - 5MB未満のファイルが最も速く読み込まれます

遅延読み込み - ページ上で表示領域に入ったときに読み込みます

サムネイルの品質 - フルPDFより先に1ページ目が読み込まれます

モバイルの注意 - モバイル回線では大きいファイルの読み込みが遅くなる場合があります

次のステップ