詩と創作・思索のひろば

ドキドキギュンギュンダイアリーです!!!

Spreadsheet に送信したスピードキュービングの記録を Slack や Pixela に連携する

ご機嫌いかがでしょうか。以前作ったタイマーアプリ fuTimer はスピードキュービングの測定記録をスプレッドシートに送信できるんですが、

記録をスプレッドシートに保存できるスピードキューブ用タイマーアプリを作った - 詩と創作・思索のひろば

スプレッドシートは貧者のサーバレスこと(言い飽きた)Google Apps Script を呼びだせるので、記録データをその他の外部サービスと連携できます。自分が求めているのは Slack と Pixela の2つだったので、これらに投稿する仕組みを作りました。あとは Twitter もあってもいいかもな。

Slack

こんな感じで、セッションをシートに保存するたびに、Slack に通知できます。

f:id:motemen:20181106101801p:plain

インストールと設定

  1. fuTimer の記録に使っているスプレッドシートを開き、メニューから [ツール] → [スクリプト エディタ] を選択して開く。リポジトリにある slack.js を "slack.gs" など適当な名前のスクリプトファイルとして追加します。
  2. [ファイル] → [プロジェクトのプロパティ] から、[スクリプトのプロパティ] を選択し、 SLACK_WEBHOOK_URL という名前で、任意の Slack ウェブフック URL を追加します。
    • f:id:motemen:20181106102022p:plain:w450
  3. [編集] → [現在のプロジェクトのトリガー] で、「スプレッドシートから」「変更時」に postStatsToSlack を呼ぶよう設定します。さっき見たらここの UI が変わっててびっくりした。
    • f:id:motemen:20181106101812p:plain:w450
  4. あとは fuTimer から記録を送信するたびに Slack に通知されるはずてすが、外部アクセスの認可は一度だけ手動で与えてやる必要があるので、[実行] → [関数の実行] から手で postStatsToSlack を実行し、権限を与えてください。たぶん「このアプリは確認されていません」と出るけど、「詳細」からポチポチしてると進められた。

仕組み

シートに仕込んだスクリプトでは、シートの編集時に onEdit という名前の関数が(あれば)呼ばれ、引数のイベントオブジェクトから変更された範囲も取得できるんだけど、fuTimer がやってるような API からの変更の場合はどうもこれが呼ばれないらしい。

ってのと、onEdit トリガからだと外部サービスを呼べないっぽい気がする(未検証)。

仕方がないので上に書いたように onChange トリガを受けるようにして、変更された範囲も取れないのでスクリプトプロパティに、最後に取り扱った行数を記録して、差分を Slack に送信しています。

Pixela

同様に Pixela。Pixela については、commit以外の数値でも草を生やせる、PixelaというAPIサービスを作った! - えいのうにっき を読んでもらうとして、毎日の計測回数でもって、以下のように芝を生やすことができます。自分の場合は fuTimer 以前の記録もシートに転記しているので、練習はじめたころからの記録もある。

意外と計測してない日があって、身が引き締まりますね。

インストールと設定

  1. https://pixe.la のドキュメントにのっとって、Pixela のユーザとグラフを作成します。
  2. Slack の場合と同様に、 pixela.js を配置します。
  3. [ファイル] → [プロジェクトのプロパティ] から、[スクリプトのプロパティ] を選択し、 PIXELA_API_URL という名前で、任意の Pixela API エンドポイント URL を、PIXELA_TOKEN という名前で Pixela ユーザトークンを設定します。
  4. [編集] → [現在のプロジェクトのトリガー] で、「時間主導型」「日付ベースのタイマー」「午前3〜4時(自分が寝てそうな時間帯)」で syncPixelDelta を呼び出すよう設定する。
  5. 上記のトリガは差分更新(前日1日分)なので、手動で syncPixelaAll を実行して、これまでの記録を Pixela に送信します。

仕組み

こちらは一日一度のバッチとして動かして、前日の日付の記録を洗い出し、その数を前日のカウントとして Pixela に投稿している。簡単ですね。なので更新は一日遅れになります。

Webpack で Google Apps Script のスクリプトを生成する

gas-webpack-plugin を利用した。global のプロパティへの代入があれば、トップレベルの関数として宣言するようになっているらしいんだけど、README 通り mode: "production" とすると Uglify されるからかうまくいかなくて、mode: "development" としたうえで devtool: false としpluginsModuleConcatenationPlugin を与えた らうまくコンパイルできた。