CIの通知に便利なCatbell Notifierを作りました

モチベーション

最近のソフトウェア開発ではビルドやテストコードを自動で実行してチェックするCI(Continuous Integration)サービスを使用することが多くなりました。多くのGitHubのようなソースコードのホスティングサービスからもCIサービスが利用できるようになっています。

たとえばGitHubでのCIのチェック結果は各pull-requestに表示されます。

このチェック結果はpull-requestの画面に表示される以外にも、
Slackのような外部のサービスに連携することで、
スマホのようなデバイスにも通知することができます。

スマホへの通知も便利ですが、数が多くなるとそもそも見なくなってしまうため、

これらの通知がリアルタイムで反映され、表示されるものが欲しくなりました。
また机に置ける小さなディスプレイもペリフェラルとして欲しいです。

作るもの

WebhookのURLにアクセスすると、リアルタイムにそれが更新されるデバイスを作ります。デバイスにはAndroid Things（通常のAndroidでも可）を使用します。



Androidアプリには筆者が作ったCatbell Notifierというアプリを使用します。

• CatbellNotifier Project site
• APKのダウンロード

モチベーションの項で言及した「机に置ける小さなディスプレイもペリフェラル」の作り方については、別の記事にて紹介します。

Catbell Notifierの仕組み

Webhookのアクセスからのリアルタイムな反映はFirebase Cloud Firestoreを使うことで実現します。AndroidアプリがFirestoreをオブザーブし、WebhookがFirestoreを更新します。具体的な流れは次のようになります。

1. CIサービスがWebhookにアクセスする
2. Google Cloud FunctionsにデプロイされたWebhookがFirebase Cloud Firestoreのデータを更新する
3. Firebase Cloud Firestoreへのデータの更新がAndroidアプリに同期される
4. Androidアプリが画面の更新やペリフェラルへ通知する
5. ペリフェラルが液晶やLEDを光らせて知らせる

道具

• Androidデバイス
• Rasbberry PI 3か、Lolipop(Android 5.0)以降のAndroidデバイス
• Raspberry Pi 3 Model B+
• Raspberry Pi用電源セット(5V 3.0A)
• あると便利
• Raspberry pi用3.5インチディスプレイ
• 小さいワイヤレスマウス

Catbell Notifierのインストールと設定

Android Thingsが動作するRasbberry PI 3か、Lolipop(Android 5.0)以降のデバイスを準備します。
GitHubのreleasesからAPKをダウンロードし、adbコマンドなどでインストールします。

• APKのダウンロード

インストールが終わればCatbell Notifierを起動します。

起動したらサインアップします。



最初は何もないため、まずtopicを作成します。

topicにはGitHubのリポジトリ名を指定すると良いでしょう。

Webhookを確認する

Webhook Settingsを確認します。





この画面にはWebhookにアクセスするための情報が表示されています。notify_v1とnotify_v2の２つが表示されていますが、まずはnotify_v1の動作確認をしましょう。
curlコマンドなどで表示されているURLに、token、topic、item、statusを付加してアクセスします。

• token : 認証のためのトークンです。
• topic : 自分で作成したものの名前を指定します。
• item : ブランチの名前のような表示したい名前を指定します。
• state : Statusに表示されているものを指定します。これは自分で編集できます。

具体的なcurlコマンドを使ったときの例は次のようになります。

$ curl "https://us-central1-catbell-notifier.cloudfunctions.net/notify?token=<表示されているToken>&topic=CatbellNotifier&state=running&item=test_branch"

{"success":true,"topic":"CatbellNotifier","item":"test_branch","state":"running"}

レスポンスのsuccessがtrueならば成功です。
最初の画面に戻ると項目が追加されていることが確認できます。

Webhookを各サービスに対応させる

前述のnotify_v1はtoken、topic、item、stateを一つのURLにしてアクセスしました。
GitHubやBitriseといったサービスのOutgoing Webhookでは、itemやstateはHTTP通信のPOSTとして送られてきます。

• 参考情報
• BitriseのOutgoing webhookの仕様
• GitHubのstatus eventの仕様

このため、notify_v1のWebhookはこれらのサービスに対して直接使用することができません。この問題はnotify_v2のWebhookを使うことで解決できます。
Catbell NotifierにはこれらのHTTP通信の内容から、itemやstateを取り出す仕組みがあります。これはナビゲーションドロワーのServicesから確認できます。GitHubやBitriseはプリセットされています。

たとえばGitHubでは次のように指定されています。
追記：2018-06-04時点でこの指定に誤りがあったため、v0.7.1で修正しました

GitHubにWebhookを設定する

notify_v2のWebhookをGitHubに設定しましょう。
設定は次の通りです。

• PayLoad URL
• https://us-central1-catbell-notifier.cloudfunctions.net/notify_v2?token=<自分のトークン>&service=GitHub&topic=<作成したtopic>
• Content type
• application/jsonにする
• Event
• statusのみにする

設定が終われば、何かブランチをPushしましょう。
例えば"add_info_webhook_v2"というブランチをpushすると、画面に次のように追加されます。

おわりに

複数のリポジトリに跨った開発をしていると、どのリポジトリの何が最新であるか、それが素早く把握したいときがあります。紹介したCatbell Notifierを使えばそれの見える化をできます。見える化して楽しいチーム開発ができればと思います。
また、今回は触れませんでしたが、ソフトウェア開発に置けるCIに限らず、他の用途にも使えますので、ご興味のある方は他の用途も試してみてください。