データスタジオについてよく理解していないときに、とりあえず以下の公式ラボをやった備忘録。
コミュニティ コネクタを使ってみる
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つのフィールドが含まれている。
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つのセグメントに分割する。
- 要求されたフィールドのスキーマを作成する
- APIからデータを取得して解析する
- 解析されたデータを変換し、要求されたフィールドをフィルタリングする
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
