最近スーツばかりで、ギークTシャツ着れていない大橋です。こんにちは。
昨日は「Google Apps Scriptを使ってらくらくTypetalk BOT開発①」でGASのLibraryを使って認証したり、投稿の仕方を記事にしました。
今日はもう少し実践的に毎朝Google Analyticsからデータを取得し、
グラフ化してTypetalkへ投稿するBotを作ってみたいと思います。
前提
今回は大きく分けて以下の3つのGASの知識が必要になります。
- Google Analytics周り
- Google Charts周り
- Typetalkへの投稿周り
途中に参考リンクを張ってあるので、そっちも見てみて下さい。
フルコード
一旦先に全てのコードを書きます。
恐ろしいなーと思うのはコードの行数が空行含めても100行行ってないらへんですね。
それでAnalyticsからデータ取得して、グラフ化して、Typetalkへ...
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段階の処理が必要です。
- 画像をアップロードしてfileKeyを取得
- 取得した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を作ってみた