埋め込み 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=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 が使用されているドメインを許可リストに追加する必要があります。

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

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

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

dashboard:loaded

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


type: "dashboard:loaded",
status: "complete",
dashboard: {
  id: 1,
  title: "Business Pulse",
  canEdit: true,
  dashboard_filters: {
    "date": "Last 6 Years",
    "state": ""
  },
  absoluteUrl: "https://self-signed.looker.com:9999/embed/dashboards/1?embed_domain=https%3A%2F%2Fself-signed.looker.com%3A9999&date=Last+6+Years&state=",
  url: "/embed/dashboards/1?embed_domain=https%3A%2F%2Fself-signed.looker.com%3A9999&date=Last+6+Years&state=",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
属性 形式 説明
status 文字列 ダッシュボードとその要素が正常に読み込まれたかどうかを示します。
dashboard.id Number/String ダッシュボードの ID。
dashboard.title 文字列 ダッシュボードの上部に表示されるタイトル。
dashboard.canEdit ブール値 22.20 を追加 true の場合、ユーザーはダッシュボードを編集できます。
dashboard.dashboard_filters オブジェクト ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} です。
dashboard.absoluteUrl 文字列 ダッシュボードの完全な URL。
dashboard.url 文字列 相対ダッシュボード URL（パスのみ）
dashboard.options オブジェクト ダッシュボードのレイアウト、ダッシュボードのレイアウト コンポーネント、ダッシュボードの要素のプロパティと値。options オブジェクトで返されるすべてのプロパティには、dashboard:options:set イベントを使用して更新値を指定できます。

dashboard:run:start

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

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

dashboard:run:complete

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

type: "dashboard:run:complete",
status: "complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://my.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
属性 形式 説明
status 文字列 ダッシュボードとその要素が正常に実行されたかどうかを示します。ダッシュボードとその要素が正常に実行された場合、status は "complete" を返します。それ以外の場合は、status は "error" を返します。実行中のダッシュボードが、ユーザー インターフェースまたは dashboard:stop アクションで停止された場合、status は "stopped" を返します。
dashboard.id Number/String ダッシュボードの ID。
dashboard.title 文字列 ダッシュボードの上部に表示されるタイトル。
dashboard.canEdit ブール値 22.20 を追加 true の場合、ユーザーはダッシュボードを編集できます。
dashboard.url 文字列 相対ダッシュボード URL（パスのみ）
dashboard.absoluteUrl 文字列 ダッシュボードの完全な URL。
dashboard.dashboard_filters オブジェクト ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} です。
dashboard.options オブジェクト DashboardLayout、DashboardLayoutComponent、DashboardElement のプロパティと値。options オブジェクトで返されるすべてのプロパティには、dashboard:options:set アクションを使用して更新値を指定できます。
dashboard.tileStatuses オブジェクト配列 タイル ステータスを表すオブジェクトの配列。オブジェクトのプロパティは次のとおりです。

  • tileId - タイルの ID 番号。
  • status - タイルクエリが正常に実行された場合、status は "complete" を返します。それ以外の場合は、status は "error" を返します。
  • errors - status プロパティが "error" の場合に入力されます。エラーの詳細（エラー メッセージのテキスト、エラーの詳しい説明、エラーが発生したタイルの SQL クエリなど）を提供するオブジェクトの配列。

dashboard:download

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

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

dashboard:edit:start

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

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

dashboard:edit:cancel

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

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

dashboard:save:complete

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

type: "dashboard:save:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  url: "/embed/dashboards/...",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
属性 形式 説明
dashboard.id Number/String ダッシュボードの ID。
dashboard.title 文字列 ダッシュボードの上部に表示されるタイトル。
dashboard.canEdit ブール値 22.20 を追加 true の場合、ユーザーはダッシュボードを編集できます。
dashboard.dashboard_filters オブジェクト ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} です。
dashboard.absoluteUrl 文字列 ダッシュボードの完全な URL。
dashboard.url 文字列 相対ダッシュボード URL（パスのみ）
dashboard.options オブジェクト ダッシュボードのレイアウト、ダッシュボードのレイアウト コンポーネント、ダッシュボードの要素のプロパティと値。options オブジェクトで返されるすべてのプロパティには、dashboard:options:set イベントを使用して更新値を指定できます。

dashboard:delete:complete

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

type: "dashboard:delete:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  url: "/embed/dashboards/...",
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
属性 形式 説明
dashboard.id Number/String ダッシュボードの ID。
dashboard.title 文字列 ダッシュボードの上部に表示されるタイトル。
dashboard.canEdit ブール値 22.20 を追加 true の場合、ユーザーはダッシュボードを編集できます。
dashboard.dashboard_filters オブジェクト ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} です。
dashboard.absoluteUrl 文字列 ダッシュボードの完全な URL。
dashboard.url 文字列 相対ダッシュボード URL（パスのみ）
dashboard.options オブジェクト ダッシュボードのレイアウト、ダッシュボードのレイアウト コンポーネント、ダッシュボードの要素のプロパティと値。options オブジェクトで返されるすべてのプロパティには、dashboard:options:set イベントを使用して更新値を指定できます。

dashboard:tile:start

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

type: "dashboard:tile:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
属性 形式 説明
dashboard.id Number/String タイルが属するダッシュボードの ID。
dashboard.title 文字列 タイルが属するダッシュボードの上部に表示されるダッシュボードのタイトル。
dashboard.canEdit ブール値 22.20 を追加 true の場合、ユーザーはダッシュボードを編集できます。
dashboard.url 文字列 タイルが属する相対ダッシュボード URL（パスのみ）。
dashboard.absoluteUrl 文字列 タイルが属するダッシュボードの完全な URL。
dashboard.dashboard_filters オブジェクト タイルが属するダッシュボードに適用されるフィルタ。このオブジェクトの形式は、{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} です。
tile.id 整数 タイルではなく、イベントの ID 番号。
tile.title 文字列 タイルのタイトル（タイルの上部に表示されます）。
tile.listen オブジェクト このタイルがリッスンするグローバル ダッシュボードのフィルタ。このオブジェクトの形式は、{"Filter Label": "Filter Field", ...} です。

dashboard:tile:complete

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

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

dashboard:tile:download

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

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

dashboard:tile:explore

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

type: "dashboard:tile:explore",
label: 'Explore From Here',
url: '/embed/explore/model/view...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
属性 形式 説明
label 文字列 ボタンのラベル
url 文字列 表示する Explore の相対 URL（パスのみ）。
dashboard.id Number/String タイルが属するダッシュボードの ID。
dashboard.title 文字列 タイルが属するダッシュボードの上部に表示されるダッシュボードのタイトル。
dashboard.canEdit ブール値 22.20 を追加 true の場合、ユーザーはダッシュボードを編集できます。
dashboard.url 文字列 タイルが属する相対ダッシュボード URL（パスのみ）。
dashboard.absoluteUrl 文字列 タイルが属するダッシュボードの完全な URL。
dashboard.dashboard_filters オブジェクト タイルが属するダッシュボードに適用されるフィルタ。このオブジェクトの形式は、{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} です。
tile.id 整数 タイルではなく、イベントの ID 番号。
tile.title 文字列 タイルのタイトル（タイルの上部に表示されます）。
tile.listen オブジェクト このタイルがリッスンするグローバル ダッシュボードのフィルタ。このオブジェクトの形式は、{"Filter Label": "Filter Field", ...} です。

dashboard:tile:view

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

type: "dashboard:tile:view",
label: 'View Original Look',
url: '/embed/look/...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
属性 形式 説明
label 文字列 ボタンのラベル
url 文字列 表示するルックの相対 URL（パスのみ）。
dashboard.id Number/String タイルが属するダッシュボードの ID。
dashboard.title 文字列 タイルが属するダッシュボードの上部に表示されるダッシュボードのタイトル。
dashboard.canEdit ブール値 22.20 を追加 true の場合、ユーザーはダッシュボードを編集できます。
dashboard.url 文字列 タイルが属する相対ダッシュボード URL（パスのみ）。
dashboard.absoluteUrl 文字列 タイルが属するダッシュボードの完全な URL。
dashboard.dashboard_filters オブジェクト タイルが属するダッシュボードに適用されるフィルタ。このオブジェクトの形式は、{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} です。
tile.id 整数 タイルではなく、イベントの ID 番号。
tile.title 文字列 タイルのタイトル（タイルの上部に表示されます）。
tile.listen オブジェクト このタイルがリッスンするグローバル ダッシュボードのフィルタ。このオブジェクトの形式は、{"Filter Label": "Filter Field", ...} です。

dashboard:filters:changed

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

type: "dashboard:filters:changed",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  options: {
    layouts: [
      {
        id: 1,
        dashboard_id: 1,
        type: "newspaper",
        active: true,
        column_width: null,
        width: null,
        deleted: false,
        dashboard_layout_components: [
          {
            id: 1,
            dashboard_layout_id: 1,
            dashboard_element_id: 1,
            row: 0,
            column: 0,
            width: 8,
            height: 4,
            deleted: false
          },
          {
            id: 2,
            dashboard_layout_id: 1,
            dashboard_element_id: 2,
            row: 0,
            column: 8,
            width: 8,
            height: 4,
            deleted: false
          }
        ]
      }
    ],
    elements: {
      1: {
        title: "Total Orders",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          font_size: "medium",
          title: "Total Orders"
        }
      },
      2: {
        title: "Average Order Profit",
        title_hidden: false,
        vis_config: {
          type: "single_value",
          title: "Average Order Profit"
        }
      }
    }
  }
}
属性 形式 説明
dashboard.id Number/String ダッシュボードの ID。
dashboard.title 文字列 ダッシュボードの上部に表示されるタイトル。
dashboard.canEdit ブール値 22.20 を追加 true の場合、ユーザーはダッシュボードを編集できます。
dashboard.url 文字列 相対ダッシュボード URL（パスのみ）
dashboard.absoluteUrl 文字列 ダッシュボードの完全な URL。
dashboard.dashboard_filters オブジェクト ダッシュボードに適用されたフィルタ。このオブジェクトの形式は、{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} です。
dashboard.options オブジェクト ダッシュボードのレイアウト、ダッシュボードのレイアウト コンポーネント、ダッシュボードの要素のプロパティと値。options オブジェクトで返されるすべてのプロパティには、dashboard:options:set イベントを使用して更新値を指定できます。

look:ready

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

type: "look:ready",
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}
属性 形式 説明
look.url 文字列 相対 Look URL（パスのみ）
look.absoluteUrl 文字列 Look の完全な URL

look:run:start

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

type: "look:run:start",
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}
属性 形式 説明
look.url 文字列 相対 Look URL（パスのみ）
look.absoluteUrl 文字列 Look の完全な URL

look:run:complete

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

type: look:run:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}
属性 形式 説明
look.url 文字列 相対 Look URL（パスのみ）
look.absoluteUrl 文字列 Look の完全な URL

look:save:complete

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

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

type: look:save:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  folderid: 123
  }
}
属性 形式 説明
look.url 文字列 相対 Look URL（パスのみ）
look.absoluteUrl 文字列 Look の完全な URL
look.folderid 整数 ルックが保存されているフォルダ ID

look:delete:complete

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

type: look:delete:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
}
属性 形式 説明
look.url 文字列 相対 Look URL（パスのみ）
look.absoluteUrl 文字列 Look の完全な URL

drillmenu:click

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


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

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

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

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

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

drillmodal:download

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

{
type: "drillmodal:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/…",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/…",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
drillExploreUrl: "/embed...",
fileFormat: "pdf"
}
属性 形式 説明
dashboard.id Number/String タイルが属するダッシュボードの ID。
dashboard.title 文字列 タイルが属するダッシュボードの上部に表示されるダッシュボードのタイトル。
dashboard.url 文字列 タイルが属する相対ダッシュボード URL（パスのみ）。
dashboard.absoluteUrl 文字列 タイルが属するダッシュボードの完全な URL。
dashboard.dashboard_filters オブジェクト タイルが属するダッシュボードに適用されるフィルタ。このオブジェクトの形式は、{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} です。
drillExploreUrl 文字列 ダウンロードする相対 Explore URL（パスのみ）。
fileFormat 文字列 データ ダウンロードのファイル形式。

drillmodal:explore

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

type: "drillmodal:explore",
label: "Explore From Here",
url: "/embed/explore/model/view..."
属性 形式 説明
label 文字列 ドリルダウン メニューに表示されるボタンラベル
url 文字列 表示する相対 Explore URL（パスのみ）

explore:ready

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

type: "explore:ready",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}
属性 形式 説明
explore.url 文字列 相対 Explore URL（パスのみ）
explore.absoluteUrl 文字列 完全な Explore URL

explore:run:start

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

type: "explore:run:start",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}
属性 形式 説明
explore.url 文字列 相対 Explore URL（パスのみ）
explore.absoluteUrl 文字列 完全な Explore URL

explore:run:complete

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

type: "explore:run:complete",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}
属性 形式 説明
explore.url 文字列 相対 Explore URL（パスのみ）
explore.absoluteUrl 文字列 完全な Explore URL

explore:state:changed

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

type: "explore:state:changed",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/..."
}
属性 形式 説明
explore.url 文字列 相対 Explore URL（パスのみ）
explore.absoluteUrl 文字列 完全な Explore URL

page:changed

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

type: "page:changed",
page: {
  type: "dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/..."
}
属性 形式 説明
page.type 文字列 移動したばかりのページのタイプ（"dashboard"、"look"、"explore" など）
page.url 文字列 移動したばかりのページの相対 URL（パスのみ）
page.absoluteUrl 文字列 移動したばかりのページの完全な URL

page:properties:changed

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

type: "page:properties:changed",
height: 1000
属性 形式 説明
height 整数 ダッシュボード iframe の高さ（ピクセル単位）

session:tokens

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

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

session:status

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

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

env:client:dialog

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

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

iframe の変更

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

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

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

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

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

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

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

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

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

アクションの概要の表

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

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

アクション リファレンス

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

dashboard:load

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

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

dashboard:run

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

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

dashboard:edit

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

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

dashboard:filters:update

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

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

dashboard:options:set

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

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

{
  type: "dashboard:options:set",
  layouts: [
    {
      id: 1,
      dashboard_id: 1,
      type: "newspaper",
      active: true,
      column_width: null,
      width: null,
      deleted: false,
      dashboard_layout_components: [
        {
          id: 1,
          dashboard_layout_id: 1,
          dashboard_element_id: 1,
          row: 0,
          column: 0,
          width: 8,
          height: 4,
          deleted: false
        },
        {
          id: 2,
          dashboard_layout_id: 1,
          dashboard_element_id: 2,
          row: 0,
          column: 8,
          width: 8,
          height: 4,
          deleted: false
        }
      ]
    }
  ],
  elements: {
    1: {
      title: "Total Orders",
      title_hidden: false,
      vis_config: {
        type: "single_value",
        font_size: "medium",
        title: "Total Orders"
      }
    },
    2: {
      title: "Average Order Profit",
      title_hidden: false,
      vis_config: {
        type: "single_value",
        title: "Average Order Profit"
      }
    }
  }
}
属性 形式 説明
type 文字列 dashboard:options:set 型の使用は、ダッシュボードのレイアウトとダッシュボードの要素のプロパティに新しい値を書き込むことを示します。
layouts オブジェクト dashboard:run:complete イベントの options 属性によって返されるダッシュボードのレイアウト プロパティ。これらは、次のような形式になります。

  • id: "string",
  • dashboard_id: "string",
  • type: "newspaper",
  • active: boolean,
  • column_width: number,
  • width: number
layouts.dashboard_layout_components オブジェクト dashboard:run:complete イベントの options 属性によって返される 1 つ以上のダッシュボードのレイアウト コンポーネント オブジェクト。これらは、次のような形式になります。

  • id: "string",
  • dashboard_layout_id: "string",
  • dashboard_element_id: "string",
  • row: number,
  • column: number,
  • width: number,
  • height: number,
  • deleted: boolean,
elements オブジェクト dashboard:run:complete イベントの options 属性によって返される 1 つ以上のダッシュボードの要素オブジェクト。これらは、次のような形式になります。

id: {

  title: "string",

  title_hidden: boolean,

  vis_config: {

    type: "string", title: "string"

  }

}

dashboard:schedule_modal:open

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

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

dashboard:stop

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

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

look:run

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

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

look:filters:update

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

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

explore:run

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

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

explore:filters:update

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

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

session:tokens:request

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

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

env:host:scroll

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

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