dscc-gen を使用してビジュアル表示を記述する時間を短縮する

コミュニティ由来ビジュアル表示で変更を確認するための一般的なワークフローは、ファイルを Google Cloud Storage(GCS)にアップロードしてから、データポータル レポートを更新することですが、この場合、変更が確認できるまでにある程度時間がかかります。dscc-gen を使用すると、ワークフローでビジュアル表示コードの変更をすぐに確認できるため、コミュニティ由来ビジュアル表示を記述する時間を短縮できます。

開始する前に、npm 5.2.0 以降gsutil がインストールされていることを確認してください。次のコマンドを実行します。

npx @google/dscc-gen viz

初回設定

dscc-gen にはデフォルトのローカル データセットが付属していますが、ビジュアル表示したいデータではない可能性があります。必要に応じてこのデータセットを更新してください。手順は次のとおりです。

  1. src/index.json設定を更新します。
  2. npm run update_message を実行します。これにより、ビジュアル表示が dev バケットにデプロイされ、コピーしやすい形式でメッセージが表示されます。
  3. 新しいレポートを作成し、ビジュアル表示するデータのデータセットに接続します。
  4. コンポーネント ID として dev バケットを使用して、コミュニティ由来ビジュアル表示を追加します。
  5. ビジュアル表示の内容を scripts/data/localData.js にコピーします。このデータは、ローカルで開発するときに使用します。

スクリプト

次のスクリプトは、dscc-gen で作成されたビジュアル表示プロジェクトに使用できます。

コマンド 処理
npm run start ローカル サーバーを起動し、ビジュアル表示をプレビューします。
npm run update_message objectFormat を使用してメッセージを更新します
npm run build:dev キャッシュを無効にして、./src からファイルを構築し、./build にファイルを生成します。
npm run push:dev ファイルを build から dev バケットにコピーします。
npm run build:prod キャッシュを有効にして、./src からファイルを構築し、./build にファイルを生成します。
npm run push:prod ファイルを build から prod バケットにコピーします。

update_message コマンドはデフォルトの objectFormat に戻します。tableFormat を使用するには、package.jsonupdate_message スクリプトのパラメータを -f object から -f table に編集します。

Codelab

ツールの使用方法については、dscc-gen の Codelab をご覧ください。

dscc-gen の Codelab