埋め込み Looker iframe メッセージ

1. 始める前に

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

前提条件

学習内容

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

必要なもの

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

2. 準備

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

iframe に id 属性を追加する

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 コンテンツに対して、イベントをリッスンし、アクションを送信できるようになりました。詳細については、以下のリソースをご覧ください。