notebook

都内でWEB系エンジニアやってます。

Google App Script(clasp)でソーシャルカウントを取得して可視化する

Google Apps ScriptsでTypescriptが超簡単に使えるようになった! - アクトインディ開発者ブログ tech.actindi.net

上記記事を読んでGoogle App Scriptをcliから管理できるようにっていたことを知ったので実際にやってみることにしました

以前から当ブログのソーシャルブックマーク数を集計してdatastudioで表示するという事をやっていたので今回はそこをGASで実行させるようにしてみたいと思います

流れとしては下記のように

f:id:swfz:20180926043015p:plain

  • IFTTTでRSSの更新をトリガーにしてスプレッドシートに記載
  • GASの定期実行をトリガーにしてスプレッドシートの内容に関してのソーシャルブックマーク数を取得し更新
  • datastudioを用いて可視化

といった感じになります

IFTTTでブログのRSS→スプレッドシートに

まずは当ブログの記事が書かれたら自動でスプレッドシートに内容を転記するように設定します

IFTTTではてなブログのRSSを読んで新たな記事があればスプレッドシートに行を追加する

といった設定を行います

設定はこんな感です、とくに特別なことはしてませんね

f:id:swfz:20180926043035p:plain

設定するとRSSが更新されるたびに特定のスプレッドシートに(URLやタイトルなどが)自動的に転記されていきます

f:id:swfz:20180926043045p:plain

今まで書いた記事に関してはあらかじめデータをまとめて同スプレッドシートに記入しておきます

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.jsCode.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

動作確認

ブラウザから開いて実行してみます

うまく動きました

f:id:swfz:20180926043126p:plain

開発

あとはひたすら関数を作っていきます

開発時はファイルを保存したら自動で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

media.thanksmaker.net

スプレッドシートに紐付いている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.jsonuserSymbolに記述した識別子がGASの中で使えるようになります

ライブラリに割り当てられる名前空間みたいなもののようです

ライブラリの中にある関数とつなげてsocialcount.hatenaといった感じでライブラリ側の関数を実行します

permission設定

初回実行時にAuthorizationが必要と言われるので実行許可を与えます

f:id:swfz:20180926043147p:plain

Review Permissions

f:id:swfz:20180926043201p:plain

Go to share-count(unsafe)

f:id:swfz:20180926043210p:plain

確認

スプレッドシート側で数値が更新されたか確認します

定期実行トリガーの設定

動作確認ができたら定期的に実行してもらうため、スプレッドシート側のGASで定期実行させるように設定します

スクリプトエディタの時計のアイコンをクリックし

f:id:swfz:20180926043234p:plain

こんな感じ

f:id:swfz:20180926043245p:plain

これで一日経てば全記事のブックマーク数がわかるはず!

現状(2018-09-26時点)だとこのトリガーの設定をclaspで管理する方法がなさそう?でした(間違ってたら教えてほしいです)

データソースをスプレッドシートにして可視化

Datastudio側でさきほどのスプレッドシートをデータソースとしてグラフを作っていきます

作成方法などは割愛しますがいったん表だけ出しました

f:id:swfz:20180926043258p:plain

簡単ですね

まとめ

実際に書いてみてよかった点

  • typescriptで書ける
    • 関数名などの補完が効く
  • cliで管理できる
    • コードをgit管理できる
  • 使い慣れたエディタで編集できる
  • GAS自体の機能だが定期実行が行える

まだ不便だった点

  • GASのトリガーの設定をclaspで管理できない
  • スプレッドシートと連携するとclasp run, clasp logsが使えない(詳しく追ってないです)
  • どんなライブラリがあるかなどの情報が見つけられなかったので既存のライブラリのスクリプトIDをどうやって探したらいいかわからない

簡単な機能の実装であればGASも選択肢に入れて良いのではという印象を持ちました

実用案件を見つけてもう少し知見をためてみようと思います