高度な埋め込みオプション

高度な埋め込みオプション

基本的なscriptタグやdivアプローチに加えて、ZenFlip埋め込みウィジェットは動的な埋め込みシナリオ向けのプログラマティックJavaScript APIを提供しています。このガイドでは、API、シングルページアプリケーション（SPA）統合、イベントハンドリング、高度な設定について説明します。

プログラマティックAPI

埋め込みスクリプトは、埋め込みの作成と管理のためのメソッドを持つグローバルZenFlipオブジェクトを公開します。

ZenFlip.embed(target, options)

プログラムから埋め込みインスタンスを作成します。

パラメータ：

戻り値： iframe、wrapper、destroy()プロパティを持つ埋め込みインスタンスオブジェクト。ターゲットが見つからない場合はnullを返します。

`javascript // CSSセレクタを使用 const instance = ZenFlip.embed("#flipbook-container", { pub: "product-catalog-2026", width: "100%", height: 700, autoFlip: false, startPage: 1 });

// DOM要素を使用 const el = document.getElementById("my-embed"); const instance = ZenFlip.embed(el, { pub: "annual-report-2025", height: 600 }); `

ZenFlip.scan()

初回ページロード後にDOMに追加された新しい.zenflip-embedコンテナをページから再スキャンします。コンテンツが動的にレンダリングされるシングルページアプリケーションでは必須です。

`javascript // DOMに動的に埋め込みコンテナを追加した後 document.getElementById("content").innerHTML = <div class="zenflip-embed" data-pub="new-publication" data-height="500"></div> ;

// ZenFlipに新しいコンテナを検出・初期化するよう指示 ZenFlip.scan(); `

埋め込みの破棄

インスタンスのdestroy()を呼び出して、DOMから埋め込みを削除しリソースをクリーンアップします：

`javascript const instance = ZenFlip.embed("#container", { pub: "my-pub" });

// 後で埋め込みを削除 instance.destroy(); `

SPA統合

React

埋め込みのライフサイクルを管理する再利用可能なReactコンポーネントを作成します：

`jsx import { useEffect, useRef } from "react";

function ZenFlipEmbed({ slug, width = "100%", height = 600, autoFlip = false, startPage = 1 }) { const containerRef = useRef(null); const instanceRef = useRef(null);

useEffect(() => { // 埋め込みスクリプトがロードされていることを確認 if (!window.ZenFlip) { const script = document.createElement("script"); script.src = "https://app.zenflip.io/embed.js"; script.onload = () => createEmbed(); document.head.appendChild(script); } else { createEmbed(); }

function createEmbed() { if (containerRef.current && window.ZenFlip) { instanceRef.current = window.ZenFlip.embed(containerRef.current, { pub: slug, width, height, autoFlip, startPage }); } }

return () => { if (instanceRef.current) { instanceRef.current.destroy(); instanceRef.current = null; } }; }, [slug, width, height, autoFlip, startPage]);

return <div ref={containerRef} />; }

// 使用方法 <ZenFlipEmbed slug="product-catalog-2026" height={700} /> `

Vue 3

`vue <template> <div ref="embedContainer"></div> </template>

<script setup> import { ref, onMounted, onBeforeUnmount, watch } from "vue";

const props = defineProps({ slug: { type: String, required: true }, width: { type: String, default: "100%" }, height: { type: Number, default: 600 }, autoFlip: { type: Boolean, default: false }, startPage: { type: Number, default: 1 } });

const embedContainer = ref(null); let instance = null;

function loadScript() { return new Promise((resolve) => { if (window.ZenFlip) return resolve(); const script = document.createElement("script"); script.src = "https://app.zenflip.io/embed.js"; script.onload = resolve; document.head.appendChild(script); }); }

async function createEmbed() { await loadScript(); if (instance) instance.destroy(); if (embedContainer.value) { instance = window.ZenFlip.embed(embedContainer.value, { pub: props.slug, width: props.width, height: props.height, autoFlip: props.autoFlip, startPage: props.startPage }); } }

onMounted(createEmbed); watch(() => props.slug, createEmbed); onBeforeUnmount(() => { if (instance) instance.destroy(); }); </script> `

Angular

`typescript import { Component, ElementRef, Input, OnInit, OnDestroy, ViewChild } from "@angular/core";

@Component({ selector: "app-zenflip-embed", template: <div #embedContainer></div> }) export class ZenFlipEmbedComponent implements OnInit, OnDestroy { @Input() slug!: string; @Input() width = "100%"; @Input() height = 600; @Input() autoFlip = false; @Input() startPage = 1;

@ViewChild("embedContainer", { static: true }) container!: ElementRef; private instance: any = null;

ngOnInit(): void { this.loadScript().then(() => { this.instance = (window as any).ZenFlip.embed( this.container.nativeElement, { pub: this.slug, width: this.width, height: this.height, autoFlip: this.autoFlip, startPage: this.startPage } ); }); }

ngOnDestroy(): void { if (this.instance) this.instance.destroy(); }

private loadScript(): Promise<void> { return new Promise((resolve) => { if ((window as any).ZenFlip) return resolve(); const script = document.createElement("script"); script.src = "https://app.zenflip.io/embed.js"; script.onload = () => resolve(); document.head.appendChild(script); }); } } `

イベントハンドリング

埋め込みウィジェットはpostMessage APIを通じて親ページと通信します。ZenFlip iframeからのメッセージをリッスンして、閲覧者のイベントに応答します：

`javascript window.addEventListener("message", (event) => { // オリジンを検証 if (!event.origin.includes("zenflip.io")) return;

const { type, data } = event.data;

switch (type) { case "zenflip:page_change": console.log("Page changed to:", data.pageNumber); break; case "zenflip:ready": console.log("Flipbook loaded, total pages:", data.pageCount); break; case "zenflip:lead_captured": console.log("Lead submitted:", data.email); break; } }); `

利用可能なイベント

カスタムスタイル

埋め込みウィジェットはzenflip-wrapperクラスのコンテナでiframeをラップしています。このクラスをターゲットにして外観をカスタマイズできます：

`css / 角丸をより強調 / .zenflip-wrapper { border-radius: 16px !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); }

/ 枠線を追加 / .zenflip-wrapper iframe { border: 2px solid #e5e7eb !important; border-radius: 16px !important; }

/ デフォルトの背景を削除 / .zenflip-wrapper { background: transparent !important; } `

iframe自体はすべてのビューアースタイルを内部で処理します。クロスオリジンの制限により、iframeにCSSを注入することはできませんが、ビューアーはダッシュボードまたはパブリケーションAPIで設定されたブランディング設定（ロゴ、カラー、フォント）を反映します。

自動ページめくりの設定

autoFlipが有効な場合（data-auto-flip="true"またはプログラマティックAPIのautoFlip: true）、ビューアーはタイマーによる間隔で自動的にページを進めます。デジタルサイネージ、ロビーディスプレイ、無人プレゼンテーションに便利です。

`html <script src="https://app.zenflip.io/embed.js" data-pub="lobby-display" data-auto-flip="true" data-width="100%" data-height="100vh"> </script> `

自動ページめくりの間隔と動作（ループまたは最終ページで停止）は、ダッシュボードのパブリケーションビューアー設定またはPATCH /publications/:id/settingsエンドポイントで設定できます。

カスタムベースURL

ZenFlipビューアーをカスタムドメインまたはセルフホスト環境で運用している場合、ベースURLを上書きします：

`html <script src="https://app.zenflip.io/embed.js" data-pub="my-publication" data-base-url="https://flipbooks.yourcompany.com"> </script> `

プログラムから設定する場合：

`javascript ZenFlip.embed("#container", { pub: "my-publication", baseUrl: "https://flipbooks.yourcompany.com" }); `

ビューアーURLは{baseUrl}/view/{slug}として構築されるため、カスタムドメインがそのパスでZenFlipビューアーを配信していることを確認してください。

バージョン情報

現在の埋め込みウィジェットのバージョンを確認します：

`javascript console.log(ZenFlip.version); // "0.1.0" `

二重初期化の防止

埋め込みスクリプトには二重初期化に対する保護が組み込まれています。同じページにスクリプトが複数回含まれている場合（CMSの環境でよくある）、最初のインスタンスのみが実行されます。後続のスクリプトロードは自動的に無視されます。