表示されているのは Looker のドキュメントです。Looker Studio のドキュメントについては、https://support.google.com/looker-studio をご覧ください。

埋め込み JavaScript イベント

埋め込みを作成したら、一般公開、非公開、署名埋め込みまたはAPIで実行できます。また JavaScript を使用してそれらの iframe を操作できます。埋め込みアイテムのステータスに基づいてページをより動的にしたり、ウェブページから埋め込みアイテムを変更したりすることもできます。

Looker は、ブラウザがウェブアプリケーションにイベントをディスパッチする順序を制御しません。つまり、ブラウザまたはプラットフォーム間でイベントの順序が保持されるわけではありません。さまざまなブラウザでのイベント処理を考慮して、JavaScript を適切に記述するようにしてください。

Looker 埋め込みコンテンツでは、次のいずれかの方法で JavaScript を使用できます。

埋め込み SDK ドキュメントページに記載されている Looker の組み込みソフトウェア開発キット（SDK）の使用
このページの JavaScript でイベントにアクセスするで説明されている JavaScript イベントの使用

準備

埋め込み iframe を操作する前に、次の手順を行います。

iframe に ID を追加します。
埋め込みドメインを iframe の src 属性に追加する。
埋め込みドメインを許可リストに追加する

iframe に ID を追加する

後で iframe からデータを取得するときに、作業している情報が実際に Looker の iframe から送られていることを検証する必要があります。これを容易にするため、iframe に ID を追加してください（まだ追加していない場合）。次の例では、id="looker" を iframe に追加して ID を looker に設定します。

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

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

iframe の src 属性に、iframe が使用されているドメインを追加します。次の例では、src 属性の URL の末尾に ?embed_domain=https://myownpersonaldomain.com" を追加することで、myownpersonaldomain.com をドメインとして指定しています。

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

署名埋め込みを使用する場合は、embed_domain を埋め込み URL に追加してください。

埋め込みSDK を使用している場合は、埋め込み URL の末尾に sdk=2 を追加します。sdk=2 パラメータは、SDK が存在し、SDK によって提供される追加機能（Looker の iframe とドメイン間で JavaScript イベントを渡すなど）を利用できることを示します。このパラメータは署名付き URL の一部であることから、SDK がこのパラメータ自体を追加することはできません。例:

<iframe
  id="looker"
  src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://myownpersonaldomain.com&sdk=2">
</iframe>

埋め込みドメインを許可リストに追加する

最後に、次の手順に沿って、Looker の管理者パネルの [埋め込み] ページで、iframe が使用されているドメインを許可リストに追加する必要があります。

[埋め込みドメイン許可リスト] フィールドに、iframe が使用されているドメインを入力し、Tab キーを押して、そのドメインがフィールド内のボックスに表示されるようにします。

重要: ドメイン URL の末尾にスラッシュ（/）を含めないでください。
[更新] をクリックします。

許可リストで * ワイルドカードを使用して、ドメインパターンを作成できます。たとえば、https://*.myownpersonaldomain.com は https://analytics.myownpersonaldomain.com と https://data.myownpersonaldomain.com の両方を許可します。

Looker 23.8 以降で Cookie を使用しない埋め込みを使用している場合は、Cookie を使用しないセッションを取得するときに埋め込みドメインを指定できます。これは、[管理] > [埋め込み] パネルを使用して埋め込みドメインを許可リストに追加する代わりに使用できます。この機能を利用する場合は、セキュリティのベストプラクティスを確認してください。

iframe からのデータの取得

準備手順を完了したら、postMessage イベントをリッスンすることで、Looker の iframe とドメイン間で渡されるイベントにアクセスできます。

埋め込まれた iframe は、このページのイベントタイプのリファレンスに記載されているように、いくつかのイベントタイプを作成できます。

JavaScript でイベントにアクセスする

ネイティブ JavaScript でこれらのイベントをリッスンし、コンソールにログに記録する例を次に示します。

window.addEventListener("message", function(event) {
  if (event.source === document.getElementById("looker").contentWindow) {
    if (event.origin === "https://instance_name.looker.com") {
      console.log(JSON.parse(event.data));
    }
  }
});

以下は、jQuery でこれらのイベントをリッスンし、コンソールにログに記録する例です。

$(window).on("message", function(event) {
  if (event.originalEvent.source === $("#looker")[0].contentWindow) {
    if (event.origin === "https://instance_name.looker.com") {
      console.log(JSON.parse(event.data));
    }
  }
});

イベントタイプの概要表

次の表にイベントタイプをまとめます。イベントタイプを選択すると、そのイベントの詳細が表示されます。

イベントタイプ	イベントの原因
`dashboard:loaded`	タイルが自動実行に設定されていないダッシュボードでは、ダッシュボードとその要素は読み込まれていますが、クエリはまだ実行されていません。
`dashboard:run:start`	ダッシュボードが読み込みを開始し、タイルがデータの読み込みとクエリを開始しました。
`dashboard:run:complete`	ダッシュボードの実行が終了し、すべてのタイルで読み込みとクエリが完了しました。
`dashboard:download`	ダッシュボードの PDF のダウンロードが開始されました。
`dashboard:edit:start`	22.20 を追加ダッシュボードを編集モードに切り替えました。ダッシュボードが正常に保存されると、`dashboard:save:complete` イベントが発生します。
`dashboard:edit:cancel`	22.20 を追加編集モードのダッシュボードで、保存されることなく編集モードが終了しました。
`dashboard:save:complete`	ダッシュボードが編集され、保存されました。
`dashboard:delete:complete`	ダッシュボードが削除されました。
`dashboard:tile:start`	タイルがデータの読み込みまたはクエリを開始しました。
`dashboard:tile:complete`	タイルでクエリの実行が完了しました。
`dashboard:tile:download`	タイルのデータのダウンロードが開始されました。
`dashboard:tile:explore`	ユーザーが、ダッシュボードタイルの [Explore From Here] オプションをクリックしました。
`dashboard:tile:view`	ユーザーが、ダッシュボードタイルの [View Original Look] オプションをクリックしました。
`dashboard:filters:changed`	ダッシュボードのフィルタが適用または変更されました。
`look:ready`	クエリが実行されているかどうかにかかわらず、Look がクエリデータの読み込みを開始しました。
`look:run:start`	Look がクエリデータの読み込みを開始し、クエリの実行が開始されました。
`look:run:complete`	Look がクエリの実行を完了しました。
`look:save:complete`	Look が編集され、保存されました。
`look:delete:complete`	Look が [ゴミ箱] フォルダに移動されました。
`drillmenu:click`	ユーザーが、`link` LookML パラメータで作成したダッシュボードのドリルメニューをクリックしました。
`drillmodal:download`	ユーザーがダッシュボードタイルからドリルダイアログボックスを開き、[ダウンロード] オプションをクリックました。
`drillmodal:explore`	ユーザーがドリルダイアログボックスで [Explore From Here] オプションをクリックしました。
`explore:ready`	クエリが実行されているかどうかにかかわらず、Explore がクエリデータの読み込みを開始しました。
`explore:run:start`	Explore がクエリデータの読み込みを開始し、クエリの実行が開始されました。
`explore:run:complete`	Explore がクエリの実行を終了しました。
`explore:state:changed`	ユーザーのアクションの結果、Explore ページの URL が変更されました。
`page:changed`	ユーザーが iframe 内の新しいページに移動しました。
`page:properties:changed`	ダッシュボードの iframe の高さが変更されました。
`session:tokens`	Looker クライアントは、続行するためにトークンを必要とします。
`session:status`	セッションのステータスに関する情報を送信します。
`env:client:dialog`	ドリルダイアログボックスなど、部分的に表示されない可能性があるダイアログボックスが開かれました。このイベントにより、ホスティングアプリケーションでダイアログボックスをスクロールして表示できるようになります。

イベントタイプのリファレンス

埋め込まれた iframe は、さまざまな種類のイベントを作成できます。

`dashboard:loaded`

タイルが自動実行に設定されていないダッシュボードでは、ダッシュボードとその要素が読み込まれた後、クエリが実行される前にこのイベントが作成されます。


type: "dashboard:loaded",
status: "complete",
dashboard: {
  id: 1,
  title: "Business Pulse",
  canEdit: true,
  dashboard_filters: {
    "date": "Last 6 Years",
    "state": ""
  },
  absoluteUrl: "https://self-signed.looker.com:9999/embed/dashboards/1?embed_domain=https%3A%2F%2Fself-signed.looker.com%3A9999&date=Last+6+Years&state=",
  url: "/embed/dashboards/1?embed_domain=https%3A%2F%2Fself-signed.looker.com%3A9999&date=Last+6+Years&state=",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}

属性	形式	説明
`status`	文字列	ダッシュボードとその要素が正常に読み込まれたかどうかを示します。
`dashboard.id`	Number/String	ダッシュボードの ID。
`dashboard.title`	文字列	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.dashboard_filters`	オブジェクト	ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`dashboard.absoluteUrl`	文字列	ダッシュボードの完全な URL。
`dashboard.url`	文字列	相対ダッシュボード URL（パスのみ）
`dashboard.options`	オブジェクト	ダッシュボードのレイアウト、ダッシュボードのレイアウトコンポーネント、ダッシュボードの要素のプロパティと値。`options` オブジェクトで返されるすべてのプロパティには、`dashboard:options:set` イベントを使用して更新値を指定できます。

`dashboard:run:start`

このイベントは、ダッシュボードの読み込みが開始され、タイルがデータの読み込みとクエリを開始したときに作成されます。

type: "dashboard:run:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}

属性	形式	説明
`dashboard.id`	Number/String	ダッシュボードの ID。
`dashboard.title`	文字列	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	文字列	相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	文字列	ダッシュボードの完全な URL。
`dashboard.dashboard_filters`	オブジェクト	ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。

`dashboard:run:complete`

このイベントは、ダッシュボードの実行が終了し、すべてのタイルで読み込みとクエリが完了したときに作成されます。このイベントは、すべてのタイルが正常に読み込まれたかどうかにかかわらず作成されます。

type: "dashboard:run:complete",
status: "complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://my.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}

属性	形式	説明
`status`	文字列	ダッシュボードとその要素が正常に実行されたかどうかを示します。ダッシュボードとその要素が正常に実行された場合、`status` は `"complete"` を返します。それ以外の場合は、`status` は `"error"` を返します。実行中のダッシュボードが、ユーザーインターフェースまたは `dashboard:stop` アクションで停止された場合、`status` は `"stopped"` を返します。
`dashboard.id`	Number/String	ダッシュボードの ID。
`dashboard.title`	文字列	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	文字列	相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	文字列	ダッシュボードの完全な URL。
`dashboard.dashboard_filters`	オブジェクト	ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`dashboard.options`	オブジェクト	DashboardLayout、DashboardLayoutComponent、DashboardElement のプロパティと値。`options` オブジェクトで返されるすべてのプロパティには、`dashboard:options:set` アクションを使用して更新値を指定できます。
`dashboard.tileStatuses`	オブジェクト配列	タイルステータスを表すオブジェクトの配列。オブジェクトのプロパティは次のとおりです。 `tileId` - タイルの ID 番号。 `status` - タイルクエリが正常に実行された場合、`status` は `"complete"` を返します。それ以外の場合は、`status` は `"error"` を返します。 `errors` - `status` プロパティが `"error"` の場合に入力されます。エラーの詳細（エラーメッセージのテキスト、エラーの詳しい説明、エラーが発生したタイルの SQL クエリなど）を提供するオブジェクトの配列。

`dashboard:download`

このイベントは、ダッシュボードの PDF のダウンロードが開始されたときに作成されます。

type: "dashboard:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
fileFormat: "pdf"

属性	形式	説明
`dashboard.id`	Number/String	ダッシュボードの ID。
`dashboard.title`	文字列	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	文字列	相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	文字列	ダッシュボードの完全な URL。
`dashboard.dashboard_filters`	オブジェクト	ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`fileFormat`	文字列	ダウンロードしたダッシュボードの形式（現時点では `"pdf"` のみ）。

`dashboard:edit:start`

22.20 を追加このイベントは、ダッシュボードが編集モードに切り替えられたときに作成されます。

type: "dashboard:edit:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}

属性	形式	説明
`dashboard.id`	Number/String	ダッシュボードの ID。
`dashboard.title`	文字列	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	文字列	相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	文字列	ダッシュボードの完全な URL。
`dashboard.dashboard_filters`	オブジェクト	ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。

`dashboard:edit:cancel`

22.20 を追加このイベントは、編集モードのダッシュボードで、保存されることなく編集モードが終了したときに作成されます。

type: "dashboard:edit:cancel",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}

属性	形式	説明
`dashboard.id`	Number/String	ダッシュボードの ID。
`dashboard.title`	文字列	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	文字列	相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	文字列	ダッシュボードの完全な URL。
`dashboard.dashboard_filters`	オブジェクト	ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。

`dashboard:save:complete`

このイベントは、ダッシュボードが編集されて保存されたときに作成されます。

type: "dashboard:save:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  url: "/embed/dashboards/...",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}

属性	形式	説明
`dashboard.id`	Number/String	ダッシュボードの ID。
`dashboard.title`	文字列	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.dashboard_filters`	オブジェクト	ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`dashboard.absoluteUrl`	文字列	ダッシュボードの完全な URL。
`dashboard.url`	文字列	相対ダッシュボード URL（パスのみ）
`dashboard.options`	オブジェクト	ダッシュボードのレイアウト、ダッシュボードのレイアウトコンポーネント、ダッシュボードの要素のプロパティと値。`options` オブジェクトで返されるすべてのプロパティには、`dashboard:options:set` イベントを使用して更新値を指定できます。

`dashboard:delete:complete`

このイベントは、ダッシュボードが削除されたときに作成されます。

type: "dashboard:delete:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  url: "/embed/dashboards/...",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}

属性	形式	説明
`dashboard.id`	Number/String	ダッシュボードの ID。
`dashboard.title`	文字列	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.dashboard_filters`	オブジェクト	ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`dashboard.absoluteUrl`	文字列	ダッシュボードの完全な URL。
`dashboard.url`	文字列	相対ダッシュボード URL（パスのみ）
`dashboard.options`	オブジェクト	ダッシュボードのレイアウト、ダッシュボードのレイアウトコンポーネント、ダッシュボードの要素のプロパティと値。`options` オブジェクトで返されるすべてのプロパティには、`dashboard:options:set` イベントを使用して更新値を指定できます。

`dashboard:tile:start`

このイベントは、タイルがデータの読み込みまたはクエリを開始したときに作成されます。

type: "dashboard:tile:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}

属性	形式	説明
`dashboard.id`	Number/String	タイルが属するダッシュボードの ID。
`dashboard.title`	文字列	タイルが属するダッシュボードの上部に表示されるダッシュボードのタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	文字列	タイルが属する相対ダッシュボード URL（パスのみ）。
`dashboard.absoluteUrl`	文字列	タイルが属するダッシュボードの完全な URL。
`dashboard.dashboard_filters`	オブジェクト	タイルが属するダッシュボードに適用されるフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`tile.id`	整数	タイルではなく、イベントの ID 番号。
`tile.title`	文字列	タイルのタイトル（タイルの上部に表示されます）。
`tile.listen`	オブジェクト	このタイルがリッスンするグローバルダッシュボードのフィルタ。このオブジェクトの形式は、`{"Filter Label": "Filter Field", ...}` です。

`dashboard:tile:complete`

このイベントは、タイルがクエリの実行を終了したときに作成されます。

type: "dashboard:tile:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
status: "complete",
truncated: false,
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}

属性	形式	説明
`dashboard.id`	Number/String	タイルが属するダッシュボードの ID。
`dashboard.title`	文字列	タイルが属するダッシュボードの上部に表示されるダッシュボードのタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	文字列	タイルが属する相対ダッシュボード URL（パスのみ）。
`dashboard.absoluteUrl`	文字列	タイルが属するダッシュボードの完全な URL。
`dashboard.dashboard_filters`	オブジェクト	タイルが属するダッシュボードに適用されるフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`status`	文字列	タイルクエリが正常に完了したかどうか。指定可能な値は `"complete"` または `"error"` です。
`truncated`	ブール値	クエリから返された行の数がクエリの行数制限を超えたためにタイルクエリの結果が切り捨てられたかどうか。行数上限は、ユーザー指定の行数上限またはLookerのデフォルト行数上限（5,000行）のいずれかです。
`tile.id`	整数	タイルではなく、イベントの ID 番号。
`tile.title`	文字列	タイルのタイトル（タイルの上部に表示されます）。
`tile.listen`	オブジェクト	このタイルがリッスンするグローバルダッシュボードのフィルタ。このオブジェクトの形式は、`{"Filter Label": "Filter Field", ...}` です。
`tile.errors`	オブジェクト配列	`status` プロパティが `"error"` の場合に入力されます。エラーの詳細（エラーメッセージのテキスト、エラーの詳しい説明、エラーが発生したタイルの SQL クエリなど）を提供するオブジェクトの配列。

`dashboard:tile:download`

このイベントは、タイルのデータのダウンロードが開始されたときに作成されます。

type: "dashboard:tile:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales"
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
fileFormat: "pdf"

属性	形式	説明
`dashboard.id`	Number/String	タイルが属するダッシュボードの ID。
`dashboard.title`	文字列	タイルが属するダッシュボードの上部に表示されるダッシュボードのタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	文字列	タイルが属する相対ダッシュボード URL（パスのみ）。
`dashboard.absoluteUrl`	文字列	タイルが属するダッシュボードの完全な URL。
`dashboard.dashboard_filters`	オブジェクト	タイルが属するダッシュボードに適用されるフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`tile.id`	整数	タイルではなく、イベントの ID 番号。
`tile.title`	文字列	タイルのタイトル（タイルの上部に表示されます）。
`tile.listen`	オブジェクト	このタイルがリッスンするグローバルダッシュボードのフィルタ。このオブジェクトの形式は、`{"Filter Label": "Filter Field", ...}` です。
`fileFormat`	文字列	ダウンロードされたタイルの形式（現時点では `"pdf"` のみ）。

`dashboard:tile:explore`

このイベントは、ユーザーがダッシュボードタイルの [Explore From Here] オプションをクリックしたときに作成されます。

type: "dashboard:tile:explore",
label: 'Explore From Here',
url: '/embed/explore/model/view...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}

属性	形式	説明
`label`	文字列	ボタンのラベル
`url`	文字列	表示する Explore の相対 URL（パスのみ）。
`dashboard.id`	Number/String	タイルが属するダッシュボードの ID。
`dashboard.title`	文字列	タイルが属するダッシュボードの上部に表示されるダッシュボードのタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	文字列	タイルが属する相対ダッシュボード URL（パスのみ）。
`dashboard.absoluteUrl`	文字列	タイルが属するダッシュボードの完全な URL。
`dashboard.dashboard_filters`	オブジェクト	タイルが属するダッシュボードに適用されるフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`tile.id`	整数	タイルではなく、イベントの ID 番号。
`tile.title`	文字列	タイルのタイトル（タイルの上部に表示されます）。
`tile.listen`	オブジェクト	このタイルがリッスンするグローバルダッシュボードのフィルタ。このオブジェクトの形式は、`{"Filter Label": "Filter Field", ...}` です。

`dashboard:tile:view`

このイベントは、ユーザーがダッシュボードタイルで [View Original Look] オプションを作成したときに作成されます。

type: "dashboard:tile:view",
label: 'View Original Look',
url: '/embed/look/...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}

属性	形式	説明
`label`	文字列	ボタンのラベル
`url`	文字列	表示するルックの相対 URL（パスのみ）。
`dashboard.id`	Number/String	タイルが属するダッシュボードの ID。
`dashboard.title`	文字列	タイルが属するダッシュボードの上部に表示されるダッシュボードのタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	文字列	タイルが属する相対ダッシュボード URL（パスのみ）。
`dashboard.absoluteUrl`	文字列	タイルが属するダッシュボードの完全な URL。
`dashboard.dashboard_filters`	オブジェクト	タイルが属するダッシュボードに適用されるフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`tile.id`	整数	タイルではなく、イベントの ID 番号。
`tile.title`	文字列	タイルのタイトル（タイルの上部に表示されます）。
`tile.listen`	オブジェクト	このタイルがリッスンするグローバルダッシュボードのフィルタ。このオブジェクトの形式は、`{"Filter Label": "Filter Field", ...}` です。

`dashboard:filters:changed`

このイベントは、ダッシュボードのフィルタが適用または変更されたときに作成されます。

type: "dashboard:filters:changed",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}

属性	形式	説明
`dashboard.id`	Number/String	ダッシュボードの ID。
`dashboard.title`	文字列	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	文字列	相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	文字列	ダッシュボードの完全な URL。
`dashboard.dashboard_filters`	オブジェクト	ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`dashboard.options`	オブジェクト	ダッシュボードのレイアウト、ダッシュボードのレイアウトコンポーネント、ダッシュボードの要素のプロパティと値。`options` オブジェクトで返されるすべてのプロパティには、`dashboard:options:set` イベントを使用して更新値を指定できます。

`look:ready`

このイベントは、クエリが実行されるかどうかにかかわらず、Look がクエリデータの読み込みを開始するときに作成されます。

type: "look:ready",
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}

属性	形式	説明
`look.url`	文字列	相対 Look URL（パスのみ）
`look.absoluteUrl`	文字列	Look の完全な URL

`look:run:start`

このイベントは、Look がクエリデータの読み込みを開始し、クエリの実行が開始されたときに作成されます。

type: "look:run:start",
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}

属性	形式	説明
`look.url`	文字列	相対 Look URL（パスのみ）
`look.absoluteUrl`	文字列	Look の完全な URL

`look:run:complete`

このイベントは、Look がクエリの実行を終了したときに作成されます。

type: look:run:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}

属性	形式	説明
`look.url`	文字列	相対 Look URL（パスのみ）
`look.absoluteUrl`	文字列	Look の完全な URL

`look:save:complete`

このイベントは、Look が編集され、保存されたときに作成されます。このイベントは、ユーザーが次のいずれかのタスクを実行したときに作成されます。

[編集] ボタンをクリックして Look を編集し、[保存] をクリックします。
[保存] > [名前を付けて保存] メニューオプションを使用して Look を保存する
Look をフォルダ間で移動する

[保存] > [既存のダッシュボードに保存] または [設定を編集] メニューオプションを使用して Look を保存した場合、このイベントは作成されません。

type: look:save:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  folderid: 123
  }
}

属性	形式	説明
`look.url`	文字列	相対 Look URL（パスのみ）
`look.absoluteUrl`	文字列	Look の完全な URL
`look.folderid`	整数	ルックが保存されているフォルダ ID

`look:delete:complete`

このイベントは、Look が [ゴミ箱] フォルダに移動されたときに作成されます。

type: look:delete:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}

属性	形式	説明
`look.url`	文字列	相対 Look URL（パスのみ）
`look.absoluteUrl`	文字列	Look の完全な URL

`drillmenu:click`

このイベントは、link LookML パラメータで作成されたダッシュボードでユーザーがドリルメニューをクリックすると作成されます。たとえば、次の LookML は、ユーザーが state ディメンションでフィルタされたデータを表示できるドリルダウンメニューを作成します。


dimension: state {
  type: string
  sql: ${TABLE}.state ;;
  link: {
    label: "Filter by {{ state | encode_uri }}"
    url: "filter::q={{ state | encode_uri }}"
    icon_url: "https://google.com/favicon.ico"
  }
}

state フィルタが Illinois に設定されている場合、drillmenu:click イベントは iframe のホストに次の値を返します。

type: "drillmenu:click",
label: "Filter by Illinois",
link_type: "url",
modal: false,
target: '_self',
url: "#filter::state=Illinois"
context: ' '

属性	形式	説明
`label`	文字列	ドリルダウンメニューに表示されるリンクラベル
`link_type`	文字列	リンク先でのオブジェクトの型
`modal`	ブール値	ブラウザナビゲーションの代わりにドリルダウンダイアログボックスを使用するかどうか
`target`	文字列	リンク先が現在の iframe に置き換わる場合は `_self`、リンク先が新しいウィンドウで開く場合は `_blank`
`url`	文字列	リンク先の URL
`context`	文字列	一部のタイプのビジュアリゼーションで使用される内部属性

iframe をサンドボックス化すると、ドリルダウンメニューをクリックしても新しいウィンドウで開かれません。iframe タグ内で次のサンドボックス化値を使用します。

sandbox = "allow-same-origin allow-scripts"

`drillmodal:download`

このイベントは、ユーザーがダッシュボードタイルからドリルダイアログボックスを開き、[ダウンロード] オプションをクリックしたときに作成されます。

{
type: "drillmodal:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/…",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/…",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
drillExploreUrl: "/embed...",
fileFormat: "pdf"
}

属性	形式	説明
`dashboard.id`	Number/String	タイルが属するダッシュボードの ID。
`dashboard.title`	文字列	タイルが属するダッシュボードの上部に表示されるダッシュボードのタイトル。
`dashboard.url`	文字列	タイルが属する相対ダッシュボード URL（パスのみ）。
`dashboard.absoluteUrl`	文字列	タイルが属するダッシュボードの完全な URL。
`dashboard.dashboard_filters`	オブジェクト	タイルが属するダッシュボードに適用されるフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`drillExploreUrl`	文字列	ダウンロードする相対 Explore URL（パスのみ）。
`fileFormat`	文字列	データダウンロードのファイル形式。

`drillmodal:explore`

このイベントは、ユーザーがドリルダイアログボックスの [Explore From Here] オプションをクリックしたときに作成されます。

type: "drillmodal:explore",
label: "Explore From Here",
url: "/embed/explore/model/view..."

属性	形式	説明
`label`	文字列	ドリルダウンメニューに表示されるボタンラベル
`url`	文字列	表示する相対 Explore URL（パスのみ）

`explore:ready`

このイベントは、クエリが実行されるかどうかにかかわらず、Explore がクエリデータの読み込みを開始するときに作成されます。

type: "explore:ready",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}

属性	形式	説明
`explore.url`	文字列	相対 Explore URL（パスのみ）
`explore.absoluteUrl`	文字列	完全な Explore URL

`explore:run:start`

このイベントは、Explore がクエリデータの読み込みを開始し、クエリの実行が開始されたときに作成されます。

type: "explore:run:start",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}

属性	形式	説明
`explore.url`	文字列	相対 Explore URL（パスのみ）
`explore.absoluteUrl`	文字列	完全な Explore URL

`explore:run:complete`

このイベントは、Explore がクエリの実行を終了したときに作成されます。

type: "explore:run:complete",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}

属性	形式	説明
`explore.url`	文字列	相対 Explore URL（パスのみ）
`explore.absoluteUrl`	文字列	完全な Explore URL

`explore:state:changed`

このイベントは、ユーザーのアクションによって Explore ページの URL が変更されたときに作成されます。

type: "explore:state:changed",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/..."
}

属性	形式	説明
`explore.url`	文字列	相対 Explore URL（パスのみ）
`explore.absoluteUrl`	文字列	完全な Explore URL

`page:changed`

このイベントは、ユーザーが iframe 内で新しいページに移動したときに作成されます。

type: "page:changed",
page: {
  type: "dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/..."
}

属性	形式	説明
`page.type`	文字列	移動したばかりのページのタイプ（`"dashboard"`、`"look"`、`"explore"` など）
`page.url`	文字列	移動したばかりのページの相対 URL（パスのみ）
`page.absoluteUrl`	文字列	移動したばかりのページの完全な URL

`page:properties:changed`

このイベントは、ダッシュボードの iframe の高さが変更されたときに作成されます。これらのアイテムは高さや iframe のサイズに合わせて自動的に調整されるため、Look や Explore では使用できません。

type: "page:properties:changed",
height: 1000

属性	形式	説明
`height`	整数	ダッシュボード iframe の高さ（ピクセル単位）

`session:tokens`

このイベントは、Looker クライアントが続行するためにトークンを必要としていることを示します。このイベントは、iframe の作成時に直ちに作成され、その後はセッション中定期的に発生します。

{
  "type": "session:tokens",
  "api_token": "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3NlbGYtc2lnbmVkLmxvb2tlci5jb206OTk5OSIsImV4cCI6MTY3MDYyNjMzMCwic3ViIjoiYVdrNWFGUzM4RnRwNzFFWXhuS3ZaMXdKRmV3ZjB2VzYtTV9zLWtCcHE1dXIiLCJ0b2tlbl90eXBlIjoiYXBpX3Rva2VuIiwicmFuZG9taXplciI6IkxjYnpOeDNTVjNOb3o3UVlqTVJjNmhlMkdodjh1a2UwWUhiZWNRMHVCYm1KIn0.CBv1__QGc_H7bKNe31SHMMQCsc5ya1xOiEv1UDWAyxM",
  "api_token_ttl": 463,
  "navigation_token": "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3NlbGYtc2lnbmVkLmxvb2tlci5jb206OTk5OSIsImV4cCI6MTY3MDYyNjMzMCwic3ViIjoiYVdrNWFGUzM4RnRwNzFFWXhuS3ZaMXdKRmV3ZjB2VzYtTV9zLWtCcHE1dXIiLCJ0b2tlbl90eXBlIjoibmF2aWdhdGlvbl90b2tlbiIsInJhbmRvbWl6ZXIiOiJHVVNlc00tdTRPRDlNdktodFJDU2pEcVFhUkJNeTh5dm42Q1FDUXhuLTNxMiJ9.sWo7LUEI5LeragVmeDamUR7u2myXpFJ0aqK_IIALUqI",
  "navigation_token_ttl": 463,
  "session_reference_token_ttl": 2924
}

属性	形式	説明
`authentication_token`	文字列	認証トークン。iframe の作成時に含まれます。トークンを生成するリクエストに対するレスポンスやセッションが期限切れになった場合のレスポンスに含まれません。
`authentication_token_ttl`	数値	認証トークンの有効期間（秒単位）。iframe の作成時に含まれます。トークンを生成するリクエストに対するレスポンスやセッションが期限切れになった場合のレスポンスに含まれません。
`api_token`	文字列	API トークン。セッションが期限切れの場合、含まれません。
`api_token_ttl`	数値	API トークンの有効期間（秒単位）。セッションが期限切れの場合、含まれません。
`navigation_token`	文字列	ナビゲーショントークン。セッションが期限切れの場合、含まれません。
`navigation_token_ttl`	数値	ナビゲーショントークンの有効期間（秒単位）。セッションが期限切れの場合、含まれません。
`session_references_token_ttl`	数値	セッションの有効期間（秒単位）。セッションが期限切れになると、値は 0 になります。復元するには、埋め込みアプリケーションが新しいセッションを取得する必要があります。

`session:status`

イベントは、埋め込み Looker アプリケーションがセッショントークンのリクエストを処理したときに生成されます。

{
  "type": "session:status",
  "session_ttl": 0,
  "expired": true,
  "interrupted": false
}

属性	形式	説明
`session_ttl`	数値	セッションの有効期間（秒単位）。
`expired`	ブール値	`true` の場合、セッションが期限切れであることを示します。
`interrupted`	ブール値	`true` の場合、セッショントークンリクエストに応答しなかったことを示します。これは、サーバーが一時的に利用できないことを示している可能性があります。
`recoverable`	ブール値	中断されたが `true` のときにのみデータが入力されますセッションを復元できるかどうかを示します。値が `false` の場合は、埋め込みアプリケーションに問題がある可能性があります。

`env:client:dialog`

ドリルダイアログボックスなど、部分的に表示されない可能性があるダイアログボックスが開かれたときにこのイベントが生成されます。このイベントにより、ホスティングアプリケーションで env:host:scroll アクションを含むダイアログボックスをスクロールできるようになります。

{
  type: "env:client:dialog",
  dialogType: 'drilling',
  placement: 'cover',
  open: true
}

属性	形式	説明
`type`	文字列	`env:client:dialog` は、ダイアログボックスが開いているのか閉じているのかを示します。現在、ドリルダウンダイアログボックスのみがサポートされていますが、今後、他のダイアログボックスも追加される可能性があります。ダイアログボックスが iframe のビューポートを覆っているため、ドリルダイアログボックスの上部が表示されないことがあります。このイベントにより、ホストアプリケーションでダイアログボックスの上部をスクロールして表示できます。
`dialogType`	文字列	ダイアログボックスのタイプ。現時点では、「ドリル」ダイアログタイプの開閉のみがこのイベントをトリガーします。
`placement`	文字列	ダイアログの配置。「ドリル」タイプのダイアログボックスは、常に「カバー」の `placement` を使用します。
`open`	ブール値	ダイアログが開いているかスクロールされているかを示します。

iframe の変更

データの取得に iframe を準備したら、次の手順で iframe に変更を加えることができます。

リクエストを JSON で記述します。
リクエストを iframe の contentWindow に送信します。

リクエストを JSON で記述する

iframe にはいくつかの変更を加えることができます。変更した iframe は JSON 形式で送信します。利用可能なオプションについては、このページのアクションリファレンスをご覧ください。JSON.stringify を使用してアクションを JSON に変換してください。次に例を示します。

var my_request = JSON.stringify(
  {
    type: "dashboard:run"
  }
);

リクエストを iframe の `contentWindow` プロパティに送信する

最後に、次のように iframe の contentWindow にメッセージを投稿します。

var my_iframe = document.getElementById("my_iframe_id");

my_iframe.contentWindow.postMessage(my_request, 'https://instance_name.looker.com');

アクションの概要の表

次の表に、アクションの概要を示します。アクションを選択すると、そのアクションの詳細が表示されます。

アクション	アクションの説明
`dashboard:load`	iframe に新しいダッシュボードを読み込み、既存のダッシュボードを置き換えます。
`dashboard:run`	iframe でダッシュボードを実行します。
`dashboard:edit`	22.20 を追加ダッシュボードを編集モードに切り替えます。
`dashboard:filters:update`	iframe 内の既存のダッシュボードフィルタを更新します。
`dashboard:options:set`	ダッシュボードレイアウトとダッシュボードの要素プロパティに新しい値を書き込みます。
`dashboard:schedule_modal:open`	Scheduler を開きます。これにより、ユーザーは Looker コンテンツをさまざまな宛先に配信できます。
`dashboard:stop`	データの実行または再読み込みを行っているダッシュボードを停止します。
`look:run`	iframe で Look を実行します。
`look:filters:update`	iframe 内の既存の Look フィルタを更新します。
`explore:run`	iframe で Explore を実行します。
`explore:filters:update`	iframe 内の既存の Explore フィルタを更新または削除します。
`session:tokens:request`	`session:tokens:request` イベントに応答してトークンを送信します。
`env:host:scroll`	ホスト iframe の現在のスクロール位置に関する情報を埋め込み Looker アプリケーションに送信します。

アクションリファレンス

埋め込み iframe に送信できる利用可能なアクションは次のとおりです。

`dashboard:load`

このアクションを使用して、iframe に新しいダッシュボードを読み込み、既存のダッシュボードを置き換えます。新しいダッシュボードが開いたときと同じように、新しいダッシュボードでクエリの実行が開始されます。

{
  type: "dashboard:load",
  id: "101",
  pushHistory: false
}

属性	形式	説明
`type`	文字列	`dashboard:load` 型の使用は、新しいダッシュボードを iframe に読み込むことを示します。
`id`	文字列	読み込むダッシュボードの ID。
`pushHistory`	ブール値	`true` の場合、読み込まれたダッシュボードによって新しいブラウザ履歴エントリが作成され、ユーザーはブラウザの「戻る」ボタンを使用して前のダッシュボードに戻ることができます。`false` の場合、現在のダッシュボードが置き換えられ、ブラウザナビゲーションを使用してダッシュボードに戻ることはできません。

`dashboard:run`

このアクションを使用して、iframe でダッシュボードを実行します。これは、ダッシュボードの [実行] ボタンまたは [データを再読み込み] ボタンをクリックするのと同じアクションです。

{
  type: "dashboard:run"
}

属性	形式	説明
`type`	文字列	`dashboard:run` 型の使用は、ダッシュボードを実行することを示します。

`dashboard:edit`

22.20 を追加このアクションを行うと、iframe 内の既存のダッシュボードを編集モードに切り替えます。これは、ダッシュボードメニューから [ダッシュボードを編集] を選択するのと同じアクションです。

{
  type: "dashboard:edit"
}

属性	形式	説明
`type`	文字列	タイプ `dashboard:edit` は、ダッシュボードを編集モードに切り替えることを意味します。

`dashboard:filters:update`

このアクションは、iframe 内の既存のダッシュボードフィルタを更新するために使用します。この方法では、ダッシュボードに新しいフィルタを追加することはできません。

{
  type: "dashboard:filters:update",
  filters: {
    "Sale date": "Last 28 days",
    "Sale amount": "Greater than 100"
  }
}

属性	形式	説明
`type`	文字列	`dashboard:filters:update` 型の使用は、ダッシュボードで使用されるフィルタを更新することを示します。
`filters`	オブジェクト	ダッシュボードに適用する新しいフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。

`dashboard:options:set`

このアクションは、dashboard:run:complete イベントの発生後に利用できます。

埋め込みはメッセージを作成して iframe に送信しますが、ダッシュボードは dashboard:run:complete が発生するまで応答しません。dashboard:options:set アクションは、ダッシュボードレイアウトとダッシュボードの要素プロパティに新しい値を書き込みます。dashboard:options:set を使用して更新できるのは、dashboard:run:complete イベントの options 属性で返されたプロパティのみです。dashboard:run:complete イベントの options 属性によって以前に返されなかったプロパティはすべて無視されます。

{
  type: "dashboard:options:set",
  layouts: [
    {
      id: 1,
      dashboard_id: 1,
      type: "newspaper",
      active: true,
      column_width: null,
      width: null,
      deleted: false,
      dashboard_layout_components: [
        {
          id: 1,
          dashboard_layout_id: 1,
          dashboard_element_id: 1,
          row: 0,
          column: 0,
          width: 8,
          height: 4,
          deleted: false
        },
        {
          id: 2,
          dashboard_layout_id: 1,
          dashboard_element_id: 2,
          row: 0,
          column: 8,
          width: 8,
          height: 4,
          deleted: false
        }
      ]
    }
  ],
  elements: {
    1: {
      title: "Total Orders",
      title_hidden: false,
      vis_config: {
        type: "single_value",
        font_size: "medium",
        title: "Total Orders"
      }
    },
    2: {
      title: "Average Order Profit",
      title_hidden: false,
      vis_config: {
        type: "single_value",
        title: "Average Order Profit"
      }
    }
  }
}

属性	形式	説明
`type`	文字列	`dashboard:options:set` 型の使用は、ダッシュボードのレイアウトとダッシュボードの要素のプロパティに新しい値を書き込むことを示します。
`layouts`	オブジェクト	`dashboard:run:complete` イベントの `options` 属性によって返されるダッシュボードのレイアウトプロパティ。これらは、次のような形式になります。 `id: "string",` `dashboard_id: "string",` `type: "newspaper",` `active: boolean,` `column_width: number,` `width: number`
`layouts.dashboard_layout_components`	オブジェクト	`dashboard:run:complete` イベントの `options` 属性によって返される 1 つ以上のダッシュボードのレイアウトコンポーネントオブジェクト。これらは、次のような形式になります。 `id: "string",` `dashboard_layout_id: "string",` `dashboard_element_id: "string",` `row: number,` `column: number,` `width: number,` `height: number,` `deleted: boolean,`
`elements`	オブジェクト	`dashboard:run:complete` イベントの `options` 属性によって返される 1 つ以上のダッシュボードの要素オブジェクト。これらは、次のような形式になります。 `id: { title: "string", title_hidden: boolean, vis_config: { type: "string", title: "string" } }`

`dashboard:schedule_modal:open`

このアクションを使用して Scheduler を開き、ユーザーが Looker コンテンツをさまざまな宛先に配信できるようにします。

{
  type: "dashboard:schedule_modal:open"
}

属性	形式	説明
`type`	文字列	タイプ `dashboard:schedule_modal:open` を指定すると、[スケジュール] ダイアログボックスを開くことを示します。

`dashboard:stop`

このアクションを使用して、データの実行や再読み込みを行っているダッシュボードを停止します。これは、ダッシュボードの [キャンセル] ボタンをクリックするのと同じアクションです。dashboard:stop を使用して停止したダッシュボードは、status: を "stopped" に設定した dashboard:run:complete イベントを送信します。

{
  type: "dashboard:stop"
}

属性	形式	説明
`type`	文字列	`dashboard:stop` 型の使用は、実行中のダッシュボードを停止することを示します。

`look:run`

このアクションを使用して、iframe で Look の基になるクエリを実行します。この操作は、Look の [実行] ボタンをクリックする場合と似ていますが、look:run が常にデータベースに直接クエリを実行し、Looker キャッシュからデータを取得しない点が異なります。

{
  type: "look:run"
}

属性	形式	説明
`type`	文字列	`look:run` 型の使用は、Look を実行することを示します。

`look:filters:update`

このアクションは、iframe 内の既存の Look フィルタを更新するために使用します。この方法では、Look　に新しいフィルタを追加することはできません。

{
  type: "look:filters:update",
  filters: {
    "orders.created_at": "90 days",
    "products.department": "sweaters"
  }
}

属性	形式	説明
`type`	文字列	`look:filters:update` 型の使用は、Look で使用されるフィルタを更新することを示します。
`filters`	オブジェクト	Look に適用する新しいフィルタ。このオブジェクトの形式は、`{"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...}` です。

`explore:run`

このアクションを使用して、iframe で Explore を実行します。この操作は、Explore の [実行] ボタンをクリックする場合と似ていますが、explore:run が常にデータベースに直接クエリを実行し、Looker キャッシュからデータを取得しない点が異なります。

{
  type: "explore:run"
}

属性	形式	説明
`type`	文字列	`explore:run` 型の使用は、Explore を実行することを示します。

`explore:filters:update`

このアクションを使用して、iframe 内の既存の Explore フィルタを更新または削除できます。有効なフィールドを参照する新しいフィルタを追加すると、その新しいフィルタがデータ探索に追加されます。

{
  type: "explore:filters:update",
  filters: {
    "orders.created_at": "90 days",
    "orders.status": "complete"
  }
  deleteFilters:  ["products.department"]
}

属性	形式	説明
`type`	文字列	`explore:filters:update` 型の使用は、Explore で使用されるフィルタを更新することを示します。
`filters`	オブジェクト	データ探索ツールに適用する新しいフィルタ。`filters` に、Explore に現在存在しないが有効なフィールドを参照するフィルタが含まれている場合、そのフィルタは Explore に追加されます。このオブジェクトの形式: `{"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...}`
`deleteFilters`	配列	Explore から削除する既存のフィルタ。配列の形式は次のとおりです。`["view_name.field_name_1", "view_name.field_name_2", ...]`

`session:tokens:request`

このアクションは、session:tokens:request リクエストに応答してトークンを送信するために使用します。

{
  type: "session:tokens:request",
}

属性	形式	説明
`type`	文字列	タイプ `session:tokens:request` は、`session:tokens:request` イベントに応答してトークンを送信する必要があることを示します。

`env:host:scroll`

このアクションを使用して、ホスト iframe の現在のスクロール位置に関する情報を埋め込み Looker アプリケーションに送信します。

{
  type: "env:host:scroll",
  offsetTop: 10,
  offsetLeft: 10,
  scrollX: 5,
  scrollY: 5
}

属性	形式	説明
`type`	文字列	タイプ `env:host:scroll` の使用は、ホスト iframe の現在のスクロール位置に関する情報を埋め込み Looker アプリケーションに送信することを示します。
`offsetTop`	数値	iframe の一番上のオフセット。
`offsetLeft`	数値	iframe の左のオフセット。
`scrollX`	数値	アプリケーションホストの scrollX の位置。
`scrollY`	数値	アプリケーションホストの scrollX の位置。

埋め込み JavaScript イベント

準備

iframe に ID を追加する

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

埋め込みドメインを許可リストに追加する

iframe からのデータの取得

JavaScript でイベントにアクセスする

イベントタイプの概要表

イベントタイプのリファレンス

dashboard:loaded

dashboard:run:start

dashboard:run:complete

dashboard:download

dashboard:edit:start

dashboard:edit:cancel

dashboard:save:complete

dashboard:delete:complete

dashboard:tile:start

dashboard:tile:complete

dashboard:tile:download

dashboard:tile:explore

dashboard:tile:view

dashboard:filters:changed

look:ready

look:run:start

look:run:complete

look:save:complete

look:delete:complete

drillmenu:click

drillmodal:download

drillmodal:explore

explore:ready

explore:run:start

explore:run:complete

explore:state:changed

page:changed

page:properties:changed

session:tokens

session:status

env:client:dialog