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

コミュニティ ビジュアリゼーションの変更を確認する一般的なワークフローは次のとおりです。 ファイルを GCS にアップロードしてから、Looker Studio レポートを更新します。この場合、変更が確認できるまでにある程度時間がかかります。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