Slide 1
Slide 1 text
Johnny-Fiveもどきを
Google Apps Scriptで作って
ESP8266を光らせてみた
ポキオ
Slide 2
Slide 2 text
ポキオ
● Androidエンジニア
● Twitter : @pokiiio
● Blog : Androidのメモとか (http://relativelayout.hatenablog.com/ )
Slide 3
Slide 3 text
デブサミ2017
コミュニティ展示を
させていただきました
Slide 4
Slide 4 text
de:code 2017
前夜祭(day0)
LTしてきました
Slide 5
Slide 5 text
dotstudioさんで
記事も公開
京急ネタです
Slide 6
Slide 6 text
a.k.a. 京急の人
Slide 7
Slide 7 text
京急は神
Slide 8
Slide 8 text
今日言いたいことの半分を話した
Slide 9
Slide 9 text
"Johnny-Five"
Slide 10
Slide 10 text
http://johnny-five.io/
Slide 11
Slide 11 text
USB接続 / Wi-Fi
Firmataで
GPIOにアクセス
ホストマシンでの処理
JSで
コードを書く
node.jsで
実行
Slide 12
Slide 12 text
JavaScript
すごーい
Slide 13
Slide 13 text
Johnny-Five
Pros
● JSでボードを動かせる
● 他のJSのライブラリを組み合わせて夢が広がる
● いちいちボードにファームを流し込まなくても大丈夫
● Arduinoだけでなく、ESP8266、RPi、・・・色々なボードに対応
Cons
● Aduinoなどではホストマシンが必要になる
USB接続(もしくはWi-Fi接続で同一ネットワーク内にいる)が必要
Slide 14
Slide 14 text
USB接続 / Wi-Fi
Firmataで
GPIOにアクセス
ホストマシンでの処理
JSで
コードを書く
node.jsで
実行
このあたりをクラウドに
持っていったらどうか？
Slide 15
Slide 15 text
そこでGAS
Slide 16
Slide 16 text
https://www.google.com/script/start/
Slide 17
Slide 17 text
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もできる
Slide 18
Slide 18 text
Wi-Fi
WebAPIを叩く
GPIOの値をPOST
GETした値に応じてGPIOを制御
Googleの
サーバー上での処理
WAN
GASでコードを書く
WebAPIとして公開
こういうことが
できるのでは
メインの
ロジックは
こっちに書く
Slide 19
Slide 19 text
作ってみた
Slide 20
Slide 20 text
構成
ESP8266
GAS
鉄道遅延情報
①WebAPIを叩く
(HTTP-GET)
②鉄道が遅延してるか
確認する
③結果を取得、パース
④何色に光らせるか
レスポンスを返す
⑤GASの
言うとおりに
光らせる
Slide 21
Slide 21 text
構成
ESP8266
GAS
鉄道遅延情報
①WebAPIを叩く
(HTTP-GET)
②鉄道が遅延してるか
確認する
③結果を取得、パース
④何色に光らせるか
レスポンスを返す
⑤GASの
言うとおりに
光らせる
メインの
難しいロジックは
ぜんぶGASがやる
マイコン側は
GASの
言うとおりに
GPIOを操作
Slide 22
Slide 22 text
コード
(GAS)
LEDの色の指定
- pokioはプレフィックス
- 続けてRGBの値
遅延しているかの判断
- 遅延路線の一覧を取得
- 京急線があるかパース
HTTP-GETされたときの
Responseを記載
Slide 23
Slide 23 text
コード
(ESP8266、一部)
GASはHTTPS接続
- APIのアドレスを記載
- 認証の為のFingerprint
基本的な流れ
- Wi-Fi接続
- HTTP-GET
- Wi-Fi切断
- Responseをパース
- LEDを光らせる
- ・・・の繰り返し
Slide 24
Slide 24 text
コード
(ESP8266、一部)
GASはリダイレクトされる
- リダイレクトに対応した
HTTPSRedirectを使用
Slide 25
Slide 25 text
"モノ"も作ったよ
Slide 26
Slide 26 text
ﾀﾞｧｼｴﾘｲｪｽなIoT
ﾀﾞｧｼｴﾘｲｪｽなIoT
2nd Gen
ﾀﾞｧｼｴﾘｲｪｽなIoT
3rd Gen
(NEW)
Slide 27
Slide 27 text
品川駅の鉄道をほぼ網羅
遅延すると光る
京急線
(赤く光る)
山手線
(黄緑色に光る)
京浜東北線
(水色に光る)
東海道線
(オレンジ色に光る)
横須賀線
(青く光る)
専用のお立ち台を作成
IoTLT vol.28@サイボウズで
紹介したポキオ基板 x 5
Slide 28
Slide 28 text
光るかな？
Slide 29
Slide 29 text
サマリ
● ESP8266とGASを組み合わせてLチカした
● ロジックはすべてGASが担う
● ロジック変更も簡単(いちいち流し込まなくてOK)
● GASはJSで書けるので夢が広がる、G Suiteとの連携も簡単
● Arduino IDEではやりづらい処理がGASだと簡単に書ける気がする
● ただし、HTTPのトリガーはESP8266からしかかけられない(UXが限られる)
● 遅延しないほうがいい
Slide 30
Slide 30 text
THANK YOU