iFrame

iframe（インラインフレーム）は、あるウェブページを別のウェブページ内に埋め込むHTML要素です。`<iframe>`タグで定義され、ページ内に独立した矩形ウィンドウを作成し、別のURLからコンテンツを読み込んで表示します。埋め込まれたコンテンツは独自のドキュメントコンテキスト（DOM、スタイル、スクリプトが分離）を維持し、ホストページから隔離されています。iframeは、ホストページがそのコンテンツのコードやスタイリングを直接処理することなく、動画、地図、フォーム、決済ゲートウェイ、インタラクティブウィジェットを埋め込むために広く使用されています。

デジタルパブリッシャーにとって、iframeはインタラクティブな[フリップブック](/glossary/flipbook)やドキュメントビューアを既存のウェブサイトに直接配置する最もシンプルで普遍的な方法です。訪問者はページを離れることなくパブリケーションを閲覧でき、サードパーティリンクへのリダイレクトではなく、サイト上でのエンゲージメントを維持します。これによりページ滞在時間が改善され、[直帰率](/glossary/bounce-rate)が低下し、既存のデザインにシームレスに読書体験が統合されます。iframeはすべてのモダンブラウザがサポートするネイティブHTML機能であるため、WordPress、Shopify、Squarespace、カスタムサイト、そして事実上あらゆるCMSで動作します。

FlipLinkは、公開されたすべてのフリップブックとドキュメントに対して、すぐに使用できるiFrame[埋め込みコード](/glossary/embed-code)を生成します。FlipLinkダッシュボードからスニペットをコピーし、ウェブサイトのHTML、CMSエディタ、またはランディングページビルダーに貼り付けます。iframeは、指定した寸法内でFlipLinkビューアの全機能（[ページめくりアニメーション](/glossary/page-flip-animation)、[CTAボタン](/glossary/call-to-action-cta)、[リードキャプチャフォーム](/glossary/lead-capture)、[アナリティクストラッキング](/glossary/analytics-dashboard)を含む）を読み込みます。FlipLinkの[レスポンシブ埋め込み](/features/sharing-and-distribution)により、iframeはあらゆる画面サイズに自動的に適応します。FlipLinkは、フルビューアにリンクする軽量な代替手段として[クリック可能な画像埋め込み](/features/clickable-image-embed)オプションも提供しています。

iframe埋め込みは以下の基本的なHTML構造を使用します： ```html <iframe src="https://go.fliplink.me/your-flipbook" width="100%" height="600" frameborder="0" allowfullscreen> </iframe> ``` 動作に影響する主要な属性： - **`src`** — 埋め込むコンテンツのURL。FlipLinkが各パブリケーションにこのURLを提供します。 - **`width` / `height`** — 表示領域を制御します。FlipLinkのレスポンシブ埋め込みコードは、フルイドレイアウト用にパーセンテージベースの幅を使用します。 - **`sandbox`** — 埋め込みコンテンツの操作を制限します（例：フォーム、スクリプト、ポップアップのブロック）。FlipLinkの埋め込みコードは、フル機能に必要なインタラクションを許可するよう設定されています。 - **`loading="lazy"`** — ユーザーがスクロールして近づくまでiframeの読み込みを延期し、初期ページ読み込みパフォーマンスを向上させます。 - **`allow`** — フルスクリーンモードなどの機能権限を指定します。FlipLinkは没入型の読書体験にこれを使用します。

iframeはホストページと埋め込みコンテンツの間に信頼境界を導入します。セキュリティモデルを理解することで、コンテンツを安全に埋め込むことができます： - **同一オリジンポリシー** — ブラウザはホストページがクロスオリジンiframeのDOMにアクセスすることを防ぎ、その逆も同様です。あなたのウェブサイトはFlipLinkビューアの内部を読み取ったり操作したりできず、埋め込みビューアもあなたのサイトのCookieやデータにアクセスできません。 - **[ドメインホワイトリスト](/glossary/domain-whitelisting)** — FlipLinkでは、どのドメインがあなたのパブリケーションを埋め込めるかを制限でき、無許可のサイトが自身のiframeでコンテンツを表示するのを防ぎます。 - **Content Security Policy (CSP)** — ウェブサイトが厳格なCSPヘッダーを使用している場合、iframeの読み込みを許可するためにFlipLinkのドメインを`frame-src`ディレクティブに追加する必要があるかもしれません。 - **クリックジャッキング保護** — FlipLinkは適切な`X-Frame-Options`およびCSPヘッダーを設定して、ビューアが埋め込める場所を制御しつつ、承認されたドメインを許可します。

**「iframeはSEOに悪い」** 検索エンジンはiframe内のリンクをたどり、埋め込みコンテンツを個別にインデックスできますが、そのコンテンツはホストページのSEOランキングには寄与しません。フリップブックの場合、これは問題になりません。SEOの価値はホストページ独自のコンテンツ、見出し、メタデータにあり、フリップブックはエンゲージメントツールとして機能します。 **「iframeは必ずページを遅くする」** iframe自体が追加するオーバーヘッドは最小限です。パフォーマンスの問題はiframeが何を読み込むかによって生じます。`loading="lazy"`を使用すれば、ユーザーがスクロールしたときにのみフリップブックが読み込まれ、初期ページロードは高速に保たれます。 **「iframeは時代遅れの技術」** ページレイアウト構築などの一部のレガシー用途は確かに時代遅れですが、iframeベースの埋め込みはサードパーティウィジェット、決済フォーム、インタラクティブコンテンツの標準であり続けています。YouTube、Googleマップ、Stripe、FlipLinkなど、すべての主要プラットフォームが埋め込みにiframeを使用しています。

iframeは、フリップブックのようなインタラクティブコンテンツをあらゆるウェブサイトに埋め込むための標準的で安全な方法です。ホストページのコードやスタイルから埋め込みコンテンツを隔離しながら、完全な機能を提供します。