Nefry BTを使って電車遅延すると光るガジェットを作ろう

https://dotstudio.connpass.com/event/61189/

Transcript

1. Nefry BTを使って
   電車遅延すると光るガジェットを作ろう
   ポキオ
   

   View Slide

2. Agenda
   ● ポキオとは
   ● Nefry BTとは
   ○ 他のボードとの違い
   ○ Nefry BTのよさみ
   ● Nefry BTを触ってみる
   ○ Nefry BTの設定
   ○ プログラムの書き方
   ○ Lチカしてみる
   ○ サーバーから情報を取得してみる
   ○ 遅延したらLEDを光らせてみる
   ○ ﾀﾞｧｼｴﾘｲｪｽなガジェットを作ってみる
   ● サマリ
   ● Appendix
   

   View Slide

3. 自己紹介
   

   View Slide

4. ポキオとは
   ● Androidエンジニア
   ● Twitter : @pokiiio
   ● Blog : Androidのメモとか (http://relativelayout.hatenablog.com/ )
   

   View Slide

5. ﾀﾞｧｼｴﾘｲｪｽ…？
   

   View Slide

6. View Slide

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

   View Slide

8. KQ-IoT
   

   View Slide

9. KQ : Keikyu
   京急好きの京急好きによる京急好きのためのIoTガジェット
   俺得だっていいじゃないか、にんげんだもの
   

   View Slide

10. K:
    クソみたいな
    Q:
    クオリティ
    凝ったことはしない、最小工数でやりきる、たまに力尽く
    クソコードだって、動けばいいよ、にんげんだもの
    

    View Slide

11. KQ-IoT
    

    View Slide

12. デブサミ2017
    コミュニティ展示を
    させていただきました
    

    View Slide

13. de:code 2017
    前夜祭(day0)
    LTしてきました
    

    View Slide

14. dotstudioさんで
    記事も公開
    京急ネタです
    

    View Slide

15. Nefry BTとは
    

    View Slide

16. Nefry BTとは
    https://dotstud.io/docs/nefrybt/
    

    View Slide

17. Nefry BTとは
    ● Arduino互換
    ● Wi-Fi/BLEが使える
    ● RGBのLEDも実装済み
    ● Groveが使えて配線がいらない
    ● ディスプレイ付きでデバッグしやすい
    ● 設定も、プログラムのアップデートもブラウザでできる
    ● インターネットへの接続までが簡単
    ● わみ氏が開発している日本のボード
    ● 便利なAPIも準備されている
    ● ・・・などなど、よさみが深い
    

    View Slide

18. Nefry BTとは
    ● Arduino互換
    ○ 大手マイコンの統合開発環境が使える
    ○ 情報量多いし、サンプルコードも沢山
    ○ コピペでプログラミングも可能
    ググればイケる
    

    View Slide

19. Nefry BTとは
    ● Wi-Fi/BLEが使える
    ● RGBのLEDも実装済み、ディスプレイ付
    ● Groveが使えて配線がいらない
    ○ 兎に角、最初からフル装備
    ○ 買ってすぐに色んな用途に使える
    ○ GPIOも有るので拡張性も十分
    ○ もちろん技適通ってるモジュールを使用
    ESP32
    (Wi-Fi + BLE)
    ディスプレイ
    端子
    RGB LED
    Grove
    コネクタ
    GPIO
    ハードウェアが苦手でもOK
    オールインワンで拡張性も◎
    

    View Slide

20. Nefry BTとは
    ● インターネットへの接続までが簡単
    ● 便利なAPIも準備されている
    ○ 後ほど説明
    ソフトウェアが苦手でもOK
    通常のプログラミングより容易
    便利なライブラリも
    入ってる！
    Wi-Fi接続のための
    プログラミング不要
    

    View Slide

21. Nefry BTとは
    ● わみ氏が開発している日本のボード
    ○ サポート体制がすごい
    ○ FB上でNefryユーザグループもあります
    ○ https://www.facebook.com/groups/nefry/
    ○ いろいろできるよ！
    ○ https://liginc.co.jp/author/wamisnet
    数日後・・・
    日本語でおｋ
    IoTしてみたい人にはピッタリ
    

    View Slide

22. Nefry BTを触ってみる
    

    View Slide

23. Nefry BTに触ってみる
    ①Wi-Fiの設定
    1. Nefry BTにディスプレイを取り付ける
    2. Nefry BTに電源を供給する（AC-USBアダプターやPC直挿し）
    3. Nefry BTがAP（アクセスポイント）として動作する
    

    View Slide

24. Nefry BTに触ってみる
    ①Wi-Fiの設定
    1. Nefry BTがAP（アクセスポイント）になるので、PCでAPに接続する
    2. Nefry BTのディスプレイに表示されてるアドレスに、ブラウザでアクセス
    3. PC上でインターネットに繋がる自宅のAPの設定をする
    （これでNefry BTがインターネットに繋がるようになる！）
    

    View Slide

25. Nefry BTに触ってみる
    ②Arduino IDEを起動
    1. Arduino IDEを立ち上げます！（セットアップしてありますよね？）
    

    View Slide

26. Nefry BTに触ってみる
    ③プログラムの書き方
    ● プログラムはC言語（っぽい言語）
    ● プログラムを書く場所は主に2つ
    ○ setup()
    ■ 起動時に1度だけ実行される
    ■ 主に初期化などの処理を書く
    ○ loop()
    ■ setup()の後に呼ばれる
    ■ loop()内の処理が終わると
    再度loop()が呼ばれる
    ■ メインのロジックを書くことが多い
    

    View Slide

27. Nefry BTに触ってみる
    ④Lチカしてみる
    ● LEDを好きな色で光らせてみよう！
    ○ 光る→消える→光る→消える→・・・ をプログラミングしてみる
    ● せっかくなので便利な関数を使ってみる！
    ○ Nefry.println()
    ○ Nefry.setLed()
    ○ Nefry.ndelay()
    ● これらの関数を使うにはNefry.hをincludeする必要がある
    ○ #include
    

    View Slide

28. Nefry BTに触ってみる
    ④Lチカしてみる
    ● Nefry.println()
    ○ シリアルモニタに文字列を出力 （例：Nefry.println(“テスト”); ）
    ○ プログラムの進捗を出力したり、デバッグに便利
    ○ 通常は setup() 内で、Serial.begin(115200); などと記述する必要があるが、不要！
    ● Nefry.setLed()
    ○ Nefry BT上のLEDを好きな色で光らせる（例： Nefry.setLed(255,0,0); ）
    ○ 通常、Adafruit NeoPixelsライブラリをインストールして、
    初期化のコードを書いて・・・が一切不要！
    ● Nefry.ndelay()
    ○ 指定した時間（msec）だけ処理を止めます（例： Nefry.setLed(1000);）
    ○ マルチタスク対応で、別スレッドで動いている処理は止まらない
    

    View Slide

29. Nefry BTに触ってみる
    ④Lチカしてみる
    いざプログラミング(配布したプログラムを参考にしてください)
    ● コードの冒頭に #include を記載
    ● setup() は空っぽのまま
    ● loop() に次の処理を記載
    ○ Nefry.setLed() で好きな色に光らせる
    ○ Nefry.println() で "LED ON" をシリアルモニタに表示させる
    ○ Nefry.ndelay() で1秒待つ
    ○ Nefry.setLed() でLEDを消す （ヒント：RGBを 0,0,0 に設定する）
    ○ Nefry.println() で "LED OFF" をシリアルモニタに表示させる
    ○ Nefry.ndelay() で1秒待つ
    プログラムを書き込むには
    ① [ツール] > [ボード] で
    Nefry BTを指定する
    ② [スケッチ] > [マイコンボー
    ドに書き込む] を実行
    

    View Slide

30. Nefry BTに触ってみる
    ④Lチカしてみる
    

    View Slide

31. ここで一旦休憩
    

    View Slide

32. Nefry BTに触ってみる
    ⑤サーバーの情報を取得
    ● 遅延してるかどうかの情報は 鉄道遅延情報のjson
    (https://rti-giken.jp/fhc/api/train_tetsudo/delay.json) から取得します
    ○ 遅延している路線の情報を JSON 形式で取得できる
    ○ Nefry BT で上記URLにアクセスして情報を取得してみる
    ● HTTP-GET（HTTPS）には WiFiClientSecure を用いる
    ● Nefry BTならではのよさみ
    ○ 通常はWi-Fi接続のシーケンスをプログラミングする必要がある
    ○ Wi-Fiの設定はブラウザからできる上、 Wi-Fi接続はNefry BTの起動時に自動で行われる
    ○ つまり、プログラミング上では不要！
    

    View Slide

33. Nefry BTに触ってみる
    ⑤サーバーの情報を取得
    プログラムを書き込むには
    ① [ツール] > [ボード] で
    Nefry BTを指定する
    ② [スケッチ] > [マイコンボー
    ドに書き込む] を実行
    response に入ったデータを
    Nefry.println() を使って
    シリアルモニタに
    表示させてみてください
    

    View Slide

34. Nefry BTに触ってみる
    ⑤サーバーの情報を取得
    この一文を追加！
    シリアルモニタにJSONが表示される
    

    View Slide

35. Nefry BTに触ってみる
    ⑥遅延したら光らせてみる
    ● JSONデータの取得までできた
    ● JSONに特定の路線が含まれてるかどうかを調べてLEDを光らせたい
    ○ 定期的に鉄道遅延情報の JSONを取得
    ○ JSONに特定の路線が含まれるかチェック
    ○ LEDを光らせる
    ● ポキオのよさみ
    ○ クソコードでも動けばいい（笑）
    ○ JSONのパースは面倒なので、 JSONに路線名が含まれてるかどうかだけで判断すればいい
    ○ ArduinoのStringには contains() がない・・・ → indexOf() で代用（笑）
    ■ https://www.arduino.cc/en/Reference/StringIndexOf
    

    View Slide

36. Nefry BTに触ってみる
    ⑥遅延したら光らせてみる
    プログラムを書き込むには
    ① [ツール] > [ボード] で
    Nefry BTを指定する
    ② [スケッチ] > [マイコンボー
    ドに書き込む] を実行
    String#indexOf() を使って
    IF文を完成させて下さい
    

    View Slide

37. Nefry BTに触ってみる
    ⑥遅延したら光らせてみる
    ちなみに
    JSON取得のロジックは
    getTrainDelayJson() として
    別関数にまとめています
    

    View Slide

38. Nefry BTに触ってみる
    ⑥遅延したら光らせてみる
    こんな感じ
    

    View Slide

39. ダァシエリイェスしてみる
    ● nefry_handson_4 をつかって、好きな路線名・色にカスタマイズ
    ● Nefry BTを電車の中に両面テープで固定して完了
    

    View Slide

40. ダァシエリイェスしてみる
    プログラムを書き込むには
    ① [ツール] > [ボード] で
    Nefry BTを指定する
    ② [スケッチ] > [マイコンボー
    ドに書き込む] を実行
    路線名と色を
    カスタマイズしてください
    

    View Slide

41. ダァシエリイェスしてみる
    光り方もカスタマイズ
    してみても良いかも！
    

    View Slide

42. サマリ
    

    View Slide

43. サマリ
    ● IoTするなら、まずNefry BT♪
    ○ 色々実装済み・Grove対応で、ハードウェアが楽
    ○ Arduino互換で情報量豊富、さらに便利関数が揃っていて、ソフトウェアもイケる
    ● 参照
    ○ Nefry https://nefry.studio/
    ○ Nefry https://program.nefry.studio/
    ○ Arduino Reference https://www.arduino.cc/en/Reference/HomePage
    ○ Qiita http://qiita.com/tags/nefry
    

    View Slide

44. Thank you!
    

    View Slide

45. Appendix
    

    View Slide

46. WifiClientよりHTTPClientを使いたいが
    HTTPS非対応
    ● http://relativelayout.hatenablog.com/entry/2016/12/21/234344
    ● HTTPClientなら複雑なリクエストヘッダーを書かなくて済む
    ● が、HTTPS非対応・・・
    ● 泣く泣くWifiClientSecureを使用
    

    View Slide

47. リダイレクトは発生するサーバーへ
    HTTP-GETするときはHTTPSRedirectを使う
    ● http://relativelayout.hatenablog.com/entry/2017/06/24/230505
    ● GAS（Google Apps Script）のAPIでハマった
    ● HTTPSな上に、リダイレクトが発生する
    ● リダイレクトが発生しても、その先で再度GETしたい
    ● 下記のライブラリが便利
    ○ https://github.com/electronicsguy/ESP8266/tree/master/HTTPSRedi
    rect
    

    View Slide

48. A fatal error occurred: Failed to connect to
    ESP32: Timed out waiting for packet header
    ● http://relativelayout.hatenablog.com/entry/2017/09/01/223718
    ● MacでFTDIのドライバが正しく動作してなかった
    ● 公式ドライバ（http://www.ftdichip.com/Drivers/VCP.htm）をインストールした
    あと、カーネルエクステンションを有効にする必要がある
    

    View Slide