Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

soundTricker
Google API、GSuite、GCP、Angular(1&2)、Google Apps Scriptらへんの人 一応Google Developer Expert(Apps Script)です。 https://developers.google.com/community/experts/directory/profile/profile-keisuke_oohashi
https://plus.google.com/u/0/112329532641745322160/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした