LANG SELRCT

Apps Script Reference  (Create: Create new Spreadsheet | Create new Apps Script

Saturday, February 8, 2020

「コミュニティ コネクタを使ってみる」をやってみる


データスタジオについてよく理解していないときに、とりあえず以下の公式ラボをやった備忘録。

コミュニティ コネクタを使ってみる
https://developers.google.com/datastudio/connector/get-started?hl=ja

かかった時間:2時間くらい(ブログを書きながら)



最終的に保存したコード

コード.gs
function getAuthType() {
  var response = { type: 'NONE' };
  return response;
}

function getConfig(request) {
  var cc = DataStudioApp.createCommunityConnector();
  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();
}

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 };
}

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
  };
}



appsscript.json
{
  "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/datastudio/",
    "addonUrl": "https://github.com/google/datastudio/tree/master/community-connectors/npm-downloads",
    "supportUrl": "https://github.com/google/datastudio/issues",
    "description": "Get npm package download counts.",
    "sources": ["npm"]
  }
}



1. Intro
Community Connectors is a feature for Data Studio that lets you use Apps Script to build connectors to any internet accessible data source. 
Apps Scriptを使って、ネット上のデータソースへのコネクタを構築できるらしい。


このラボで学習できること
  • Google Data Studio Community Connectorの仕組み
  • Google Apps Scriptを使用してコミュニティコネクタを構築する方法
  • Data Studioでコミュニティコネクタを使用する方法

2. Quick Survey

ここは各自でラジオボタンを選択して次へ

3. Overview of Community Connectors
npmでパッケージを公開し、日次でパッケージのダウンロード数を追跡したい。
このコードラボでは、npmパッケージダウンロードカウントAPIからこのデータを取得するコミュニティコネクタを構築する。
次に、Data Studioでそのコミュニティコネクタを使用して、このデータを視覚化するダッシュボードを構築できる。

4. Community Connector Workflow
基本的なコミュニティコネクタでは、次の4つの関数を定義する。
  • getAuthType()
  • getConfig()
  • getSchema()
  • getData()

5. Set up your Apps Script project
Apps Scriptで新規プロジェクトを作成する。
プロジェクト名を「My Codelab Connector」にして保存する。

6. Define getAuthType()
getAuthType()を書く。

コード.gs
function getAuthType() {
  var response = { type: 'NONE' };
  return response;
}

7. Define getConfig()
getConfig()関数のresponseでユーザーに表示する構成オプションを定義できる。
設定画面では、以下のフォーム要素で情報提供やユーザー入力を取得したりできる。
  • TEXTINPUT
  • TEXTAREA
  • SELECT_SINGLE
  • SELECT_MULTIPLE
  • CHECKBOX
  • INFO

INFO要素でユーザーへ指示を提供できる。
TEXTINPUT要素でユーザーから入力パッケージ名を取得できる。
それらのフォーム要素をconfigParamsキーの下にグループ化する。
接続しているAPIはパラメーターとして日付を必要とする。
getConfig()応答でdateRangeRequiredをtrueに設定し、すべてのデータ要求で日付範囲を提供するようにData Studioに指示する。
データソースがパラメーターとして日付を必要としない場合は省略できる。

コード.gsにgetConfig()関数を追加してみる。

コード.gs
function getConfig(request) {
  var cc = DataStudioApp.createCommunityConnector();
  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();
}


8. Define getSchema()
getSchema()関数で、コネクターの選択された構成に関連付けられたスキーマを取得する。
getSchema()によって提供されたresponseに基づいて、ユーザーにフィールド画面を表示し、コネクター内のすべてのフィールドをリストする。
以下を含むスキーマの各フィールドに関する特定のメタデータを提供する。
  • フィールドの名前
  • フィールドのデータ型
  • 意味情報

詳細についてはgetSchema()およびFieldリファレンスを確認する。

コネクタのスキーマは固定されており、次の3つのフィールドが含まれている。
  • パッケージ名
    • ユーザーが提供するnpmパッケージの名前
  • ダウンロード
    • npmパッケージのダウンロード数
    • ダウンロード数の日付

getSchema()関数をコード.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 };
}


9. Define getData() : Part 1
getData()によって提供される応答に基づいて、ダッシュボードでグラフをレンダリングおよび更新する。
以下の場合もgetData()が呼ばれる。
  • ユーザーがダッシュボードにグラフを追加する
  • ユーザーがチャートを編集する
  • ユーザーがダッシュボードを表示する
  • ユーザーは、関連するフィルターまたはデータコントロールを編集する
  • Data Studioにはデータのサンプルが必要です

リクエストオブジェクトの構造

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

getData()関数からのリクエストの例
{
  configParams: {
    package: 'jquery'
  },
  dateRange: {
    endDate: '2017-07-16',
    startDate: '2017-07-18'
  },
  fields: [
    {
      name: 'day',
    },
    {
      name: 'downloads',
    }
  ]
}


10. Define getData() : Part 2
getData()responseでは、要求されたフィールドにスキーマとデータの両方を提供する必要があり、コードを3つのセグメントに分割する。
  1. 要求されたフィールドのスキーマを作成する
  2. APIからデータを取得して解析する
  3. 解析されたデータを変換し、要求されたフィールドをフィルタリングする

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>
  };
}


11. Define getData() : Part 3
getData()をコード.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
  };
}


12. Update manifest
Appsスクリプトエディターで、[表示]> [マニフェストファイルを表示]を開く。


appscript.jsonファイルを書き換えて保存する。

appsscript.json
{
  "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/datastudio/",
    "addonUrl": "https://github.com/google/datastudio/tree/master/community-connectors/npm-downloads",
    "supportUrl": "https://github.com/google/datastudio/issues",
    "description": "Get npm package download counts.",
    "sources": ["npm"]
  }
}


これで最初のコミュニティコネクタを構築し、テストドライブの準備ができた。

13. Test your connector in Data Studio

ステップ1:
[公開]> [マニフェストから展開]を選択する。

ステップ2:
Latest Version (Head) をクリックするとリンクが表示されます。


ステップ3:
リンクをクリックして表示された画面で「承認」をクリックします。

Enter a single package name に「lighthouse」を入力して
「接続」をクリックします。


「レポートを作成」をクリックします。


「レポートに追加」をクリックします。


手順通り期間のグラフと期間の選択を配置する。



これで最初のコミュニティコネクタをテストできました。


14. Next steps


参考

コミュニティ コネクタを使ってみる
https://developers.google.com/datastudio/connector/get-started?hl=ja

Connect and visualize all your data in Data Studio
https://codelabs.developers.google.com/codelabs/community-connectors/#0




Latest post

Extracting data from Google Sheets with regular expressions

Introduction Regular expressions are a powerful tool that can be used to extract data from text.  In Google Sheets, regular expressions ca...