コミュニティ ビジュアリゼーションで変更を確認するための一般的なワークフローは、ファイルを GCS にアップロードしてから Looker Studio レポートを更新することです。この場合、変更が確認できるまでにある程度時間がかかります。dscc-gen を使用すると、ワークフローでビジュアリゼーション コードの変更をすぐに確認できるため、コミュニティ ビジュアリゼーションを記述する時間を短縮できます。
開始する前に、npm 5.2.0 以降と gsutil がインストールされていることを確認してください。次のコマンドを実行します。
npx @google/dscc-gen viz
初回設定
dscc-gen にはデフォルトのローカル データセットが付属していますが、ビジュアル表示したいデータではない可能性があります。必要に応じてこのデータセットを更新してください。手順は次のとおりです。
src/index.jsonで設定を更新します。npm run update_messageを実行します。これにより、ビジュアリゼーションがdevバケットにデプロイされ、コピーしやすい形式でメッセージが表示されます。- 新しいレポートを作成し、ビジュアル表示するデータのデータセットに接続します。
- コンポーネント ID として
devバケットを使用して、コミュニティ ビジュアリゼーションを追加します。 - ビジュアル表示の内容を
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.json の update_message スクリプトのパラメータを -f object から -f table に編集します。
Codelab
ツールの使用方法については、dscc-gen の Codelab をご覧ください。
