dscc-gen を使用してデータポータルのコミュニティ ビジュアリゼーションを作成する

1. はじめに

Google データポータルを使用すると、美しいデータ可視化要素を備えた動的でインタラクティブなダッシュボードを無料で作成できます。コミュニティ ビジュアリゼーションは、データポータルのレポートに統合される JavaScript を使用してカスタム ビジュアリゼーションを作成できるデータポータルの機能です。

学習内容

この Codelab では、以下について学びます。

• Google データポータルのコミュニティ ビジュアリゼーションの仕組み
• コマンドライン テンプレート ツールを使用してコミュニティ ビジュアリゼーションを構築する方法
• JavaScript ビジュアリゼーション ライブラリを使用してコミュニティ ビジュアリゼーションを構築する方法
• コミュニティ ビジュアリゼーションをデータポータルのダッシュボードに統合する方法

必要なもの

この Codelab を完了するには、以下が必要です。

• インターネット、ウェブブラウザ、ターミナル、お気に入りのテキスト エディタへのアクセス
• Google アカウント
• Google Cloud Storage バケットへのアクセス権
• Javascript、Node.js、コマンドラインに精通している

この Codelab は以下を前提としています。

• コミュニティ ビジュアリゼーションをすでに作成している（TODO: 最初のコードラボへのリンク）
• Google Cloud Storage の知識がある

まず、右上隅の をクリックして、このレポートのコピーを作成します。この Codelab を進めるにあたり、このタブは開いたままにしておいてください。

2. 簡単なアンケート

この Codelab を選んだ理由をお聞かせください。

データ可視化全般に関心があります。 データポータルについて詳しく知りたい 独自のコミュニティ ビジュアリゼーションを作成したいデータポータルを別のプラットフォームと統合しようとしています。 Google Cloud ソリューションに関心があります。

この Codelab/チュートリアルをどのように使用する予定ですか？

内容を読んで演習をやり遂げる 全体を通して読むだけ

データポータルの使用経験についてお聞かせください。

聞いたことがない 何であるかは知っているが、使用していない。 いつも使っている。 私はエキスパート ユーザーです。

ご自身のバックグラウンドに最も当てはまるものはどれですか？

デベロッパー ビジネス / データ アナリスト データ サイエンティスト / データ エンジニア 財務アナリスト マーケティング / ソーシャル メディア / デジタル分析のエキスパート ビジネス アナリスト デザイナー その他

次のページに進み、アンケート情報を送信します。

3. dscc-gen を使用したコミュニティ ビジュアリゼーションの開発

dscc-gen

dscc-gen は、コミュニティ由来ビジュアル表示とコミュニティ コネクタ用のテンプレートとワークフローを提供するコマンドライン ツールです。コミュニティ ビジュアリゼーション テンプレートには、動作するビジュアリゼーションと、ビジュアリゼーション コードの変更をすぐに確認できるワークフロー、ビジュアリゼーションを検証、ビルド、デプロイするスクリプトが用意されています。

セットアップ

dscc-gen は、デプロイ スクリプトで gsutil を使用し、npm と webpack を使用してコミュニティ ビジュアリゼーションの JavaScript コードをビルドします。

1. ローカル パソコンに npm をインストールする
2. gsutil クイックスタートに沿って、Google Cloud Storage バケットを設定します。
3. プロジェクトを配置するローカル ディレクトリに移動します。

4. 新しい dscc-gen コミュニティ ビジュアリゼーション プロジェクトを開始する

ターミナルを開いて、次のコマンドを実行します。

npx @google/dscc-gen viz

dscc-gen は、プロジェクト名、「dev」GCS ストレージのロケーション、「prod」ストレージのロケーションの入力を求めます。ロケーションを gs プロトコルを使用した URI（例: gs://my-gs-project/example-dev）として入力します。「ロケーション」は、Cloud Storage バケットまたはそのバケット内のフォルダのいずれかになります。2 つの保存場所は異なる必要があります。このツールでは、入力した値にアクセスできることが検証されます。地域が存在しない場合は、自動的に作成されます。

注: コミュニティ ビジュアリゼーションのデプロイは 2 つ維持する必要があります。1 つは縮小化されていないファイルとキャッシュ保存が無効になっている「dev」デプロイ、もう 1 つは縮小化されたファイルとキャッシュ保存が有効になっている「prod」デプロイです。「dev」デプロイでは最新のファイルが読み込まれ、デバッグが容易になります。一方、「prod」デプロイでは読み込みが高速になります。

dscc-gen が新しいコミュニティ ビジュアリゼーションを作成すると、開始方法の手順が出力されます。ターミナルは次のようになります（入力は太字の斜体）。

$ npx @google/dscc-gen viz
npx: installed 345 in 14.957s
? Project name barchart
? What is your GCS dev directory? gs://community-visualizations-codelab/barchart-dev
? What is your GCS prod directory? gs://community-visualizations-codelab/barchart-prod
Installing dependencies...

Created new community viz: barchart

cd barchart and npm run start to begin working on your viz!

src/ のファイル（具体的には index.js、index.json、index.css）を編集して、可視化を記述します。

dist/ 内のファイルを使用すると、ブラウザでローカルに可視化をプレビューできます。webpack.config.js は、可視化をローカルで実行するために使用されます。README.md は、テンプレート ファイルとコマンドの概要を示します。

5. ビジュアリゼーションをローカルでプレビューする

提案された手順に沿って、ターミナルで次のコマンドを実行します。

cd <folder name>

npm run start

次のようなウェブページがブラウザで開きます。

詳しくは次のステップをご覧ください。

6. [情報] dscc-gen ワークフローの動作方法

dscc-gen 可視化テンプレートには、動作する可視化と、テンプレートの使用方法に関する手順が付属しています。主な機能は次のとおりです。

ローカル メッセージを更新する: テンプレートにはサンプル メッセージが含まれていますが、サポートするユースケースを反映していない可能性があります。作成する可視化を反映したサンプルデータをダウンロードする必要があります。

ローカル開発ワークフロー: ローカルデータを更新するで取得したデータを使用して、ローカルでコードを記述してテストします。

可視化をビルドしてデプロイする: コードをビルドして、Google Cloud Storage バケットにアップロードします。

データポータルでビジュアリゼーションを読み込む: データポータル レポートにビジュアリゼーションを追加します。

注: ここでいう「メッセージ」とは、ds-component がコードで登録したコールバック関数にパラメータとして渡す情報を指します。

7. 構成を定義する

構成ファイルは、ビジュアライゼーションを使用するレポート エディタとビジュアライゼーション開発者との間の契約です。ビジュアリゼーションがデータポータルに読み込まれた後に使用できるオプションを定義します。

この棒グラフの可視化では、構成に 1 つの項目と 1 つの指標、およびレポートの編集者が棒グラフのスタイルを変更できるスタイル要素が含まれます。

src/index.json の内容を次のように置き換えます。すべてのブラケットを含めてください。再入力する場合は、角かっこや中かっこ、ネスト構造の違いに注意してください。

index.json

{
  "data": [
    {
      "id": "concepts",
      "label": "Concepts",
      "elements": [
        {
          "id": "dimension",
          "label": "Dimensions",
          "type": "DIMENSION",
          "options": {
            "min": 1,
            "max": 1
          }
        },
        {
          "id": "metric",
          "label": "Metric",
          "type": "METRIC",
          "options": {
            "min": 1,
            "max": 1
          }
        }        
      ]
    }
  ],
  "style": [
    {
      "id": "barStyling",
      "label": "Bar Styles",
      "elements": [
        {
          "id": "barColor",
          "label": "Bar Color",
          "type": "FILL_COLOR",
          "defaultValue": {
            "color": "#1E555C"
          }
        }
      ]
    }
  ]  
}

8. 更新されたメッセージをダウンロードする

ローカルに保存されたデータを更新するには、次のコマンドを実行します。

npm run update_message

ターミナルは次のようになります。

barchart $ npm run update_message
> @ update message /Users/Code/barchart
> dscc-scripts viz update_message -f object

Copying file://build/index.js [Content-Type=application/javascript]...
Copying file://build/index.css [Content-Type=text/css]...
Copying file://build/manifest.json [Content-Type=application/json]...
Copying file://build/index.json [Content-Type=application/json]...
\ [4 files][ 48.5 KiB/ 48.5 KiB]
Operation completed over 4 objects/48.5 KiB.
Viz deployed to gs://community-visualizations-codelabs/barchart-dev

このコマンドは、受信したデータをローカルの viz に出力するビジュアリゼーションをデータポータルにデプロイします。スクリプトは、ビジュアリゼーションのデプロイ場所を出力します（上記でハイライト表示）。この場所は、データポータルでビジュアリゼーションを読み込むために使用します。

ビジュアリゼーションを読み込むには、先ほどコピーしたレポートを開きます。

1. [レポートを編集] に移動
2. ツールバーの [コミュニティ ビジュアリゼーションおよびコンポーネント] をクリックします。

3. [詳細を見る] をクリックします。

4. [独自のビジュアリゼーションの作成] をクリックします。
5. マニフェスト パス（ターミナルに出力された gs://... の場所）を入力して、[送信] をクリックします。

5. レンダリングされたカードをクリックしてレポートに追加します

可視化では、次のような JSON がレンダリングされます。

右クリックしてすべて選択し、メッセージ全体をコピーします。コピーした内容で src/localMessage.js の内容を置き換えます。ファイルを保存します。

ブラウザでローカルに実行されている可視化は表示されなくなり、コンソールを見るとエラーが表示されます。

9. 棒グラフの JavaScript を作成する

まず、次のコマンドを実行して、d3.js を依存関係として追加します。

npm install d3

次に、src/index.js を次のコードに置き換えます。前のステップからの変更は太字で表示されます。

src/index.js

const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');

// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = true;

const drawViz = (message) => {
  const margin = { left: 20, right: 20, top: 20, bottom: 20 };
  const height = dscc.getHeight() - 10;
  const width = dscc.getWidth();

  const chartHeight = height - margin.top - margin.bottom;
  const chartWidth = width - margin.left - margin.right;

  // remove existing svg
  d3.select("body")
    .selectAll("svg")
    .remove();

  // make a canvas
  const svg = d3
    .select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

  // make an svg for the bar chart
  const chartSvg = svg
    .append("svg")
    .attr("x", margin.left)
    .attr("y", margin.top)
    .attr("width", chartWidth)
    .attr("height", chartHeight);

  // xScale to distribute bars
  const xScale = d3
    .scaleBand()
    .domain(message.tables.DEFAULT.map(d => d.dimension[0]))
    .range([0, chartWidth])
    .paddingInner(0.3);

  // yScale to size bars
  const yScale = d3
    .scaleLinear()
    .domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
    .range([0, chartHeight]);

  // add bars
  const bars = chartSvg
    .append("g")
    .attr("class", "bars")
    .selectAll("rect.bars")
    .data(message.tables.DEFAULT)
    .enter()
    .append("rect")
    .attr("x", d => xScale(d.dimension[0]))
    .attr("y", d => chartHeight - yScale(d.metric[0]))
    .attr("width", xScale.bandwidth())
    .attr("height", d => yScale(d.metric[0]));

  // add text
  const text = svg
    .append("g")
    .selectAll("text")
    .data(message.tables.DEFAULT)
    .enter()
    .append("text")
    .attr(
      "x",
      d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
    )
    .attr("y", height - margin.bottom / 4)
    .attr("text-anchor", "middle")
    .text(d => d.dimension[0]);
};

// renders locally
if (LOCAL) {
  drawViz(local.message);
} else {
  dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}

ローカル サーバーがまだ実行されている場合は、ブラウザを確認します。ローカル開発のウェブページに、次のような棒グラフが表示されます。

10. マニフェストを更新する（省略可）

ビジュアリゼーション マニフェストには、ビジュアリゼーションに関するメタデータと、ビジュアリゼーションの JavaScript、構成、CSS の場所が含まれています。マニフェストの値を更新します。これらの値は、ビジュアリゼーションに関する情報をエンドユーザーに提供するために使用されます。

src/manifest.json を編集して、可視化を記述します。マニフェストの例を以下に示します。

警告: devMode、components[].resource、DEVMODE_BOOL、YOUR_GCS_BUCKET は編集しないでください。これらは、dscc-gen テンプレートが置換するプレースホルダです。

src/manifest.json

{
  "name": "Bar Chart",
  "organization": "[My name]",
  "description": "Bar chart",
  "logoUrl": "https://storage.googleapis.com/community-visualizations-codelabs/barchart/bar_chart.png",
  "organizationUrl": "https://github.com/googledatastudio/",
  "supportUrl": "http://github.com/googledatastudio/community-visualizations",
  "privacyPolicyUrl": "http://github.com/googledatastudio/community-visualizations",
  "termsOfServiceUrl": "http://github.com/googledatastudio/community-visualizations",
  "packageUrl": "",
  "devMode": "DEVMODE_BOOL",
  "components": [
    {
      "id": "Bar chart",
      "name": "Bar chart",
      "description": "My first Community Visualization",
      "iconUrl": "https://storage.googleapis.com/community-visualizations-codelabs/table/table_icon.png",
      "resource": {
        "js": "YOUR_GCS_BUCKET/index.js",
        "config": "YOUR_GCS_BUCKET/index.json",
        "css": "YOUR_GCS_BUCKET/index.css"
      }
    }
  ]
}

11. ビジュアリゼーションをデプロイする

src/index.js で、定数 LOCAL を「false」に変更します。ブラウザのビジュアリゼーションが動作しなくなります。変更されたコード行は太字で示されています。このブール値は、コードで「ローカル」データファイルを使用するか、データポータルから受信したデータを使用するかを設定します。

src/index.js (abridged)

const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');

// change this to 'true' for local development
// change this to 'false' before deployment
export const LOCAL = false;

const drawViz = (message) => {...}

ターミナルで次のコマンドを実行します。

npm run build:dev
npm run push:dev

build:dev コマンドは、JavaScript の依存関係を非最小化出力にバンドルし、マニフェストの値を置き換えて、キャッシュ保存を無効にし、以前に構成した「dev」バケットを指すようにします。

push:dev コマンドは、可視化リソースをステップ 1 で構成した「dev」バケットにアップロードし、バケットのロケーションをコンソールに出力します。

データポータル レポートを更新します。棒グラフが表示されます。プロパティ パネルでデータとスタイルのオプションを変更してみてください。データを変更すると、バーも変更されます。ただし、バーの色スタイルの選択ツールはまだ機能しません。

12. レポート エディタの色の選択を棒グラフで使用する

コードをローカルで編集するには、まず src/index.js の定数 LOCAL 変数を true に更新します。次に、styleVal() という新しい関数を追加し、drawViz() のコードを更新します。src/index.js は次のようになります。

src/index.js

const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');

// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = false;

// parse the style value
const styleVal = (message, styleId) => {
  if (typeof message.style[styleId].defaultValue === "object") {
    return message.style[styleId].value.color !== undefined
      ? message.style[styleId].value.color
      : message.style[styleId].defaultValue.color;
  }
  return message.style[styleId].value !== undefined
    ? message.style[styleId].value
    : message.style[styleId].defaultValue;
};

const drawViz = message => {
  const margin = { left: 20, right: 20, top: 20, bottom: 20 };
  const height = dscc.getHeight() - 10;
  const width = dscc.getWidth();

  const chartHeight = height - margin.top - margin.bottom;
  const chartWidth = width - margin.left - margin.right;

  // remove existing svg
  d3.select("body")
    .selectAll("svg")
    .remove();

  // make a canvas
  const svg = d3
    .select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

  // make an svg for the bar chart
  const chartSvg = svg
    .append("svg")
    .attr("x", margin.left)
    .attr("y", margin.top)
    .attr("width", chartWidth)
    .attr("height", chartHeight);

  // xScale to distribute bars
  const xScale = d3
    .scaleBand()
    .domain(message.tables.DEFAULT.map(d => d.dimension[0]))
    .range([0, chartWidth])
    .paddingInner(0.3);

  // yScale to size bars
  const yScale = d3
    .scaleLinear()
    .domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
    .range([0, chartHeight]);

  // get the user-selected bar color
  let barColor = styleVal(message, "barColor");

  // add bars
  const bars = chartSvg
    .append("g")
    .attr("class", "bars")
    .selectAll("rect.bars")
    .data(message.tables.DEFAULT)
    .enter()
    .append("rect")
    .attr("x", d => xScale(d.dimension[0]))
    .attr("y", d => chartHeight - yScale(d.metric[0]))
    .attr("width", xScale.bandwidth())
    .attr("height", d => yScale(d.metric[0]))
    .attr("fill", barColor);

  // add text
  const text = svg
    .append("g")
    .selectAll("text")
    .data(message.tables.DEFAULT)
    .enter()
    .append("text")
    .attr(
      "x",
      d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
    )
    .attr("y", height - margin.bottom / 4)
    .attr("text-anchor", "middle")
    .attr("fill", barColor)
    .text(d => d.dimension[0]);
};

// renders locally
if (LOCAL) {
  drawViz(local.message);
} else {
  dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}

src/index.js を保存して、ローカル ブラウザ セッションに戻ります。ローカルで実行し、再度 const LOCAL を false に変更します。

更新したファイルを Google Cloud Storage にアップロードするには、次のコマンドを実行します。

npm run build:dev
npm run push:dev

データポータル レポートを更新します。これで、バーの色を変更できるようになります。

13. 本番環境のデプロイ

本番環境のデプロイ

可視化に問題がなければ、src/index.js の const LOCAL が false になっていることを確認してから実行します。

npm run build:prod
npm run push:prod

これにより、ファイルが「prod」GCS バケットの場所にデプロイされます。また、キャッシュ保存が有効になり、バンドルされた JavaScript が適切に最小化されます。

以前と同様に、デプロイの場所がコンソールに表示されます。この「マニフェスト パス」を使用して、データポータル レポートに「prod」ビジュアリゼーションを読み込みます。

おめでとうございます！これで、dscc-gen ツールを使用して最初のコミュニティ ビジュアライゼーションを作成しました。

14. 次のステップ

可視化を拡張する

• ビジュアリゼーションにインタラクションを追加する
• 利用可能なスタイル要素の詳細を確認し、可視化にスタイルを追加します。

コミュニティ ビジュアリゼーションをさらに活用する

• dscc ヘルパー ライブラリ、マニフェスト、構成ファイルのリファレンスを確認します。
• コミュニティ ビジュアリゼーション ギャラリーにビジュアリゼーションを送信します。
• データポータル用のコミュニティ コネクタ を構築します。

参考情報

以下に示すさまざまなリソースは、この Codelab で取り上げた題材を掘り下げるのに役立ちます。

リソースの種類	ユーザー機能	デベロッパー機能
ドキュメント	ヘルプセンター	デベロッパー向けドキュメント
ニュースと最新情報	データポータル > [User Settings] で登録します。	デベロッパー メーリング リスト
質問する	ユーザー フォーラム	Stack Overflow [google-data-studio]データポータルのデベロッパー向けフォーラム
動画	YouTube でのデータポータル	近日提供予定
例	レポート ギャラリー	オープンソース リポジトリ