LoginSignup
17

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-03-06

最近スーツばかりで、ギーク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を作ってみた

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17