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`	String	ダッシュボードとその要素が正常に読み込まれたかどうかを示します。
`dashboard.id`	Number/String	ダッシュボードの ID。
`dashboard.title`	String	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.dashboard_filters`	オブジェクト	ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`dashboard.absoluteUrl`	String	完全なダッシュボード URL。
`dashboard.url`	String	相対ダッシュボード 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`	String	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	String	相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	String	完全なダッシュボード 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`	String	ダッシュボードとその要素が正常に実行されたかどうかを示します。ダッシュボードとその要素が正常に実行されると、`status` は `"complete"` を返します。それ以外の場合、`status` は `"error"` を返します。実行中のダッシュボードをユーザーインターフェースまたは `dashboard:stop` アクションで停止した場合、`status` は `"stopped"` を返します。
`dashboard.id`	Number/String	ダッシュボードの ID。
`dashboard.title`	String	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	String	相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	String	完全なダッシュボード 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`	String	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	String	相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	String	完全なダッシュボード URL。
`dashboard.dashboard_filters`	オブジェクト	ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`fileFormat`	String	ダウンロードしたダッシュボードの形式（現時点では `"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`	String	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	String	相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	String	完全なダッシュボード 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`	String	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	String	相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	String	完全なダッシュボード 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`	String	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.dashboard_filters`	オブジェクト	ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`dashboard.absoluteUrl`	String	完全なダッシュボード URL。
`dashboard.url`	String	相対ダッシュボード 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`	String	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.dashboard_filters`	オブジェクト	ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`dashboard.absoluteUrl`	String	完全なダッシュボード URL。
`dashboard.url`	String	相対ダッシュボード 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`	String	タイルが属するダッシュボードの上部に表示されるダッシュボードのタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	String	タイルが属する相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	String	タイルが属する完全なダッシュボード URL。
`dashboard.dashboard_filters`	オブジェクト	タイルが属するダッシュボードに適用されるフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`tile.id`	Integer	タイルではなく、イベントの ID 番号。
`tile.title`	String	タイルの上部に表示されるタイルタイトル。
`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`	String	タイルが属するダッシュボードの上部に表示されるダッシュボードのタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	String	タイルが属する相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	String	タイルが属する完全なダッシュボード URL。
`dashboard.dashboard_filters`	オブジェクト	タイルが属するダッシュボードに適用されるフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`status`	String	タイルクエリが正常に完了したかどうか。指定可能な値は `"complete"` または `"error"` です。
`truncated`	ブール値	クエリがクエリ行の上限を超える行を返した結果として、タイルクエリの結果が切り捨てられたかどうか。行数上限は、ユーザー指定の行数上限またはLookerのデフォルト行数上限（5,000行）のいずれかです。
`tile.id`	Integer	タイルではなく、イベントの ID 番号。
`tile.title`	String	タイルの上部に表示されるタイルタイトル。
`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`	String	タイルが属するダッシュボードの上部に表示されるダッシュボードのタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	String	タイルが属する相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	String	タイルが属する完全なダッシュボード URL。
`dashboard.dashboard_filters`	オブジェクト	タイルが属するダッシュボードに適用されるフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`tile.id`	Integer	タイルではなく、イベントの ID 番号。
`tile.title`	String	タイルの上部に表示されるタイルタイトル。
`tile.listen`	オブジェクト	このタイルがリッスンするグローバルダッシュボードのフィルタ。このオブジェクトの形式は、`{"Filter Label": "Filter Field", ...}` です。
`fileFormat`	String	ダウンロードされたタイルの形式（現時点では `"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`	String	ボタンのラベル
`url`	String	表示される Explore の相対 URL（パスのみ）。
`dashboard.id`	Number/String	タイルが属するダッシュボードの ID。
`dashboard.title`	String	タイルが属するダッシュボードの上部に表示されるダッシュボードのタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	String	タイルが属する相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	String	タイルが属する完全なダッシュボード URL。
`dashboard.dashboard_filters`	オブジェクト	タイルが属するダッシュボードに適用されるフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`tile.id`	Integer	タイルではなく、イベントの ID 番号。
`tile.title`	String	タイルの上部に表示されるタイルタイトル。
`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`	String	ボタンのラベル
`url`	String	表示される Look の相対 URL（パスのみ）。
`dashboard.id`	Number/String	タイルが属するダッシュボードの ID。
`dashboard.title`	String	タイルが属するダッシュボードの上部に表示されるダッシュボードのタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	String	タイルが属する相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	String	タイルが属する完全なダッシュボード URL。
`dashboard.dashboard_filters`	オブジェクト	タイルが属するダッシュボードに適用されるフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`tile.id`	Integer	タイルではなく、イベントの ID 番号。
`tile.title`	String	タイルの上部に表示されるタイルタイトル。
`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`	String	ダッシュボードの上部に表示されるタイトル。
`dashboard.canEdit`	ブール値	22.20 を追加 `true` の場合、ユーザーはダッシュボードを編集できます。
`dashboard.url`	String	相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	String	完全なダッシュボード 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`	String	相対 Look URL（パスのみ）
`look.absoluteUrl`	String	完全な Look URL

`look:run:start`

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

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

属性	フォーマット	説明
`look.url`	String	相対 Look URL（パスのみ）
`look.absoluteUrl`	String	完全な Look URL

`look:run:complete`

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

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

属性	フォーマット	説明
`look.url`	String	相対 Look URL（パスのみ）
`look.absoluteUrl`	String	完全な 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`	String	相対 Look URL（パスのみ）
`look.absoluteUrl`	String	完全な Look URL
`look.folderid`	Integer	Look が格納されているフォルダ ID

`look:delete:complete`

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

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

属性	フォーマット	説明
`look.url`	String	相対 Look URL（パスのみ）
`look.absoluteUrl`	String	完全な 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`	String	ドリルメニューに表示されるリンクラベル
`link_type`	String	リンク先でのオブジェクトの型
`modal`	ブール値	ブラウザナビゲーションの代わりにドリルダイアログボックスを使用するかどうか
`target`	String	リンク先を現在の iframe に置き換える場合は `_self`、リンク先を新しいウィンドウで開く場合は `_blank`
`url`	String	リンク先の URL
`context`	String	一部のタイプの可視化で使用される内部属性

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`	String	タイルが属するダッシュボードの上部に表示されるダッシュボードのタイトル。
`dashboard.url`	String	タイルが属する相対ダッシュボード URL（パスのみ）
`dashboard.absoluteUrl`	String	タイルが属する完全なダッシュボード URL。
`dashboard.dashboard_filters`	オブジェクト	タイルが属するダッシュボードに適用されるフィルタ。このオブジェクトの形式は、`{"Filter name 1": "value 1", "Filter name 2": "value 2", ...}` です。
`drillExploreUrl`	String	ダウンロードする相対 URL（パスのみ）。
`fileFormat`	String	データダウンロードのファイル形式。

`drillmodal:explore`

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

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

属性	フォーマット	説明
`label`	String	ドリルメニューに表示されるボタンラベル
`url`	String	表示される相対探索 URL（パスのみ）

`explore:ready`

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

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

属性	フォーマット	説明
`explore.url`	String	相対 Explore URL（パスのみ）
`explore.absoluteUrl`	String	完全な Explore URL

`explore:run:start`

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

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

属性	フォーマット	説明
`explore.url`	String	相対 Explore URL（パスのみ）
`explore.absoluteUrl`	String	完全な Explore URL

`explore:run:complete`

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

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

属性	フォーマット	説明
`explore.url`	String	相対 Explore URL（パスのみ）
`explore.absoluteUrl`	String	完全な 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`	String	相対 Explore URL（パスのみ）
`explore.absoluteUrl`	String	完全な Explore URL

`page:changed`

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

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

属性	フォーマット	説明
`page.type`	String	移動したページの種類（`"dashboard"`、`"look"`、`"explore"` など）
`page.url`	String	移動したページの相対 URL（パスのみ）
`page.absoluteUrl`	String	移動したページの完全な URL

`page:properties:changed`

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

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

属性	フォーマット	説明
`height`	Integer	ダッシュボード 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`	String	認証トークン。iframe の作成時に含まれます。トークンを生成するリクエストに対するレスポンスやセッションが期限切れになった場合のレスポンスに含まれません。
`authentication_token_ttl`	数値	認証トークンの有効期間（秒）。iframe の作成時に含まれます。トークンを生成するリクエストに対するレスポンスやセッションが期限切れになった場合のレスポンスに含まれません。
`api_token`	String	API トークン。セッションが有効期限切れになった場合は含まれません。
`api_token_ttl`	数値	API トークンの有効期間（秒）。セッションが有効期限切れになった場合は含まれません。
`navigation_token`	String	ナビゲーショントークン。セッションが有効期限切れになった場合は含まれません。
`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`	String	`env:client:dialog` は、ダイアログボックスが開いているのか閉じているのかを示します。現時点ではドリルダイアログボックスのみがサポートされていますが、今後他のダイアログボックスが追加される可能性があります。ダイアログボックスが iframe ビューポートをカバーするため、ドリルダイアログボックスの上部が表示されていない場合があります。このイベントにより、ホストアプリケーションでダイアログボックスの上部をスクロールして表示できます。
`dialogType`	String	ダイアログボックスの種類。現時点では、「ドリル」ダイアログタイプの開閉のみがこのイベントをトリガーします。
`placement`	String	ダイアログの配置。「ドリル」タイプのダイアログボックスは、常に「カバー」の `placement` を使用します。
`open`	ブール値	ダイアログが開いているかスクロールされたかを示します。

iframe に変更を加える

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

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

JSON でリクエストを作成する

JSON 形式で送信する iframe にいくつかの変更を加えることができます。使用可能なオプションについては、このページのアクションリファレンスセクションをご覧ください。次のように、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`	String	`dashboard:load` 型の使用は、新しいダッシュボードを iframe に読み込むことを示します。
`id`	String	読み込むダッシュボードの ID。
`pushHistory`	ブール値	`true` の場合、読み込まれたダッシュボードは新しいブラウザ履歴エントリを作成し、ユーザーはブラウザの [戻る] ボタンを使用して前のダッシュボードに戻ることができます。`false` の場合、現在のダッシュボードは置き換えられ、ブラウザのナビゲーションを使用してダッシュボードに戻ることはできません。

`dashboard:run`

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

{
  type: "dashboard:run"
}

属性	フォーマット	説明
`type`	String	`dashboard:run` 型の使用は、ダッシュボードを実行することを示します。

`dashboard:edit`

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

{
  type: "dashboard:edit"
}

属性	フォーマット	説明
`type`	String	タイプ `dashboard:edit` は、ダッシュボードを編集モードに切り替えることを意味します。

`dashboard:filters:update`

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

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

属性	フォーマット	説明
`type`	String	`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:run:complete イベントの options 属性で返されたプロパティのみが、dashboard:options:set を使用して更新できます。以前に 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`	String	`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`	String	タイプ `dashboard:schedule_modal:open` を指定すると、[スケジュール] ダイアログボックスを開くことを示します。

`dashboard:stop`

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

{
  type: "dashboard:stop"
}

属性	フォーマット	説明
`type`	String	`dashboard:stop` タイプは、実行中のダッシュボードを停止することを示します。

`look:run`

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

{
  type: "look:run"
}

属性	フォーマット	説明
`type`	String	`look:run` 型の使用は、Look を実行することを示します。

`look:filters:update`

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

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

属性	フォーマット	説明
`type`	String	`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`	String	`explore:run` 型の使用は、Explore を実行することを示します。

`explore:filters:update`

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

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

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

`session:tokens:request`

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

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

属性	フォーマット	説明
`type`	String	タイプ `session:tokens:request` は、`session:tokens:request` イベントに応答してトークンを送信する必要があることを示します。

`env:host:scroll`

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

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

属性	フォーマット	説明
`type`	String	タイプ `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