Google Apps Scriptを使ってらくらくTypetalk BOT開発② 実践編 自分用Google Analyticsサマリーグラフ通知Botを作ってみるお

  • 19
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

最近スーツばかりで、ギークTシャツ着れていない大橋です。こんにちは。
昨日は「Google Apps Scriptを使ってらくらくTypetalk BOT開発①」でGASのLibraryを使って認証したり、投稿の仕方を記事にしました。

今日はもう少し実践的に毎朝Google Analyticsからデータを取得し、
グラフ化してTypetalkへ投稿するBotを作ってみたいと思います。

前提

今回は大きく分けて以下の3つのGASの知識が必要になります。

  • Google Analytics周り
  • Google Charts周り
  • Typetalkへの投稿周り

途中に参考リンクを張ってあるので、そっちも見てみて下さい。

フルコード

一旦先に全てのコードを書きます。
恐ろしいなーと思うのはコードの行数が空行含めても100行行ってないらへんですね。
それでAnalyticsからデータ取得して、グラフ化して、Typetalkへ...

dailyAnalyticsGraph.js
function dailyPost() {

  //全般の設定情報を取得
  var prop =  PropertiesService.getScriptProperties().getProperties();

  //前日データを取得するための設定
  var today = new Date();
  var yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);

  var startDate = Utilities.formatDate(yesterday, Session.getScriptTimeZone(), 'yyyy-MM-dd');
  var endDate = Utilities.formatDate(today, Session.getScriptTimeZone(), 'yyyy-MM-dd');

  //前日の訪問数を取得
  var metric = 'ga:visits';

  //時間単位
  var options = {
    dimensions: 'ga:hour',
    sort: 'ga:hour',
    maxResults: 24
  };

  //Analyticsのデータを取得
  var report = Analytics.Data.Ga.get("ga:" + prop.tableId, startDate, endDate, metric, options);

  //存在しない場合は何もしない
  if (!report.rows) {
    return;
  }

  //Chartを作るためにデータテーブルを作成
  var tableBuilder = Charts.newDataTable()
  .addColumn(Charts.ColumnType.NUMBER, "時間")
  .addColumn(Charts.ColumnType.NUMBER, "View数");

  report.rows.forEach(function(row){
    tableBuilder.addRow(row);
  });

  //データテーブルを利用して、線グラフを作成(デモなので見た目はこだわりません)、画像として取得
  var chartBlob = Charts.newLineChart()
                          .setDataTable(tableBuilder.build())
                          .build()
                          .getBlob();

  //Typetalk Clientを作成
  var typetalkApp = TypetalkApp.create(
                                prop.clientId,
                                prop.clientSecret,
                                [TypetalkApp.SCOPE_TOPIC_POST, TypetalkApp.SCOPE_TOPIC_READ], 
                                {name : "analytics"});

  //未認証だったら認証
  if(!typetalkApp.isAuthorized()) {
    typetalkApp.authorize();
  }

  //画像をTypetalkへアップロード
  var result = typetalkApp.uploadFile(prop.topicId, chartBlob);

  //アップロードした画像を使ってtypetalkへ投稿
  typetalkApp.postMessage(prop.topicId, "昨日の時間別サイト訪問数", {"fileKeys[0]" : result.fileKey});
}  

解説

Analytics周り

コードを抜き出してみると、以下の感じですが、ほとんど公式ドキュメントと同じコードになっています。

GASからAnalyticsを使う場合は少し儀式が必要になりますが、
ikemonnさんが「「GASって何?」だった僕が、Google Analyticsの情報をChatWorkにポストするbotを作るまでにやったこと」という記事に
書いて頂いているので、そちらを見てみて下さい。

  //前日データを取得するための設定
  var today = new Date();
  var yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);

  var startDate = Utilities.formatDate(yesterday, Session.getScriptTimeZone(), 'yyyy-MM-dd');
  var endDate = Utilities.formatDate(today, Session.getScriptTimeZone(), 'yyyy-MM-dd');

  //前日の訪問数を取得
  var metric = 'ga:visits';

  //時間単位
  var options = {
    dimensions: 'ga:hour',
    sort: 'ga:hour',
    maxResults: 24
  };

  //Analyticsのデータを取得
  var report = Analytics.Data.Ga.get("ga:" + prop.tableId, startDate, endDate, metric, options);

  //存在しない場合は何もしない
  if (!report.rows) {
    return;
  }


Charts周り

GASでChartsを使う場合には大きく分けて2つのことをします。

  • Data Tableを作成 つまり を作る
  • グラフを作る つまり 見た目 を作る

この辺りの細かい話はHumangasさんが「GAS(Google Apps Script)でグラフ(Google Chart Toolsで)をメールに埋め込んで送信する」に書いて頂いているので、そちらを参考にすると良いと思います。

  //Chartsを作るためにデータテーブルを作成
  var tableBuilder = Charts.newDataTable()
  .addColumn(Charts.ColumnType.NUMBER, "時間")
  .addColumn(Charts.ColumnType.NUMBER, "View数");

  report.rows.forEach(function(row){
    tableBuilder.addRow(row);
  });

  //データテーブルを利用して、線グラフを作成(デモなので見た目はこだわりません)、画像として取得
  var chartBlob = Charts.newLineChart()
                          .setDataTable(tableBuilder.build())
                          .build()
                          .getBlob();

Typetalkへ画像を投稿する

ここでやっとTypetalkAppの登場です。
Typetalkへ画像を投稿したい場合は大きく分けて2段階の処理が必要です。

  1. 画像をアップロードしてfileKeyを取得
  2. 取得したfileKeyをオプションとして投稿

なお認証周りについては昨日の記事を御覧ください。

TypetalkAppの補完からはわかりづらいですが、
Typetalk APIのドキュメントにも書いてあるので読んでみてください。

  //Typetalk Clientを作成
  var typetalkApp = TypetalkApp.create(
                                prop.clientId,
                                prop.clientSecret,
                                [TypetalkApp.SCOPE_TOPIC_POST, TypetalkApp.SCOPE_TOPIC_READ], 
                                {name : "analytics"});

  //未認証だったら認証
  if(!typetalkApp.isAuthorized()) {
    typetalkApp.authorize();
  }

  //画像をTypetalkへアップロード
  var result = typetalkApp.uploadFile(prop.topicId, chartBlob);

  //アップロードした画像を使ってtypetalkへ投稿
  typetalkApp.postMessage(prop.topicId, "昨日の時間別サイト訪問数", {"fileKeys[0]" : result.fileKey});

まとめ

いかがだったでしょうか?
この手のBotは設置しておくと、
なにかデータを見る習慣がついたり、
それを元に議論しやすくなります。

かなりLowコスト(というかGASとしては無料)で設置可能なので是非色々作ってみてください。

明日は余裕があったら「メンションに反応するBot」を作ってみたいと思います。

追記

書きました

Google Apps Scriptを使ってらくらくTypetalk BOT開発③ 応用編 メンションに反応する翻訳Botを作ってみた