京急ガジェットを作っているエンジニアから見たNode-RED

■Node-RED UG勉強会 Vol.7「Node-RED x Connected」
https://node-red.connpass.com/event/83519/

■リンク
ダァ1号
http://relativelayout.hatenablog.com/entry/2016/08/26/125650
ダァ2号
http://relativelayout.hatenablog.com/entry/2017/03/25/003251
ダァ3号
http://relativelayout.hatenablog.com/entry/2018/03/23/143138
種別幕
http://relativelayout.hatenablog.com/entry/2018/01/16/002847

Transcript

1. 京急ガジェットを作っている
   エンジニアから見たNode-RED
   ポキオ
   

   View Slide

2. ポキオ
   ● Android園児にゃー
   ● Twitter : @pokiiio
   ● Blog : Androidのメモとか
   (http://relativelayout.hatenablog.com/)
   

   View Slide

3. tl;dr
   ● 京急は神
   ● IFTTTでは痒いところに手が届かない
   ● ゴリゴリ書くより簡単
   ● そう、Node-REDならね
   ● Nodeが豊富
   ● NodeがなければJSで書けばいい
   ● JSが無理ならShellScriptを実行すればいい
   

   View Slide

4. View Slide

5. 京急は神
   *個人の感想です
   

   View Slide

6. agenda
   ● ポキオとマイコン
   ● サービス連携ってだるい
   ● そこでNode-RED
   ● Node-REDのよさみ
   ● Node-RED ✕ 京急
   ○ 種別幕の表示
   ○ 運行情報の表示
   ● サマリ
   2000形
   今はなき往年の名車
   

   View Slide

7. ポキオとマイコン
   

   View Slide

8. 何者なの？
   ● 本業はAndroid園児にゃー
   ● 数年前にArduinoに出会い、ハマる
   ● ハードウェアを簡単に学べる良い仕組み
   ● ArduinoだけでなくESP8266やRaspberry Piなど、ボード沼にもハマる
   ● 元々京急が好きだったので、京急ガジェットを作ろうと決意
   

   View Slide

9. ガチャガチャで
   ゲットした小さい
   プラレール
   ESP8266*搭載の
   マイコンボード
   *Wi-Fi機能が使えるチップ。
   遅延を検知すると
   LEDが光る
   

   View Slide

10. View Slide

11. マイコン内蔵RGB LED
    ESPr® Developer
    Bトレインショーティー
    様々な色で光ることが可能
    遅延理由によって色を変える
    

    View Slide

12. （白い点滅） （黄色い点滅）
    （赤い点滅）
    （ランダム色点滅・パリピモード）
    

    View Slide

13. クソコードで最大のアウトプットを
    ● びっくりするほどのクソコード
    ○ 情報取得：京急運行ページを HTTP-GET
    ○ 遅延判断：特定の文字列をパース
    ○ 状況通知：LEDをチカチカ
    

    View Slide

14. サービス連携ってだるい
    （個人の感想です）
    

    View Slide

15. マイコンのPros./Cons.
    ● Pros.
    ○ 色んな言語で開発できる（そして、それなりに動く）
    ○ ハードウェア連携が簡単（ボタンをつけたり、 LEDを光らせたり）
    

    View Slide

16. マイコンのPros./Cons.
    ● Cons.
    ○ マイコンによっては非力
    ○ サービス連携がだるい
    

    View Slide

17. だるい
    ● Androidアプリ開発とは全く違う
    ○ Androidはサービス連携はIntentで済ませてしまう
    ○ マイコンにはIntentのような処理と処理を簡単に繋げられるインターフェースがない？
    ○ 自分のアプリでほかのサービスの実装をどっぷりするようなことがない（なかった）
    ○ あるサービスを監視するような実装をしたことがない
    

    View Slide

18. だるい
    ● ソフトウェアだしやろうと思えばなんでもできる（震え声）
    ○ mBaaSとかを使えばもっと凝ったことはできるんだろうな（ただし有料）
    ○ IFTTTとか使うといろんなサービスと連携できるんだろうな（ただし自由度が低い）
    

    View Slide

19. IFTTTがあるじゃん？
    ● マイコンがトリガーになる場合
    ○ 結構簡単
    ○ JSONをHTTP POSTするだけでOK
    ● マイコンがアクションになる場合
    ○ すっごいだるい（個人の感想です）
    ○ IFTTTから外部サーバーを経由してマイコンに通知する
    ○ IFTTT -（webhook）-> 外部サーバー -（MQTT）-> マイコン
    ○ 外部サーバーっていう時点でテンションが下がる
    

    View Slide

20. そこでNode-RED
    

    View Slide

21. Node-REDを触ってみたらすごかった
    ● IBM Cloudがライトアカウントを始めた
    ○ クレカ登録不要、無料
    ○ Node-REDも使える
    ● うわなにこれすごい
    ○ Nodeを繋ぐだけ
    ○ Nodeも豊富
    ○ Watsonなどの連携も楽
    ● そういえばRaspberry Piにも入ってたな
    ○ うわすごい
    ○ GPIOの制御も簡単
    

    View Slide

22. View Slide

23. Node-REDって？
    恐れ多くも簡単に説明すると・・・
    

    View Slide

24. Node-REDって？
    ● Nodeとは？
    ○ 処理のブロック
    ● Nodeが豊富
    ○ SNS連携
    ○ IBM Cloud
    ■ Watson
    ■ DB
    ■ MQTT
    ○ Raspberry Pi
    ■ GPIO
    ■ コマンドの実行
    ● Nodeは作れる
    ○ JSで書ける！
    IBM Cloud上のNode-REDにあるNodeの例
    

    View Slide

25. Node-REDのすごみ
    ● いろんなサービスのNodeがある
    ● Nodeがあればつなぐだけ
    ● あれ、簡単じゃん
    MQTTの送受信Nodeもあるので簡単 外部サービスをトリガーにするのも簡単
    

    View Slide

26. 必殺技
    ● 困ったら「Function Node」「Exec Node」を使ってゴリゴリ書ける
    

    View Slide

27. Node-RED ✕ 京急
    

    View Slide

28. 電子ペーパー
    ● Lチカに飽きた
    ● 電子ペーパーならリッチなことできるかな
    ● 電子ペーパー制御はRaspberry Piで
    ● 言語はPythonがメイン
    ○ 電子ペーパーモジュールのメーカーから Pythonライブラリが提供
    ○ そのPythonライブラリを使って画像を貼り付ける
    ○ 文字を表示させたいときは、 Pythonの画像系ライブラリで文字を画像化させてそれを貼る
    

    View Slide

29. PaPiRus
    (Pi Supply・2.7inch・白黒)
    ¥6450
    2.7inch e-Paper HAT (B)
    (Waveshare・2.7inch・三色)
    $20.99
    

    View Slide

30. 種別幕の表示
    

    View Slide

31. 種別幕って？
    これ
    

    View Slide

32. つくったのはこれ
    4つのボタンに
    「普通」「急行」「特急」「快特」をアサイン
    選択された種別画像を表示
    

    View Slide

33. フローはこんな感じ
    GPIO Nodeで
    ボタン押下を監視
    Exec Nodeで
    画像表示コマンドを
    コール
    papirus-draw ~/Pictures/Keikyu/tokkyu.jpg
    

    View Slide

34. http://relativelayout.hatenablog.com/entry/2018/01/16/002847
    

    View Slide

35. 運行情報の表示
    

    View Slide

36. 遅延っていやですよね
    ● 京急の運行情報を表示
    ○ ただしAPIは存在しない
    ■ 京急運行ページをパース
    ○ ポーリングではなく、変化があったときだけ更新したい
    ■ 京急のサーバーに負担をかけたくない
    ■ 電子ペーパーの更新に時間がかかる
    ○ 今回は京急公式Twitterに投稿があったら、運行情報に更新があったとみなす
    

    View Slide

37. フローはこんな感じ
    Raspberry Pi
    起動をトリガーに
    するのも簡単
    Twitterトリガーも
    秒で実装可能
    面倒なことは
    すべてPythonに
    やらせる
    python ~/GitHub/KeikyuInfoOnEPaper/show_keikyu_unko.py
    https://github.com/pokiiio/KeikyuInfoOnEPaper で公開中
    

    View Slide

38. pythonの中身
    平常通り・・・
    京急運行ページを
    HTTP-GET
    運行情報文字列を
    抜き出す
    PILで
    文字列を画像化
    電子ペーパーに
    描画
    https://github.com/pokiiio/KeikyuInfoOnEPaper で公開中
    

    View Slide

39. 実物はこちら
    電子ペーパー
    Raspberry Pi
    みんな大好き
    レゴ
    

    View Slide

40. 遅れるとこんな感じに
    

    View Slide

41. 順調とは
    

    View Slide

42. サマリ
    

    View Slide

43. summary
    ● ごめんなさい、やっぱりクソコードでした
    ● Node-REDを使えばサービス連携が容易
    ● Nodeがなくても、JSでかけなくても、コマンド実行すればなんでもできる
    ● これが無料で使えるだなんて！
    

    View Slide

44. links
    ● ダァ1号
    ○ http://relativelayout.hatenablog.com/entry/2016/08/26/125650
    ● ダァ2号
    ○ http://relativelayout.hatenablog.com/entry/2017/03/25/003251
    ● ダァ3号
    ○ http://relativelayout.hatenablog.com/entry/2018/03/23/143138
    ● 種別幕
    ○ http://relativelayout.hatenablog.com/entry/2018/01/16/002847
    

    View Slide

45. ありがとうございました
    

    View Slide