埋め込み Looker iframe メッセージ

1. 始める前に

プライベート埋め込みまたは SSO 埋め込みを使用して、Looker コンテンツを iframe 内に埋め込む必要があります。この Codelab では、JavaScript を介して iframe を操作し、ウェブページをより動的にします。ウェブページは、iframe に埋め込まれた Looker コンテンツとの間でメッセージを送受信します。

前提条件

学習内容

  • JavaScript の操作に対応するように iframe と Looker インスタンスを準備する方法
  • iframe からのイベントをリッスンする方法
  • iframe にアクション メッセージを送信する方法

必要なもの

  • iframe を管理するフロントエンド コードの HTML と JavaScript へのアクセス
  • Looker インスタンスの管理者埋め込み設定へのアクセス権

2. 準備

iframe を操作するには、事前に iframe と Looker インスタンスを準備する必要があります。

id 属性を iframe に追加する

iframe から送信されるメッセージを検証する必要があります。これを行うには、iframe に id 属性を定義します。

<iframe 
    id="looker"
    src="https://instance_name.looker.com/embed/dashboards/1"
>
</iframe>

埋め込みのドメインを iframe の src 属性に追加する

iframe をホストしているウェブページのドメインを特定します。たとえば、ウェブページの URL が https://mywebsite.com/with/embed の場合、ウェブページのドメインは https://mywebsite.com になります。

プライベート埋め込みを使用している場合は、iframe の src に、ドメインを embed_domain クエリ パラメータとして追加します。

<iframe
    id="looker"
    src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://mywebsite.com"
>
</iframe>

SSO 埋め込みを使用している場合は、ドメインを embed_domain クエリ パラメータとして埋め込み URL に追加します。

Looker インスタンスで埋め込みのドメインを許可リストに登録する

最後に、メッセージの送信を許可するために、Looker インスタンスで埋め込みのドメインを許可リストに登録する必要があります。

Looker インスタンスの [管理者] セクションにある [埋め込み] ページに移動します。https://your_instance.looker.com/admin/embed

[Embedded Domain Allowlist] フィールドに、埋め込みのドメインを入力します。入力したら、Tab キーを押して、ドメインがボックスに表示されるようにします。末尾のスラッシュ / は含めないでください。

[更新] ボタンを選択します。

3. iframe からのイベント メッセージをリッスンする

埋め込み Looker コンテンツを含む iframe が、ホストのウェブページにメッセージを送信します。これらのイベント メッセージには、埋め込み Looker コンテンツに関するタイムリーな情報（埋め込みダッシュボードの読み込みが開始されたかどうか、ユーザーが埋め込みコンテンツ内で [ダウンロード] オプションを選択したかどうかなど）が含まれています。これらのイベントを受け取って解析しましょう。

イベント オブジェクトのスキーマについて

イベント オブジェクトのスキーマは次のとおりです。

{
  type: "...",
  eventSpecificProperty1: ...,
  eventSpecificProperty2: ...,
  ...
}

イベントには、イベントの種類を特定できる type プロパティが常に含まれます。その他のイベント固有のプロパティは、イベント リファレンスで定義されています。

イベントを受信して解析する

ウェブページの JavaScript が iframe を初期化または管理する場所に、次のコードを追加します。

window.addEventListener("message", function(message) {
  const iframeElement = document.getElementById("looker");
  if (message.source === iframeElement.contentWindow) {
    if (message.origin === "https://instance_name.looker.com") {
      const event = JSON.parse(message.data);
      switch (event.type):
        case "dashboard:run:start":
          console.log("The embedded dashboard has started loading"); 
    }
  }
});

このコード スニペットは次の処理を行います。

  1. window オブジェクトからの "message" イベントをリッスンします。
  2. メッセージの source プロパティが、Looker コンテンツが埋め込まれた iframe であることを確認します。
  3. メッセージの origin プロパティが Looker インスタンスのドメインであることを確認します。
  4. JSON は、メッセージの data プロパティを解析して、イベント オブジェクトにアクセスして解析します。
  5. イベント オブジェクトの type プロパティを切り替えて、イベントの種類を特定し、それに応じて処理します。

これで、ホスト ウェブページは、埋め込み Looker コンテンツが発行するイベントに動的に反応できるようになりました。

4. iframe にアクション メッセージを送信します。

ホスト ウェブページから iframe の埋め込み Looker コンテンツにメッセージを送信することもできます。これらのアクション メッセージは、埋め込みダッシュボードのフィルタの更新など、埋め込み Looker コンテンツの状態を変更できます。埋め込みダッシュボードにクエリを実行して iframe にメッセージを送信するよう指示するアクション メッセージを作成しましょう。

アクション メッセージを作成する

ウェブページの JavaScript 内にアクション メッセージを作成します。

const action = { type: "dashboard:run" };
const actionJSONFormatted = JSON.stringify(action);

action オブジェクトは、前の event オブジェクトと同じ形式です。常に type プロパティと、アクション リファレンスで定義されているアクション固有のプロパティがあります。アクション メッセージは JSON 形式にする必要があります。

アクション メッセージを送信する

ウェブページの JavaScript 内で、JSON 形式のアクションを iframe に送信します。

const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');
  1. アクションを送信する iframe を特定します。
  2. iframe の contentWindow プロパティで postMessage() メソッドを呼び出して、メッセージを送信します。

これで、ホスト ウェブページで埋め込み Looker コンテンツの状態を動的に変更できるようになりました。

5. 追加情報

おめでとうございます！iframe の埋め込み Looker コンテンツからイベントをリッスンし、アクションを送信できるようになりました。詳細については、以下のリソースをご覧ください。