Looker Studio でカスタムビジュアリゼーションを作成する

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 を選んだ理由をお聞かせください。

データ可視化全般に関心があります。

Looker Studio について詳しく知りたい。

独自のコミュニティビジュアリゼーションを作成したい。

Looker Studio を別のプラットフォームと統合しようとしています。

Google Cloud ソリューションに関心があります。

この Codelab/チュートリアルをどのように使用する予定ですか？

流し読みのみ。

内容を読んで演習をやり遂げます。

Looker Studio の使用経験についてお答えください。

聞いたことがない。

知っているが、使っていない。

たまに使用する。

いつも使っている。

私はエキスパートユーザーです。

ご自身のバックグラウンドに最も当てはまるものはどれですか？

デベロッパー。

デザイナー / UX スペシャリスト。

ビジネス / データ / 財務アナリスト。

データサイエンティスト / データエンジニア。

マーケティング / ソーシャルメディア / デジタル分析のエキスパート。

その他。

使用してみたい JavaScript 可視化ライブラリは何ですか？

D3.js

Google Charts

Chart.js

Leaflet

Highcharts

Plot.ly

その他

次のページに進み、アンケート情報を送信します。

3. コミュニティビジュアリゼーションの概要

Looker Studio のコミュニティビジュアリゼーションを使用すると、ダッシュボードでカスタムの JavaScript ビジュアリゼーションを作成して使用できます。

この Codelab では、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 ストレージクラスの費用が発生することはほとんどありません。

ステップ 3: バケット/ の後のセクションから始まるバケット名/パスをメモします。このパスは Looker Studio では「コンポーネント 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 による 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: 必要に応じて、テーブルで選択したディメンションと指標を更新します。提供されたサンプルデータセットを使用している場合は、ディメンションを [国] に、指標を [人口] に設定します。この操作は、このコードラボの後半までビジュアリゼーションに影響しません。

右側のプロパティパネルには、viz-codelab.json で設定された要素が反映されます。

[設定] パネルでは、ビジュアリゼーションで 1 つのディメンションと 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 オブジェクトで確認できます。各アイテムキーは、可視化スタイルの構成（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 > [User Settings] で登録します。	デベロッパーメーリングリスト
質問する	ユーザーフォーラム	Stack Overflow [looker-studio] Looker Studio デベロッパーフォーラム
例	レポートギャラリー	オープンソースリポジトリ

Looker Studio でカスタム ビジュアリゼーションを作成する

1. はじめに

学習内容

必要なもの

2. 簡単なアンケート

この Codelab を選んだ理由をお聞かせください。

この Codelab/チュートリアルをどのように使用する予定ですか？

Looker Studio の使用経験についてお答えください。

ご自身のバックグラウンドに最も当てはまるものはどれですか？

使用してみたい JavaScript 可視化ライブラリは何ですか？

3. コミュニティ ビジュアリゼーションの概要

4. コミュニティ ビジュアリゼーションの開発ワークフロー

5. Hello, world! ビジュアリゼーションを作成する

ビジュアリゼーションの JavaScript ソースを記述する

viz-codelab-src.js

JavaScript バンドル ファイルを準備する

Linux/Mac OS の連結スクリプト

Windows 連結スクリプト

6. ビジュアリゼーションの CSS を記述する

viz-codelab.css

7. JSON 構成を記述する

viz-codelab.json

8. Cloud Storage プロジェクトとバケットを作成する

9. manifest.json ファイルを作成する

manifest.json

10. Google Cloud Storage に可視化ファイルをアップロードする

gsutil アップロード コマンド

11. Looker Studio でコミュニティ ビジュアリゼーションをテストする

レポートを作成してデータを追加する

コミュニティ ビジュアリゼーションをレポートに追加する

12. データをテーブルとしてレンダリングする

viz-codelab-src.js

13. スタイルの変更を動的に適用する

viz-codelab-src.js

14. 次のステップ

可視化を拡張する

コミュニティ ビジュアリゼーションをさらに活用する

参考情報

Looker Studio でカスタムビジュアリゼーションを作成する

3. コミュニティビジュアリゼーションの概要

4. コミュニティビジュアリゼーションの開発ワークフロー

JavaScript バンドルファイルを準備する

gsutil アップロードコマンド

11. Looker Studio でコミュニティビジュアリゼーションをテストする

コミュニティビジュアリゼーションをレポートに追加する

コミュニティビジュアリゼーションをさらに活用する