埋め込みウィジェット クイックスタート

埋め込みウィジェット クイックスタート

ZenFlip埋め込みウィジェットを使用すると、最小限のコードでインタラクティブなフリップブックパブリケーションを任意のウェブサイトに追加できます。ウィジェットは、パブリケーションを含むZenFlipビューアーを読み込むレスポンシブなiframeを作成します。

方法1：Scriptタグ（最もシンプル）

フリップブックを表示したい場所に1つのscriptタグを追加します。ウィジェットはscript要素の直後にパブリケーションをレンダリングします。

`html <script src="https://app.zenflip.io/embed.js" data-pub="your-publication-slug" data-width="100%" data-height="600"> </script> `

これだけで完了です。埋め込みウィジェットはページロード時に自動的に初期化され、パブリケーションを含むiframeを挿入します。

方法2：Divコンテナ

配置をより細かく制御するには、zenflip-embedクラスを持つdiv要素を使用し、埋め込みスクリプトを別途読み込みます。1つのページに複数のパブリケーションを配置する場合に推奨される方法です。

`html <div class="zenflip-embed" data-pub="your-publication-slug" data-width="100%" data-height="600"> </div>

<!-- スクリプトはページ内の任意の場所で1回だけ読み込む --> <script src="https://app.zenflip.io/embed.js"></script> `

スクリプトはページ内のzenflip-embedクラスを持つすべての要素をスキャンし、それぞれを初期化します。

Data属性

HTML data属性を使用して埋め込みを設定します：

数値の高さはピクセルとして扱われます。80vhや500pxなどのCSS単位も使用できます。

よくある使用例

ブログ記事への埋め込み

記事コンテンツ内に適したコンパクトな埋め込み：

`html <div class="zenflip-embed" data-pub="quarterly-report-q1-2026" data-width="100%" data-height="500"> </div> `

フルページ埋め込み

ビューポート全体をフリップブックで埋めます：

`html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Product Catalog</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; height: 100vh; overflow: hidden; } .zenflip-embed { width: 100%; height: 100vh; } </style> </head> <body> <div class="zenflip-embed" data-pub="product-catalog-2026" data-width="100%" data-height="100vh"> </div> <script src="https://app.zenflip.io/embed.js"></script> </body> </html> `

レスポンシブ埋め込み

コンテナの幅に適応するレスポンシブな埋め込みを作成します：

`html <div style="max-width: 960px; margin: 0 auto;"> <div class="zenflip-embed" data-pub="company-brochure" data-width="100%" data-height="700"> </div> </div> <script src="https://app.zenflip.io/embed.js"></script> `

埋め込みウィジェットはラッパーに常にmax-width: 100%を設定するため、水平方向のオーバーフローなしに任意のコンテナ内に自然に収まります。

自動ページめくりプレゼンテーション

特定のページから開始し、自動ページめくりを有効にします（キオスクディスプレイやプレゼンテーションに便利）：

`html <script src="https://app.zenflip.io/embed.js" data-pub="investor-deck" data-width="100%" data-height="700" data-auto-flip="true" data-start-page="1"> </script> `

1ページに複数のパブリケーション

複数のパブリケーションを埋め込む場合はdivメソッドを使用します：

`html <h2>Product Catalog</h2> <div class="zenflip-embed" data-pub="product-catalog-2026" data-width="100%" data-height="500"> </div>

<h2>Annual Report</h2> <div class="zenflip-embed" data-pub="annual-report-2025" data-width="100%" data-height="500"> </div>

<!-- すべてのコンテナの後にスクリプトを1回だけ読み込む --> <script src="https://app.zenflip.io/embed.js"></script> `

パブリケーションスラッグの確認方法

パブリケーションスラッグは、パブリケーションURLに表示されるURLフレンドリーな識別子です。以下の2つの方法で確認できます：

1. ダッシュボード： パブリケーションを開き、ブラウザのURLを確認します：https://app.zenflip.io/publications/your-slug-here

2. API： GET /publicationsで返されるパブリケーションオブジェクトのslugフィールド

トラブルシューティング

埋め込みが表示されない

• data-pub属性が既存の公開済みパブリケーションスラッグと一致していることを確認してください。

• ブラウザコンソールでエラーを確認してください。スラッグが見つからない場合、「[ZenFlip] Missing data-pub attribute. Skipping embed.」という警告が表示されます。

• パブリケーションのステータスがpublishedであることを確認してください（下書きのパブリケーションはパブリックビューアーからアクセスできません）。

コンソールにCORSエラーが表示される

Cross-Origin Resource Sharing（CORS）エラーが表示される場合、通常はContent Security Policy（CSP）ヘッダーの問題です。CSPのframe-srcディレクティブにZenFlipドメインを追加してください：

` Content-Security-Policy: frame-src 'self' https://app.zenflip.io; `

Content Security Policy（CSP）がスクリプトをブロックしている

サイトが厳格なCSPヘッダーを使用している場合、埋め込みスクリプトを許可する必要があります：

` Content-Security-Policy: script-src 'self' https://app.zenflip.io; frame-src 'self' https://app.zenflip.io; `

埋め込みは表示されるがページが読み込まれない

• パブリケーションがまだ変換中の可能性があります。PDF変換はアップロード後に非同期で実行され、ページ数に応じて数秒から数分かかることがあります。

• パブリケーションがprivateアクセスまたはパスワード保護を使用している場合、パブリックビューアーエンドポイントはページデータを返しません。埋め込みの場合は表示設定をpublicにしてください。

埋め込みの高さがコンテンツと合わない

埋め込みウィジェットはdata-height属性に基づく固定の高さを使用します。ページが切れて表示される場合は、高さの値を増やしてください。より動的なアプローチとして、80vhなどのCSSビューポート単位を使用してブラウザウィンドウに相対的な高さにすることもできます。

次のステップ

• [高度な埋め込みオプション](/docs/embed-advanced) --- プログラマティックAPI、SPA統合、イベントハンドリング、カスタムスタイル。

• [パブリケーションAPI](/docs/publications-api) --- パブリケーションの管理と表示設定のプログラム制御。