埋め込み JavaScript イベント

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

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

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

準備

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

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=3 を追加します。sdk=3 パラメータは、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 が使用されているドメインを許可リストに追加する必要があります。

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

  2. [更新] をクリックします。

許可リストで * ワイルドカードを使用して、ドメイン パターンを作成できます。たとえば、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:merge 追加日: 25.14 ユーザーが [クエリを統合して編集] ボタンまたはメニュー項目をクリックしました。
dashboard:tile:view ユーザーが、ダッシュボード タイルの [View Original Look] オプションをクリックしました。
dashboard:filters:changed ダッシュボードのフィルタが適用または変更されました。
look:ready クエリが実行されているかどうかにかかわらず、Look がクエリデータの読み込みを開始しました。
look:run:start Look がクエリデータの読み込みを開始し、クエリの実行が開始されました。
look:run:complete Look がクエリの実行を終了しました。
look:edit:start 25.10 を追加 Look を編集モードに切り替えました。Look が保存されると、look:save:complete イベントがトリガーされます。
look:edit:cancel 25.10 を追加 編集モードの 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:expired 25.10 で追加 ユーザーのセッションの有効期限が切れました。
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] オプションをクリックしたときに作成されます。

このイベントはキャンセル可能です。つまり、埋め込みアプリケーションが {cancel: true} を返すと、Looker はトリガー イベントを続行しません。

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] オプションを作成したときに作成されます。

このイベントはキャンセル可能です。つまり、埋め込みアプリケーションが {cancel: true} を返すと、Looker はトリガー イベントを続行しません。

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 文字列 表示する Look の相対 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:merge

追加日: 2023 年 12 月 14 日 このイベントは、ユーザーが [結合されたクエリを編集] ボタンまたは [結合されたクエリを編集] メニュー項目をクリックしたときに生成されます。このボタンのデフォルトの動作は、結合クエリを編集できる新しい最上位ウィンドウを開くことです。

このイベントはキャンセル可能です。つまり、埋め込みアプリケーションが {cancel: true} を返すと、Looker はトリガー イベントを続行しません。このイベントにより、埋め込みアプリケーションで、最上位ウィンドウではなく iframe で結合クエリの編集を開くことができます。埋め込みアプリケーションは、イベントをトリガーした iframe の URL を読み込もうとすべきではありません。代わりに、新しい iframe を作成する必要があります。

javascript type: dashboard:tile:merge, label: 'Edit Merged Query', dashboard_id: '13', dashboard_modified: false, tile_id: '218', tile_title: 'Untitled', url: '/embed/merge/edit?did=218&dbnx=1', absoluteUrl: 'https://.../embed/merge/edit?did=218&dbnx=1', target: '_blank',
属性 形式 説明
label 文字列 ボタンのラベル
dashboard_id 文字列 統合されたクエリタイルが属するダッシュボードの ID。
dashboard_modified ブール値 true の場合、この属性はダッシュボードが変更されたことを示します。マージクエリの編集を続行すると、ダッシュボードの更新が失われる可能性があります。埋め込みアプリケーションは、統合クエリの編集をキャンセルするか、続行すると保存されていない変更がある可能性があることをユーザーに警告できます。
tile_id 文字列 結合されたクエリタイルの ID。
tile_title 文字列 タイルのタイトル。
url 文字列 結合されたクエリの URL。この属性は、埋め込み SDK と組み合わせて使用し、結合されたクエリの新しい iframe を作成できます。
absoluteUrl 文字列 結合されたクエリの完全な URL。この属性は、iframe 要素の src として使用できます。追加の属性が必要になります。
target 文字列 開くウィンドウの名前に使用する ID。

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:edit:start

25.10 を追加 このイベントは、Look が編集モードに切り替えられたときに発生します。

type: "look:edit:start",
look: {
  id: 46,
  title: "My Look",
  url: "/embed/looks/46",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/46",
}
属性 形式 説明
look.id 文字列 Look の ID。
look.title 文字列 Lookのタイトル。
url 文字列 相対 Look URL（パスのみ）。
absoluteUrl 文字列 Look の完全な URL。

look:edit:cancel

25.10 を追加 このイベントは、編集モードの Look で、保存されることなく編集モードが終了したときに発行されます。

type: "look:edit:cancel",
look: {
  id: 46,
  title: "My Look",
  url: "/embed/looks/46",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/46",
}
属性 形式 説明
look.id 文字列 Look の ID。
look.title 文字列 Lookのタイトル。
url 文字列 相対 Look URL（パスのみ）。
absoluteUrl 文字列 Look の完全な URL。

look:save:complete

このイベントは、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 整数 Look が保存されているフォルダの 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: ' '

このイベントはキャンセル可能です。つまり、埋め込みアプリケーションが {cancel: true} を返すと、Looker はトリガー イベントを続行しません。

属性 形式 説明
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] オプションをクリックしたときに作成されます。

このイベントはキャンセル可能です。つまり、埋め込みアプリケーションが {cancel: true} を返すと、Looker はトリガー イベントを続行しません。

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:expired

25.10 で追加 このイベントは、埋め込みユーザーのセッションの有効期限が切れたときに発生します。

type: "session:expired",

このイベントにはペイロードがありません。

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 に変更を加えることができます。

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

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

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');

アクションの概要テーブル

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

アクション 操作の説明
page:load iframe に新しいページを読み込み、既存のページを置き換えます。
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 に送信できる利用可能なアクションは次のとおりです。

page:load

このアクションを使用して、iframe 内の新しいコンテンツに移動し、既存のコンテンツを置き換えます。このアクションは dashboard:load アクションに似ていますが、URL で追加のパラメータを指定できるため、より柔軟です。

page:load を使用する前に考慮すべき動作の違いがあります。dashboard:load は、現在のダッシュボードが編集中の場合にナビゲーションが発生しないようにします。page:load はナビゲーションを妨げません。ホスト アプリケーションは、dashboard:edit:start、look:edit:start、および対応する編集終了イベントをトラッキングすることで、ダッシュボードまたは Look が編集されているかどうかを判断できます。このため、埋め込み SDK を使用することをおすすめします。埋め込み SDK は、ダッシュボードまたは Look が編集されているかどうかを追跡します。そのため、接続をクエリして、ナビゲーションの前にコンテンツが編集されているかどうかを確認できます。

{
    type: 'page:load',
    url: '/embed/dashboard/32?state=california,
    pushHistory: false
}
属性 形式 説明
type 文字列 page:load 型の使用は、新しいコンテンツを iframe に読み込むことを示します。
url 文字列 読み込むコンテンツの URL。
pushHistory ブール値 true の場合、読み込まれたコンテンツによって新しいブラウザ履歴エントリが作成され、ユーザーはブラウザの戻るボタンを使用して前のコンテンツに戻ることができます。false の場合、現在のコンテンツが置き換えられ、ブラウザのナビゲーションを使用して戻ることはできません。

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: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 文字列 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 フィルタを更新または削除できます。有効なフィールドを参照する新しいフィルタを含めると、新しいフィルタが Explore に追加されます。

{
  type: "explore:filters:update",
  filters: {
    "orders.created_at": "90 days",
    "orders.status": "complete"
  }
  deleteFilters:  ["products.department"]
}
属性 形式 説明
type 文字列 explore:filters:update 型の使用は、Explore で使用されるフィルタを更新することを示します。
filters オブジェクト Explore に適用する新しいフィルタ。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 の位置。