Johnny-FiveもどきをGoogle Apps Scriptで作ってESP8266を光らせてみた

・Google Apps ScriptのWebAPIで、ESP8266が光らせるLEDの色を指定する
http://relativelayout.hatenablog.com/entry/2017/06/25/002632

・Google Apps Scriptから色んな鉄道の遅延情報を取得する
http://relativelayout.hatenablog.com/entry/2017/07/20/005129

Transcript

1. Johnny-Fiveもどきを
   Google Apps Scriptで作って
   ESP8266を光らせてみた
   ポキオ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. a.k.a. 京急の人
   

   View Slide

7. 京急は神
   

   View Slide

8. 今日言いたいことの半分を話した
   

   View Slide

9. "Johnny-Five"
   

   View Slide

10. http://johnny-five.io/
    

    View Slide

11. USB接続 / Wi-Fi
    Firmataで
    GPIOにアクセス
    ホストマシンでの処理
    JSで
    コードを書く
    node.jsで
    実行
    

    View Slide

12. JavaScript
    すごーい
    

    View Slide

13. Johnny-Five
    Pros
    ● JSでボードを動かせる
    ● 他のJSのライブラリを組み合わせて夢が広がる
    ● いちいちボードにファームを流し込まなくても大丈夫
    ● Arduinoだけでなく、ESP8266、RPi、・・・色々なボードに対応
    Cons
    ● Aduinoなどではホストマシンが必要になる
    USB接続(もしくはWi-Fi接続で同一ネットワーク内にいる)が必要
    

    View Slide

14. USB接続 / Wi-Fi
    Firmataで
    GPIOにアクセス
    ホストマシンでの処理
    JSで
    コードを書く
    node.jsで
    実行
    このあたりをクラウドに
    持っていったらどうか？
    

    View Slide

15. そこでGAS
    

    View Slide

16. https://www.google.com/script/start/
    

    View Slide

17. Google Apps Script
    ● Google Apps Script is a JavaScript cloud scripting language that provides easy
    ways to automate tasks across Google products and third party services and build
    web applications.
    ● VBAのGoogle版みたいな感じ
    ● Web上でコーディング、実行ができる
    ● WebAPIとしてPublishもできる
    

    View Slide

18. Wi-Fi
    WebAPIを叩く
    GPIOの値をPOST
    GETした値に応じてGPIOを制御
    Googleの
    サーバー上での処理
    WAN
    GASでコードを書く
    WebAPIとして公開
    こういうことが
    できるのでは
    メインの
    ロジックは
    こっちに書く
    

    View Slide

19. 作ってみた
    

    View Slide

20. 構成
    ESP8266
    GAS
    鉄道遅延情報
    ①WebAPIを叩く
    (HTTP-GET)
    ②鉄道が遅延してるか
    確認する
    ③結果を取得、パース
    ④何色に光らせるか
    レスポンスを返す
    ⑤GASの
    言うとおりに
    光らせる
    

    View Slide

21. 構成
    ESP8266
    GAS
    鉄道遅延情報
    ①WebAPIを叩く
    (HTTP-GET)
    ②鉄道が遅延してるか
    確認する
    ③結果を取得、パース
    ④何色に光らせるか
    レスポンスを返す
    ⑤GASの
    言うとおりに
    光らせる
    メインの
    難しいロジックは
    ぜんぶGASがやる
    マイコン側は
    GASの
    言うとおりに
    GPIOを操作
    

    View Slide

22. コード
    (GAS)
    LEDの色の指定
    - pokioはプレフィックス
    - 続けてRGBの値
    遅延しているかの判断
    - 遅延路線の一覧を取得
    - 京急線があるかパース
    HTTP-GETされたときの
    Responseを記載
    

    View Slide

23. コード
    (ESP8266、一部)
    GASはHTTPS接続
    - APIのアドレスを記載
    - 認証の為のFingerprint
    基本的な流れ
    - Wi-Fi接続
    - HTTP-GET
    - Wi-Fi切断
    - Responseをパース
    - LEDを光らせる
    - ・・・の繰り返し
    

    View Slide

24. コード
    (ESP8266、一部)
    GASはリダイレクトされる
    - リダイレクトに対応した
    HTTPSRedirectを使用
    

    View Slide

25. "モノ"も作ったよ
    

    View Slide

26. ﾀﾞｧｼｴﾘｲｪｽなIoT
    ﾀﾞｧｼｴﾘｲｪｽなIoT
    2nd Gen
    ﾀﾞｧｼｴﾘｲｪｽなIoT
    3rd Gen
    (NEW)
    

    View Slide

27. 品川駅の鉄道をほぼ網羅
    遅延すると光る
    京急線
    (赤く光る)
    山手線
    (黄緑色に光る)
    京浜東北線
    (水色に光る)
    東海道線
    (オレンジ色に光る)
    横須賀線
    (青く光る)
    専用のお立ち台を作成
    IoTLT vol.28@サイボウズで
    紹介したポキオ基板 x 5
    

    View Slide

28. 光るかな？
    

    View Slide

29. サマリ
    ● ESP8266とGASを組み合わせてLチカした
    ● ロジックはすべてGASが担う
    ● ロジック変更も簡単(いちいち流し込まなくてOK)
    ● GASはJSで書けるので夢が広がる、G Suiteとの連携も簡単
    ● Arduino IDEではやりづらい処理がGASだと簡単に書ける気がする
    ● ただし、HTTPのトリガーはESP8266からしかかけられない(UXが限られる)
    ● 遅延しないほうがいい
    

    View Slide

30. THANK YOU
    

    View Slide