技術猫の工作室: 2018

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で開発できます。

M5Stack Arduino Library： https://github.com/m5stack/M5Stack

価格も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です。

RGB FluxLED OSTBMCZ2C1D CathodeCOM

配線図は次の通りです。

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

M5Stackに繋ぐためのケーブルも作ります。

フラットケーブルにコネクタをカシメて作ります。

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

筐体を作る

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

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を更新します。具体的な流れは次のようになります。

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

道具

Androidデバイス

Rasbberry PI 3か、Lolipop(Android 5.0)以降のAndroidデバイス

あると便利

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として送られてきます。

参考情報

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

2018年5月24日木曜日

3Dプリンターを使ってゴーファーピアスを作る

作るもの

この写真のようなゴーファーのピアスを作ります。本当はちゃんとした金属で作りたいのですが難しいため、3Dプリンターを使ってABS樹脂で印刷し、メッキ風の塗料を使って金属風に仕上げます。

必要なもの

道具

3Dプリンター（筆者が使っているのもの）

QIDI技術3Dプリンター

リューター

コードレスミニルーター

研磨用ビット

ドライブース代わりの食器乾燥機

山善(YAMAZEN) 食器乾燥機 YDA-500(W)

Mr.ネコの手
ネコの手ステーション

塗料や消耗品

サーフェイサー

コンパウンドトライアルセット 25gx3種
メッキ風の塗料

トップコート光沢スプレー

その他

金具

ゴーファーの紹介

ゴーファー（Gopher）はプログラム言語の１つであるGo言語のマスコットキャラクターです。ゴーファーは実在する動物で、ジリスの一種でもあります。ゴーファーはCreative Commons Attribution 3.0 Unportedのライセンスで公開されています。

オリジナルのデータ

teamstickman氏が可愛いゴーファーのモデルを公開しているのでこれをベースにします。筆者はBlenderというツールを使っているので、それで編集します。

https://github.com/StickmanVentures/go-gopher-model

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

印刷用データにする

オリジナルのサイズだと大きすぎるので高さ２cmくらいになるようにサイズ調整をします。そして、ヒートン（後述の固定するための金具）を打ち込むための穴を開けます。穴の直径は1.5mmにしました。3Dプリンターによっては太くなったり細くなったりするので、その辺りは自分の3Dプリンターの癖に合わせましょう。

3Dプリンターでそのまま印刷すると、オーバーハングで浮いている部分にサポートを作るのですが、サポートを剥がした部分がガビガビするため、２つに割って印刷します。

接着する

分離して印刷したものを接着します。筆者はABS樹脂で印刷したので、ABS用の接着剤を使用します。使用する樹脂によっては適切な接着剤を使用しないと容易に剥がれたりするので気をつけましょう。特にABS樹脂は接着剤の相性が大きいので要注意です。

表面を整える

印刷して接着して完成といいたいところですが、3Dプリンターで印刷したものは表面が荒いため、いろんな道具を使って表面を整えます。

リューターで大まかに均す

まずはリューターで大まかに表面を削って均します。回転速度が速すぎたり、押し付けるのが強すぎたりすると表面が熱を持って溶けてしまうので、加減をしながら削ります。

サンドペーパーで更に均す

リューターでだいたい成らせたら、180〜320番くらいのサンドペーパーで表面を更に均します。このタイミングでは320番より大きな番手は不要です

溶きパテを使う

3Dプリンターで印刷したものは微妙に隙間が空いていたりするので、その隙間を溶きパテで埋めます。溶きパテはちゃんと掻き混ぜた後、筆で塗ります。
溶きパテが乾いたらサンドペーパーで磨いて更に均します。

サーフェイサーで表面を確認する
320番くらいのサンドペーパーで一通り綺麗になったら500番のサーフェイサーを吹きます。灰色のサーフェイサーだと、表面の具合がとてもわかりやすくなります。
乾燥させて、表面に荒いところがあるなら前の工程に戻ります。
問題がなさそうならサンドペーパーの番手と、サーフェイサーの番手を上げてきます。

コンパウンドで磨く

2000番のサンドペーパーまで磨いた後はコンパウンドで更に磨きます。コンパウンドはメーカーによって細かさが異なるのですが、99工房の極細ならツヤがでるまでできます。
リューターでフェルトバフにコンパウンドを付けて磨くこともできますが、バフの種類によっては削れ過ぎたり、熱で溶けたりするので気をつけてください。

塗装する

表面が仕上がったら塗装しましょう。
筆者が持っているゴールドやシルバーの塗料は、Mr.Colorや染めQのものになります。
２社の違いは筆者の感覚は次のとおりです。

Mr.Color

表面処理をちゃんとしないと艶が出ない
塗膜が強い

染めQのメッキ感覚

2000番くらいで磨いておけば艶がでる
塗膜が厚く柔らかい
乾燥はドライブースで２〜３日おいたほうが良い

他のメーカーからも出ているのでいろいろ試してみると良いでしょう。

２つ注意点があります。
１つめは乾燥にドライブースを使う場合、メッキ系の塗料は最初から熱を加えると歪んだり気泡が発生します。最初の数時間は自然乾燥させて、その後、熱を加えるようにしましょう。
２つめは乾燥の具合がわかりにくいため、触って指紋がついたりすると悲しいので、乾燥具合を確かめるために、確認用に別のものを一緒に塗装しましょう（写真右の円盤）。

塗料が十分に乾燥したらトップコートを仕上げに吹きます。
トップコートは無い方が艶が綺麗なのですが、アクセサリーとして使用することを考えると、表面の保護のため必要です。特に染めQのメッキ感覚の塗料は塗膜が弱いのでそのままでは軽く爪が当たるだけでも傷が入ります。
トップコートは水性のものを使用しましょう。メッキ風の塗料にラッカー系のトップコートを使用すると最悪溶けて大変なことになります。

金具を取り付ける

最後にアクセサリーとして使うために金具を取り付けます。
ゴーファー側にヒートンを打ち込みます。そしてC環を挟んでピンに繋ぎます。このときにC環は無くてもピンに取り付けられるのですが、C環が無いとピアスとして揺れないので必ず挟むようにしましょう。

完成

金具の取り付けができれば完成です。純粋な金属には及ばないものの、樹脂製で軽くて綺麗な可愛いゴーファーができあがりました。

登録: 投稿 (Atom)