埋め込みダッシュボードと Explore のテーマの作成と適用

埋め込みダッシュボードと Explore のテーマのカスタマイズは、Looker で有効にする必要がある機能です。この機能のライセンスを更新するには、Looker アカウント マネージャーにお問い合わせください。

カスタム Look は、埋め込み Look ではサポートされていません。カスタムテーマは、埋め込みダッシュボードと埋め込み Explore でのみ使用できます。

機能の追加に伴い、カスタムテーマのオプションは増え続けています。カスタムテーマのオプションを追加すると、既存のテーマにこの新しいオプションのデフォルト値が割り当てられます。デフォルト値は、Theme Editor を使用して変更できます。新機能を確認するには、下のカスタムテーマの設定セクションを確認するか、テーマの作成 API ドキュメントでテーマでサポートされている設定のリストをご確認ください。

概要

埋め込みダッシュボード、埋め込み Explore のテーマ、および埋め込みダッシュボードのタイルの編集ウィンドウは、[Admin] パネルの [Platform] セクションの [Themes] ページで定義できます。

カスタムテーマを使用して、埋め込まれた Looker ダッシュボードや Explore の外観をカスタマイズできます。テーマを使用して、フォント ファミリー、テキストの色、背景色、ボタンの色、タイルの色などの視覚要素をカスタマイズできます。

たとえば、「ダークモード」を作成して、埋め込みダッシュボードの外観を変更できます。

このページでは、次について説明します。

デフォルトのテーマ

Looker のデフォルト テーマは、インスタンスに自動的に作成され、削除や編集はできません。Looker 管理者が別のテーマをデフォルトとして指定している場合を除き、Looker テーマがデフォルトのテーマとして使用されます。

以下は、ダッシュボード、ダッシュボード タイルの編集ウィンドウ、Looker テーマを使用した Explore の例です。

ダッシュボード:

ダッシュボード編集モードでダッシュボード タイルを編集する

詳細:

テーマの横にある [View] ボタンをクリックするか、テーマのコピーを作成することで表示される Looker のテーマ設定は次のとおりです。

テーマ:

設定名 値 メモ
名前 Looker

全般:

このセクションの設定は、埋め込みダッシュボードと埋め込み Explore の両方に適用されます。

設定名 値 メモ
主な色 #1A73E8 以前のダッシュボードでは、プライマリ ボタンにこの色を使用します。
ダッシュボードでは、メインのボタンやフィルタのコントロールにこの色を使用します。
Explore では、メインのボタン、バナー、アクセントにこの色を使用します。
フォントファミリー Roboto,'Noto Sans JP','Noto Sans CJK KR',##39;Noto Sans アラビア語 UI','Noto Sans Devanagari UI#19 これらのフォントは Looker アプリケーションにより提供され、ブラウザと画像のレンダリングの両方で使用できるため、推奨されます。Looker は、フォント ファミリー リストにある文字をサポートする最初のフォントを使用するため、優先度の高いフォントまたは特殊なフォントを最初に指定する必要があります。Looker は、フォントのバリエーションを「UI」として、利用可能な場合、それを使用して、視覚的コンポーネントの境界内に収まるように文字を少し変更します。
フォントソース なし

ダッシュボード ページ:

設定名 値 メモ
カラーコレクション なし
背景色 #f6f8fa

ダッシュボード タイル:

設定名 値 メモ
タイトルの色 #3a4245
テキストの色 #3a4245
テキスト本文の色 なし
背景色 #ffffff
タイトルの配置 Center 以前のダッシュボードでは使用できません。

以前のダッシュボードのボタンの色:

以前のダッシュボードのみの設定:

設定名 値 メモ
情報ボタンの色 #0087e1
警告ボタンの色 #980c11

ダッシュボードのコントロール:

設定名 値 メモ
Dashboardのタイトルを表示 ○
Filterバーを表示 ○

テーマと埋め込み設定の適用方法

埋め込み設定またはカスタムテーマを使用すると、埋め込みダッシュボードや Explore の外観をデフォルトのテーマから変更できます。埋め込みダッシュボードや Explore を表示するとき、Looker は次の方法で設定を適用します。

  1. デフォルトのテーマの設定から始める
  2. 以前のダッシュボードの歯車メニューの [埋め込み設定を編集] オプションでカスタマイズを適用します（該当する場合）。
  3. URL の theme 引数で指定されたカスタムテーマの設定を適用します（該当する場合）。
  4. _theme URL 引数で指定されたプロパティ（ある場合のみ）を適用します（ダッシュボードのみ）。

各項目は前の項目をオーバーライドします。つまり、埋め込み設定はデフォルトのテーマ設定より優先され、カスタムテーマは埋め込み設定とデフォルトのテーマをオーバーライドします。

ただし、_theme URL 引数の場合は、_theme 引数で指定された要素のみが、他のテーマまたは埋め込み設定の要素をオーバーライドします。他のカスタムテーマ設定と埋め込み設定は、引き続き使用されます。たとえば、埋め込みダッシュボードの URL に _theme={"show_filters_bar":false} 引数を追加すると、埋め込み設定またはカスタムテーマで [フィルタを表示] を有効にしても、フィルタバーは表示されません。ただし、カスタムテーマまたは埋め込み設定の他の設定は引き続き使用されます。

カスタムテーマの作成

カスタムテーマを作成するには、[テーマを追加] をクリックします。

次に、[新しいテーマ] ページで、目的の設定ごとにスタイルと色の仕様を追加します。

テーマのタイトル（一意である必要があります）を除き、すべてのフィールドにはデフォルトのテーマの値が自動的に入力されます。任意の設定を変更できます。以下のセクションで、その方法について説明します。[テーマを保存] をクリックして変更内容を保持し、新しいテーマを保存します。

テーマ

名前: テーマの名前は一意でなければならず、英数字とアンダースコアのみを使用できます。テーマ名にスペースを入力すると、テーマの保存時にスペースがアンダースコアに置き換えられます。

全般

このセクションの設定は、埋め込みダッシュボードと埋め込み Explore の両方に適用されます。

キーカラー: ダッシュボードは、メインのボタンやフィルタ コントロールにこの色を使用します。Explore では、フィールド ピッカー リンクとアイコン、メインボタン、バナー、アクセントにこの色が使用されます。レガシーDashboardでは、この色がメインボタンに使用されます。

フォント ファミリー: フォント ファミリーの名前。このフォントは、タイルタイトル、テキストタイル、ビジュアリゼーションの凡例など、ダッシュボード上のすべてのテキストで使用されます。このフォントは、Explore 内のすべてのテキストにも使用されます。フォントの名前にスペースがある場合は、"Open Sans" のように名前を引用符で囲みます。

  • 一般的なウェブセーフ フォントを使用している場合は、[Font Family] にフォント名を入力し、[Font Source] フィールドは空白のままにします。あまり一般的でないフォントを使用する場合は、[Font Family] フィールドにフォント名を入力し、下の [Font Source] フィールドを使用して、使用するフォントの定義の URL を入力します。

Font Source: カスタム フォント（一般的なウェブセーフ フォントではないフォント）を使用しない場合は、この項目を空白のままにします。フォントソースは、https で始まり、@font-face の src 引数で指定された url 値を指す完全な URL である必要があります。.woff2 ファイルは Internet Explorer 11 でサポートされていないため、ウェブを開くフォント形式（.woff）ファイルを使用することをおすすめします。

  • たとえば、PT Sans Narrow の場合は、[Font Family] に「PT Sans Narrow」と入力してから [Font Source] に「https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff」と入力します。

例を見る

次の例は、カスタムテーマを含む埋め込み Explore を示しています。[Key Color] が #e82042 に、[Font Family] が Verdana に設定されています。

埋め込みの Explore

埋め込み設定で Explore を実行すると、Explore のテキストは指定したフォント ファミリー フォントの Verdana で表示されます。アクセント カラー、ボタン、リンクは、指定されたキーカラー（#e82042）で表示されます。

Explore を実行すると、指定したキーカラーの #e82042 に [Run] ボタンのアウトラインとテキストが表示されます。

編集モードの埋め込みダッシュボードのタイルの編集ウィンドウ

上記の Explore 要素に加えて、ダッシュボード タイルを編集中に、[Key Color] 設定（#e82042）で指定されたシェードと、[Font Family] 設定（Verdana）で指定されたフォントでバナーが表示されます。

ダッシュボード ページ

カラー コレクション: 必要に応じてカラー コレクションを選択できます。カラー コレクションとは、うまく連携する調整パレットのセットです。ダッシュボードにカラー コレクションを割り当てると、すべてのダッシュボードのタイル内のすべてのデータ系列が、コレクション内のパレットに応じて色付けされます。これにより、データ系列がダッシュボード全体にわたって調整されるようになります。

  • 埋め込みテーマにカラーコレクションを割り当てると、以前にタイルに割り当てられているカラーコレクションは、テーマの色コレクションによってオーバーライドされます。ただし、テーマの色コレクションによって、データ系列に割り当てられたカスタム色が上書きされたり、テーブルのビジュアル表示に適用された条件付き書式がオーバーライドされたりすることはありません。

背景色: テキストタイルを除くすべてのタイルの背景の 16 進数のカラーコード。（テキストタイルの背景色はダッシュボードと同じです。これは、ダッシュボード ページの [背景色] で設定します）。

ダッシュボードタイル

タイトルの色: ダッシュボードのタイトルとダッシュボード タイルのタイトルの 16 進数のカラーコード。（この色は、テキストタイルのタイトルには適用されません。その場合は [テキストの色] フィールドを使用します）。

Text Color: ダッシュボードのテキストの 16 進数色コード。ビジュアリゼーションの凡例、単一値ビジュアリゼーションのテキスト、テキストタイルのタイトルが含まれます。

テキストの本文の色: テキストのタイルに表示される本文と字幕テキストの 16 進数色コードです。

背景色: テキストタイルを除くすべてのタイルの背景の 16 進数のカラーコード。（テキストタイルの背景色はダッシュボードと同じです。これは、ダッシュボード ページの [背景色] で設定します）。

タイトルの配置: タイルのタイトルの配置を左、右、中央に設定します。このオプションは、以前のダッシュボードでは使用できません。

以前のダッシュボード ボタンの色

これらの設定は、以前のダッシュボードでのみ使用できます。

情報ボタンの色: [情報ボタンの色] 設定は、将来の機能強化のために予約されています。

警告ボタンの色: 警告状態のボタンの色を示す 16 進数コードです。たとえば、ダッシュボードが更新されるときは、ボタンに「Stop」というラベルでこのカラーコードが使用されます。ボタンのテキストの色は、前述の [テキストの色] の設定によって決まります。

ダッシュボードのコントロール

Display Dashboard Title: ダッシュボードのタイトルを表示するチェックボックスをオンにします。

表示フィルタバー: チェックボックスをオンにして、ダッシュボードの上部にフィルタバーを表示します。

[テーマを保存] をクリックして、テーマの設定を維持します。

テーマのコピー

既存のテーマをコピーするには、テーマのメニューをクリックして [テーマをコピー] を選択します。

テーマのコピーを作成すると、新しいテーマの名前がデフォルトでコピーされたテーマの名前に続いて、&があります。この名前は、英数字とアンダースコアのみを使用する新しい一意の名前に手動で変更し、かっこは必ず削除してください

残りの設定は、新しいテーマを作成する場合と同様に編集できます。設定の説明については、上記のテーマ設定をご覧ください。すべてのテーマ設定を保持するには、必ず [保存] をクリックしてください。

テーマを編集する

Looker のテーマはインスタンスで自動的に作成され、編集できません。（Looker のテーマを変更する場合は、代わりにテーマのコピーを作成してから、そのコピーを編集します）。

その他のテーマでは、関連付けられている [編集] ボタンをクリックして、テーマの設定を更新できます。

この設定は、新しいテーマを作成する場合と同じように編集できます。設定の説明については、上記のテーマ設定をご覧ください。更新を続けるには、[保存] をクリックします。

テーマの削除

Looker のテーマ、または現在デフォルトとして設定されているテーマを除き、任意のテーマを削除できます。テーマを削除するには、テーマのメニューをクリックし、[テーマを削除] を選択します。

テーマを削除すると、そのテーマを URL で指定した埋め込みダッシュボードではデフォルトのテーマが使用されます。

埋め込みダッシュボードと Explore のデフォルト テーマの設定

カスタム Look は、埋め込み Look ではサポートされていません。カスタムテーマは、埋め込みダッシュボードと埋め込み Explore でのみ使用できます。

インスタンスに埋め込まれたダッシュボードと Explore のデフォルト テーマを指定するには、テーマのメニューをクリックし、[デフォルトに設定] を選択します。

デフォルトのダッシュボードは、Looker ダッシュボードの埋め込みダッシュボードと Explore に使用されます。ただし、個々のダッシュボードまたは Explore で別の設定を指定しない限り、デフォルトのテーマが使用されます。テーマや埋め込み設定を埋め込みダッシュボードや Explore に適用する方法について詳しくは、このページのテーマと埋め込み設定の適用方法をご覧ください。

特定の埋め込みダッシュボードと Explore にテーマを適用する

カスタム Look は、埋め込み Look ではサポートされていません。カスタムテーマは、埋め込みダッシュボードと埋め込み Explore でのみ使用できます。

ダッシュボードまたは Explore でデフォルトのテーマ以外のテーマを使用する場合は、埋め込みダッシュボードまたは Explore の URL で別のテーマを指定できます。これを行うには、パラメータ theme= をテーマの名前とともに埋め込み URL の末尾に追加します。たとえば、「赤」というテーマがある場合、埋め込みダッシュボード URL の末尾に theme=Red を追加します。

https://example.looker.com/embed/dashboards/246?theme=red

Explore では、埋め込み Explore URL の末尾に theme=Red を追加します。none https://example.looker.com/embed/explore/model_name/explore_name?theme=red

URL のテーマ要素では、大文字と小文字は区別されないため、theme=Red または theme=red を使用できます。

カスタムテーマ設定は、従来のダッシュボードで指定された埋め込み設定をオーバーライドします。埋め込みダッシュボードにテーマと埋め込み設定を適用する方法について詳しくは、このページのテーマと埋め込み設定の適用方法をご覧ください。

_theme URL 引数を使用して個々のダッシュボード テーマ要素を適用する

URL の _theme 引数を使用して、埋め込みダッシュボードの個々のテーマ要素（tile_background_color、show_title など）をカスタマイズできます。

_theme オブジェクトでサポートされているすべてのプロパティを確認するには、Create Theme API ドキュメントのページで「ThemeSettings&quot」のリストをご覧ください。

_theme URL 引数の形式は次のとおりです。

_theme={"<property>":value}

たとえば、_theme={"show_filters_bar":false} を使用して、埋め込みダッシュボードのフィルタバーを非表示にできます。URL 全体は次のようになります。

https://example.looker.com/embed/dashboards/236?_theme={"show_filters_bar":false}

複数のテーマ プロパティを指定する場合は、カンマを使用します。

_theme={"show_title":false,"show_filters_bar":false,"text_tile_text_color":"blue"}

色の値は引用符で囲み、色の名前または 16 進数のカラーコードで表されます。16 進数コードを使用する場合は、必ず # 記号の URL エンコード バージョン（%23）を使用してください。たとえば、次の URL 引数はいずれも赤色を指定します。

_theme={"title_color":"red","text_tile_text_color":"%23FF0000"}

埋め込みダッシュボードに _theme オブジェクトを使用する際は、次の点を考慮してください。

  • _theme URL 引数で指定された要素は、他のテーマまたは以前のダッシュボードの埋め込み設定で指定された要素の設定よりも優先されます。これにより、テーマの調整や設定の埋め込みに _theme 引数を簡単に使用できるようになります。たとえば、フィルタバーを非表示にするカスタムテーマを使用しているものの、フィルタバーを表示するのに適したダッシュボードが 1 つあるとします。ダッシュボードにカスタムテーマを使用し、埋め込みダッシュボードの URL に _theme={"show_filters_bar":true} 引数を追加すると、そのダッシュボードにフィルタバーを表示できますが、その他のカスタムテーマ設定はすべて保持できます。埋め込みダッシュボードにテーマと埋め込み設定を適用する方法について詳しくは、このページのテーマと埋め込み設定の適用方法をご覧ください。
  • プログラミング スクリプトの場合は、_theme 引数を URL エンコードする必要があります。
  • 埋め込みの以前のダッシュボードまたは埋め込みのダッシュボードを PDF 形式で提供する場合、_theme 引数は適用されません。
  • ダッシュボードを PDF 形式でダウンロードすると、_theme 引数が適用されます。