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

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

Transcript

1. Nefry BTを使って 電車遅延すると光るガジェットを作ろう vol2 ポキオ
2. Agenda • ポキオとは • Nefry BTとは ◦ 他のボードとの違い ◦ Nefry BTのよさみ ◦ 例 • Nefry BTを触ってみる ◦ Nefry BTの設定 ◦ プログラムの書き方 ◦ Lチカしてみる ◦ サーバーから情報を取得してみる ◦ 遅延したらLEDを光らせてみる ◦ ﾀﾞｧｼｴﾘｲｪｽなガジェットを作ってみる • サマリ • Appendix
3. 自己紹介
4. ポキオとは • Androidエンジニア • Twitter : @pokiiio • Blog : Androidのメモとか (http://relativelayout.hatenablog.com/)
5. ﾀﾞｧｼｴﾘｲｪｽ…？
7. 京急は神 *個人の感想です
8. KQ-IoT
9. KQ : Keikyu 京急好きの京急好きによる京急好きのためのIoTガジェット 俺得だっていいじゃないか、にんげんだもの
10. K: クソみたいな Q: クオリティ 凝ったことはしない、最小工数でやりきる、たまに力尽く クソコードだって、動けばいいよ、にんげんだもの
11. KQ-IoT
12. 京急ばっかり 京急関係の記事を書いたり… https://dotstud.io/blog/pokio-esp-keikyu-chien/ ﾀﾞｧ ｼｪﾘｲｪｽな会を開催したり… https://dotstudio.connpass.com/event/61189/ 京急なクソ工作をしたり… http://relativelayout.hatenablog.com/entry/2018/01/16/195616
13. Nefry BTとは
14. Nefry BTとは https://dotstud.io/docs/nefrybt/
15. Nefry BTとは • Arduino互換 • Wi-Fi/BLEが使える • RGBのLEDも実装済み • Groveが使えて配線がいらない • ディスプレイ付きでデバッグしやすい • 設定も、プログラムのアップデートもブラウザでできる • インターネットへの接続までが簡単 • わみ氏が開発している日本のボード • 便利なAPIも準備されている • ・・・などなど、よさみが深い
16. Nefry BTとは • Arduino互換、ESP32搭載 ◦ 大手マイコンの統合開発環境が使える ◦ 情報量多いし、サンプルコードも沢山 ◦ コピペでプログラミングも可能 ググればイケる
17. Nefry BTとは • Wi-Fi/BLEが使える • RGBのLEDも実装済み、ディスプレイ付 • Groveが使えて配線がいらない ◦ 兎に角、最初からフル装備 ◦ 買ってすぐに色んな用途に使える ◦ GPIOも有るので拡張性も十分 ◦ もちろん技適通ってるモジュールを使用 ESP32 (Wi-Fi + BLE) ディスプレイ 端子 RGB LED Grove コネクタ GPIO ハードウェアが苦手でもOK オールインワンで拡張性も◎
18. Nefry BTとは • インターネットへの接続までが簡単 • 便利なAPIも準備されている ◦ 後ほど説明 ソフトウェアが苦手でもOK 通常のプログラミングより容易 便利なライブラリも 入ってる！ Wi-Fi接続のための プログラミング不要
19. Nefry BTとは • わみ氏が開発している日本のボード ◦ サポート体制がすごい ◦ FB上でNefryユーザグループもあります ◦ https://www.facebook.com/groups/nefry/ ◦ いろいろできるよ！ ◦ https://liginc.co.jp/author/wamisnet 数日後・・・ 日本語でおｋ IoTしてみたい人にはピッタリ
20. 例
21. このまえGroveのブザーを買った • これでJR発車メロディーを鳴らしたい・・・ ◦ どうやって鳴らせば・・・
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/
23. で、作ってみた https://www.instagram.com/p/Be2i13UFKQr/
24. Nefry BTを触ってみる
25. Nefry BTに触ってみる ①Wi-Fiの設定 1. Nefry BTにディスプレイを取り付ける 2. Nefry BTに電源を供給する（AC-USBアダプターやPC直挿し） 3. Nefry BTがAP（アクセスポイント）として動作する
26. Nefry BTに触ってみる ①Wi-Fiの設定 1. Nefry BTがAP（アクセスポイント）になるので、PCでAPに接続する 2. Nefry BTのディスプレイに表示されてるアドレスに、ブラウザでアクセス 3. PC上でインターネットに繋がる自宅のAPの設定をする （これでNefry BTがインターネットに繋がるようになる！）
27. Nefry BTに触ってみる ②Arduino IDEを起動 1. Arduino IDEを立ち上げます！（セットアップしてありますよね？）
28. Nefry BTに触ってみる ③プログラムの書き方 • プログラムはC言語（っぽい言語） • プログラムを書く場所は主に2つ ◦ setup() ▪ 起動時に1度だけ実行される ▪ 主に初期化などの処理を書く ◦ loop() ▪ setup()の後に呼ばれる ▪ loop()内の処理が終わると 再度loop()が呼ばれる ▪ メインのロジックを書くことが多い
29. Nefry BTに触ってみる ④Lチカしてみる • LEDを好きな色で光らせてみよう！ ◦ 光る→消える→光る→消える→・・・ をプログラミングしてみる • せっかくなので便利な関数を使ってみる！ ◦ Nefry.println() ◦ Nefry.setLed() ◦ Nefry.ndelay() • これらの関数を使うにはNefry.hをincludeする必要がある ◦ #include <Nefry.h>
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);） ◦ マルチタスク対応で、別スレッドで動いている処理は止まらない
31. Nefry BTに触ってみる ④Lチカしてみる いざプログラミング(配布したプログラムを参考にしてください) • コードの冒頭に #include <Nefry.h> を記載 • 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を指定する ② [スケッチ] > [マイコンボー ドに書き込む] を実行
32. TIPS① • Nefry BTがMac/PC上で見つからない、スケッチを書き込めない ◦ FTDIのドライバーを入れ直すと見つかるかも ◦ http://relativelayout.hatenablog.com/entry/2017/09/01/223718 ◦ http://www.ftdichip.com/Drivers/VCP.htm
33. TIPS② • それでもNefry BTがMac/PC上で見つからない、スケッチを書き込めない ◦ Arduino IDEからコンパイル済みのバイナリファイルを書き出す ◦ Nefry BTの設定ページからバイナリファイルをアップロードして書き込む ◦ Nefry BTがMac/PCにつながってない環境下でもスケッチの書き込みが可能！ [Sketch] > [Export compiled Binary] で コンパイル済みのバイナリファイルを出力 [Upload Sketch] からバイナリファイルを 選択してアップロードすると書き込まれる
34. TIPS③ • Nefry.println()で出力したログはNefry BT設定ページ上でも見られます！ ◦ [Web Console]を開くだけ ◦ Nefry BTがMac/PCにつながってない環境下でもログの確認が可能！ Web Consoleから Nefry BTへ 文字列の 送信も可能
35. Nefry BTに触ってみる ④Lチカしてみる
36. ここで一旦休憩
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の起動時に自動で行われる ◦ つまり、プログラミング上では不要！
38. Nefry BTに触ってみる ⑤サーバーの情報を取得 プログラムを書き込むには ① [ツール] > [ボード] で Nefry BTを指定する ② [スケッチ] > [マイコンボー ドに書き込む] を実行 response に入ったデータを Nefry.println() を使って シリアルモニタに 表示させてみてください
39. Nefry BTに触ってみる ⑤サーバーの情報を取得 この一文を追加！ シリアルモニタにJSONが表示される この一文も追加すると HTTP-GETエラー理由も表示されます
40. Nefry BTに触ってみる ⑥遅延したら光らせてみる • JSONデータの取得までできた • JSONに特定の路線が含まれてるかどうかを調べてLEDを光らせたい ◦ 定期的に鉄道遅延情報の JSONを取得 ◦ JSONに特定の路線が含まれるかチェック ◦ LEDを光らせる • ポキオのよさみ ◦ クソコードでも動けばいい（笑） ◦ JSONのパースは面倒なので、 JSONに路線名が含まれてるかどうかだけで判断すればいい ◦ ArduinoのStringには contains() がない・・・ → indexOf() で代用（笑） ▪ https://www.arduino.cc/en/Reference/StringIndexOf
41. Nefry BTに触ってみる ⑥遅延したら光らせてみる プログラムを書き込むには ① [ツール] > [ボード] で Nefry BTを指定する ② [スケッチ] > [マイコンボー ドに書き込む] を実行 String#indexOf() を使って IF文を完成させて下さい
42. Nefry BTに触ってみる ⑥遅延したら光らせてみる ちなみに JSON取得のロジックは getTrainDelayJson() として 別関数にまとめています
43. Nefry BTに触ってみる ⑥遅延したら光らせてみる こんな感じ
44. ダァシエリイェスしてみる • nefry_handson_4 をつかって、好きな路線名・色にカスタマイズ • Nefry BTを電車の中に両面テープで固定して完了
45. ダァシエリイェスしてみる プログラムを書き込むには ① [ツール] > [ボード] で Nefry BTを指定する ② [スケッチ] > [マイコンボー ドに書き込む] を実行 路線名と色を カスタマイズしてください
46. ダァシエリイェスしてみる 光り方もカスタマイズ してみても良いかも！
47. サマリ
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
49. Thank you!
50. Appendix
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のリクエストメッセージを書く
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
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）をインストールした あと、カーネルエクステンションを有効にする必要がある
54. LEDを追加したい • マイコン内蔵のRGB LEDやそのLEDのテープを準備 • Nefry BTで準備されている関数が使えるので便利 • 去年のアドベントカレンダーネタで作ったライブラリも是非！ ◦ 「ﾀﾞｧ ｼｴﾘｲｪｽなクリスマス」 https://qiita.com/pokiiio/items/29e85033214c5d14e204
55. Nefry BTではBLEが使える • BLE（Bluetooth Low Energy）という通信方式が利用可能 • Wi−Fiと異なり、低消費電力で通信が可能 ◦ Nefry BT（ESP32）からBLEでNode.jsにデータを送ってみよう ◦ https://dotstud.io/blog/nefrybt-ble-bluetooth-peripheral/
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
57. センサーの値をグラフ化するのも簡単 • Nefryの関数にはグラフ化を簡単にやってくれるサービス「Ambient」に対応した 物がある ◦ Nefryで取得したセンサーデータを Ambientで簡単にグラフ化しよう！ ◦ https://dotstud.io/blog/nefry-data-show-graphically/ ◦ NefryBT向けAmbientライブラリ紹介 ◦ https://qiita.com/wamisnet/items/3d7ff1f056f159a2475c