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 を初期化する

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

// Import the Embed SDK as LookerEmbedSDK

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

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

次に、埋め込む Looker ダッシュボードの ID を特定します。ダッシュボードの URL が 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() メソッドを呼び出して iframe でのメッセージの送受信を初期化した後、埋め込みビルダーの connect() メソッドを呼び出します。

...  
  .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 からメッセージを送受信できるようになりました。詳細については、以下のリソースをご覧ください。