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

このページでは、非公開埋め込みを設定する方法について説明します。非公開埋め込みのオプションでは、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 エラーページが表示されます。

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

ユーザーは次のいずれかの方法で 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 を使用した SSO 埋め込みを開始して、Looker 埋め込みを使用してできることの例を確認する。