Technical Blog テクニカルブログ
  1. HOME
  2. テクニカルブログ
  3. 簡単!Looker 埋め込みダッシュボードの設定方法をご紹介

簡単!Looker 埋め込みダッシュボードの設定方法をご紹介

投稿者:鈴木

目次

1.はじめに
2.Looker 埋め込みダッシュボードとは?
3.ダッシュボードを埋め込んでみる
4.埋め込みダッシュボードを確認する
5.まとめ

1.はじめに

みなさんLookerで他サービスにLooker画面を埋め込めることはご存じでしょうか?
Looker画面を埋め込みできることは知っているけど、いまいちハードルが高いな、、と思われる方も多いと思いますが、実は設定自体とても簡単です!
Lookerは拡張性が高く、埋め込み・API・OEM等様々な選択肢がありますが、今回は埋め込みダッシュボード(プライベート埋め込み)についてご紹介します。
※別のブログにてAPIやOEMについても投稿しているのでぜひご覧ください!

2.Looker 埋め込みダッシュボードとは?

LookerダッシュボードやデータをHTML形式のウェブページ、ポータル、アプリケーションのiframeに埋め込むことができ、用途に応じた埋め込み形式を選択可能です。
Lookerの埋め込みダッシュボードには主に以下3つの種類があります。

  1. 公開埋め込み
  2. プライベート埋め込み
  3. 署名付き埋め込み

それぞれの概要を以下にまとめました。

①公開埋め込み

  • Lookerの可視化データやグラフをウェブサイトの公開ページに表示します。
  • HTMLタグを使って簡単に埋め込むことができます。
  • URLを知っている人なら誰でもアクセスできます。URLに秘密のトークンが含まれているけれど、公開ページなので、特別な認証は不要です。

②プライベート埋め込み

  • Lookerのダッシュボードを社内用途や特定のメンバーのみに表示します。
  • 画面を見るにはLookerにログインが必要です。
  • 認証されたユーザーだけがアクセスできます。URL自体は有効ですが、ログインが求められます。

③署名付き埋め込み

  • Lookerのデータを安全に特定のユーザーにのみ閲覧させます。
  • 専用のURLに署名をつけます。これにより、ユーザーはLookerに直接ログインすることなく、独自のシステムを通じて認証されます。
  • より複雑で強力な認証を提供し、必要な情報だけを特定のユーザーに見せることができます。

これらの方法を使い分けることで、Lookerのダッシュボードやデータを、目的や閲覧者のセキュリティレベルに合わせて適切に表示できます。

参考:公式ドキュメント

3.ダッシュボードを埋め込んでみる

今回は「2. プライベート埋め込み」の設定方法をご紹介します。
冒頭でもお伝えしましたが、設定はとても簡単です!

[設定の流れ]

  1. 埋め込みURLの生成
  2. 埋め込みコンテンツの URL をテストする
  3. iframe を作成する
  4. ユーザー アクセスの問題を検討する

プライベート埋め込みではユーザーにLookerログイン、Google OAuth、または OpenID Connect を使用して認証するよう要求できます。
ユーザーが認証されていない場合、エラーメッセージを表示するか、ログイン画面を表示します。また、セッションについてはLooker管理者>セッションでの設定が適用されます。

①埋め込みURLの生成

埋め込み用のURLを生成します。
埋め込みたいコンテンツ(ダッシュボードやLook等)にアクセスします。
今回はダッシュボードを例に挙げます。

ダッシュボードを開いたら、画面右上の3ドットメニューから、「埋め込みURLの取得」をクリックします。


プライベート埋め込み画面には次の要素が含まれます。

1.[コンテンツのURL] :完全な非公開の埋め込み URL が表示されます。

2.[ダッシュボード 件のURLにテーマを適用] :ダッシュボードまたは Explore の埋め込み URL を生成していて、インスタンスでカスタムテーマが有効になっている場合、埋め込み URL に追加するテーマを選択できます。そのテーマは、埋め込みダッシュボードまたは Explore が表示される際に適用されます。
 →このインスタンスでは有効にしていないため選択できません

3.[現在のパラメータを URL に含める]: スイッチを使用すると、フィルタ値などの現在のパラメータを埋め込み URL に適用するかどうかを選択できます。有効になっている場合、これらのパラメータは埋め込みコンテンツが表示される際に適用されます。
 →用途に合わせて適切に選択します

4.[リンクをコピー] :ボタンを選択して、埋め込み URL 全体をクリップボードにコピーします。
 →URLが問題ないかブラウザ等に貼り付けて、埋め込みコンテンツの動作と表示をプレビューできます

埋め込みURLの生成方法は以上です!
あとはこのURLを使用して、コンテンツをiframeに配置します。

②埋め込みコンテンツの URL をテストする

ブラウザで埋め込みコンテンツの URL を開き、埋め込みコンテンツの動作と外観をプレビューします。

③iframe を作成する

1.ホスト アプリケーションに iframe 要素を作成します。
2.src 属性を埋め込みコンテンツの URL に設定します。
3.width、height などの属性を、埋め込み Looker コンテンツを最適に表示するために必要な属性として定義します。

④ユーザー アクセスの問題を検討する

プライベート埋め込みはLookerへのログインが必要になります。

2つのいずれかの方法でLookerにログインします。

  1. Lookerに事前にログインしておく:同じブラウザで Looker にログインする
  2. オプションの埋め込み Looker ログイン画面を有効にする:埋め込み画面にLookerのログイン画面を表示させLookerにログインする

「②オプションの埋め込み Looker ログイン画面を有効にする」の方法について記載します。

下記パラメータを追加すると、まだログインしていないユーザーに対してログイン画面を表示することができます。

allow_login_screen=true

例)<iframe src="https://instance_name.cloud.looker.com/embed/looks/4?allow_login_screen=true"></iframe>

このパラメータを追加しない場合、まだログインしていないユーザーには401エラーが表示されるので、追加したほうが親切ですね。

注意点が以下2つあります。

1.[Looker ログインページの同一オリジン保護] 設定を無効
2.ID プロバイダを使用したシングル サインオン(SSO)を介してユーザーを認証する場合、ログイン方法は「Lookerに事前にログインしておく」を使用する。

「1.[Looker ログインページの同一オリジン保護] 設定を無効」については、Looker ログインページの同源保護を使用している場合(管理者>プラットフォーム>埋め込み ページの「Same-Origin Protections for Looker Login Pages」)、プライベート埋め込み用のログイン画面を有効にできない場合があります。
ここはデフォルトだとEnabledだったので、Disabledに変更する必要があります。

設定は以上です。

参考:公式ドキュメント

4.埋め込みダッシュボードを確認する

埋め込んだダッシュボードを確認します。
埋め込んだサイトにアクセスします。下記はLookerにすでにログインしている状態なので、ダッシュボードが表示できています。

Lookerにログインできていない場合だと、ログイン画面が表示されます。
(Google OAuthを適用している場合の画面です)

ご参考までに、パラメータを追加していない場合はこのような画面です。

5.まとめ

Lookerの埋め込みダッシュボードについていかがでしたか?私も試してみるまでは少しハードルが高かったのですが、Looker側での設定はほぼなく簡単に設定ができました!公式ドキュメントにはその他の設定方法やベストプラクティス等も掲載されているので参考にしていただければと思います。

新しい画面や機能が増えることを嫌がるユーザーもいるかと思いますが、すでに社内で使っている画面に埋め込みダッシュボードを使うことで普段の業務に簡単に埋め込むことができます。
Lookerは埋め込み、OEM、APIなど拡張性があることが魅力的なポイントの一つで、お客様の既存の業務に溶け込ませるだけでなくマネタイズや付加価値提供による満足度向上にもつなげていけますね!

みなさまの参考になれば幸いです。

ページのトップへ