Iframe
Drupal用のiframeフィールドタイプを提供し、コンテンツ編集者が設定可能なサイズ、スタイル、アクセシビリティオプションを備えたiframeを通じて外部コンテンツを埋め込むことができます。
iframe
インストール
composer require 'drupal/iframe:^3.0'
composer require 'drupal/iframe:8.x-2.24'
概要
Iframeモジュールは、コンテンツタイプに完全なiframeを追加できるカスタムフィールドタイプを作成します。ソースURL、サイズ（幅と高さ）、オプションのタイトル表示、さまざまなスタイルオプションなど、iframe属性を包括的に制御できます。
このモジュールは、CSSクラスによるレスポンシブiframe動作、同一オリジンiframeの動的な高さ調整、URLとタイトルでのToken置換をサポートしています。DrupalのField APIとシームレスに統合され、さまざまなコンテンツ編集ワークフローに対応する複数のウィジェットオプションを提供します。
主な機能には、設定可能なフレームボーダー、スクロールバー制御、透過設定、フルスクリーン許可管理が含まれます。また、Drupal 7からの移行サポートとFeedsモジュールとの統合による一括コンテンツインポートも提供します。
Features
- URL、タイトル、幅、高さ、CSSクラスプロパティを持つカスタムiframeフィールドタイプ
- 柔軟なコンテンツ編集のための3つのウィジェットバリエーション：URLのみ、URLと高さ、URLと幅・高さ
- 4つの表示フォーマッター：iframe上にタイトル（デフォルト）、タイトルなしiframe、タイトル付きリンク、URI付きリンク
- 'iframe-responsive' CSSクラスによるレスポンシブiframeサポートと自動アスペクト比計算
- 'autoresize' CSSクラスを使用した同一オリジンiframeの自動リサイズ機能
- 動的なURLとタイトル値のためのTokenサポート（Tokenモジュールが必要）
- iframeタイトルのヘッダーレベル（h1-h4）を含む設定可能なアクセシビリティオプション
- フレームボーダー、スクロール、透過のスタイルオプション
- allow属性とallowfullscreenブール値によるフルスクリーン許可サポート
- accelerometer、autoplay、camera、encrypted-media、geolocation、gyroscope、microphone、payment、picture-in-pictureを含む包括的なallowポリシー
- Drupal 7からDrupal 8/9/10への移行サポート
- 一括iframeインポートのためのFeedsモジュール統合
- 480pxブレークポイントでの自動幅調整を備えたモバイルレスポンシブCSS
Use Cases
YouTubeまたはVimeo動画の埋め込み
コンテンツタイプにiframeフィールドを追加して、編集者が動画コンテンツを埋め込めるようにします。柔軟なサイズ設定のために「URLと幅・高さ」ウィジェットを使用します。動画に適したデフォルトサイズ（例：16:9比率の場合560x315）を設定します。すべての画面サイズでアスペクト比を維持するレスポンシブ動画埋め込みのためにiframe-responsiveクラスを有効にします。
外部ダッシュボードまたはレポートの統合
外部ダッシュボード、分析レポート、またはサードパーティアプリケーションをDrupalコンテンツ内に埋め込みます。適切なサイズを設定し、埋め込みコンテンツがiframeサイズを超える可能性がある場合はスクロールを有効にします。Tokenサポートを使用して、iframeのURLにユーザーIDや日付範囲などの動的パラメータを渡します。
インタラクティブマップと位置情報コンテンツ
Googleマップ、OpenStreetMap、またはその他のマッピングサービスを埋め込みます。ユーザーがより良いナビゲーションのためにマップを拡大できるようにフルスクリーン許可を有効にします。適切なデフォルトサイズを設定し、レスポンシブレイアウトのためにパーセンテージベースの幅の使用を検討します。
ドキュメントビューア
PDFビューア、Googleドキュメント、またはOffice Onlineドキュメントを埋め込みます。さまざまなドキュメントの長さに対応するためにスクロールを「auto」に設定します。コンテンツに合わせて高さを自動調整するために、同一オリジンのドキュメントビューアには「autoresize」クラスの使用を検討します。
ソーシャルメディアの埋め込み
ソーシャルメディアウィジェット、Twitterタイムライン、またはFacebookフィードを埋め込みます。デバイス間で一貫した表示のためにiframe-responsiveクラスを使用します。ソーシャルウィジェットがサイトのデザインと調和するべき場合は透過を設定します。
内部アプリケーションの統合
同じドメインでホストされている内部Webアプリケーションを埋め込みます。コンテンツに基づいてiframeの高さを動的に調整するために「autoresize」CSSクラスを活用します。これはブラウザのセキュリティ制限により同一オリジンのiframeでのみ機能します。
Tokenを使用した動的コンテンツ
DrupalのTokenを使用して動的なURLを持つiframeを作成します。タイトルとURLの両方のフィールドでTokenを許可するためにtokensupportレベル2を有効にします。[current-user:uid]や[node:nid]などのTokenを使用して、各ユーザーやコンテキストに合わせて埋め込みコンテンツをパーソナライズします。
Tips
- ピクセルサイズには単位なしの数値（例：'500px'ではなく'500'）を使用するか、パーセンテージには%記号を含めてください
- 'iframe-responsive'クラスを追加するとアスペクト比ベースのレスポンシブiframeが作成されます - 幅と高さの値が比率になります（例：16:9の場合は16と9）
- 'autoresize'クラスは自動高さ調整を有効にしますが、ブラウザのセキュリティポリシーにより同一オリジンのiframeでのみ機能します
- アクセシビリティのために、ページ構造に基づいて適切なヘッダーレベル（h1-h4）を設定してください - デフォルトはh3です
- クラスフィールドでは複数のCSSクラスをスペースで区切る必要があります
- Token置換はiframeフィールドのキャッシュを無効にします - 高トラフィックページでは控えめに使用してください
- allow属性には一般的な許可（camera、microphoneなど）が自動的に含まれます - フルスクリーンは明示的に有効にする必要があります
- frameborderを0（デフォルト）に設定すると、現代的なシームレスな統合が可能です。HTMLのframeborder属性よりもCSSボーダーが推奨されます
Technical Details
Hooks 2
hook_help
管理ヘルプページでiframeモジュールのヘルプドキュメントを提供します。
hook_theme
テンプレートレンダリング用の利用可能な変数を持つiframeテーマフックを定義します。
Security Notes 6
- 悪意のあるURLを防ぐために、DrupalのLinkモジュールを使用してURL検証が実行されます
- Tokenサポートは慎重に使用する必要があります - レベル2（URLでのToken）は、Tokenにユーザーデータが含まれている場合、機密情報が漏洩する可能性があります
- モジュールはXSS攻撃を防ぐためにtitle属性からHTMLタグを除去します
- クロスオリジンiframeはブラウザの同一オリジンポリシー制限の対象となります
- allow属性は許可された機能を明示的にリストします - フルスクリーンは別途有効化が必要です
- iframeを介して外部コンテンツを埋め込む場合は、Content Security Policy（CSP）ヘッダーを検討してください