データスタジオについてよく理解していないときに、とりあえず以下の公式ラボをやった備忘録。
コミュニティ コネクタを使ってみる
https://developers.google.com/datastudio/connector/get-started?hl=ja
かかった時間:2時間くらい(ブログを書きながら)
最終的に保存したコード
コード.gsfunction 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キーの下にグループ化する。
TEXTINPUT要素でユーザーから入力パッケージ名を取得できる。
それらのフォーム要素をconfigParamsキーの下にグループ化する。
接続しているAPIはパラメーターとして日付を必要とする。
getConfig()応答でdateRangeRequiredをtrueに設定し、すべてのデータ要求で日付範囲を提供するようにData Studioに指示する。
データソースがパラメーターとして日付を必要としない場合は省略できる。
getConfig()応答でdateRangeRequiredをtrueに設定し、すべてのデータ要求で日付範囲を提供するようにData Studioに指示する。
データソースがパラメーターとして日付を必要としない場合は省略できる。
コード.gsfunction 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に追加してみる
コード.gsfunction 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に書く。
コード.gsfunction 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