IoT初心者向けNefry BTハンズオン / 電車遅延を通知してみよう vol2 #nefry

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

Transcript

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

   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. 京急ばっかり
    京急関係の記事を書いたり…
    https://dotstud.io/blog/pokio-esp-keikyu-chien/
    ﾀﾞｧ ｼｪﾘｲｪｽな会を開催したり…
    https://dotstudio.connpass.com/event/61189/
    京急なクソ工作をしたり…
    http://relativelayout.hatenablog.com/entry/2018/01/16/195616
    

    View Slide

13. Nefry BTとは
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. 例
    

    View Slide

21. このまえGroveのブザーを買った
    ● これでJR発車メロディーを鳴らしたい・・・
    ○ どうやって鳴らせば・・・
    

    View Slide

22. ググればすぐに分かる！
    ● 「Nefry BT メロディ」で検索すると・・・
    ○ 情報がたくさん！
    ○ Nefry BTはESP32というチップを搭載しているので、 ESP32のテクニックも使える
    https://www.1ft-seabass.jp/memo/2017/12/24/nefrybt-grove-skeaker-melody/ https://techtutorialsx.com/2017/07/01/esp32-arduino-controlling-a-buzzer-with-pwm/
    

    View Slide

23. で、作ってみた
    https://www.instagram.com/p/Be2i13UFKQr/
    

    View Slide

24. Nefry BTを触ってみる
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. 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.ndelay(1000);）
    ○ マルチタスク対応で、別スレッドで動いている処理は止まらない
    

    View Slide

31. 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

32. TIPS①
    ● Nefry BTがMac/PC上で見つからない、スケッチを書き込めない
    ○ FTDIのドライバーを入れ直すと見つかるかも
    ○ http://relativelayout.hatenablog.com/entry/2017/09/01/223718
    ○ http://www.ftdichip.com/Drivers/VCP.htm
    

    View Slide

33. TIPS②
    ● それでもNefry BTがMac/PC上で見つからない、スケッチを書き込めない
    ○ Arduino IDEからコンパイル済みのバイナリファイルを書き出す
    ○ Nefry BTの設定ページからバイナリファイルをアップロードして書き込む
    ○ Nefry BTがMac/PCにつながってない環境下でもスケッチの書き込みが可能！
    [Sketch] > [Export compiled Binary] で
    コンパイル済みのバイナリファイルを出力
    [Upload Sketch] からバイナリファイルを
    選択してアップロードすると書き込まれる
    

    View Slide

34. TIPS③
    ● Nefry.println()で出力したログはNefry BT設定ページ上でも見られます！
    ○ [Web Console]を開くだけ
    ○ Nefry BTがMac/PCにつながってない環境下でもログの確認が可能！
    Web Consoleから
    Nefry BTへ
    文字列の
    送信も可能
    

    View Slide

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

    View Slide

36. ここで一旦休憩
    

    View Slide

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

    View Slide

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

    View Slide

39. Nefry BTに触ってみる
    ⑤サーバーの情報を取得
    この一文を追加！
    シリアルモニタにJSONが表示される
    この一文も追加すると
    HTTP-GETエラー理由も表示されます
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. サマリ
    

    View Slide

48. サマリ
    ● 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

49. Thank you!
    

    View Slide

50. Appendix
    

    View Slide

51. HTTPSなサイトの場合は別途対応が必要
    ● 今回使った「rti-giken.jp/...」はHTTPでアクセスしている
    ○ HTTPSなサイトの情報を取得する場合は実装を変える必要がある
    ● 対応方法①：WifiClientSecureを使ってアクセスする
    ○ Pros：実装例が多い
    ○ Cons：HTTPのリクエストメッセージをコード上で書く必要がある
    ● 対応方法②：HTTPClientに引数を追加してアクセスする
    ○ Pros：実装自体は楽
    ○ Cons：アクセスに必要な認証局証明書を生成して、コードに組み込む必要がある
    例：
    WiFiClientSecure client; // 変数を宣言
    (中略)
    client.print(String("GET /fhc/api/train_tetsudo/delay.json HTTP/1.1\r\n") + "Host: rti-giken.jp\r\n" + "Connection: close\r\n\r\n"); // HTTP-GETのリクエストメッセージを書く
    

    View Slide

52. リダイレクトは発生するサーバーへ
    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

53. 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

54. LEDを追加したい
    ● マイコン内蔵のRGB LEDやそのLEDのテープを準備
    ● Nefry BTで準備されている関数が使えるので便利
    ● 去年のアドベントカレンダーネタで作ったライブラリも是非！
    ○ 「ﾀﾞｧ ｼｴﾘｲｪｽなクリスマス」 https://qiita.com/pokiiio/items/29e85033214c5d14e204
    

    View Slide

55. Nefry BTではBLEが使える
    ● BLE（Bluetooth Low Energy）という通信方式が利用可能
    ● Wi−Fiと異なり、低消費電力で通信が可能
    ○ Nefry BT（ESP32）からBLEでNode.jsにデータを送ってみよう
    ○ https://dotstud.io/blog/nefrybt-ble-bluetooth-peripheral/
    

    View Slide

56. IFTTTとの連携は超簡単
    ● IFTTTとはWebサービスの1つ
    ● 他のサービスと他のサービスを結びつけたりできる
    ● NefryではIFTTTのTriggerも関数として用意されている
    ○ Nefry BTとIFTTTでスイッチを押したら LINEを送る仕組みを作ってみよう
    ○ https://dotstud.io/blog/nefry-ifttt-push-line/
    ○ Nefry BTとIFTTTライブラリをつかってお腹が痛くなった時に押すボタンを作る
    ○ http://relativelayout.hatenablog.com/entry/2017/10/02/235930
    

    View Slide

57. センサーの値をグラフ化するのも簡単
    ● Nefryの関数にはグラフ化を簡単にやってくれるサービス「Ambient」に対応した
    物がある
    ○ Nefryで取得したセンサーデータを Ambientで簡単にグラフ化しよう！
    ○ https://dotstud.io/blog/nefry-data-show-graphically/
    ○ NefryBT向けAmbientライブラリ紹介
    ○ https://qiita.com/wamisnet/items/3d7ff1f056f159a2475c
    

    View Slide