Google Apps ScriptsでTypescriptが超簡単に使えるようになった! - アクトインディ開発者ブログ tech.actindi.net
上記記事を読んでGoogle App Scriptをcliから管理できるようにっていたことを知ったので実際にやってみることにしました
以前から当ブログのソーシャルブックマーク数を集計してdatastudioで表示するという事をやっていたので今回はそこをGASで実行させるようにしてみたいと思います
流れとしては下記のように
- IFTTTでRSSの更新をトリガーにしてスプレッドシートに記載
- GASの定期実行をトリガーにしてスプレッドシートの内容に関してのソーシャルブックマーク数を取得し更新
- datastudioを用いて可視化
といった感じになります
IFTTTでブログのRSS→スプレッドシートに
まずは当ブログの記事が書かれたら自動でスプレッドシートに内容を転記するように設定します
IFTTTではてなブログのRSSを読んで新たな記事があればスプレッドシートに行を追加する
といった設定を行います
設定はこんな感です、とくに特別なことはしてませんね
設定するとRSSが更新されるたびに特定のスプレッドシートに(URLやタイトルなどが)自動的に転記されていきます
今まで書いた記事に関してはあらかじめデータをまとめて同スプレッドシートに記入しておきます
clasp
次にclaspを使ってGASのコードを書いていきます
参照先でやってること丸パクリですが一応残しておきます
claspのインストール
mkdir social-count cd social-count npm init -y npm install @google/clasp tslint -D npm install @types/google-apps-script -S npx tslint --init
プロジェクトの作成
npx clasp create social-count npx clasp pull
感覚ですがclaspでプロジェクトを作ってからすぐpullしてもCode.js落ちてこないようです(ちょっと時間かかるっぽいです)
.clasp.json
の中身を変えてアップロード対象をsrc
に変更します
- .clasp.json
{ "scriptId": "1Jh11N2HoGsYcGmm_sg_X18fGuuxvRXSX1Q0T1viAZI36IFuy_dWmpVr4", "rootDir": "src }
Code.js
をCode.ts
に変更します
mkdir src mv appsscript.json src/ mv Code.js src/Code.ts
適当なコードを書いてみる
動作確認のためログだけを出力するようなコードを書きます
- Code.ts
function Sample(){ Logger.log('log!!'); }
push
pushします
npx clasp push
動作確認
ブラウザから開いて実行してみます
うまく動きました
開発
あとはひたすら関数を作っていきます
開発時はファイルを保存したら自動でpushしてくれる--watch
オプションを付けておきます
npx clasp push --watch
実際のコード(一部抜粋)
function hatena(url: string): number { const apiUrl = "http://b.hatena.ne.jp/entry/jsonlite/?url="; const requestUrl = `${apiUrl}${url}`; const res = UrlFetchApp.fetch(requestUrl); if (res != "null") { return JSON.parse(res)['count']; } return 0; }
version情報を付与
今回はこれを共通で使えるようにライブラリ化したいと思います
ライブラリで使用するためにはversionが必要(呼び出す際にバージョンの指定が必要)なので付与します
npx clasp version
npx clasp version 'バージョン名'
バージョン名を指定することも可能
とくに指定しない場合はインクリメンタルに数値が増えていきます(1,2,3...)
スプレッドシート側のGASから読み込むようにスクリプトを作成
さきほどの工程で作成したGASをスプレッドシート側のGASから読み込む設定を行います
Google Apps Scriptを共通化してスプレッドシートに読み込ませる方法。スクリプトの共通化。 | 最適化コンサルタント-Oji
スプレッドシートに紐付いているGASに関してもcloneして同じようにclaspで管理します
npx clasp clone ${SCRIPT_ID}
上記で手動設定した依存ライブラリの設定はappscript.json
で管理できるようです
なので今回作成したソーシャルブックマークカウントのGASを追加しておきます
- appscript.json
"dependencies": { "libraries": [{ "userSymbol": "socialcount", "libraryId": "1Jh11N2HoGsYcGmm_sg_X18fGuuxvRXSX1Q0T1viAZI36IFuy_dWmpVr4", "version": "3" }] }
- Code.ts
function setSocialCount(): void { Logger.log("Start!!"); const sheet = SpreadsheetApp.getActiveSpreadsheet(); const data = sheet.getDataRange().getValues(); const length = sheet.getLastRow(); data.forEach((row, i) => { // ヘッダーは除外 if (i === 0) { return; } // 24時間に一回リクエスト対象とする const hour = (new Date).getHours(); if (i % hour !== 0) { return; } const title = row[1]; const url = row[2]; sheet.getRange("F" + (i + 1)).setValue(socialcount.hatena(url)); sheet.getRange("G" + (i + 1)).setValue(socialcount.twitter(url)); sheet.getRange("H" + (i + 1)).setValue(socialcount.pocket(url)); // sheet.getRange("I" + (i + 1)).setValue(socialcount.facebook(url)); }); Logger.log("Finish!!!"); }
呼び出し側のコードはこんな感じ
appscript.json
のuserSymbol
に記述した識別子がGASの中で使えるようになります
ライブラリに割り当てられる名前空間みたいなもののようです
ライブラリの中にある関数とつなげてsocialcount.hatena
といった感じでライブラリ側の関数を実行します
permission設定
初回実行時にAuthorizationが必要と言われるので実行許可を与えます
Review Permissions
Go to share-count(unsafe)
確認
スプレッドシート側で数値が更新されたか確認します
定期実行トリガーの設定
動作確認ができたら定期的に実行してもらうため、スプレッドシート側のGASで定期実行させるように設定します
スクリプトエディタの時計のアイコンをクリックし
こんな感じ
これで一日経てば全記事のブックマーク数がわかるはず!
現状(2018-09-26時点)だとこのトリガーの設定をclaspで管理する方法がなさそう?でした(間違ってたら教えてほしいです)
データソースをスプレッドシートにして可視化
Datastudio側でさきほどのスプレッドシートをデータソースとしてグラフを作っていきます
作成方法などは割愛しますがいったん表だけ出しました
簡単ですね
まとめ
実際に書いてみてよかった点
- typescriptで書ける
- 関数名などの補完が効く
- cliで管理できる
- コードをgit管理できる
- 使い慣れたエディタで編集できる
- GAS自体の機能だが定期実行が行える
まだ不便だった点
- GASのトリガーの設定をclaspで管理できない
- スプレッドシートと連携すると
clasp run
,clasp logs
が使えない(詳しく追ってないです) - どんなライブラリがあるかなどの情報が見つけられなかったので既存のライブラリのスクリプトIDをどうやって探したらいいかわからない
簡単な機能の実装であればGASも選択肢に入れて良いのではという印象を持ちました
実用案件を見つけてもう少し知見をためてみようと思います