2018年6月18日月曜日

M5Stackを使ってCatbell Notifierに繋がるペリフェラルを作る

作るもの

Catbell NotifierはAndroid ThingsおよびAndroidデバイス(5.0以降)で動作しますが、それにBLEで通信して状態を表示したり、光って知らせるためのペリフェラルをM5Stackを使って作ります。




Catbell Notifierとは

Android ThingsやAndroidデバイスで動作する、CIのビルドのような時間が掛かるものの通知をディスプレイに表示するためのアプリです。

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




このアプリ自体はディスプレイに状態を表示し続けますが、M5Stackという小さな開発モジュールにBLEで通信することで、そちらの液晶にも状態を表示できます。

M5Stackについて

M5StackはESP32というモジュールに次のようなものが扱える形でパッケージングされた開発モジュールです。
  • 320 x 240 TFTカラーディスプレイ
  • microSDカードスロット
  • スピーカー
  • 各種I/Oピン
Arduino IDEにM5Stackのライブラリを追加すると、Arduino IDEで開発できます。


価格も5000円弱と安価で、Switch ScienceやAmazonでも手に入ります。
ESP32はBLE(Bluetooth Low Energy)やWiFiのための技適が通っており、安価にこういったペリフェラルを作ることができます。


Catbell Notifier用のファームウェア

プロジェクトサイトの中にファームウェアのソースコードがあります。
これをM5Stackに書き込むことでAndroid上で動作するアプリと通信ができるようになります。


アプリ上での設定

ナビゲーションドロワーからPeripheral Settingsを開きます。


ペリフェラルの電源が入っていれば、リストにペリフェラルのBluetoothのMACアドレスが表示されます。表示されない場合は何処かおかしいです。
もし原因がわからない場合はnRF Connect for MobileのようなアプリでM5Stackに接続できるか確認し、問題を切り分けましょう。


チェックを入れ、トップの画面に戻ると接続されます。


LEDを取り付けて光らせる

M5Stackには拡張コネクタが有り、そこにフルカラーLEDを取り付けることで光らせることができます。

 

使用しているLEDはOSTBMCZ2C1DというカソードコモンのフルカラーLEDです。


配線図は次の通りです。

実際に実装したもののは次のとおりです。裏表の配置に気をつけましょう。

 

M5Stackに繋ぐためのケーブルも作ります。
フラットケーブルにコネクタをカシメて作ります。

 

動作確認で光らせるには、Edit Statusの編集画面から行えます。



筐体を作る

3Dプリンターで筐体を作れます。
3DモデルはBlenderで作ったものと、それをSTLにエクスポートしたものがあります。


筆者はReplicator Dualを使っているので、それようにMakerBotで並べて印刷します。丸い小さな円盤はヘルパーディスクと呼ばれる、印刷中に熱収縮で剥がれるのを防止するためのものです。



印刷が終わって塗装したい場合はヤスリやパテ、サーフェイサーで表面を整えます。

 

塗装が終わったら組み立てます。底面のネジはそのままだと机を傷つけることがあるのでクッションゴムを付けます。

 

 

最後に透明な樹脂で作った可愛いゴーファーのフィギュアを乗せます。

 


おわりに

通知をM5Stackに表示するペリフェラルを作りました。筐体は無くてもM5Stackだけでも動作させることができるため、電源さえ繋げられれば複数のM5Stackを接続して設置もできます。開発を楽しくする小物としていかがでしょうか。

2018年6月4日月曜日

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

モチベーション

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

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

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

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


作るもの

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



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

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

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を光らせて知らせる


道具


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

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



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



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







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



Webhookを確認する

Webhook Settingsを確認します。





この画面にはWebhookにアクセスするための情報が表示されています。notify_v1とnotify_v2の2つが表示されていますが、まずは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として送られてきます。

このため、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に限らず、他の用途にも使えますので、ご興味のある方は他の用途も試してみてください。