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

by pokiiio

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

自己紹介

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

ﾀﾞｧｼｴﾘｲｪｽ…？

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

KQ-IoT

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

KQ-IoT

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Nefry BTとは

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Nefry BTを触ってみる

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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を指定する ② [スケッチ] > [マイコンボードに書き込む] を実行

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

ここで一旦休憩

Slide 32

Slide 32 text

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の起動時に自動で行われる ○ つまり、プログラミング上では不要！

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

サマリ

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Thank you!

Slide 45

Slide 45 text

Appendix

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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）をインストールしたあと、カーネルエクステンションを有効にする必要がある