Google Data StudioのConnector作ろうと思ったついでに訳してみました。
おかしな部分がありましたら、気軽に編集リクエストしていただけたらと思います。

原文

1. Intro

Google Data Studioを使うと、リアルタイムな、そしてインタラクティブな美しいダッシュボードを無料で作る事ができます。
色々なデータを読み込み、完全な編集機能と、共有機能を持ったレポートを無制限に作成することができます。

ここに、Data Studio ダッシュボードのサンプルのスクリーンショットがあります。

(Data Studioでこのサンプル・レポートを表示するには、ここをクリックしてください)

Community Connectorは、Data Studioの機能でAppsスクリプトを使用してインターネットにアクセス可能なデータソースへのコネクタを構築できます。
Community Connectorは、Data Studioコミュニティによって構築されます。
誰でもCommunity Connectorを構築できます。
また、Community Connectorを他の人と共有して、Data Studio内から自分のデータにアクセスすることもできます。

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

商用プラットフォーム（ソーシャルメディア、マーケティング、分析など）のデータを視覚化。
オンプレミス環境のエンタープライズデータ（オンプレミスMySQLの販売データなど）を視覚化。
あなたが提供しているサービスの顧客に対してのデータ可視化。
ボタンを押すだけのレポーティングプラットフォームを作成。
ウェブソースから自分のデータを視覚化。（たとえば、Google Fitダッシュボードの作成など）

あなたが学ぶもの

Google Data Studio Community Connectorの仕組み
Google Appsスクリプトを使用してCommunity Connectorを構築する方法
Data StudioでCommunity Connectorを使用する方法

あなたが必要とするもの

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

2. Quick Survey

省略します。

3. Overview of Community Connectors

Data Studio　Community Connectorを使用すると、Data Studioからインターネットでアクセス可能なデータソースに直接接続できます。
商用プラットフォーム、パブリックデータセット、または社内のプライベートデータに接続できます。 Community Connectorは、Web API、JDBC API、フラットファイル（CSV、JSON、XML）、およびApps Script Servicesを通じてデータを取得できます。

npmにパッケージを公開し、毎日のパッケージのダウンロード数を追跡したいとします。
このコードラボの中で、npmパッケージのダウンロードカウントAPIからこのデータを取得するCommunity Connectorを作成します。次に、Data StudioのCommunity Connectorを使用して、このデータを視覚化するダッシュボードを構築できます。

4. Community Connector Workflow

通常のCommunity Connectorでは、下記の4つの関数を定義します。

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

Data Studioは後述する手順にて、コネクタの機能を利用、またレスポンスを使用します。
下記のようなシンプルなワークフローとなっています。

次は、Google Apps Scriptでコネクタを作成する手順を説明します。
Apps Script UIとcodewlabの間を行き来する必要があります。

5. Set up your Apps Script project

Step 1: Google Apps Scriptサイトを開きます。

Step 2: 左上の"新規スクリプト"をクリックして、新しいAppScriptプロジェクトを作成します。

Code.gsファイルに空のmyFunction関数を持つシェルプロジェクトが表示されます。

Step 3: myFunction関数を消します。

Step 4: プロジェクト名を入力します。
　　4a) ページ左上の Untitled project をクリックします。
　　4b) アプリケーション名を入力します。

これで Code.gsにconnectorのコードを書く準備ができました。

6. Define getAuthType()

Data Studioは、connectorが使用する認証方法を知るために、 getAuthType() 関数を呼び出します。
この関数は、サードパーティのサービスを承認するためにコネクタが必要とする認証方法を返す必要があります。

例えばnpmダウンロードコネクタの場合、使用しているAPIが認証を必要としないため、構築しているサードパーティのサービスで認証する必要はありません。次のコードをコピーし、Code.jsファイルに追加します。

Code.gs

function getAuthType() {
  var response = { type: 'NONE' };
  return response;
}

ここでは、コネクタにサードパーティの認証が不要であることを、 { 'type'： 'NONE' } として示しています。
サポートされているすべての認証方法を表示するには、AuthType（）リファレンスを参照してください。

7. Define getConfig()

ユーザーが、connectorを使用する前に、構成を設定する必要がある場合があります。
getConfig() 関数の応答で、ユーザーに表示される構成オプションを定義できます。
Data Studioは getConfig() 関数を呼び出して、connectorの構成の詳細を取得します。
getConfig() によって提供されるレスポンスに基づいて、Data Studioはコネクタ設定画面を表示し、特定のコネクタ動作を変更します。

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

タイプ	フォーム要素	説明
TEXTINPUT	入力	一行でのテキスト入力
TEXTAREA	入力	複数行でのテキスト入力
SELECT_SINGLE	入力	選択項目からの単一選択
SELECT_MULTIPLE	入力	選択項目からの複数選択
CHECKBOX	入力	チェックボックス
INFO	表示のみ	ユーザーに向けての情報表示

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

接続先のAPIには日付のパラメータが必要なため、 getConfig() レスポンスで dateRangeRequired を true に設定します。
これにより、Data Studioはすべてのデータ要求に日付範囲を提供するように指示します。
データソースに日付をパラメータとして必要としないようなconnectorを作る場合は、dateRangeRequired を省略できます。

getConfig() はこのようになります。
すでに getAuthType() のコードがあるCode.jsファイルに次のコードを追加します。

Code.gs

function getConfig(request) {
  var config = {
    configParams: [
        {
            type: 'INFO',
            name: 'instructions',
            text: 'Enter npm package names to fetch their download count.'
        },
        {
            type: 'TEXTINPUT',
            name: 'package',
            displayName: 'Enter a single package name',
            helpText: 'e.g. googleapis or lighthouse',
            placeholder: 'googleapis'
        }
    ],
    dateRangeRequired: true
  };
  return config;
}

これらのconfigParamsに基づいて、Data Studioでコネクタを使用すると、次のような構成画面が表示されます。
後で詳しく説明します。

次は、 getSchema() 関数について学びましょう。

8. Define getSchema()

Data Studioは、 getSchema() 関数を呼び出して、connectorの構成をもとにスキーマ情報を取得します。
getSchema() によって提供されるレスポンスに基づいて、Data Studioは、すべてのフィールドを一覧表示するフィールド画面をユーザーに表示します。

スキーマは、構成されたconnectorがユーザーにデータを提供できるすべてのフィールドのリストです。
同じコネクターの場合、異なる構成に基づいて異なるフィールドを持つ異なるスキーマを戻さなければならない場合があります。
スキーマには、APIソースから取得したフィールド、Appsスクリプトで計算したフィールド、計算されたフィールドの式を使用してData Studioで計算されたフィールドを含めることができます。
スキーマの各フィールドについて、次のようなメタデータを提供します。

フィールド名
フィールドの型
フィールドの意味

詳しい内容は、 getSchema() と Field のリファレンスを参照してください。

connectorのデータおよびユーザーが提供する構成の取得方法によっては、スキーマが修正される場合や、getSchema() が呼び出されたときにスキーマを動的に作成する必要がある場合があります。
getSchema() 関数のrequest引数には、ユーザーが定義したgetConfig（）の構成パラメータが提供されます。

このcodelabでは、request引数にアクセスする必要はありません。
次の手順である getData() 関数のコードを記述するときに、request引数について詳しく学習します。

このconnectorの場合、スキーマは固定されており、次の3つのフィールドがあります。

フィールド名	説明
packageName	あなたが提供するnpmパッケージ名
downloads	npm packageのダウンロード数
day	日付ごとのダウンロード数

connectorでの getSchema() は、下記のようなコードになります。
スキーマ情報には getSchema() と getData() の両方でアクセスする必要があるため、個別の変数npmSchemaを作成しています。 Code.jsファイルに次のコードを追加します。

Code.gs

var npmSchema = [
  {
    name: 'packageName',
    dataType: 'STRING',
    semantics: {
      conceptType: 'DIMENSION'
    }
  },
  {
    name: 'downloads',
    dataType: 'NUMBER',
    semantics: {
      conceptType: 'METRIC',
      semanticType: 'NUMBER',
      isReaggregatable: true
    },
    defaultAggregationType: 'SUM'
  },
  {
    name: 'day',
    dataType: 'STRING',
    semantics: {
      conceptType: 'DIMENSION',
      semanticType: 'YEAR_MONTH_DAY'
    }
  }
];

function getSchema(request) {
  return { schema: npmSchema };
}

Data Studioでconnectorを使用すると、Data Studioのフィールド画面に次のフィールドが表示されます。
これは、あなたがconnectorをテストする際は、これ以上のことがあります。

最後に getData() について学びましょう。

9. Define getData() : Part 1

Data Studioは、connectorからフィールドのデータをフェッチする必要があるときはいつでも、 getData() 関数を呼び出します。
getData() 関数が返すレスポンスに基づいて、Data Studioはダッシュボード内のチャートをレンダリングおよび更新します。下記のイベント中に getData() が呼び出されることがあります。

ユーザーがダッシュボードにグラフを追加する
ユーザーがグラフを編集する
ユーザーはダッシュボードを表示する
ユーザーが関連するフィルタまたはデータコントロールを編集する
Data Studioはデータのサンプルを必要とする場合

完全な getData() コードを後のページにあるので、このページからコードをコピーする必要はありません。

requestオブジェクトの説明

Data Studioは getData() 呼び出しでrequestオブジェクトを渡します。
requestオブジェクトは、下記のようになっています。 getData() 関数を作る際に役立つでしょう。

requestオブジェクトの構造

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

configParams オブジェクトには、getConfig() を元にユーザーが構成したパラメータ情報が含まれています。
scriptParamsオブジェクトには、connectorの実行に関連する情報が含まれます。このcodelabでは必要としていません。
dateRangeには、 getConfig() レスポンスで要求され日付範囲が含まれます。
fieldsには、データが要求されるフィールドの名前のリストが含まれます。

このconnectorの場合、 getData() 関数からの要求例は次のようになります

{
  configParams: {
    package: 'jquery'
  },
  dateRange: {
    endDate: '2017-07-16',
    startDate: '2017-07-18'
  },
  fields: [
    {
      name: 'day',
    },
    {
      name: 'downloads',
    }
  ]
}

上記の getData() の呼び出しでは、スキーマに追加のフィールドがあっても、2つのフィールドしか要求されません。次のページには、この getData() 呼び出しの応答例と、一般的なgetData（）応答構造が含まれています。

注意
このcodelabでは、 getSchema() にrequestパラメータを使用していません。
getSchema() の場合、requestパラメータにはconfigParamsとscriptParamsのみが含まれます。

10. Define getData() : Part 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>
  };
}

要求されたフィールドのスキーマを作成する

これは、要求されたフィールドのスキーマをサブセット化する方法です。
request.fieldsには、要求されたフィールドのfield.nameのリストが含まれています。

  // Create schema for requested fields
  var requestedSchema = request.fields.map(function (field) {
    for (var i = 0; i < npmSchema.length; i++) {
      if (npmSchema[i].name == field.name) {
        return npmSchema[i];
      }
    }
  });

APIからのデータの取得と解析

npm APIのURLは次の形式になります。

https://api.npmjs.org/downloads/point/{start_date}:{end_date}/{package}

Data Studioが提供する request.dateRange.startDate 、 request.dateRange.endDate 、および request.configParams.package を使用して、まずAPIのURLを作成します。
次に、UrlFetchApp（Apps Script Class：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
  ].join('');
  var response = UrlFetchApp.fetch(url);
  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]
    }
  ]
}

getData() のレスポンスでは、schemaプロパティを使用して、要求されたフィールドのみのスキーマを返します。
rowsプロパティを使用して行のリストとしてデータを返します。各行について、値のフィールドのシーケンスは、スキーマ内のフィールドのシーケンスと一致しなければなりません。先ほどのリクエストの例に基づくと、 getData() のレスポンスは次のようになります。

{
  schema: [
    {
      name: 'downloads',
      dataType: 'NUMBER',
      semantics: {
        conceptType: 'METRIC',
        semanticType: 'NUMBER',
        isReaggregatable: true
      },
      defaultAggregationType: 'SUM'
    },
    {
      name: 'day',
      dataType: 'STRING',
      semantics: {
        conceptType: 'DIMENSION',
        semanticType: 'YEAR_MONTH_DAY'
      }
    }
  ],
  rows: [
    {
      values: [ 38949, '20170716']
    },
    {
      values: [ 165314, '20170717']
    },
    {
      values: [ 180124, '20170718']
    },
  ]
}

すでにスキーマのサブセットを作成しています。
以下のコードを使用して、解析されたデータを変換し、要求されたフィールドに対してフィルタリングします。

  // Transform parsed data and filter for requested fields
  var requestedData = parsedResponse.map(function(dailyDownload) {
    var values = [];
    requestedSchema.forEach(function (field) {
      switch (field.name) {
        case 'day':
          values.push(dailyDownload.day.replace(/-/g, ''));
          break;
        case 'downloads':
          values.push(dailyDownload.downloads);
          break;
        case 'packageName':
          values.push(request.configParams.package);
          break;
        default:
          values.push('');
      }
    });
    return { values: values };
  });

11. Define getData() : Part 3

今までのこーど説明をまとめると、getData() コードは以下のようになります。
Code.jsファイルに次のコードを追加します。

Code.gs

function getData(request) {
  // Create schema for requested fields
  var requestedSchema = request.fields.map(function (field) {
    for (var i = 0; i < npmSchema.length; i++) {
      if (npmSchema[i].name == field.name) {
        return npmSchema[i];
      }
    }
  });

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


  // Transform parsed data and filter for requested fields
  var requestedData = parsedResponse.map(function(dailyDownload) {
    var values = [];
    requestedSchema.forEach(function (field) {
      switch (field.name) {
        case 'day':
          values.push(dailyDownload.day.replace(/-/g, ''));
          break;
        case 'downloads':
          values.push(dailyDownload.downloads);
          break;
        case 'packageName':
          values.push(request.configParams.package);
          break;
        default:
          values.push('');
      }
    });
    return { values: values };
  });

  return {
    schema: requestedSchema,
    rows: requestedData
  };
}

Code.jsファイルが完成しました。次に、マニフェストを更新します。

12. Update manifest

Appsスクリプトエディタで、[表示]> [マニフェストファイルを表示] を選択します。

新しいappsscript.jsonマニフェストファイルが作成されます。

appscript.jsonファイルを次のように変更します。

appscript.json

{
  "dataStudio": {
    "name": "npm Downloads - From Codelab",
    "logoUrl": "https://raw.githubusercontent.com/npm/logos/master/%22npm%22%20lockup/npm-logo-simplifed-with-white-space.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"]
  }
}

保存します。

おめでとう！あなたは最初のcommunity connectorが作成されテストする準備ができました！

13. Test your connector in Data Studio

デプロイメントを使用する

Step 1: Appsスクリプト開発環境で、 [公開]> [マニフェストから配置] をクリックして[Deployments]画面を開きます。

デフォルトで、 Latest Version (Head) が表示されます、

Step 2: Get IDリンクをクリックし、デプロイメント名またはData Studioアイコンをクリックします。このコネクタのData Studioへのダイレクトコネクタリンクが表示されます。

Step 3: connectorのリンクをクリックします。DataStudioが新しいウィンドウで表示されます。

connectorを承認する

Data Studioを初めて利用するユーザー：
Data Studioを使用していなかった場合、Data Studioをアカウントに承認し、利用規約に同意するよう求められます。承認プロセスを完了してください。
Data Studioを初めて使用する際には、マーケティング・プリファレンスを更新し、更新して更新するかどうかを尋ねるポップアップが表示されることがあります。最新の機能、アップデート、および製品発表について電子メールで知りたい場合は、製品発表にサインアップする必要があります。

新しいconnectorを認証するプロンプトが表示されます。

「承認」をクリックし、必要な許可をコネクターに提供してください。

connectorを構成する

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

スキーマの確認

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

ダッシュボードの作成

Data Studioダッシュボード環境設定をします。[レポートに追加]ボタンをクリックします。

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

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

これでおしまい！あなたは最初のコミュニティコネクタをテストしました！
codelabの最後に移動します。さて、次のステップを見てみましょう。

14. Next steps

connectorを改善する

connectorを改善してみましょう。

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

翻訳時より
npm connectorはリンク切れ。
https://github.com/googledatastudio/community-connectors/tree/master/npm-downloads
にリポジトリは変わったんだろうけど、バージョンが・・・確認できず。

Community Connectorsをもっと知る

Connector APIとマニフェストのreference
ベストプラクティスを理解するために、オープンソースリポジトリのコード例を参照してください。
あなたのローカル環境でCommunity Connectorsを開発できるように clasp Codelabを利用してください。
完全なCommunity Connectorsを作成したら、公開オプションを検討してください。
Data Studioのコミュニティ Visializationを作ってください。

追加情報

以下は、このCodelabに記載している内容よりもさらに詳しく調べるための情報です。

種類	ユーザー向け	開発者向け
Documentation	Help Center	Developer Documentation
News & Updates	Sign up in Data Studio > User Settings	Developer Mailing List
Ask Questions	User Forum	Stack Overflow [google-data-studio]
Videos	Data Studio on Youtube	Coming Soon!
Examples	Report Gallery	- Open Source Repository - Connector Gallery

日本語訳:Google Data Studio Community Connector Codelab

原文

1. Intro

あなたが学ぶもの

あなたが必要とするもの

2. Quick Survey

3. Overview of Community Connectors

4. Community Connector Workflow

5. Set up your Apps Script project

6. Define getAuthType()

7. Define getConfig()

8. Define getSchema()

9. Define getData() : Part 1

requestオブジェクトの説明

10. Define getData() : Part 2

要求されたフィールドのスキーマを作成する

APIからのデータの取得と解析

要求されたフィールド形式への変換とフィルタ

11. Define getData() : Part 3

12. Update manifest

13. Test your connector in Data Studio

デプロイメントを使用する

connectorを承認する

connectorを構成する

スキーマの確認

ダッシュボードの作成

14. Next steps

connectorを改善する

Community Connectorsをもっと知る

追加情報