埋め込み Looker iframe メッセージ

1. 始める前に

Looker コンテンツは、プライベート埋め込みまたは SSO 埋め込みを使用して 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

[埋め込みドメインの許可リスト] フィールドに、埋め込みのドメインを入力します。入力したら、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 コンテンツに対して、イベントをリッスンし、アクションを送信できるようになりました。詳しくは、以下のリソースをご覧ください。