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

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

Looker Marketplace にコンテンツを送信するには、Looker パートナー ネットワークのメンバーまたは Looker のお客様である必要があります。

Looker Marketplace では、Looker Blocks™ やアプリケーション、ビジュアリゼーション、その他のプラグインなど、さまざまな種類の Looker コンテンツの検索、デプロイ、管理を一元的に行うことができます。

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

カスタム ビジュアリゼーションを開発し、Looker Marketplace 経由で Looker のすべてのお客様に提供するには、次の手順で作業を進めます。

  1. ビジュアリゼーションを開発する
  2. ビジュアリゼーション用の Looker プロジェクトを作成する
  3. Looker プロジェクトを Git リポジトリに push する
  4. ビジュアリゼーションの機能をテストする
  5. ビジュアリゼーションを Looker に送信する

ビジュアリゼーション タイプを開発する

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

JavaScript 環境で Looker Visualization API を使用して、JavaScript でカスタム ビジュアリゼーションを開発します。

ビジュアリゼーション用 Looker プロジェクトを作成する

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

  • LICENSE ファイル: 可視化が配布されているライセンスの一覧。次の文を使用します。

    This Looker visualization is distributed with the following license:...

  • 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: []
    }
  • リスティング(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-familyHelveticaArialsans-serif あり
フォントサイズの設定 あり
ビジュアリゼーション構成パネルで値ラベル軸ラベルを切り替える機能 あり
ピボットデータのビジュアリゼーション あり(該当する場合)
updateAsync 関数または is update function を使用したユーザーのインタラクティブ性に基づくビジュアリゼーションの更新 あり
明確なエラー メッセージ(例: このビジュアリゼーションには 1 つのディメンションと 2 つのメジャーが必要です あり
ビジュアリゼーション構成パネルのすべてのオプションが、ビジュアリゼーションに明らかな変更を加える あり
フィールドの value 形式をデフォルトで使用する あり(該当する場合)
クエリで結果が返されない場合にエラーがスローされる あり

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

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