CIのビルドを通知する仕組みをAndroidとFirestoreで作った話

モチベーション

最近、Bitrise、Travis CI、Circle CI、JenkinsといったいろいろなCIサービスがでてきました。WantedlyでもいくつかのCIサービスを用途毎に使い分けて導入しています。筆者はAndroidのアプリを主に担当しているのでアプリのビルドや自動テストをCIに任せています。

ある日、仕事中にふと「ブランチごとのビルドやテストの結果を光って通知するデバイスがあれば楽しくない？」と思いました。小さなデバイスで、ディスプレイにブランチとそのステータスが表示され、更新があると光って教えてくれる、そんなデバイスを思い浮かべました。

そんな自分の要望にお答えしてCatbell Notifierというアプリを作りました。基本はDIYです。エンジニアの端くれなので。

プロジェクトサイト： https://github.com/cattaka/CatbellNotifier

GitHubやBitriseなどのWebhookを起点として、ブランチの状態を表示するようになっています。

仕組み

大きな仕組みは次の図のようになります。

1. 今どきのCIサービスやGitHubは状態の更新時にWebhookでURLにアクセスができるのでWebhookでGoogle Cloud Functionにデプロイしたfunctionにアクセスします
2. functionはWebhookの内容からブランチ名やステータスを取り出して、Firestoreにデータを書き込みま
3. AndroidアプリがFirestoreをオブザーブしていて、更新を検知してアプリ側のディスプレイにも表示します
4. さらにAndroidアプリはESP32で作られたペリフェラルへBLEで通信し、表示内容や光らせる命令を送ります
5. ペリフェラルはディスプレイの表示を更新し、光ります

アプリ側の作り方

Catbell Notifier自体はAndroid Thingsを想定して作ったものですが、普通のAndroidアプリなので、Android 5.1以降の普通のAndroidデバイスでも動作させることができます。Raspberry PI 3を使う場合はAndroid ThingsをSDカードに焼いて起動します。

Catbell NotifierのAPKはプロジェクトサイトでダウンロードしてadbでインストールすれば動作します。

あとはサインインして、いろいろ設定すると、WebhookのURLが生成されるので、そのURLにアクセスすると、、、画面側の表示も更新されます。

ディスプレイに移すとこんな感じになります。

ペリフェラルの作り方

ESP32というマイコンを使ったM5Stackというハードウェアがあります。これはディスプレイやスピーカー、I/Oピンが綺麗にパッケージングされた上、Arduino IDEでコードを書くことができ（ESP32とM5Stackのライブラリは追加が必要）、こういった用途には便利なものです。

これだけでは寂しいのでLEDを光らせましょう。I/OピンにフルカラーLEDを接続すれば光らせられます。適当に配線して基盤とフラットケーブルを作ります。

部品ができたら繋いで動作確認をします。写真は青色に光らせています。

でも基盤が剥き出しなのはイケてないですよね。筐体も作りましょう。Blenderでガッと設計して3Dプリンタで印刷すれば形になります。

だけど、FDM方式（Fused Deposition Modeling／熱溶解積層法）の3Dプリンターは積層痕が残ってしまい、表面がガビガビして美しくありません。なのでサンドペーパー、パテ、サーフェイサーを駆使して表面を整えて、塗装します。

塗装が終わったら組み立てます。筐体の設計のときにネジ穴をちゃんと通しているので、問題なく組み立てられます。

これで筐体は完成ですが、まだ何か足りません。

剥き出しのLEDが光っているだけなんて、楽しくもなんともないですよね。透明なフィギュアを置いて光らせましょう。

光らせるフィギュアは我らがゴーファーです。写真のゴーファーの3Dモデルは https://github.com/StickmanVentures/go-gopher-model にて配布されているものを使用しました（Stickman Ventures, Inc.社に感謝）。透明のフィギュアは3Dプリンターでそのまま印刷できないため、透明のレジンでキャストして作ります。

フィギュアも3Dプリンタで印刷したものを、サンドペーパー、パテ、サーフェイサーを駆使して表面を整えます。

フィギュアの表面が綺麗になったらシリコンゴムで型を取ります。

シリコンゴムの型ができたら透明のレジンでキャストし、透明のゴーファーを錬成します。

あとは固定用のピンを刺し、筐体に乗せて完成です。

光らせるとこんな感じになります。

このようにご家庭にあるもので簡単にペリフェラルを作ることができます。

作った感想

Firebase Authenticationを使うと認証が非常に楽でした。Firebase Cloud FirestoreはWebhookからAndroidデバイスへのリアルタイムな通信が楽でした。FirebaseUI-Androidも認証画面の実装で考えなくて良くて楽でした。

AndroidのBLEはよく謎のエラーで通信できなくなって困りました。コードの微調整でマシにはなりましたが、それでも１日１回は再起動しないと断続的に切断される現象が発生します（現在進行系）。

運用した感想

ペリフェラルはオフィスに５〜６台設置して運用してみた感想です。

複数のリポジトリのビルド状況を表示させると、別チームの誰が何をしてるかフンワリわかるようになりました。筆者はアプリの実装を担当していますが、サーバーサイドのビルドやデプロイも表示しているため、それを見てアプリの動作確認するといった動きができるようになりました。

誰かの特定のブランチがずっとエラーで赤く光ってると心配になる効果もありました。そのブランチが青く光る(成功)とホッとします。

魔改造して回転灯を付けたバージョンもあります。こちらは頻繁に回ると鬱陶しいので、PagerDuty経由でクリティカルな場合のみ回転灯が回るようにしています。

おわりに

Android ThingsはGoogle Play Servicesが利用できるため、フルスクラッチで自分で実装すると大変なものも手軽に作れます。またBluetoothのような近距離の通信もアプリエンジニアだけで作れます（AndroidのBLE周りはトラップが多いのが難点ですが）。これからこういったハードウェアが増えていったら楽しいなと思うので、ご興味があるかたは是非作ってみてください。