Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

データポータルでデータに接続し、ビジュアル化する

1. はじめに

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

（ ここをクリックすると、データポータルでこのレポートの例を表示できます）

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

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

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

学習内容

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

必要なもの

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

2. 簡単なアンケート

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

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

データポータルについて詳しく知りたい

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

データポータルを別のプラットフォームと統合しようとしています。

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

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

通読のみ

通読して演習を行う

データポータルについてどの程度ご存知ですか？

聞いたことがない

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

いつも使っている。

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

ご自身のバックグラウンドに最も当てはまるものをお選びください。

デベロッパー

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

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

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

デザイナー

その他

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

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

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

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

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

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

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

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

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

動画を視聴したら、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() を定義する

データポータルは、コネクタで使用される認証方法を把握する必要がある場合に 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() 関数のレスポンスは、ユーザーに表示される設定オプションを定義します。データポータルは getConfig() 関数を呼び出して、コネクタの設定の詳細を取得します。getConfig() が提供するレスポンスに基づいて、データポータルはコネクタ設定画面を表示し、特定のコネクタの動作を変更します。

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

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

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

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

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 に基づいて、データポータルでコネクタを使用すると、次のような設定画面が表示されます。詳しくは後ほど説明します。

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

8. getSchema() を定義する

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

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

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

詳細については、後で 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 };
}

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

最後の関数 getData() に進みましょう。

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

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

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

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

getData()

コード

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

データポータルは、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}

データポータルから提供される 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. データポータルでコネクタをテストする

デプロイを使用する

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

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

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

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

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

コネクタを承認する

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

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

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

コネクタを構成する

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

スキーマを確認する

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

ダッシュボードを作成する

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

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

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

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

14. 次のステップ

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

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

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

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

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

参考情報

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

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

データポータルでデータに接続し、ビジュアル化する

1. はじめに

学習内容

必要なもの

2. 簡単なアンケート

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

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

データポータルについてどの程度ご存知ですか？

ご自身のバックグラウンドに最も当てはまるものをお選びください。

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. データポータルでコネクタをテストする

デプロイを使用する

コネクタを承認する

コネクタを構成する

スキーマを確認する

ダッシュボードを作成する

14. 次のステップ

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

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

参考情報

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

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

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

`request` オブジェクト構造

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