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


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

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

# 前提

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

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

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

# フルコード

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



```js: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周り

コードを抜き出してみると、以下の感じですが、ほとんど[公式ドキュメント](https://developers.google.com/apps-script/advanced/analytics)と同じコードになっています。

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


```js
  //前日データを取得するための設定
  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](http://qiita.com/Humangas)さんが「[GAS（Google Apps Script）でグラフ（Google Chart Toolsで）をメールに埋め込んで送信する](http://qiita.com/Humangas/items/e4c82e712963647ffcc7)」に書いて頂いているので、そちらを参考にすると良いと思います。


```js
  //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を取得
1. 取得したfileKeyをオプションとして投稿

なお認証周りについては[昨日の記事](http://qiita.com/soundTricker/items/b3cc2848ca8fda758cc7)を御覧ください。

TypetalkAppの補完からはわかりづらいですが、
[Typetalk APIのドキュメント](http://developers.typetalk.in/api_ja.html#upload-attachment)にも書いてあるので読んでみてください。



```js
  //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を作ってみた](http://qiita.com/soundTricker/items/3db08485cd2f60800b49)