1. はじめに
データポータルを使用すると、美しいデータ ビジュアリゼーションを備えたインタラクティブなライブ ダッシュボードを無料で作成できます。さまざまなソースからデータを取得し、データポータルで無制限のレポートを作成できます。編集機能と共有機能も充実しています。次のスクリーンショットは、データポータル レポートの例です。
（ここをクリックすると、データポータルでこのレポートの例を表示できます）
データポータルには、折れ線グラフ、棒グラフ、円グラフ、散布図など、いくつかの組み込みグラフタイプが用意されています。 コミュニティ ビジュアリゼーションを使用すると、データポータルで独自のカスタム JavaScript ビジュアリゼーションを構築して使用できます。また、コミュニティ ビジュアリゼーションを他のユーザーと共有して、そのユーザーが自分のデータで使用できるようにすることもできます。
学習内容
このコードラボでは、次のことを学びます。
- データポータルのコミュニティ ビジュアリゼーションの仕組み。
- ds-component ヘルパー ライブラリ（dscc）を使用してコミュニティ ビジュアリゼーションを構築する方法。
- データポータル レポートでコミュニティ ビジュアリゼーションを使用する方法。
必要なもの
このコードラボを完了するには、以下が必要です。
- インターネット アクセスとウェブブラウザ。
- Google アカウント
- Google Cloud Platform ストレージ バケットへのアクセス。
- JavaScript の知識。
2. 簡単なアンケート
この Codelab を選んだ理由は何ですか？
この Codelab/チュートリアルをどのように使用する予定ですか？
データポータルの使用経験はどの程度ありますか？
ご自身のバックグラウンドとして最も適切なものはどれですか？
使用してみたい JavaScript ビジュアリゼーション ライブラリは何ですか？
次のページに進んでアンケート情報を送信してください。
3. コミュニティ ビジュアリゼーションの概要
データポータルの コミュニティ ビジュアリゼーション を使用すると、ダッシュボードでカスタム JavaScript ビジュアリゼーションを作成して使用できます。
このコードラボでは、1 つのディメンション、1 つの指標、テーブル ヘッダーのスタイル設定をサポートするテーブルグラフ コミュニティ ビジュアリゼーションを作成します。
4. コミュニティ ビジュアリゼーションの開発ワークフロー
コミュニティ ビジュアリゼーションを作成するには、Google Cloud Platform ストレージ バケットに次のファイルが必要です。このバケットは後の手順で作成します。
ファイル名 | ファイル形式 | 目的 |
manifest.json* | JSON | ビジュアリゼーションに関するメタデータと、すべてのビジュアリゼーション リソースの場所。 |
viz-codelab.json | JSON | プロパティ パネルのデータとスタイルの構成オプション。 |
viz-codelab.js | JavaScript | ビジュアリゼーションをレンダリングする JavaScript コード。 |
viz-codelab.css（省略可） | CSS | ビジュアリゼーションの CSS スタイル。 |
*マニフェストは、名前が必須の唯一のファイルです。他のファイルは、マニフェスト ファイルで名前と場所が指定されていれば、別の名前を付けることができます。
5. Hello, world! ビジュアリゼーションを作成する
このセクションでは、シンプルな Hello, world! ビジュアリゼーションをレンダリングするために必要なコードを追加します。
ビジュアリゼーションの JavaScript ソースを記述する
ステップ 1: dscc.min.js ファイルを データポータル コミュニティ コンポーネント ライブラリ（dscc） ページからダウンロードし、作業ディレクトリにコピーします。
ステップ 2: 次のコードをテキスト エディタにコピーし、ローカルの作業ディレクトリに viz-codelab-src.js として保存します。
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Render the viz.
container.textContent = 'Hello, viz world!';
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
JavaScript バンドル ファイルを準備する
ステップ 3: ビジュアリゼーション ヘルパー ライブラリ（dscc.min.js）と viz-codelab-src.js ファイルの内容をコピーして、viz-codelab.js という名前の新しいファイルに貼り付け、必要な JavaScript をすべて 1 つのファイルにまとめます。次のコマンドを実行して、ファイルを連結できます。ソース ビジュアリゼーション コードを更新するたびに、この手順を繰り返します 。
Linux/Mac OS 連結スクリプト
cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js
Windows 連結スクリプト
del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js
6. ビジュアリゼーションの CSS を記述する
CSS ファイルはビジュアリゼーションのスタイル設定を定義するもので、省略可能です。次の CSS をコピーして、viz-codelab.css. として保存します。
viz-codelab.css
table {
width: 100%;
border-collapse: collapse;
}
tr {
border-bottom: 1pt solid #d1d1d1;
}
th, td {
padding: 8px;
text-align: left;
}
7. JSON 構成を記述する
ビジュアリゼーション構成では、ビジュアリゼーションでサポートされ、必要なデータ属性とスタイル属性を定義します。このコードラボのビジュアリゼーションでは、1 つのディメンションと 1 つの指標が必要で、塗りつぶしの色を選択するスタイル要素が 1 つあります。 詳しくは、ディメンションと指標をご覧ください。
次のコードをコピーして、viz-codelab.json. として保存します。構成できるプロパティの詳細については、コミュニティ ビジュアリゼーション構成リファレンスをご覧ください。
viz-codelab.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "tableDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "tableMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "header",
"label": "Table Header",
"elements": [
{
"type": "FILL_COLOR",
"id": "headerBg",
"label": "Header Background Color",
"defaultValue": "#e0e0e0"
}
]
}
]
}
8. Cloud Storage プロジェクトとバケットを作成する
ステップ 1: Google Cloud Platform（GCP）プロジェクトを作成するか、既存のプロジェクトを使用します。
ステップ 2: GCP バケットを作成します。推奨されるストレージ クラスは Regional です。無料利用枠の詳細については、Cloud Storage の料金をご覧ください。注: ビジュアリゼーション ストレージで Regional Storage ストレージ クラスの費用が発生することはほとんどありません。
ステップ 3: バケット名とパスをメモします。Buckets/ の後のセクションから始まります。このパスはデータポータルでは「コンポーネント ID」と呼ばれ、ビジュアリゼーションの識別とデプロイに使用されます。
9. manifest.json ファイルを記述する
マニフェスト ファイルには、ビジュアリゼーションの場所とリソースに関する情報が記載されています。名前は「manifest.json」にする必要があり、前の手順で作成したバケット/パス（コンポーネント ID に使用したパスと同じ）に配置する必要があります。
次のコードをテキスト エディタにコピーし、manifest.json. として保存します。
マニフェストの詳細については、 マニフェスト リファレンス ドキュメントをご覧ください。
manifest.json
{
"name": "Community Visualization",
"logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"organization": "Data Studio Codelab",
"organizationUrl": "https://url",
"termsOfServiceUrl": "https://url",
"supportUrl": "https://url",
"packageUrl": "https://url",
"privacyPolicyUrl": "https://url",
"description": "Community Visualization Codelab",
"devMode": true,
"components": [
{
"id": "tableChart",
"name": "Table",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"description": "A simple table chart.",
"resource": {
"js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
"config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
"css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
}
}
]
}
10. ビジュアリゼーション ファイルを Google Cloud Storage にアップロードする
- ウェブ インターフェースまたは gsutil コマンドライン ツールを使用して、
manifest.json、viz-codelab.js、viz-codelab.json、viz-codelab.cssファイルを Google Cloud Storage バケットにアップロードします。ビジュアリゼーションを更新するたびに、この操作を繰り返します。
gsutil アップロード コマンド
gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
11. データポータルでコミュニティ ビジュアリゼーションをテストする
レポートを作成してデータを追加する
ステップ 1: コミュニティ ビジュアリゼーションのサンプル データセットの URL をコピーします。または、任意のデータソースを使用して、次の手順をスキップします。
ステップ 2: データポータルにログインします。左上にある [+ 作成] をクリックして、[レポート] を選択します。
ステップ 3: レポート エディタ ツールが表示され、[データのレポートへの追加 ] パネルが開きます。
ステップ 4: [データに接続 ] タブで、[Google による Google スプレッドシート] コネクタを選択します。
ステップ 5: [URL] を選択し、ステップ 1 の Google スプレッドシートの URL を貼り付けます。
ステップ 6: 右下の [追加] をクリックします。
ステップ 7: [このレポートにデータを追加しようとしています] という確認メッセージが表示されたら、[レポートに追加] をクリックします。[無題のレポート] が作成され、サンプルデータを含むデフォルトのテーブルがレポートに追加されます。必要に応じて、デフォルトのテーブルを選択して削除し、空白のレポートを残します。
レポートにコミュニティ ビジュアリゼーションを追加する
ステップ 1: ツールバーで、[コミュニティ ビジュアリゼーションおよびコンポーネント] 
をクリックします。
ステップ 2: [+ もっと見る] をクリックして、コミュニティ ギャラリーを開きます。
ステップ 3: [独自のビジュアリゼーションの作成] をクリックします。
ステップ 4: [コミュニティ ビジュアリゼーションのテストと追加] でマニフェスト パス を入力し、[送信] をクリックします。マニフェスト パスは、ビジュアリゼーションのマニフェストの場所を指す Google Cloud Storage バケット名とパスで、接頭辞として「gs://. 」が付いています。例: gs://community-viz-docs/viz-codelab。有効なマニフェスト パスを入力すると、ビジュアリゼーション カードがレンダリングされます。
ステップ 5: ビジュアリゼーション カードをクリックして、レポートに追加します。
ステップ 6: プロンプトが表示されたら、ビジュアリゼーションのレンダリングを許可することに同意します。
ステップ 7: 必要に応じて、テーブルの選択したディメンションと指標を更新します。提供されたサンプル データセットを使用している場合は、ディメンションを「 Country 」、指標を「 Population 」に設定します。この設定は、Codelab の後半までビジュアリゼーションに影響しません。
右側のプロパティ パネルには、viz-codelab.json で構成された要素が反映されます。
[設定 ] パネルでは、ビジュアリゼーションで 1 つのディメンションと 1 つの指標を使用できます。
[スタイル ] パネルには、テーブル ヘッダー のスタイルを設定する要素が 1 つあります。現時点では、後の手順でビジュアリゼーション コードが更新されるまで、スタイル コントロールはビジュアリゼーションに影響しません。注: 構成ファイルで定義していないビジュアリゼーションのスタイル オプションが追加で表示されます。これは、すべてのビジュアリゼーションに共通のコントロール セットが自動的に用意されているため、想定される動作です。
12. データをテーブルとしてレンダリングする
このセクションでは、ビジュアリゼーションを更新して、コミュニティ ビジュアリゼーションのサンプル データセットをテーブルとして表示します。
レンダリングするデータは tables オブジェクトにあり、ビジュアリゼーションで指定された変換に基づいて構造化されています。このコードラボでは、ビジュアリゼーションでテーブル形式（tableTransform）がリクエストされました。これには、テーブルのレンダリングに必要なすべてのデータを含む headers オブジェクトと rows オブジェクトが含まれています。
ステップ 1: viz-codelab-src.js の内容を次のコードに置き換えます。
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
ステップ 2: JavaScript バンドル ファイルを準備し、ビジュアリゼーション ファイルを Google Cloud Storage にアップロードして上書きします。
ステップ 3: データポータル レポートを更新して、コミュニティ ビジュアリゼーションを再読み込みしてテストします。テーブルにデータ（Google スプレッドシート）がレンダリングされ、選択したディメンションと指標に基づいてヘッダー列が表示されます。ビジュアリゼーションのサイズを変更して、すべての行を表示します。
13. スタイルの変更を動的に適用する
このセクションでは、[スタイル ] パネルで選択した塗りつぶしの色に基づいてテーブル ヘッダーのスタイルを設定するようにビジュアリゼーションを更新します。
すべてのスタイル要素の状態は style オブジェクトで確認できます。各アイテムキーは、ビジュアリゼーションのスタイル構成（viz-codelab.json）に基づいて定義されます。このセクションでは、選択した塗りつぶしの色を取得し、それを使用してテーブル ヘッダーの背景色を更新します。
ステップ 1: viz-codelab-src.js ファイル内のコードを次のコードに置き換えます。
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Set header color based on style control.
tableHeader.style.backgroundColor = data.style.headerBg.value.color;
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
ステップ 2: JavaScript バンドル ファイルを準備し、ビジュアリゼーション ファイルを Google Cloud Storage にアップロードして上書きします。
ステップ 3: データポータル レポートを更新して、コミュニティ ビジュアリゼーションを再読み込みしてテストします。
ステップ 4: [スタイル ] パネルで、[ヘッダーの背景色 ] スタイル コントロールを使用して、テーブル ヘッダーの背景色を変更します。
おめでとうございます。データポータルでコミュニティ ビジュアリゼーションを作成できました。これでこのコードラボは終了です。次のステップを見てみましょう。
14. 次のステップ
ビジュアリゼーションを拡張する
- ビジュアリゼーションで使用できる データと形式について詳しく学習する。
- 使用可能なスタイル要素について詳しく学習する、ビジュアリゼーションにスタイルを追加する。
- ビジュアリゼーションにインタラクションを追加する
- ビジュアリゼーションをローカルで開発する方法を学習する
コミュニティ ビジュアリゼーションでできること
- dscc ヘルパー ライブラリ、 マニフェスト、 構成ファイルのリファレンスを確認する。
- ビジュアリゼーションを コミュニティ ビジュアリゼーション ギャラリーに送信する。
- データポータルの コミュニティ コネクタ を作成する。
参考情報
以下に、このコードラボで取り上げた内容をさらに掘り下げるのに役立つさまざまなリソースを示します。
リソースの種類 | ユーザー向け機能 | デベロッパー向け機能 |
ドキュメント | ||
ニュースと最新情報 | データポータルで登録 > ユーザー設定 | |
質問する | ||
例 |