前回において、データ供給元となるコントローラを作成しました。今度は、それを使用してデータポータルのデータソースを作成するために、カスタムのコミュニティコネクタの作成する必要があります。コネクトの作成は、Google Apps Scriptでの開発となり、ウェブではここで詳しく説明されています。Google Apps Scriptの開発は私には初めてであり、とても興味があるところです。しかし、開発の言語はjavascript(google script)、ファイルの編集はすべてウェブでと、普段のプロジェクトとは違い、また先のGoogleでの説明で扱う例は、参考になるものの、私のやりたいこととは違うゆえに、試行錯誤たくさんありました。

コミュニティコネクタの作成にはいくつかステップがあります。

  1. 新しいGoogle Apps Scriptプロジェクトを作成する
  2. コネクタコードを作成する
  3. プロジェクト マニフェストを作成する

Google Apps Scriptのプロジェクトを作成

Googleのアカウントにログインして、以下へ行きます。

https://script.google.com/home

このような画面です。

上の画面で、新規スクリプトをクリックすると、以下の画面になります。

そこで、まず「無題のプロジェクト」を「カスタムコネクタ」と上書きし、「コード.gs」を「main.gs」と英語名に改名します。英語名にするのは、後にウェブ環境以外で編集するときに扱い易くするためです。main.gsでなくてもCode.gsでも名前はOKです。ただし、拡張子は、jsでなくgsであることに注意を。

コネクタコードの作成

肝心のコードですが、javascript言語で開発します。データポータル以外でも、GoogleシートなどGoogleの他のサービスのプラグイン機能のための開発も同様なようです。

コネクタのコード開発はリソースも少なく試行錯誤が伴いますが、私が参考としたのは以下です。

https://developers.google.com/datastudio/connector/build
https://codelabs.developers.google.com/codelabs/community-connectors/#0
https://developers.google.com/datastudio/connector/reference

開発したコードは以下となります。main.gsにコピペしてください。

var cc = DataStudioApp.createCommunityConnector();

// 認証に必要な関数。ここでは認証なし。

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

// このコネクタを使用してデータソースを作成するときに入力してもらう項目を指定する関数。
// ここでは、アクセス先のurlのみを尋ねる。

function getConfig(request) {
  var config = cc.getConfig();
  
  config
    .newTextInput()
    .setId('url')
    .setName('データ元のURLを指定してください')
    .setHelpText('e.g. https://example.com/gdp')
    .setPlaceholder('https://');
  
  config.setDateRangeRequired(true);

  return config.build();
}

// データソースで表示される項目を定義をここで定義。
// id, date_created, 年月の3つの項目。年月は、date_createdをもとにした計算式の項目。

function getFields() {
  var fields = cc.getFields();
  var types = cc.FieldType;

  fields
    .newMetric()
    .setId('id')
    .setName('id')
    .setType(types.NUMBER);

  fields
    .newDimension()
    .setId('date_created')
    .setName('date_created')
    .setType(types.YEAR_MONTH_DAY);
  
  fields
    .newDimension()
    .setId('year_month')
    .setName('年月')
    .setFormula("TODATE(date_created,'%Y-%m')")
    .setType(types.YEAR_MONTH);

  return fields;
}

// データソースを接続した後に表示される項目を定義する関数。上のgetFields()をコール。

function getSchema(request) {
  var fields = getFields().build();
  return { schema: fields };
}

// データソースを通して実際のデータ取得してレポートに渡すときにコールする関数。
// データの取得は、fetchDataFromApi()の関数をコール。

function getData(request) {

  var requestedFields = getFields().forIds(
    request.fields.map(function(field) {
      return field.name;
    })
  );
  
  try {
    var response = fetchDataFromApi(request);
    
    var rows = JSON.parse(response);
    
    var data = [];
    
    rows.forEach(function(row) {
      var values = [];
      requestedFields.asArray().forEach(function(field) {
        switch(field.getId()) {
          case 'id':
            values.push(row.id);
            break;
          case 'date_created':
            values.push(row.date_created);
            break;            
          default:
            values.push('');
        }
      });
      data.push({
        values: values
      });
    });
  } catch (e) {
    cc.newUserError()
      .setDebugText('Error fetching data from API. Exception details: ' + e)
      .setText(
        'The connector has encountered an unrecoverable error. Please try again later, or file an issue if this error persists.'
      )
      .throwException();
  }

  return {
    schema: requestedFields.build(),
    rows: data
  };
}

/**
 * コントローラにアクセスして、jsonのデータを取得。開始日と終了日の期間も指定する。
 */
function fetchDataFromApi(request) {
 var formData = {
    'date_start' : request.dateRange.startDate,
    'date_end' : request.dateRange.endDate
  };

  var options = {
    'method' : 'get',
    'payload' : formData
  };

  var response = UrlFetchApp.fetch(request.configParams.url, options);
  return response;
}

// 以下を設定すると、エラーが起きたときにデバッグに必要な詳細の説明が得られる。

function isAdminUser() {
  return true;
}

プロジェクト マニフェストを作成

以下のメニューから、マニフェストファイルを作成します。

マニフェストファイル、appsscript.jsonは、作成したコネクタをコミュニティコネクタとして登録するのに必要な情報を含みます。以下は私のビジネスの例。

これで一応役者は揃ったというところです。今回は残念ながら何も動作するの見せることができません。次回でデータソースとレポートを作成して初めてすべてが繋がります。また、そのときにどこかで間違いがあるなら問題が起こってきます。デバッグの仕方も習得必要となります。次を乞うご期待!

By khino