CIでビルドが終わると光るゴーファーを作る

これは何か

CIでビルドの開始や完了したとき、CIからURLを叩くと通知してくれるデバイスです。
ブランチ名とビルド開始、成功、失敗を表示してくれます。

• すべての写真はこちら
• 動画はこちら

どうやって動いているのか？

CIがURLを叩いてから、通知されるまで流れは簡単に次のようになります。

• CIがGoogle Cloud FunctionsのURLを叩く
  • ブランチ名と、ビルドの開始、成功、失敗のいずれかのフラグを送ります
• Google Cloud Functionsからsakura.ioのIncoming WebhookのAPIを叩きます
• sakura.ioの通信モジュールを繋げたArduinoからデバイスを制御します
  • LCDにブランチ名とビルド状況を表示します
  • RGB LEDをビルド状況に応じて光らせます

使われているパーツ

• sakura.ioのモジュール
• sakura.ioのArduinoのシールド
• Arduino Uno
• Arduino用シールド基盤
  • Arduino用バニラシールド基板ver.2
  • フルカラーLED（OSTBMCZ2C1D CathodeCOM）
  • 抵抗 100Ωx2、150Ωx1
  • L字ピンヘッダ
  • ピンヘッダ
• キャラクタ液晶(20x4)：AitendoのSPIキャラクタ液晶キットの基盤で代替可能
  • STNキャラクタ液晶モジュール（20x4）
• キャラクタ液晶のSPI化モジュール
  • ８ビットシフトレジスタ SN74HC595N
  • 丸ピンソケット（SN74HC595N用）
  • 両面ユニバーサル基板
  • 可変抵抗 1kΩ x2
• ネジ類
  • 3mm round screws and nuts(for LCD)
  • 2mm tapping screws(for body)
  • 1.5mmのピン
  • etc...
• 透明なゴーファー人形
  • 3Dプリンター（筆者が使っているのはこれ）
  • パテ
  • サンドペーパー
  • サーフェイサー
  • シリコンゴム
  • 透明なレジン（ホビーキャストNX 透明）
  • 離型剤

筐体を3Dプリンターで印刷する

Gopherフィギュアを作るで紹介したもののベースのデータを使用します。
3Dデータはここにあります。

Building Hardware

キャラクタ液晶のSPI化モジュールとArduino用のシールド基盤の２つを作ります。

透明のゴーファーフィギュアを作る

次のデータから3Dプリンターでゴーファーを印刷します。後述の枠を使うためには高さが7cmになるようにスケールさせてください。

サンドペーパーとパテ、サーフェイサーを使い表面を整えます。

シリコンゴムで型を取るための枠を作りますが、シリコンゴムを流し込むための枠が必要です。これも3Dプリンターで作りましょう。

ゴーファーを固定用の土台に接着します。

準備ができたらシリコンゴムを流し込み、後ろ半身の型を取ります。

シリコンゴムが十分に硬化したら、ネジを外して、合わせ目用の部品を取り払います。
そして合わせ目になる場所に離型剤を塗布します。

前半身側にシリコンゴムを流します。

シリコンゴムが十分に硬化したら、分解し、両側に離型剤を塗ります。

これで型が完成しました。

透明のレジンを使い、ゴーファーを錬成します。

かなり前に買った古いレジンを使ったため濁ってしまいましたが、ゴーファーが錬成できました。

筐体へ固定するためのネジ穴を20mm間隔で２つ空けます。
正確に20mm間隔にするには3Dプリンターで治具を作るといいでしょう。

穴が空いたら固定用のピンを刺します。
これで透明のゴーファーフィギュアが完成しました。

キャラクタ液晶のSPI化モジュール

この部品はLCDをSPIで制御するために必要です。
SPIを使わない場合は各自でコードと回路を調整してください。
AitendoのSPIキャラクタ液晶キットの基盤を使うこともできます。

Arduino用のシールド基盤

ArduinoにLEDとLCDを繋ぐための回路を、シールド基盤として作ります。
もし、Arduino LeonardoのようにSPIのピンアサインが違うものを使う場合は回路を適宜修正してください。

回路ができたらArduinoのSPIを使ったLiquidCrystalのサンプルのスケッチで動作確認をしましょう

sakura.ioのDIPスイッチの設定

SPIを使います。
5Vに設定し、CS(Chip Select)は9番PINを設定します。

組み立て

LCDのケース上部に固定します。

Arduinoをケース下部に固定します。

Arduinoにsakura.ioの通信モジュールを刺し、その上にsakura.ioの通信モジュールを、その上に作成したシールド基盤を刺します。
そしてLCDとシールド基盤を繋ぎます。

ケースを閉じ、ゴーファーを載せてハードウェアは完成です。

ソフトウェアのインストールと設定

ソフトウェアをインストールする場所はGoogle Cloud FunctionsとArduinoの２つがあります。また、sakura.ioの設定が必要になります。

すべてのソースコードは https://github.com/cattaka/CiNotifier にあるのでクローンしてください。

sakura.ioの設定

https://sakura.io/ からログインしてコンソールを開きます。
自分のsakura.ioの通信モジュールのデバイスを登録します。

Incoming Webhookを作成します。

ダッシュボードで追加したモジュールのIDと、Incoming WebhookのUUIDは後述のsettings.jsonに記述します。

Arduinoへの書き込み

次のスケッチをArduino IDEなどでArduinoに書き込んでください。特に修正する必要はありません。

Google Cloud Functionsへのデプロイ

Google Cloud Functionsの始め方は公式のドキュメントを参照してください。次のソースコードを開いてください。

settings.json.sampleをsettings.jsonという名前でコピーし、必要な箇所を修正してください。

settings.json

{
  "passphrase": "foobar"
  "webhook_token": "hogehoge-fuga-fuga-fuga-hogehogefuga",
  "module_ids": [
    "hogefugahoge"
  ]
}

• passphrase：アクセス制御に使います。自由に指定してください。
• webhook_token：sakura.ioのIncoming Webhookに表示されているUUIDを指定してください
• module_ids：あなたのsakura.ioのモジュールのidを指定してください。複数台可。

動作確認は次のスクリプトで行なえます。このときデバイスが組み立てられて電源が入っていれば、LEDやLCDの動作も確認できます。

$ node test_run.js <passphrase> <branch_name> <build_state>

動作確認ができればGoogle Cloud Functionsにデプロイしましょう。

$ gcloud beta functions deploy \
  ci_notifier \
  --trigger-http

デプロイが完了すればURLを叩いて動作確認をしましょう。
URLのパラメータのpassphrase、branch_name、build_stateは適宜指定してください。

$ curl https://<your-project-location>.cloudfunctions.net/ci_notifier?passphrase=<your-passphrase>&branch_name=<branch_name>&build_state=<build_state>

おめでとうございます！
後はCIのビルドフローの中にURLを叩く処理を入れるだけです。

通信内容の解説

sakura.ioのIncoming WebhookはHTTPのPOSTを使い、メッセージを通信モジュールに送ることができます。また通信モジュールにはメッセージのチャネルが複数あり、何番のチャネルに送るか指定します。一度のPOSTで小さなデータ(最大8byte)を含んだメッセージを16個まで送ることができます。

このデバイスではブランチ名の断片を送る用のチャネルと、ビルド状況を送る用のチャネルと、光り方を指定する用のチャネルの３つを使用しています。

ブランチ名の断片を送る用のチャネル

sakura.ioのIncoming Webhookは１つのメッセージで8byteしか送れません。しかしブランチ名は軽く8byteを超えます。またLCDの表示文字数の問題で、長すぎても表示できません。なので適当に短くした後、8byteごとに分割して複数のメッセージに分けて送ります。
Arduino側で受信したデータは一旦バッファに保持し、まだ表示はしません。

ビルド状況を送る用のチャネル

ビルドの状況は開始、成功、失敗の３つを、LCDに表示する3文字で送ります。Arduino側ではこれを受信したときに、保持したバッファからブランチ名と、ビルド状況をLCDに表示します。

光り方を指定する用のチャネル

ビルドの成功や失敗で光り方をいろいろ変えたいけど、Arduino側にハードコーディングしてしまうと後で変えるのが大変です。
8byteのメッセージの中で頑張って表現します。
8bit(=1 byte)を次のように分割します。

• 1-2 bit：Green
• 3-4 bit：Blue
• 5-6 bit：Red
• 7-8 bit：光る時間。２進数で (n+1)*250 msec。250msec〜1000msec。

これを繋げて光り方を変えます。
たとえば、黄色で250msで３回点滅させた後、２秒間光らせる場合は、

• 0x3C = 0b00111100 = {表示時間: 250ms, 赤:100%、緑:100%、青:0%}
• 0x00 = 0b00000000 = {表示時間: 250ms, 赤: 0%、緑: 0%、青:0%}
• 0x3C = 0b00111100 = {表示時間: 250ms, 赤:100%、緑:100%、青:0%}
• 0x00 = 0b00000000 = {表示時間: 250ms, 赤: 0%、緑: 0%、青:0%}
• 0x3C = 0b00111100 = {表示時間: 250ms, 赤:100%、緑:100%、青:0%}
• 0x00 = 0b00000000 = {表示時間: 250ms, 赤: 0%、緑: 0%、青:0%}
• 0xFC = 0b11111100 = {表示時間:1000ms, 赤:100%、緑:100%、青:0%}
• 0xFC = 0b11111100 = {表示時間:1000ms, 赤:100%、緑:100%、青:0%}

であるので、これを連結して "3C003C003C00FCFC" の文字列で送ります。
この辺りのコードがそれになります。

おわりに

ビルド時間を待つのは退屈なものです。
このデバイスがあればビルド時間を待つ時間も退屈しなくなるでしょう。
なにせゴーファーは可愛いですから。
それでは皆さん、良いビルドを。