Looker Marketplace のカスタム ビジュアリゼーションの開発

このページでは、Looker Marketplace に追加して他の Looker ユーザーがアクセスできるカスタムの可視化タイプを作成する方法について説明します。また、Looker の他のお客様が利用できるようにすることなく、プロジェクトで直接カスタム ビジュアリゼーションを作成できます。

Looker Marketplace にコンテンツを送信するには、Looker Partner Network のメンバー、または Looker のお客様である必要があります。

Looker Marketplace は、Looker BlocksTM、アプリケーション、ビジュアリゼーション、その他のプラグインなど、さまざまな種類の Looker コンテンツの検索、デプロイ、管理の中心となる場所です。

Looker Marketplace 機能を有効にすると、Looker のお客様は Looker Marketplace のプラグインをインストールできます。このプラグインには、Looker のネイティブの可視化ライブラリに追加するビジュアリゼーション タイプが含まれます。Marketplace を通じてインストールされた可視化は、Looker チームがサポートしています。

カスタム ビジュアリゼーションを開発し、Looker Marketplace を通じてすべての Looker ユーザーが利用できるようにするには、次の手順を行います。

  1. 可視化
  2. 可視化用の Looker プロジェクトを作成する
  3. Looker プロジェクトを Git リポジトリに push します
  4. 可視化の機能をテストします
  5. Looker に可視化を送信する

ビジュアリゼーション タイプの開発

開発したいビジュアリゼーション タイプを特定します。(このビジュアリゼーションがまだ Marketplace にないか、ネイティブ Looker ビジュアリゼーションとして表示されていないかを確認してください)。

Looker の可視化 API と JavaScript 環境を使用して、JavaScript でカスタム ビジュアリゼーションを作成します。

可視化のための Looker プロジェクトの作成

カスタム ビジュアリゼーションを表す Looker プロジェクトを作成します。プロジェクトには、次のファイルを含める必要があります。

  • ライセンス ファイル: ビジュアリゼーションが配布されているライセンスの一覧。「
    」というテキストで指定します。この Looker ビジュアリゼーションは、ライセンス「...」で配布されます。

  • README.md ファイル: ビジュアル表示の説明、仕組み、追加情報を記述します。

  • JavaScript(.js)ファイル: ビジュアリゼーションの作成に使用した JavaScript コードの要約版が含まれます。Marketplace の場合、プロジェクト内に JS ファイルが含まれるため、適切なバージョニングとパッケージ管理が可能です。

  • マニフェスト(manifest.lkml)ファイル: id(一意の識別子)と label(このビジュアリゼーションの Looker UI に表示されます)を指定します。例:

    constant: vis_id {
        value: "default_id"
        export: override_optional
    }
    constant: vis_label {
        value: "default_label"
        export: override_optional
    }
    visualization: {
        id: "@{vis_id}"
        label: "@{vis_label}"
        file: "my_local.js"
        sri_hash: "my_sri_hash"
        dependencies: []
    }
  • Listings(marketplace.json)ファイル: カスタム ビジュアリゼーションの Marketplace リスティングを設定し、Marketplace での表示の表示方法のラベル、image_uri の場所、可視化のユースケースを説明するタグラインを含めます。また、インストール時にユーザーが入力する Marketplace フィールドの定数を定義します。例:
{
  "label": "Gauge Visualization",
  "category_label": "plug-ins",
  "branding": {
    "image_uri": "https://marketplace-api.looker.com/visualization-screenshots/gauge_icon.png",
    "tagline": "Use the Gauge visualization to display a measure and progress to a goal."
  },
   "constants": {
        "vis_label": {
            "label": "Visualization Label",
            "description": "This label will appear in the visualization selector in the Looker Explore UI."
        },
        "vis_id": {
            "label": "Visualization Id",
            "description": "This must be a unique ID across all visualizations.",
            "value_constraint": "visualization"
        }
    }
}

プロジェクトを Git に push する

一般公開された GitHub リポジトリで可視化用の LookML をホストします。Looker プロジェクトで可視化を行った場合は、次の手順に沿って新しいリポジトリに push します。

  1. 一般公開されている GitHub リポジトリを作成します
  2. Looker プロジェクトのリポジトリ URL を GitHub リポジトリの URL に設定します
  3. Looker の Git プロンプトに従って、コードの検証、commit、デプロイを行います

可視化機能のテスト

新しいビジュアリゼーションを Looker インスタンスの適切な Explore または Look に適用してテストします。

  1. Look または Explore に移動します。
  2. Look の場合は、[Edit] をクリックして Look を編集します。
  3. ビジュアリゼーションのタイプ メニューでその他メニューをクリックして、ビジュアリゼーションのプルダウン リストを開きます。
  4. カスタム ビジュアリゼーションを選択します。
  5. [Save] をクリックして、Look に対する変更を保存します。この変更の影響を受ける可能性があるダッシュボードに注意してください。

Looker により、Looker Marketplace から入手できるビジュアリゼーションに以下の関数が必要になります。

Function 必須
可視化のドリルダウンのサポート
Looker のカラーパレットを継承できる
ブラウザと画面サイズに対する応答性
一貫したフォント ファミリー: font-family: HelveticaArialsans-serif
フォントサイズ
可視化設定パネルの [値ラベル] と [軸ラベル] の切り替え機能
ピボット データの可視化 ○(該当する場合)
updateAsync 関数または is update function を使用したユーザー操作に基づく可視化の更新
明確なエラー メッセージ(例: このビジュアル表示には 1 つのディメンションと 2 つのメジャーが必要です
ビジュアリゼーション設定パネルのすべてのオプションで、ビジュアリゼーションに明らかな変更が加えられる
フィールドの value のフォーマットをデフォルトに設定 ○(該当する場合)
クエリで結果が返されない場合にエラーがスローされる

ビジュアリゼーションを送信して審査を受ける

ビジュアリゼーションの提出の準備が整ったら、Looker Marketplace にコンテンツを送信するの手順に沿って、ビジュアリゼーションの補足ドキュメントを作成し、Looker チームにビジュアリゼーションを送信して審査を受け、Looker Marketplace にビジュアリゼーションを公開します。