埋め込みを作成したら(一般公開、非公開、シングル サインオン(SSO)、API などで行うことができます)、JavaScript を使用してこれらの iframe を操作できます。埋め込みアイテムのステータスに基づいてページをより動的にしたり、ウェブページから埋め込みアイテムにさらに変更を加えることができます。
Looker は、ブラウザがウェブ アプリケーションにイベントをディスパッチする順序を制御しないことに注意してください。つまり、イベントの順序はブラウザやプラットフォームをまたいで保証されるものではありません。JavaScript は、さまざまなブラウザのイベント処理を考慮して適切に記述してください。
Looker の埋め込みコンテンツでは、次の 2 つの方法で JavaScript を利用できます。
- Embed SDK のドキュメント ページに記載されている Looker の埋め込みソフトウェア開発キット(SDK)を使用する
- JavaScript イベントを使用する。このページの JavaScript でのイベントへのアクセスをご覧ください。
Preparation
埋め込み iframe を操作するには、いくつかの操作が必要になります。
iframe に ID を追加する
後で行う必要があることの一つは、作業している情報が実際には Looker の iframe から取得されたことを確認することです。これを行うには、iframe に ID を追加します(まだ追加していない場合)。次の例では、id="looker"
を追加しました。
<iframe id="looker" src="https://instance_name.looker.com/embed/dashboards/1"></iframe>
iframe src
属性に埋め込みドメインを追加する
iframe の src
に、iframe が使用されているドメインを追加します。次の例では、?embed_domain=https://mywebsite.com"
を追加しました。
<iframe
id="looker"
src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://mywebsite.com">
</iframe>
SSO 埋め込みを使用している場合は、埋め込み URL に embed_domain
を追加してください。
embed_domain
の末尾にスラッシュ(/
)を含めないでください。
埋め込みドメインを許可リストに追加する
最後に、Looker を使用しているドメインを [Admin] パネルの [Embed] ページで許可リストに追加します。
- iframe が使用されているドメインを入力します。ドメインを入力したら、必ず Tab キーを押してドメインがボックスに表示されるようにしてください。ドメイン URL の末尾にスラッシュ(
/
)を含めないでください。 - [更新] ボタンをクリックします。
許可リストに含まれている *
ワイルドカードを使用すると、ドメイン パターンを作成できます。たとえば、https://*.mycompany.com
と指定すると、https://analytics.mycompany.com
と https://data.mycompany.com
の両方が許可されます。
iframe からデータを取得する
準備手順を完了すると、postMessage
イベントをリッスンして、Looker iframe とお客様のドメイン間で渡されるイベントにアクセスできるようになります。
悪意のあるメッセージを避けるために、イベントが 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:save:complete |
追加 21.6 ダッシュボードが編集、保存されました。 |
dashboard:delete:complete |
追加 21.6 ダッシュボードを削除しました。 |
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 |
追加 21.6 Look が編集、保存されました。 |
look:delete:complete |
追加 21.6 Look を [ゴミ箱] フォルダに移動しました。 |
drillmenu:click |
ユーザーが、link LookML パラメータで作成したダッシュボードのドリルメニューをクリックしました。 |
drillmodal:download |
ユーザーがダッシュボード タイルからドリル ダイアログ ボックスを開いて、[ダウンロード] オプションをクリックします。 |
drillmodal:explore |
ユーザーがドリル ダイアログ ボックスの [Explore from Here] オプションをクリックした。 |
explore:ready |
クエリを実行するかどうかにかかわらず、クエリデータの読み込みが開始しています。 |
explore:run:start |
Explore でクエリデータの読み込みが開始され、クエリの実行が開始されました。 |
explore:run:complete |
Explore のクエリの実行が完了しました。 |
explore:state:changed |
ユーザーの操作の結果、Explore ページの URL が変更されました。 |
page:changed |
ユーザーが iframe 内の新しいページに移動した場合。 |
page:properties:changed |
ダッシュボードの iframe の高さが変更されました。 |
イベントタイプのリファレンス
埋め込まれた iframe では、さまざまな種類のイベントを作成できます。
dashboard:loaded
タイルが自動実行に設定されていないダッシュボードでは、このイベントはダッシュボードとその要素が読み込まれた後、クエリが実行される前に作成されます。
options
属性は、以前のダッシュボードでは使用できません。
type: "dashboard:loaded",
status: "complete",
dashboard: {
id: 1,
title: "Business Pulse",
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 |
数値 | ダッシュボードの ID 番号。 |
dashboard.title |
String | タイトル(ダッシュボードの上部に表示)。 |
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",
url: "/embed/dashboards/...",
absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
dashboard_filters: {
"Date": "Last 28 days",
"Total Orders": "Greater than 100"
}
}
属性 | フォーマット | 説明 |
---|---|---|
dashboard.id |
数値 | ダッシュボードの ID 番号。 |
dashboard.url |
String | 相対ダッシュボードの URL(パスのみ)。 |
dashboard.absoluteUrl |
String | ダッシュボードの完全な URL。 |
dashboard.title |
String | タイトル(ダッシュボードの上部に表示)。 |
dashboard.dashboard_filters |
オブジェクト | ダッシュボードに適用されているフィルタ。このオブジェクトの形式は次のとおりです。{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
dashboard:run:complete
このイベントは、ダッシュボードの実行が終了し、すべてのタイルの読み込みとクエリが完了すると作成されます。このイベントは、すべてのタイルが正常に読み込まれるかどうかにかかわらず作成されます。
options
属性と tileStatuses
属性は、以前のダッシュボードでは使用できません。
type: "dashboard:run:complete",
status: "complete",
dashboard: {
id: 23,
title: "My Dashboard",
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 |
数値 | ダッシュボードの ID 番号。 |
dashboard.url |
String | 相対ダッシュボードの URL(パスのみ)。 |
dashboard.absoluteUrl |
String | ダッシュボードの完全な URL。 |
dashboard.title |
String | タイトル(ダッシュボードの上部に表示)。 |
dashboard.dashboard_filters |
オブジェクト | ダッシュボードに適用されているフィルタ。このオブジェクトの形式は次のとおりです。{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
dashboard.options |
オブジェクト | ダッシュボード レイアウト、ダッシュボード レイアウト コンポーネント、ダッシュボード要素のプロパティと値。options オブジェクトで返されるすべてのプロパティには、dashboard:options:set アクションを使用して更新された値を指定できます。このオプションは以前のダッシュボードでは使用できません。 |
dashboard.tileStatuses |
オブジェクト配列 | タイル ステータスを提供するオブジェクトの配列。オブジェクトのプロパティは次のとおりです。
|
dashboard:download
このイベントは、ダッシュボードの PDF のダウンロードが開始されると作成されます。
type: "dashboard: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"
}
}
fileFormat: "pdf"
属性 | フォーマット | 説明 |
---|---|---|
dashboard.id |
数値 | ダッシュボードの ID 番号。 |
dashboard.url |
String | 相対ダッシュボードの URL(パスのみ)。 |
dashboard.absoluteUrl |
String | ダッシュボードの完全な URL。 |
dashboard.title |
String | ダッシュボードのタイトル。ダッシュボード上部に表示されます。 |
dashboard.dashboard_filters |
オブジェクト | ダッシュボードに適用されているフィルタ。このオブジェクトの形式は次のとおりです。{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
fileFormat |
String | ダウンロードしたダッシュボードの形式(現時点では "pdf" のみ)。 |
dashboard:save:complete
このイベントは、ダッシュボードを編集して保存すると作成されます。
このイベントは、以前のダッシュボードでは使用できません。
type: "dashboard:save:complete",
dashboard: {
id: 23,
title: "My Dashboard",
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 |
数値 | ダッシュボードの ID 番号。 |
dashboard.title |
String | タイトル(ダッシュボードの上部に表示)。 |
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",
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 |
数値 | ダッシュボードの ID 番号。 |
dashboard.title |
String | タイトル(ダッシュボードの上部に表示)。 |
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",
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 |
数値 | タイルが属するダッシュボードの ID 番号。 |
dashboard.url |
String | タイルが属する相対ダッシュボード URL(パスのみ)。 |
dashboard.absoluteUrl |
String | タイルが属するダッシュボードの完全な URL。 |
dashboard.title |
String | ダッシュボードのタイトル。タイルが属するダッシュボードの上部に表示されます。 |
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
このイベントは、タイルがクエリの実行を終了すると作成されます。
errors
属性は、以前のダッシュボードでは使用できません。
type: "dashboard:tile:complete",
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"
}
}
status: "complete",
truncated: false,
tile: {
id: 123,
title: "Quarterly Sales",
listen: {
"Date": "order.date",
"Total Orders": "order.count"
}
}
属性 | フォーマット | 説明 |
---|---|---|
dashboard.id |
数値 | タイルが属するダッシュボードの ID 番号。 |
dashboard.url |
String | タイルが属する相対ダッシュボード URL(パスのみ)。 |
dashboard.absoluteUrl |
String | タイルが属するダッシュボードの完全な URL。 |
dashboard.title |
String | ダッシュボードのタイトル。タイルが属するダッシュボードの上部に表示されます。 |
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",
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 |
数値 | タイルが属するダッシュボードの ID 番号。 |
dashboard.url |
String | タイルが属する相対ダッシュボード URL(パスのみ)。 |
dashboard.absoluteUrl |
String | タイルが属するダッシュボードの完全な URL。 |
dashboard.title |
String | ダッシュボードのタイトル。タイルが属するダッシュボードの上部に表示されます。 |
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",
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 |
数値 | タイルが属するダッシュボードの ID 番号。 |
dashboard.url |
String | タイルが属する相対ダッシュボード URL(パスのみ)。 |
dashboard.absoluteUrl |
String | タイルが属するダッシュボードの完全な URL。 |
dashboard.title |
String | ダッシュボードのタイトル。タイルが属するダッシュボードの上部に表示されます。 |
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",
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 |
数値 | タイルが属するダッシュボードの ID 番号。 |
dashboard.url |
String | タイルが属する相対ダッシュボード URL(パスのみ)。 |
dashboard.absoluteUrl |
String | タイルが属するダッシュボードの完全な URL。 |
dashboard.title |
String | ダッシュボードのタイトル。タイルが属するダッシュボードの上部に表示されます。 |
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
このイベントは、ダッシュボードのフィルタが適用または変更されたときに作成されます。
options
属性は、以前のダッシュボードでは使用できません。
type: "dashboard:filters:changed",
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"
}
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 |
数値 | ダッシュボードの ID 番号。 |
dashboard.url |
String | 相対ダッシュボードの URL(パスのみ)。 |
dashboard.absoluteUrl |
String | ダッシュボードの完全な URL。 |
dashboard.title |
String | タイトル(ダッシュボードの上部に表示)。 |
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 が編集および保存されたときに作成されます。このイベントは、ユーザーが次のいずれかのタスクを実行すると作成されます。
- [Edit] ボタンをクリックして Look を編集し、[Save] をクリックします。
- [Save] > [Save As...] メニュー オプションを使用して Look を保存する
- あるフォルダから別のフォルダに Look を移動する
[保存] > [既存のダッシュボードに保存] または [設定を編集] を選択して Look を保存した場合、このイベントは作成されません。
type: look:save:complete
look: {
url: "/embed/looks/...",
absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
spaceId: 123
}
}
属性 | フォーマット | 説明 |
---|---|---|
look.url |
String | 相対 Look URL(パスのみ) |
look.absoluteUrl |
String | Look の完全な URL |
look.spaceID |
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 |
数値 | タイルが属するダッシュボードの 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 | ダウンロードする Explore の相対 URL(パスのみ)。 |
fileFormat |
String | データ ダウンロードのファイル形式。 |
drillmodal:explore
このイベントは、ユーザーがドリル ダイアログ ボックスの [Explore from Here] オプションをクリックすると作成されます。
type: "drillmodal:explore",
label: "Explore From Here",
url: "/embed/explore/model/view..."
属性 | フォーマット | 説明 |
---|---|---|
label |
String | ドリルメニューに表示されるボタンのラベル |
url |
String | 表示する Explore の相対 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 の高さが変更されたときに作成されます。Look または Explore では、これらのアイテムの高さが iframe のサイズに合わせて自動的に調整されるため、使用できません。
type: "page:properties:changed",
height: 1000
属性 | フォーマット | 説明 |
---|---|---|
height |
Integer | ダッシュボード iframe の高さ(ピクセル単位) |
iframe の変更
データ取得用に iframe を準備した後、次の手順で iframe を変更できます。
JSON でリクエストを作成する
iframe にいくつかの変更を加えると、JSON 形式で送信できます。利用可能なオプションについては、このページのアクションのリファレンス セクションをご覧ください。次のように、アクションを JSON に変換するために JSON.stringify
を使用するのを忘れないでください。
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:filters:update |
iframe 内の既存のダッシュボード フィルタを更新します。 |
dashboard:options:set |
ダッシュボードのレイアウトとダッシュボード要素のプロパティに新しい値を書き込みます。 |
dashboard:schedule_modal:open |
スケジューラを開き、ユーザーがさまざまな宛先に Looker コンテンツを配信できるようにします。 |
dashboard:stop |
実行中またはデータを再読み込みしているダッシュボードを停止します。 |
look:run |
iframe で Look を実行する。 |
look:filters:update |
iframe 内の既存の Look フィルタを更新します。 |
explore:run |
iframe で Explore を実行します。 |
explore:filters:update |
iframe 内の既存の Explore フィルタを更新または削除します。 |
アクション リファレンス
埋め込み 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 でダッシュボードを実行します。これは、ダッシュボードの [Run] ボタンまたは [Reload Data] ボタンを押すのと同じ操作です。
{
type: "dashboard:run"
}
属性 | フォーマット | 説明 |
---|---|---|
type |
String | タイプ dashboard:run は、ダッシュボードを実行することを示します。 |
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: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 |
String | タイプ dashboard:options:set は、ダッシュボード レイアウトとダッシュボード要素のプロパティに新しい値を書き込むことを示します。 |
layouts |
オブジェクト | dashboard:run:complete イベントの options 属性によって返されるダッシュボード レイアウト プロパティ。次のような形式になります。id: "string", |
layouts.dashboard_layout_components |
オブジェクト | dashboard:run:complete イベントの options 属性によって返される 1 つ以上のダッシュボード レイアウト コンポーネント オブジェクト。次のような形式になります。id: "string", |
elements |
オブジェクト | dashboard:run:complete イベントの options 属性によって返される 1 つ以上のダッシュボード要素オブジェクト。次のような形式になります。id: { |
dashboard:schedule_modal:open
このアクションを使用してスケジューラを開き、ユーザーがさまざまな宛先に Looker コンテンツを配信できるようにします。
このイベントは、以前のダッシュボードでは使用できません。
{
type: "dashboard:schedule_modal:open"
}
属性 | フォーマット | 説明 |
---|---|---|
type |
String | タイプ dashboard:schedule_modal:open は、[Schedule] ダイアログ ボックスを開くことを示します。 |
dashboard:stop
この操作を使用して、ダッシュボードの実行中またはデータの再読み込み中に、ダッシュボードを停止します。この操作は、ダッシュボードで [キャンセル] ボタンをクリックするのと同じです。dashboard:stop
を使用するダッシュボードが停止し、status:
が "stopped"
に設定された dashboard:run:complete
イベントが送信されました。
このアクションは、以前のダッシュボードでは使用できません。
{
type: "dashboard:stop"
}
属性 | フォーマット | 説明 |
---|---|---|
type |
String | タイプ dashboard:stop は、実行中のダッシュボードを停止することを示します。 |
look:run
このアクションを使用して、iframe 内で Look が基づいているクエリを実行します。これは、Look で [Run] ボタンをクリックするのと似ています。ただし、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 の [Run] ボタンをクリックするのと似ています。ただし、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", ...] です。 |