このページは Cloud Translation API によって翻訳されました。

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 とウェブ API の基本的な知識がある

2. 簡単なアンケート

この Codelab を選んだ理由は何ですか。

<ph type="x-smartling-placeholder"></ph> 全体的にデータの可視化に興味がある。

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

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

Looker Studio を別のプラットフォームと統合したい。

Google Cloud ソリューションに興味がある。

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

<ph type="x-smartling-placeholder"></ph> スキムスルーのみ

内容を読んで演習を済ませる

をご覧ください。

Looker Studio についてどの程度ご存じですか。

<ph type="x-smartling-placeholder"></ph> 聞いたことがない

意味は知っているが使っていない。

定期的に使っている。

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

ご自身の経歴に最も近いものを選択してください。

<ph type="x-smartling-placeholder"></ph> デベロッパー

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

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

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

デザイナー

その他

をご覧ください。

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

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() 関数を呼び出して、コネクタの構成の詳細を取得します。Looker Studio は、getConfig() が提供するレスポンスに基づいてコネクタ設定画面をレンダリングし、特定のコネクタの動作を変更します。

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

`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() 関数を呼び出して、ユーザーが選択したコネクタの構成に関連付けられたスキーマを取得します。Looker Studio は、getSchema() が提供するレスポンスに基づいて、コネクタ内のすべてのフィールドをリストアップしたフィールド画面がユーザーに表示されます。

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

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

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

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

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

コネクタではスキーマが固定されており、次の 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() 関数を呼び出します。Looker Studio は、getData() からの回答に基づいて、ダッシュボードにグラフをレンダリングして更新します。次のイベントで 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 クラス: リファレンス）を使用して 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 エディタで、[Project Settings] >「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 でコネクタをテストする

Deployment を使用する

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

デフォルトのデプロイである [ヘッドデプロイ] が表示されます。

ステップ 2: [Copy] をクリックしてヘッドデプロイ 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」と入力します。」と入力して、右上の [接続] をクリックします。

スキーマを確認する

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

マイレポートを作成する

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

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

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

これで、最初のコミュニティコネクタが作成されました。これで、この Codelab は終了です。それでは、次のステップを見てみましょう。

14. 次のステップ

構築したコネクタを

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

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

コミュニティコネクタをさらに活用する

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

参考情報

以下に、この Codelab で取り上げた資料をより深く掘り下げるために利用できるさまざまなリソースを示します。

リソースの種類	ユーザー機能	デベロッパー機能
ドキュメント	ヘルプセンター	デベロッパー向けドキュメント
ニュース&更新	Looker Studio で登録 >ユーザー設定	デベロッパーメーリングリスト
質問する	ユーザーフォーラム	スタックオーバーフロー [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 でコネクタをテストする

Deployment を使用する

コネクタを承認する

コネクタを構成する

スキーマを確認する

マイレポートを作成する

14. 次のステップ

構築したコネクタを

コミュニティ コネクタをさらに活用する

参考情報

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

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

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

`request` オブジェクトの構造

コミュニティコネクタをさらに活用する