Looker Studio であらゆるデータを接続して可視化

1. はじめに

Looker Studio を使用すると、美しいデータ可視化によるインタラクティブなライブダッシュボードを無料で作成できます。さまざまなソースからデータを取得し、Looker Studio でレポートを無制限に作成できます。編集と共有の機能も充実しています。次のスクリーンショットは、Looker Studio ダッシュボードの例です。

（ ここをクリックすると、このレポートの例を Looker Studio で確認できます）

コミュニティコネクタは、Looker Studio の機能で、Apps Script を使用してインターネットアクセスが可能なデータソースへのコネクタを作成できます。コミュニティコネクタは、Looker Studio コミュニティによって作成されます。つまり、誰でもコミュニティコネクタを構築できます。コミュニティコネクタを他のユーザーと共有して、Looker Studio 内から独自のデータにアクセスできるようにすることもできます。

コミュニティコネクタは、さまざまなユースケースで使用できます。

商用プラットフォーム（ソーシャルメディア、マーケティング、アナリティクスなど）のデータを可視化している
オンプレミスのエンタープライズデータ（オンプレミスの MySQL データベースの販売データなど）を可視化している
お客様がサービスのデータを可視化できるようにする
ボタンを押すだけでレポートを作成できるプラットフォームを構築している
ウェブソースから独自のデータを可視化している（例: Google Fit ダッシュボードを作成している）

学習内容

Looker Studio コミュニティコネクタの仕組み
Google Apps Script を使用してコミュニティコネクタを構築する方法
Looker Studio でコミュニティコネクタを使用する方法

必要なもの

インターネットアクセスとウェブブラウザ
Google アカウント
基本的な Javascript と Web API に関する知識

2. 簡単なアンケート

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

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

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

独自のコミュニティコネクタを作成したい

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

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

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

通読のみ

通読して演習を行う

Looker Studio についてどの程度ご存知ですか？

聞いたことがない

何であるかは知っているが、使用していない。

いつも使っている。

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

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

デベロッパー

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

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

マーケティング / ソーシャルメディア / デジタルアナリティクスエキスパート

デザイナー

その他

次のページに進んでアンケート情報を送信できます。

3. コミュニティコネクタの概要

Looker Studio のコミュニティコネクタを使用すると、インターネットアクセスが可能なデータソースに Looker Studio から直接接続できます。商用プラットフォーム、一般公開データセット、独自のオンプレミスプライベートデータに接続できます。コミュニティコネクタは、ウェブ API、JDBC API、フラットファイル（CSV、JSON、XML）、Apps Script サービスを通じてデータを取得できます。

npm でパッケージを公開し、パッケージのダウンロード数を日ごとに追跡するとします。この Codelab では、npm パッケージのダウンロード数 API を使用してデータを取得するコミュニティコネクタを作成します。その後、Looker Studio でコミュニティコネクタを使用して、ダウンロード数を可視化するダッシュボードを構築できます。

4. コミュニティコネクタのワークフロー

基本的なコミュニティコネクタでは、次の 4 つの関数を定義します。

getAuthType()
getConfig()
getSchema()
getData()

ワークフローの現在のステップに応じて、Looker Studio はこれらのコネクタ関数を実行し、後続のステップでレスポンスを使用します。以下の動画では、次の概要について説明しています。

コミュニティコネクタの仕組み
ワークフローのさまざまなステップ
異なる関数が呼び出された場合
Looker Studio で異なるユーザーインターフェースが表示される場合
各ステップで想定されるユーザーの操作

動画を視聴したら、Codelab を再開できます。

このワークフローを覚える必要はありません。コネクタで何が起こるのかを把握するために、確認するだけで十分です。この図にはいつでも戻ることができます。

次のステップでは、Google Apps Script でコネクタの作成を開始します。Apps Script の UI とこの Codelab を切り替えながら作業を進める必要があります。

5. Apps Script プロジェクトを設定する

ステップ 1: Google Apps Script にアクセスします。

ステップ 2: 左上の [+ 新しいプロジェクト] をクリックして、新しい Apps Script プロジェクトを作成します。

Code.gs ファイルに空白の myFunction 関数を含むシェルプロジェクトが表示されます。

ステップ 3: myFunction 関数を削除します。

ステップ 4: プロジェクトに名前を付けます。

ページの左上にある Untitled project をクリックします。
プロジェクトのタイトルを入力します。

Code.gs ファイルでコネクタコードの作成を開始します。

6. getAuthType() を定義する

Looker Studio は、コネクタで使用される認証方法を把握する必要がある場合に getAuthType() 関数を呼び出します。この関数は、サードパーティサービスを承認するためにコネクタが必要とする認証方法を返します。

作成する npm ダウンロードコネクタでは、使用する API で認証が不要なため、サードパーティサービスで認証する必要はありません。次のコードをコピーして Code.gs ファイルに追加します。

コード.gs

var cc = DataStudioApp.createCommunityConnector();

function getAuthType() {
  var AuthTypes = cc.AuthType;
  return cc
    .newAuthTypeResponse()
    .setAuthType(AuthTypes.NONE)
    .build();
}

ここでは、コネクタにサードパーティ認証（AuthTypes.NONE）が必要ないことを示しています。サポートされているすべての認証方法については、AuthType() リファレンスをご覧ください。

7. getConfig() を定義する

コネクタのユーザーは、コネクタの使用を開始する前にコネクタを構成する必要があります。getConfig() 関数レスポンスは、ユーザーに表示される構成オプションを定義します。Looker Studio は getConfig() 関数を呼び出して、コネクタの構成の詳細を取得します。getConfig() が提供するレスポンスに基づいて、Looker Studio はコネクタ設定画面を表示し、特定のコネクタの動作を変更します。

構成画面では、次のフォーム要素を使用して情報を提供したり、ユーザー入力を取得したりできます。

`TEXTINPUT`	入力要素	1 行のテキストボックス。
`TEXTAREA`	入力要素	複数行のテキストエリアボックス。
`SELECT_SINGLE`	入力要素	単一選択オプションのプルダウン。
`SELECT_MULTIPLE`	入力要素	複数選択オプションのプルダウン。
`CHECKBOX`	入力要素	ブール値を取得するために使用できる単一のチェックボックス。
`INFO`	表示要素	ユーザーに手順や情報を提供するために使用できる静的な書式なしのテキストボックスになります。

INFO 要素を使用してユーザー向けの手順を提供し、TEXTINPUT 要素を使用してユーザーから入力パッケージ名を取得します。getConfig() レスポンスでは、これらのフォーム要素を configParams キーの下にグループ化します。

接続先の API では日付がパラメータとして必要になるため、getConfig() レスポンスで dateRangeRequired を true に設定します。これにより、Looker Studio はすべてのデータリクエストで日付範囲を提供するようになります。データソースが期間をパラメータとして必要としない場合は省略できます。

Code.gs ファイルで、getAuthType() の既存のコードの下に次の getConfig() コードを追加します。

コード.gs

function getConfig(request) {
  var config = cc.getConfig();
  
  config.newInfo()
    .setId('instructions')
    .setText('Enter npm package names to fetch their download count.');
  
  config.newTextInput()
    .setId('package')
    .setName('Enter a single package name')
    .setHelpText('e.g. googleapis or lighthouse')
    .setPlaceholder('googleapis');
  
  config.setDateRangeRequired(true);
  
  return config.build();
}

これらの configParams に基づいて、Looker Studio でコネクタを使用すると、次のような設定画面が表示されます。詳しくは後ほど説明します。

次の関数 getSchema() に進みましょう。

8. getSchema() を定義する

Looker Studio は、getSchema() 関数を呼び出して、コネクタのユーザーが選択した構成に関連付けられたスキーマを取得します。getSchema() が提供するレスポンスに基づいて、Looker Studio はコネクタ内のすべてのフィールドを一覧表示するフィールド画面をユーザーに表示します。

コネクタの特定の構成の場合、スキーマはコネクタがデータを提供できるすべてのフィールドのリストです。コネクタは、さまざまな構成に基づいて、異なるフィールドを含む異なるスキーマを返すことがあります。スキーマには、API ソースから取得するフィールド、Apps Script で計算するフィールド、計算フィールドの数式を使用して Looker Studio で計算するフィールドを含めることができます。コネクタは、スキーマ内の各フィールドに関するメタデータを提供します。これには次のものが含まれます。

フィールドの名前
フィールドのデータ型
セマンティック情報

詳細については、後で getSchema() と Field のリファレンスをご覧ください。

コネクタの取得方法に応じて、スキーマは固定される場合と、getSchema() の呼び出し時に動的に計算される場合があります。ユーザーが定義した getConfig() の構成パラメータは、getSchema() 関数の request 引数で指定します。

この Codelab では、request 引数にアクセスする必要はありません。次のセグメントで getData() 関数のコードを記述する際に、request 引数について詳しく説明します。

コネクタの場合、スキーマは固定されており、次の 3 つのフィールドが含まれています。

`packageName`	ユーザーが指定した npm パッケージの名前
`downloads`	npm パッケージのダウンロード数
`day`	ダウンロード数の日付

以下は、コネクタの getSchema() コードです。getFields() ヘルパー関数は、getSchema() と getData() の両方でこの機能が必要になるため、フィールドの作成を抽象化します。Code.gs ファイルに次のコードを追加します。

コード.gs

function getFields(request) {
  var cc = DataStudioApp.createCommunityConnector();
  var fields = cc.getFields();
  var types = cc.FieldType;
  var aggregations = cc.AggregationType;
  
  fields.newDimension()
    .setId('packageName')
    .setType(types.TEXT);
  
  fields.newMetric()
    .setId('downloads')
    .setType(types.NUMBER)
    .setAggregation(aggregations.SUM);
  
  fields.newDimension()
    .setId('day')
    .setType(types.YEAR_MONTH_DAY);
  
  return fields;
}

function getSchema(request) {
  var fields = getFields(request).build();
  return { schema: fields };
}

このスキーマに基づき、Looker Studio でコネクタを使用すると、Looker Studio のフィールド画面に次のフィールドが表示されます。コネクタのテスト時に詳しく説明します。

最後の関数である getData() に移りましょう。

9. getData() を定義する: パート 1

Looker Studio は、データを取得する必要があるたびに getData() 関数を呼び出します。getData() が提供するレスポンスに基づいて、Looker Studio はダッシュボードのグラフをレンダリングして更新します。getData() は、次のイベント中に呼び出されることがあります。

ユーザーがダッシュボードにグラフを追加する
ユーザーがグラフを編集する
ユーザーがダッシュボードを表示する
ユーザーが関連付けられたフィルタまたはデータ管理を編集する
Looker Studio にはデータのサンプルが必要です

このページからコードをコピーする必要はありません。完成した

getData()

コード

`request` オブジェクトについて

Looker Studio は、getData() 呼び出しごとに request オブジェクトを渡します。以下の request オブジェクトの構造を確認してください。これは、getData() 関数のコードを記述するのに役立ちます。

`request` オブジェクト構造

{
  configParams: object,
  scriptParams: object,
  dateRange: {
    startDate: string,
    endDate: string
  },
  fields: [
    {
      name: Field.name
    }
  ]
}

configParams オブジェクトには、getConfig() で定義され、ユーザーが構成したパラメータの構成値が含まれます。
scriptParams オブジェクトには、コネクタの実行に関連する情報が含まれます。この Codelab では、これを使用する必要はありません。
getConfig() レスポンスでリクエストされた場合、dateRange にはリクエストされた期間が含まれます。
fields には、データがリクエストされたフィールド名のリストが含まれます。

コネクタの場合、getData() 関数からの request の例は次のようになります。

{
  configParams: {
    package: 'jquery'
  },
  dateRange: {
    startDate: '2017-07-16',
    endDate: '2017-07-18'
  },
  fields: [
    {
      name: 'day',
    },
    {
      name: 'downloads',
    }
  ]
}

上記の request の getData() 呼び出しでは、コネクタスキーマに追加のフィールドがあるにもかかわらず、2 つのフィールドのみがリクエストされています。次のページには、この getData() 呼び出しのレスポンス例と、一般的な getData() レスポンス構造が記載されています。

10. getData() を定義する: パート 2

getData() レスポンスでは、リクエストされたフィールドのスキーマとデータの両方を指定する必要があります。コードを次の 3 つのセグメントに分割します。

リクエストされたフィールドのスキーマを作成します。
API からデータを取得して解析します。
解析されたデータを変換し、リクエストされたフィールドでフィルタします。

このページからコードをコピーする必要はありません。完成した

getData()

次のページのコード

これは、コネクタの getData() の構造です。

function getData(request) {

  // TODO: Create schema for requested fields.
  
  // TODO: Fetch and parse data from API.
  
  // TODO: Transform parsed data and filter for requested fields.

  return {
    schema: <filtered schema>,
    rows: <transformed and filtered data>
  };
}

リクエストされたフィールドのスキーマを作成する

// Create schema for requested fields
  var requestedFieldIds = request.fields.map(function(field) {
    return field.name;
  });
  var requestedFields = getFields().forIds(requestedFieldIds);

API からデータを取得して解析する

npm API の URL は次の形式になります。

https://api.npmjs.org/downloads/point/{start_date}:{end_date}/{package}

Looker Studio が提供する request.dateRange.startDate、request.dateRange.endDate、request.configParams.package を使用して、API の URL を作成します。次に、UrlFetchApp（Apps Script クラス: reference）を使用して API からデータを取得します。次に、取得したレスポンスを解析します。

  // Fetch and parse data from API
  var url = [
    'https://api.npmjs.org/downloads/range/',
    request.dateRange.startDate,
    ':',
    request.dateRange.endDate,
    '/',
    request.configParams.package
  ];
  var response = UrlFetchApp.fetch(url.join(''));
  var parsedResponse = JSON.parse(response).downloads;

解析されたデータを変換し、リクエストされたフィールドでフィルタする

npm API からのレスポンスは次の形式になります。

{
  downloads: [
    {
    day: '2014-02-27',
    downloads: 1904088
    },
    ..
    {
    day: '2014-03-04',
    downloads: 7904294
    }
  ],
  start: '2014-02-25',
  end: '2014-03-04',
  package: 'somepackage'
}

npm API からのレスポンスを変換し、次の形式で getData() レスポンスを提供します。この形式がわかりにくい場合は、次の段落の回答例をご覧ください。

{
  schema: [
    {
      object(Field)
    }
  ],
  rows: [
    {
      values: [string]
    }
  ]
}

レスポンスでは、schema プロパティを使用して、リクエストされたフィールドのスキーマのみを返します。rows プロパティを使用して、行のリストとしてデータを返します。各行について、values のフィールドの順序は schema のフィールドの順序と一致する必要があります。request の前述の例に基づくと、getData() のレスポンスは次のようになります。

{
  schema: requestedFields.build(),
  rows: [
    {
      values: [ 38949, '20170716']
    },
    {
      values: [ 165314, '20170717']
    },
    {
      values: [ 180124, '20170718']
    },
  ]
}

スキーマのサブセットはすでに作成済みです。次の関数を使用して、解析されたデータを変換し、リクエストされたフィールドでフィルタします。

function responseToRows(requestedFields, response, packageName) {
  // Transform parsed data and filter for requested fields
  return response.map(function(dailyDownload) {
    var row = [];
    requestedFields.asArray().forEach(function (field) {
      switch (field.getId()) {
        case 'day':
          return row.push(dailyDownload.day.replace(/-/g, ''));
        case 'downloads':
          return row.push(dailyDownload.downloads);
        case 'packageName':
          return row.push(packageName);
        default:
          return row.push('');
      }
    });
    return { values: row };
  });
}

11. getData() を定義する: パート 3

結合された getData() コードは次のようになります。Code.gs ファイルに次のコードを追加します。

コード.gs

function responseToRows(requestedFields, response, packageName) {
  // Transform parsed data and filter for requested fields
  return response.map(function(dailyDownload) {
    var row = [];
    requestedFields.asArray().forEach(function (field) {
      switch (field.getId()) {
        case 'day':
          return row.push(dailyDownload.day.replace(/-/g, ''));
        case 'downloads':
          return row.push(dailyDownload.downloads);
        case 'packageName':
          return row.push(packageName);
        default:
          return row.push('');
      }
    });
    return { values: row };
  });
}

function getData(request) {
  var requestedFieldIds = request.fields.map(function(field) {
    return field.name;
  });
  var requestedFields = getFields().forIds(requestedFieldIds);

  // Fetch and parse data from API
  var url = [
    'https://api.npmjs.org/downloads/range/',
    request.dateRange.startDate,
    ':',
    request.dateRange.endDate,
    '/',
    request.configParams.package
  ];
  var response = UrlFetchApp.fetch(url.join(''));
  var parsedResponse = JSON.parse(response).downloads;
  var rows = responseToRows(requestedFields, parsedResponse, request.configParams.package);

  return {
    schema: requestedFields.build(),
    rows: rows
  };
}

Code.gs ファイルの作業は完了です。次に、マニフェストを更新します。

12. マニフェストを更新する

Apps Script エディタで、[プロジェクトの設定] > [「appsscript.json」マニフェストファイルをエディタで表示する] を選択します。

これにより、新しいマニフェストファイル appsscript.json が作成されます。

appscript.json ファイルを次の内容に置き換えます。

appsscript.json

{
  "timeZone": "America/Los_Angeles",
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",

  "dataStudio": {
    "name": "npm Downloads - From Codelab",
    "logoUrl": "https://raw.githubusercontent.com/npm/logos/master/npm%20logo/npm-logo-red.png",
    "company": "Codelab user",
    "companyUrl": "https://developers.google.com/looker-studio/",
    "addonUrl": "https://github.com/googledatastudio/example-connectors/tree/master/npm-downloads",
    "supportUrl": "https://github.com/googledatastudio/community-connectors/issues",
    "description": "Get npm package download counts.",
    "sources": ["npm"]
  }
}

Apps Script プロジェクトを保存します。

おめでとうございます！最初のコミュニティコネクタが完成し、テストドライブの準備が整いました。

13. Looker Studio でコネクタをテストする

デプロイを使用する

ステップ 1: Apps Script 開発環境で、[デプロイ] > [デプロイをテスト] をクリックして、[デプロイをテスト] ダイアログを開きます。

デフォルトのデプロイ（ヘッドデプロイ）が表示されます。

ステップ 2: [コピー] をクリックして、ヘッドデプロイ ID をコピーします。

ステップ 3: Looker Studio にコネクタを読み込むには、次のリンクの <HEAD_DEPLOYMENT_ID> プレースホルダをコネクタのヘッドデプロイ ID に置き換え、ブラウザでリンクを開きます。

https://lookerstudio.google.com/datasources/create?connectorId=<HEAD_DEPLOYMENT_ID>

コネクタを承認する

Looker Studio を初めて使用するユーザー: Looker Studio を初めて使用する場合は、Looker Studio の承認と利用規約への同意を求められます。承認プロセスを完了します。Looker Studio を初めて使用する際に、マーケティング設定を更新するためのダイアログが表示されることもあります。最新機能、最新情報、プロダクトに関するお知らせをメールで受け取るには、サービスのお知らせに登録します。

読み込みが完了すると、コネクタの承認を求めるメッセージが表示されます。

[承認] をクリックし、コネクタに必要な承認を提供します。

コネクタを構成する

承認が完了すると、設定画面が表示されます。テキスト入力エリアに「lighthouse」と入力し、右上の [接続] をクリックします。

スキーマを確認する

フィールド画面が表示されます。右上の [レポートを作成] をクリックします。

マイレポートを作成する

Looker Studio ダッシュボード環境が表示されます。[レポートに追加] をクリックします。

Looker Studio では、ユーザーがコネクタにアクセスして新しい構成を追加するたびに、ユーザーの Looker Studio アカウントに新しいデータソースが作成されます。データソースは、特定の構成に基づくコネクタのインスタンス化と考えることができます。コネクタとユーザーが選択した構成に基づいて、データソースは特定のフィールドセットを含むデータテーブルを返します。ユーザーは、同じコネクタから複数のデータソースを作成できます。データソースは複数のレポートで使用でき、同じレポートで複数のデータソースを使用することもできます。

次に、時系列グラフを追加します。メニューで、[挿入] > [時系列] をクリックします。次に、時系列をキャンバスに配置します。選択したパッケージの npm ダウンロード数の時系列グラフが表示されます。日付フィルタオプションを追加し、以下のようにダッシュボードを表示します。

これで、これで、最初のコミュニティコネクタが作成されました。これで、この Codelab は終了です。次に、どのような手順を踏むことができるかを見ていきましょう。

14. 次のステップ

作成したコネクタを改善する

作成したコネクタを改善します。

Looker Studio で、コネクタの設定画面でパッケージ名を指定しないと、時系列グラフを描画したときにエラーメッセージが表示されます。コネクタ構成に入力検証またはデフォルトオプションを追加してみてください。
コネクタ構成で、複数のパッケージ名を同時にクエリするサポートを追加してみてください。ヒント: npm パッケージのダウンロード数 API は、カンマ区切りの複数のパッケージ名の入力をサポートしています。
これらの両方の解決策は、npm コネクタのコードにあります。

コミュニティコネクタでできること

コネクタ API とマニフェストのリファレンスを表示します。
ベストプラクティスを理解するには、オープンソースリポジトリでコネクタのコード例をご覧ください。
ローカル環境でコミュニティコネクタを開発できるように、clasp コードラボを完了します。
完全なコミュニティコネクタを構築したら、利用可能な公開オプションを検討してください。
Looker Studio 用のコミュニティビジュアリゼーションを構築します。

参考情報

以下に示すさまざまなリソースは、この Codelab で取り上げた題材を掘り下げるのに役立ちます。

リソースの種類	ユーザー機能	デベロッパー機能
ドキュメント	ヘルプセンター	デベロッパー向けドキュメント
ニュースと最新情報	Looker Studio > [User Settings] で登録します。	デベロッパーメーリングリスト
質問する	ユーザーフォーラム	Stack Overflow [looker-studio]
動画	DataVis DevTalk
例	レポートギャラリーコネクタギャラリー	オープンソースリポジトリ

Looker Studio であらゆるデータを接続して可視化

1. はじめに

学習内容

必要なもの

2. 簡単なアンケート

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

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

Looker Studio についてどの程度ご存知ですか？

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

3. コミュニティ コネクタの概要

4. コミュニティ コネクタのワークフロー

5. Apps Script プロジェクトを設定する

6. getAuthType() を定義する

コード.gs

7. getConfig() を定義する

コード.gs

8. getSchema() を定義する

コード.gs

9. getData() を定義する: パート 1

request オブジェクトについて

request オブジェクト構造

10. getData() を定義する: パート 2

リクエストされたフィールドのスキーマを作成する

API からデータを取得して解析する

解析されたデータを変換し、リクエストされたフィールドでフィルタする

11. getData() を定義する: パート 3

コード.gs

12. マニフェストを更新する

appsscript.json

13. Looker Studio でコネクタをテストする

デプロイを使用する

コネクタを承認する

コネクタを構成する

スキーマを確認する

マイレポートを作成する

14. 次のステップ

作成したコネクタを改善する

コミュニティ コネクタでできること

参考情報

3. コミュニティコネクタの概要

4. コミュニティコネクタのワークフロー

`request` オブジェクトについて

`request` オブジェクト構造

コミュニティコネクタでできること