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 の埋め込みビルダーを作成して構成し、埋め込み Looker コンテンツを「構築」します。

SDK を初期化する

まず 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. connect() メソッドを呼び出して Promise を返します。メッセージの送受信メカニズムが初期化された後、この 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 とメッセージを送受信できるようになりました。詳細については、以下のリソースをご覧ください。