表示されているのは Looker のドキュメントです。Looker Studio のドキュメントについては、https://support.google.com/looker-studio をご覧ください。

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

このページでは、非公開埋め込みを設定する方法について説明します。非公開埋め込みのオプションでは、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: ホスト名

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

注: ホスト名にはポート番号が含まれます（存在する場合）。例: instance.looker.com:9999

パート 2: パス

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

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

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

クエリ可視化の埋め込み

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

パート 3: パラメータ

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

フィルタ

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

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

テーマ設定

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

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

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

3. iframe を作成する

ホストアプリケーションに iframe 要素を作成します。
src 属性を埋め込みコンテンツの URL に設定します。
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 を使用する必要があります。

ユーザーブラウザの Cookie ポリシー

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

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

5. iframe を操作する

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

次のステップ

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