1. はじめに
Looker Studio では、美しいデータを可視化するインタラクティブなライブダッシュボードを無料で構築できます。Looker Studio では、さまざまなソースからデータを取得して無制限のレポートを作成できます。編集や共有の機能もすべて使用できます。次のスクリーンショットは、Looker Studio レポートの例です。
（こちらをクリックすると Looker Studio でこのレポートのサンプルが表示されます）。
Looker Studio には、折れ線グラフ、棒グラフ、円グラフ、散布図など、いくつかの種類のグラフが組み込まれています。コミュニティ ビジュアリゼーションを使用すると、Looker Studio で独自のカスタム JavaScript ビジュアリゼーションを作成して使用できます。コミュニティ ビジュアリゼーションを他のユーザーと共有して、他のユーザーが各自のデータで使用できるようにすることもできます。
学習内容
この Codelab では、次のことを学びます。
- Looker Studio コミュニティ ビジュアリゼーションの仕組み
- ds-component ヘルパー ライブラリ（dscc）を使用してコミュニティ ビジュアリゼーションを作成する方法
- Looker Studio のレポートでコミュニティ ビジュアリゼーションを使用する方法
必要なもの
この Codelab を完了するには、以下が必要です。
- インターネット アクセスとウェブブラウザ。
- Google アカウント
- Google Cloud Platform ストレージ バケットへのアクセス権。
- JavaScript の基本知識。
2. 簡単なアンケート
この Codelab を選んだ理由は何ですか。
<ph type="x-smartling-placeholder">この Codelab/チュートリアルをどのように使用する予定ですか？
<ph type="x-smartling-placeholder">Looker Studio の使用経験をどのように評価されますか。
<ph type="x-smartling-placeholder">ご自身の経歴に最も近いものを選択してください。
<ph type="x-smartling-placeholder">使用したい JavaScript 可視化ライブラリは何ですか？
<ph type="x-smartling-placeholder">次のページに移動して、アンケート情報を送信してください。
3. コミュニティ ビジュアリゼーションの概要
Looker Studio のコミュニティ ビジュアリゼーションを使用すると、カスタムの JavaScript ビジュアリゼーションをダッシュボードで作成して使用できます。
この Codelab では、1 つのディメンション、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: Looker Studio コミュニティ コンポーネント ライブラリ（dscc）ページから dscc.min.js ファイルをダウンロードして、作業ディレクトリにコピーします。
ステップ 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 構成を作成する
ビジュアリゼーション設定では、ビジュアリゼーションでサポートされている、または必要なデータとスタイルの属性を定義します。この Codelab のビジュアリゼーションには、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": "Looker 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. Looker Studio でコミュニティ ビジュアリゼーションをテストする
レポートを作成してデータを追加する
ステップ 1: コミュニティ ビジュアリゼーションのサンプル データセットの URL をコピーします。または、任意のデータソースを使用して、次の手順をスキップします。
ステップ 2: Looker Studio にログインします。左上の [+ 作成] をクリックし、[レポート] を選択します。
ステップ 3: レポート エディタ ツールが表示され、[データのレポートへの追加] パネルが開きます。
ステップ 4: [データに接続] タブで、[Google スプレッドシート] コネクタを選択します。
手順 5: [URL] を選択し、手順 1 でメモした Google スプレッドシートの URL を貼り付けます。
ステップ 6: 右下の [追加] をクリックします。
手順 7: 「このレポートにデータを追加しようとしています」という確認のメッセージが表示されたら、[レポートに追加] をクリックします。[無題のレポート] が作成され、サンプルデータを含むデフォルトのテーブルがレポートに追加されます。必要に応じて、デフォルトの表を選択して削除し、空白のレポートが残るようにします。
コミュニティ ビジュアリゼーションをレポートに追加する
ステップ 1: ツールバーで、[コミュニティ ビジュアリゼーションとコンポーネント] 
をクリックします。
ステップ 2: [+ もっと見る] をクリックしてコミュニティ ギャラリーを開きます。
ステップ 3: [Build your own visibility] をクリックします。
ステップ 4: [コミュニティ ビジュアリゼーションのテストと追加] でマニフェスト パスを入力し、[送信] をクリックします。マニフェスト パスは、ビジュアリゼーションのマニフェストの場所を指す Google Cloud Storage バケット名とパスで、接頭辞 gs://. が付加されます（例: gs://community-viz-docs/viz-codelab）。有効なマニフェスト パスを入力すると、可視化カードが表示されます。
ステップ 5: 可視化カードをクリックして、レポートに追加します。
ステップ 6: プロンプトが表示されたら、ビジュアリゼーションのレンダリングを許可します。
ステップ 7: 必要に応じて、表で選択したディメンションと指標を更新します。提供されたサンプル データセットを使用する場合は、ディメンションを国に、指標を人口に設定します。この Codelab で後ほど行うまで、可視化には影響しません。
右側のプロパティ パネルには、viz-codelab.json で設定した要素が反映されます。
[設定] パネルでは、1 つのディメンションと 1 つの指標を表示できます。
ビジュアリゼーションの [Style] パネルには、Table Header のスタイルを設定する 1 つの要素があります。この時点では、後のステップでビジュアリゼーション コードが更新されるまで、スタイル コントロールはビジュアリゼーションには影響しません。注: 構成ファイルで定義していないビジュアリゼーションのスタイル オプションが表示されます。すべてのビジュアリゼーションには、自動的に利用できる共通コントロールのセットがあるため、これは想定された動作です。
12. データをテーブルとしてレンダリングする
このセクションでは、コミュニティ ビジュアリゼーションのサンプル データセットをテーブルとして表示するようにビジュアリゼーションを更新します。
レンダリングするデータは tables オブジェクトで提供され、ビジュアリゼーションで指定された変換に基づいて構造化されます。この Codelab では、ビジュアリゼーションでテーブル形式（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: Looker Studio レポートを更新し、コミュニティ ビジュアリゼーションを再読み込みしてテストします。表にはデータ（Google スプレッドシートなど）が表示され、選択したディメンションと指標に基づいて見出し列が表示されます。すべての行を表示するには、ビジュアリゼーションのサイズを変更してください。
13. スタイルの変更内容を動的に適用する
このセクションでは、[Style] パネルで選択した塗りつぶしの色に基づいてテーブル ヘッダーのスタイルを設定するように、ビジュアリゼーションを更新します。
すべてのスタイル要素の状態は、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: Looker Studio レポートを更新し、コミュニティ ビジュアリゼーションを再読み込みしてテストします。
ステップ 4: [スタイル] パネルの [ヘッダーの背景色] スタイル コントロールを使って、表のヘッダーの背景色を変更します。
これで、これで、Looker Studio でコミュニティ ビジュアリゼーションが作成されました。これで、この Codelab は終了です。それでは、次のステップを見てみましょう。
14. 次のステップ
可視化を拡張する
- 詳しくは、ビジュアリゼーションに使用できるデータと形式をご覧ください。
- 使用可能なスタイル要素の詳細を確認し、ビジュアリゼーションにスタイルを追加しましょう。
- ビジュアリゼーションにインタラクションを追加する
- ローカルで可視化を行う方法を学ぶ
コミュニティ ビジュアリゼーションをさらに活用する
- dscc ヘルパー ライブラリ、マニフェスト、構成ファイルのリファレンスを確認します。
- 作成したビジュアリゼーションを、コミュニティ ビジュアリゼーション ギャラリーに送信します。
- Looker Studio 用のコミュニティ コネクタ を作成します。
参考情報
以下に、この Codelab で取り上げた内容を深く掘り下げるために利用できるさまざまなリソースを示します。
リソースの種類 | ユーザー機能 | デベロッパー機能 |
ドキュメント | ||
ニュース&更新 | Looker Studio で登録 >ユーザー設定 | |
質問する | ||
例 |