Looker には、組み込みのビジュアリゼーション タイプの堅牢なリストが含まれており、さまざまな方法でデータをグラフ化できます。Looker の組み込みのビジュアリゼーション タイプに含まれていないタイプのグラフが必要な場合は、Looker インスタンスにカスタムの JavaScript ビジュアリゼーションを追加するためのいくつかの方法が用意されています。
- LookML プロジェクトのマニフェスト ファイルに
visualizationパラメータを追加して、LookML プロジェクトに直接カスタム ビジュアリゼーションを追加します。詳しくは、visualizationパラメータのドキュメント ページをご覧ください。 - Looker Marketplace からビジュアリゼーションをインストールします。Marketplace 機能を有効にすると、Looker Marketplace のビジュアリゼーション パッケージをインストールできます。
- Looker のカスタム ビジュアリゼーション リポジトリからカスタム JavaScript ビジュアリゼーションをインストールして管理するには、Looker の [Admin] メニューの [Platform] セクションにある [Visualizations] ページを使用します。
このページでは、Looker の [Admin] パネルの [Visualizations] ページを使用してカスタムの JavaScript ビジュアリゼーションを追加する方法について説明します。
カスタム ビジュアリゼーションのリストの表示
ダウンロードしたビジュアライゼーションの全機能を確保するには、セルフホスト型デプロイの管理者が、適切な Chromium レンダラをインストールしておく必要があります。
Looker の [Admin] メニューの [Platform] セクションにある [Visualizations] ページに、Looker インスタンスに追加されたすべてのカスタム ビジュアリゼーションが一覧表示されます。
このリストには次の列があります。
- ID: カスタム ビジュアライゼーションに割り当てられた一意の ID。この値は、JavaScript コード、または Admin ページを使用してビジュアリゼーションを追加または編集するか、LookML プロジェクト マニフェスト ファイルを使用してビジュアリゼーションを追加するときに、ビジュアリゼーションの
idパラメータで割り当てられます。 - ラベル: Looker のビジュアリゼーション メニューでビジュアリゼーションの種類に指定した名前。この値は、管理ページを使用してビジュアリゼーションを追加または編集するか、LookML プロジェクト マニフェスト ファイルを使用してビジュアリゼーションを追加するときに、ビジュアリゼーションの
labelパラメータで割り当てられます。 - メイン: ビジュアリゼーションのメイン JavaScript コードの URI。この値は、管理ページを使用してビジュアリゼーションを追加または編集するか、LookML プロジェクト マニフェスト ファイルを使用してビジュアリゼーションを追加するときに、ビジュアリゼーションの
urlパラメータで割り当てられます。 - アクション: ビジュアリゼーションの構成を編集または削除するボタン。LookML プロジェクトのマニフェスト ファイルを使用して追加されたビジュアリゼーションでは、これらのボタンは表示されません。これらのビジュアリゼーションを編集するには、LookML プロジェクトのマニフェスト ファイルに移動し、
visualizationパラメータを直接編集します。
カスタム ビジュアリゼーションのソース
カスタマイズして Looker インスタンスに追加するビジュアリゼーションは、次のようなさまざまなソースから取得できます。
- Looker は、こちらの Looker GitHub ページで、一般公開用のカスタム ビジュアリゼーション ライブラリを管理しています。Looker のビジュアリゼーション API を使用して独自のビジュアリゼーション タイプを作成する手順については、こちらの Looker GitHub ページをご覧ください。
- スタンドアロンの Looker Marketplace。ここでは、ビジュアリゼーション(プラグイン)を検索して、そのソースコードにアクセスできます。
- Looker インスタンスからアクセスできる Looker Marketplace。この Marketplace から、ビジュアリゼーションを閲覧して Looker インスタンスに直接インストールできます。Looker Marketplace からビジュアリゼーションをインストールする方法について詳しくは、Looker Marketplace の使用に関するドキュメント ページをご覧ください。
新しいカスタム ビジュアリゼーションの追加
インスタンスに追加するビジュアリゼーションがわかったら、Looker の [管理者] メニューの [プラットフォーム] セクションにある [ビジュアリゼーション] ページを使用して、[ビジュアリゼーション] ボタンを選択して、カスタム ビジュアリゼーションを追加できます。
Looker に [New Visualization] ページが表示されます。新しいビジュアリゼーションを追加するには、次の手順を行います。
[ID] フィールドに、ビジュアリゼーション JavaScript で定義されたビジュアリゼーションの一意の ID を入力します。
[ラベル] フィールドに、ビジュアリゼーションの名前を入力します。Looker は、この名前を Explore の Looker ビジュアリゼーション メニューに表示します。
[Main] フィールドに、ビジュアリゼーションのメイン JavaScript ファイルの URI を入力して、Looker が JavaScript コード リポジトリを指すようにします。
カスタム ビジュアリゼーション コードをホストするサイトで検証にサブリソース整合性(SRI)ハッシュを使用する場合は、[SRI Hash] フィールドに SRI ハッシュを入力します。このフィールドは [詳細オプション] の下にあります。Looker のカスタム ビジュアリゼーション ホストでは SRI ハッシュを使用しません。
[Dependencies] フィールドに、ビジュアリゼーション JavaScript が依存する、他のファイルの URI を入力し、[Add] をクリックします。複数の URI をカンマで区切って入力するか、複数の URI を 1 つずつ追加します。[Dependencies] フィールドは、[Advanced options] の下にあります。
[保存] を選択します。
ビジュアリゼーションが追加されると、Explore のビジュアリゼーション メニューにラベル付けたとおりに表示されます。新しいビジュアリゼーション タイプは、Looker の既存のビジュアリゼーション タイプと同じように使用できます。
ビジュアリゼーション メニューからカスタム ビジュアリゼーションを表示するには:
ビジュアリゼーション メニューバーのその他アイコン(
...)を選択して、カスタム ビジュアリゼーションにアクセスします。ビジュアリゼーションを選択すると、ビジュアリゼーションのメニューバーにビジュアリゼーションの名前が表示されます。
カスタム ビジュアリゼーションの編集
既存のビジュアリゼーションを編集するには、ビジュアリゼーションの右側にある [編集] ボタンを選択します。Looker では、ビジュアリゼーションを追加する場合と同じページが表示されますが(新しいカスタム ビジュアリゼーションの追加を参照)、関連情報はすでに入力されています。必要な変更を行い、[保存] をクリックします。
カスタム ビジュアリゼーションの削除
ビジュアリゼーションを削除するには、Looker の [管理者] メニューの [プラットフォーム] セクションにある [ビジュアリゼーション] ページで、ビジュアリゼーションの右側にある [削除] ボタンを選択してから、確認ボックスで [OK] をクリックします。
ビジュアリゼーションを削除すると、Looker から削除されますが、ビジュアリゼーションの外部コード リポジトリに影響はありません。
ビジュアリゼーションを削除すると、そのビジュアリゼーション タイプを使用する Look やダッシュボードが無効になります。この問題を解決するには、削除したビジュアリゼーションと同じビジュアリゼーション ID を再度追加します。
トラブルシューティング
カスタム ビジュアリゼーションは、コミュニティがサポートする取り組みです。Looker のサポートチームは、カスタム ビジュアリゼーションまたはカスタム ビジュアリゼーション コードに関連する問題のトラブルシューティングを行いません。バグの追跡とクローズには、カスタム ビジュアライゼーションのリポジトリにある GitHub の問題を使用するか、カスタム ビジュアライゼーションに関するハウツー投稿、会話、ヒントについて Looker コミュニティをご覧ください。
PDF または PNG のエクスポートでカスタムの可視化が空白になる
アウトバウンド インターネット アクセスがない Looker(Google Cloud コア)プライベート接続インスタンスでは、PDF または PNG ダウンロードのカスタム可視化が空白で表示されます。この問題は、アウトバウンド アクセスが制限されている場合に、Chromium レンダラがパブリック コンテンツ配信ネットワーク(CDN)でホストされている外部 JavaScript 依存関係(D3 や jQuery など)を取得できないために発生します。
この問題を解決するには、次のいずれかのワークアラウンドを使用します。
- LookML プロジェクトで依存関係をバンドルする:
- 必要な外部依存関係の
.jsファイルをダウンロードします。 - 未加工の依存関係コードをコピーして、カスタム可視化の
.jsファイルの先頭に貼り付けます。 - バンドルされた
.jsファイルを LookML プロジェクトに保存します。 dependenciesまたはurlの外部 URL の代わりにfileパラメータを使用して、ローカル ファイルを指すようにmanifest.lkmlファイルを更新します。- Looker が依存関係をローカルで提供するように、変更を本番環境にデプロイします。
- 必要な外部依存関係の
- Private Service Connect のアウトバウンド接続を構成する: Private Service Connect を使用するインスタンスの場合は、インスタンスが外部サービスとパブリック CDN にアクセスできるように、アウトバウンド(サウスバウンド)接続を構成します。
レンダラの問題のトラブルシューティングについて詳しくは、Chromium レンダラのトラブルシューティングをご覧ください。