Media Remote
Google Docs、Dropbox、Apple Podcastsなど、OEmbed非対応のリモートコンテンツをMediaとして統合するモジュールです。
media_remote
インストール
composer require 'drupal/media_remote:^1.10'
概要
Media Remoteは、OEmbed仕様を実装していないリモートURLコンテンツをMediaアイテムとして埋め込むためのDrupalモジュールです。コアのMediaモジュールはOEmbed対応プロバイダー(oembed.com/providers.jsonに記載)を処理しますが、多くのコンテンツプロバイダーは独自の埋め込み方式を使用しており、このモジュールはそれらをサポートします。
このモジュールは、DrupalのMediaシステムと連携するために必要な基盤を提供します。これにはMedia sourceプラグイン、URL検証、自動メディア名生成、Media Libraryとの完全な統合が含まれます。サポートされている各プロバイダーには、リモートURLを適切な埋め込みコードに変換する専用のフォーマッターがあります。
主な機能には、有効なURL形式を表示する親切なエラーメッセージを伴う自動URL検証、URLからの自動メディア名生成、ほとんどのプロバイダーでカスタマイズ可能なiframeサイズ、コンテンツ管理を容易にするMedia Libraryとの完全な統合があります。
Features
- OEmbed非対応コンテンツ統合のためのMedia sourceプラグイン(Remote Media URL)
- URLを埋め込みコードに変換する20のプロバイダー専用フィールドフォーマッター
- 正規表現パターンによる自動URL検証と、有効なURL例を表示する親切なエラーメッセージ
- URLパターンからの自動メディア名生成
- AJAX対応URL入力フォームを備えたMedia Libraryとの完全な統合
- ほとんどのプロバイダーでカスタマイズ可能なiframeサイズ(幅/高さ)
- Dropbox App Keyの設定などプロバイダー固有の設定
- テーマカスタマイズを可能にする各プロバイダー用のTwigテンプレート
- Media Remoteメディアタイプ作成後の表示管理ページへの自動リダイレクト
Use Cases
コンテンツへのGoogleドキュメント埋め込み
Remote Media URLソースでメディアタイプを作成し、表示管理で希望のiframeサイズを設定したGoogleフォーマッターを構成し、Media Library経由でGoogleドキュメント/スプレッドシート/スライドのURLを追加します。URLは公開されている必要があります(docs.google.com/document/d/e/で始まる共有URL)。
ポッドキャスト集約サイト
異なるポッドキャストプロバイダー(Apple Podcasts、Buzzsprout、Libsyn、Deezer、Stitcher)用に別々のメディアタイプを作成します。各タイプは適切なフォーマッターを使用します。コンテンツ編集者は埋め込みコードを扱うことなくURL経由で簡単にポッドキャストエピソードを追加できます。
企業ドキュメント共有
BoxまたはDropboxを使用している組織向けに、それぞれのフォーマッターを持つメディアタイプを作成します。Dropboxはデベロッパーコンソールから取得したApp Keyが必要です。これにより、クラウドホストされたドキュメントをDrupalコンテンツに簡単に埋め込めます。
3Dモデルショーケース
Matterportフォーマッターを使用して、不動産や建築サイトでインタラクティブな3Dモデルを埋め込めます。フォーマッターは必要な埋め込みパラメータをURLに自動的に追加します。
政府/ジャーナリズムドキュメント公開
DocumentCloudフォーマッターを使用して、ジャーナリズム組織はDocumentCloudビューアで公式ドキュメントを埋め込めます。ドキュメント注釈やビューア機能を提供します。
教育用ビデオプラットフォーム統合
教育機関はPanopto、Brightcove、またはLoomフォーマッターを使用して、選択したビデオプラットフォームから講義録画や教育ビデオを埋め込めます。
インタラクティブマップとGISデータ
ArcGISまたはGoogleマップフォーマッターを使用して、組織はインタラクティブなマップ、ダッシュボード、地理データの可視化をコンテンツに直接埋め込めます。
Microsoft Forms統合
Microsoft 365を使用している組織は、カスタマイズ可能なサイズでアンケートやデータ収集用のMicrosoft FormsをDrupalページに直接埋め込めます。
Tips
- Remote Media URLソースでメディアタイプを作成すると、フォーマッターを設定するために自動的に表示管理ページにリダイレクトされます。このステップをスキップしないでください
- 編集URLではなく、常にコンテンツプロバイダーからの公開/共有URLを使用してください
- Dropbox統合では、ドロップボックスデベロッパーコンソールからApp Keyを取得し、フォーマッター設定で構成する必要があります
- 各メディアタイプは1つのフォーマッターのみを使用する必要があります。異なるプロバイダー用に別々のメディアタイプを作成してください
- テンプレートはカスタムスタイリングのためにテーマでオーバーライドできます(例:mytheme/templates/media-remote-google.html.twig)
- すべてのテンプレートで完全なMediaエンティティにアクセスするためのmedia変数が利用可能です
- MatterportとMicrosoft Formsフォーマッターでは、幅と高さの設定にCSS単位(px、%)を使用できます
- URL検証エラーは、コンテンツ編集者が期待される形式を理解するのに役立つ有効なURL例を表示します
Technical Details
Hooks 1
hook_form_media_type_add_form_alter
Media Remoteメディアタイプ作成後にユーザーを表示管理ページにリダイレクトするカスタム送信ハンドラを注入するためにメディアタイプ追加フォームを変更します。
Troubleshooting 5
表示管理ページ(/admin/structure/media/manage/[type]/display)に移動し、ソースフィールドにMedia Remoteフォーマッターを選択してください。
エラーメッセージには有効なURL例が含まれています。https://プレフィックスと必要なURLパラメータを含め、URLが期待される形式と正確に一致することを確認してください。
フォーマッター設定に有効なDropbox App Keyを設定する必要があります。App Keyの作成と管理についてはdevelopers.dropbox.com/embedderにアクセスしてください。
編集URLや閲覧URLではなく、公開URL(ファイル > 共有 > ウェブに公開)を使用していることを確認してください。URLはdocs.google.com/document/d/e/で始まる必要があります。
フォーマッター設定を変更した後、Drupalのキャッシュをクリアしてください。一部のフォーマッターはCSS単位(px、%)を使用し、他のフォーマッターはピクセル値のみを受け入れます。
Security Notes 3
- モジュールは任意のCSS単位を受け入れるフォーマッター(Matterport、Microsoft Forms)の幅/高さ値をHtml::escape()を使用してサニタイズします
- URLはテンプレートで使用される前に厳格な正規表現パターンに対して検証されます
- Dropbox統合はApp Key認証を使用した公式Dropbox Embedder APIを使用します