非公開埋め込みを使ってみる

このページでは、非公開埋め込みを設定する方法について説明します。非公開埋め込みのオプションでは、Looker コンテンツを埋め込むために <iframe> HTML 要素を直接管理する必要があります。また、ユーザーがホスト アプリケーションとは別に Looker にログインする必要があります。

この非公開埋め込みのコードの例について説明します。

<iframe
    src="https://instance.looker.com/embed/dashboards/4?Timeframe=14+day"
    width="600"
    height="300"
    frameborder="0">
</iframe>

1. 埋め込みコンテンツの URL を作成する

URL https://instance.looker.com/dashboards/4?theme=red&Timeframe=14+day にある Looker コンテンツの例について考えてみましょう。この Looker コンテンツの URL から、埋め込みコンテンツの URL を作成し、iframe の src 属性を設定します。これらの手順を行う際には、独自の Looker コンテンツの URL を使用できます。

上記のコードサンプルの埋め込みコンテンツの URL は次のとおりです。

https://instance.looker.com/embed/dashboards/4?theme=red&Timeframe=14+day

埋め込みコンテンツの URL は、次の 3 つの部分で構成されます。

  • ホスト名: Looker インスタンスのホスト名
  • パス: /embed で始まる Looker コンテンツの URL パス（クエリの可視化のための追加ステップを含む）
  • パラメータ: フィルタとテーマ設定を指定する URL パラメータ

プロトコルは常に https:// である必要があります。それぞれの部分を詳細に作成しましょう。

パート 1: ホスト名

  1. Looker コンテンツに移動します。Looker コンテンツの URL の例: https://instance.looker.com/dashboards/4?theme=red&Timeframe=14+day
  2. 埋め込みコンテンツの URL のホスト名は instance.looker.com です。

パート 2: パス

埋め込みコンテンツの URL パスは、埋め込んだ Looker コンテンツによって異なります。

クエリの可視化を除くすべての Looker コンテンツの埋め込み

  1. Looker コンテンツに移動します。Looker コンテンツの URL の例: https://instance.looker.com/dashboards/4?theme=red&Timeframe=14+day
  2. Looker コンテンツの URL のパス /dashboards/4 を特定します。
  3. Looker コンテンツの URL のパスに接頭辞 /embed を付けます。埋め込みコンテンツの URL のパスは /embed/dashboards/4 です。

クエリ可視化を埋め込む

  1. クエリのビジュアリゼーションに移動します。URL の例: instance.looker.com/explore/my_model/my_explore?qid=1234567890abcdefghij12
  2. クエリのクライアント ID を特定します。qid パラメータ: 1234567890abcdefghij12 は、クエリと可視化の設定を表すクエリのクライアント ID です。
  3. 埋め込みコンテンツの URL のパスは、/embed/query-visualization/ にクエリのクライアント ID が付加されたものです。埋め込みコンテンツの URL のパスの例は、/embed/query-visualization/1234567890abcdefghij12 です。

パート 3: パラメータ

埋め込みコンテンツの URL パラメータは、埋め込まれたコンテンツのフィルタとテーマを制御します。

フィルタ

  1. Looker コンテンツの URL に移動します。
  2. コンテンツのフィルタを手動で適切に調整します。この例では、生成される Looker コンテンツの URL は https://instance.looker.com/dashboards/4?Timeframe=14+day になります。
  3. 埋め込みコンテンツの URL パラメータは、Looker コンテンツの URL パラメータ（Timeframe=14+day など）です。

この例では、パラメータ Timeframe=14+day がダッシュボードの Timeframe フィルタの値を設定します。

テーマ設定

テーマ設定のガイドで、埋め込みコンテンツの外観を制御する方法を確認します。

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

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

3. iframe を作成する

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

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

埋め込みコンテンツを表示するには、ユーザーが Looker にログインする必要があります。ユーザーがログインしていない場合、iframe では 401 エラーページが表示されます。

ユーザー ログイン オプション

ユーザーは次の 2 つのいずれかの方法で Looker にログインできます。

1. Looker に事前にログインしておく

ユーザーが埋め込みコンテンツを表示するには、同じブラウザで Looker にログインする必要があります。

2. オプションの埋め込み Looker ログイン画面を有効にする

ユーザーがログインしていない場合、iframe に Looker ログイン画面が表示されるように、埋め込みコンテンツの URL パラメータに allow_login_screen=true を追加します。埋め込みコンテンツの URL の例は、次のようになります。https://instance_name.looker.com/embed/dashboards/4?Timeframe=14+day&allow_login_screen=true

注意すべき点が 2 つあります。

  • iframe 埋め込みで Looker のログイン画面を有効にするには、[Looker ログインページの同一オリジン保護] 設定を無効にする必要があります。
  • Looker インスタンスが ID プロバイダを使用したシングル サインオン（SSO）を介してユーザーを認証する場合、ID プロバイダが iframe 内のログイン画面をブロックする可能性があります。その場合は、オプション 1 を使用する必要があります。

Looker では、ユーザーの認証とセッションの保存に Cookie を使用します。ユーザーがホスト アプリケーションとは異なるドメインにある Looker インスタンス埋め込みコンテンツの URL のホスト名にアクセスする場合、ユーザーのブラウザでサードパーティの Cookie を有効にする必要があります。

Firefox や Safari などの一部のブラウザでは、サードパーティの Cookie をブロックする Cookie ポリシーがデフォルトで設定されています。ユーザーのブラウザでサードパーティ Cookie が許可されていない場合、Looker インスタンスにカスタム ドメインを追加して、ホスト アプリケーションと埋め込みコンテンツの URL のホスト名の Looker インスタンスが、同じドメインの下に配置されるようにできます。

5. iframe を操作する

iframe ポストメッセージングが埋め込まれた Looker を使ってみます。

次のステップ

Embed SDK を使用した署名付き埋め込みを開始して、Looker 埋め込みを使用してできることの例を確認する。