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()
埋め込みビルダーの各メソッドは、埋め込みビルダー自体を返すため、メソッド呼び出しを連結します。それぞれの方法を見ていきましょう。
appendTo()
メソッドは、iframe の親要素を決定します。準備ステップで定義した HTML 要素の ID を渡します。withFrameBorder()
メソッドは iframe の frame-border 属性を設定します。これは、iframe で HTML 属性を定義する方法の 1 つです。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!')
...
このコードサンプルを見てみましょう。
connect()
メソッドを呼び出して Promise を返します。メッセージの送受信メカニズムが初期化された後、この Promise は、埋め込まれた iframe を表す埋め込みオブジェクトに解決されます。- 埋め込みオブジェクトの
send()
メソッドを呼び出して、dashboard:run
アクションを送信します。その他の送信するアクションについては、アクションのリファレンスをご覧ください。 - 初期化中にエラーが発生した場合に備えて、
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 とメッセージを送受信できるようになりました。詳細については、以下のリソースをご覧ください。
- Embed SDK リポジトリのリポジトリから、Looker の埋め込み方法の詳細(特に SSO Embed Looker コンテンツの場合)の詳細が説明されています。
- イベント リファレンス : 利用可能なすべてのイベントとそのプロパティ
- 使用可能なすべてのアクションとそのプロパティのアクション リファレンス
- Looker コンテンツの埋め込みに関するセキュリティのベスト プラクティス