Embed SDK を使って Looker を埋め込む方法

1. 始める前に

この Codelab では、Looker Embed SDK を使用して Looker ダッシュボードをウェブページに埋め込みます。一連の SDK メソッドを呼び出して、iframe を自動的に作成して Looker コンテンツを埋め込み、iframe とウェブページ間の通信を設定します。

前提条件

  • 実行中の Looker インスタンスがある
  • ウェブ アプリケーションやウェブページに埋め込む Looker ダッシュボードを用意する
  • JavaScript と JavaScript の Promise について理解する。

学習内容

  • Embed SDK を使用して Looker コンテンツをプライベートに埋め込む方法
  • Embed SDK を使用して、埋め込まれた Looker コンテンツでメッセージ（アクションとイベント）を送受信する方法

必要なもの

  • フロントエンド コードの HTML と JavaScript へのアクセス
  • Looker インスタンス内の管理者埋め込み設定へのアクセス

2. 準備

Embed SDK を使用して埋め込む前に、HTML と Looker インスタンスを準備する必要があります。

埋め込み iframe のコンテナ要素を追加する

ウェブページの HTML 内で div 要素を作成し、id 属性を定義します。

<div id="looker-embed" />

Looker インスタンスで埋め込みのドメインを許可リストに登録する

Looker インスタンスで、埋め込みのドメインを許可リストに登録する必要があります。

埋め込み Looker コンテンツをホストするウェブページのドメインを特定します。ウェブページの URL が https://mywebsite.com/with/embed で、ウェブページのドメインが https://mywebsite.com であるとします。

Looker インスタンスの [管理] セクションで、[埋め込み] ページに移動します。https://your_instance.looker.com/admin/embed

[Embedded Domain Allowlist] フィールドに、埋め込みのドメインを入力します。入力したら、Tab キーを押してドメインがボックスに表示されるようにします。末尾にスラッシュ / を含めないでください。

[更新] ボタンを選択します。

3. 埋め込みを構築する

次に、SDK の埋め込みビルダーを作成して「build」するよう設定します。埋め込み Looker コンテンツのことです。

SDK を初期化する

まず、Looker インスタンスのドメインで SDK をインポートし、初期化します。

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

埋め込みビルダーを作成する

次に、埋め込む Looker ダッシュボードの ID を特定します。ダッシュボードが instance_name.looker.com/dashboard/12345 にある場合、ダッシュボードの ID は 12345 です。

ダッシュボード ID を使用して SDK の createDashboardWithId() メソッドを呼び出して、埋め込みビルダーを作成します。このメソッドは埋め込みビルダーを返します。

LookerEmbedSDK.createDashboardWithId(12345)

埋め込みビルダーを構成してビルドする

次に、埋め込み iframe をビルドするよう指示する前に、埋め込みビルダーを構成しましょう。前のコードサンプルの createDashboardWithId() メソッド呼び出しの直後に、次のコードサンプルを追加します。

  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

埋め込みビルダーの各メソッドは埋め込みビルダー自体を返すため、メソッド呼び出しを連結します。それぞれの方法を見ていきましょう。

  1. appendTo() メソッドにより、iframe の親要素が決まります。先ほど準備のステップで定義した HTML 要素の ID を渡します。
  2. withFrameBorder() メソッドは iframe の frame-border 属性を設定します。これは、iframe で HTML 属性を定義する方法の 1 つです。
  3. build() メソッドで、構成された HTML 属性で iframe を作成する

最終チェック

ここまでの手順で、コードは次のようになります。

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

これで、Embed SDK を使って Looker ダッシュボードをウェブページに埋め込めるようになりました。

4. 埋め込みメッセージの送受信

次は、Embed SDK を使って、埋め込まれた Looker コンテンツでメッセージを送受信する方法を見ていきましょう。アプリケーションが iframe に送信するメッセージを「アクション」と呼び、アプリケーションが iframe から受信したメッセージを「イベント」と呼びます。

イベントを受信する

前のコードに進みましょう。イベントをリッスンするには、build() メソッドを呼び出す前に埋め込みビルダーの on() メソッドを呼び出します。

...
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
...

ここでは、on() メソッドを呼び出して、iframe の作成時に iframe からの dashboard:run:complete イベントにイベント リスナーを設定します。このイベントは、ダッシュボードの読み込みが完了したことを教えてくれます。リッスンする他のイベントのイベント リファレンスを確認します。

送信操作

前のコードをそのまま使用します。iframe にアクションを送信するには、build() メソッドを呼び出してから埋め込みビルダーの connect() メソッドを呼び出して、iframe でメッセージの送受信を初期化します。

...  
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')
...

このコードサンプルを見ていきましょう。

  1. Promise を返す connect() メソッドを呼び出します。メッセージの送受信メカニズムが初期化されると、Promise は埋め込み iframe を表す埋め込みオブジェクトに解決されます。
  2. 埋め込みオブジェクトの send() メソッドを呼び出して、dashboard:run アクションを送信します。その他の送信するアクションについては、アクションのリファレンスをご覧ください。
  3. 初期化中にエラーが発生した場合に備えて、catch() メソッドを追加します。

最終チェック

これまでのステップで、コードは次のようになります。

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
  .build()
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')

これで、埋め込まれた Looker ダッシュボードと通信できるようになりました。

5. その他の情報

これで、Embed SDK を使って、Looker ダッシュボードをプライベートに埋め込み、iframe とメッセージを送受信できるようになりました。詳細については、以下のリソースをご覧ください。