読者です 読者をやめる 読者になる 読者になる

Espruino PicoでDS18B28で気温測ったのをESP-WROOM-2でMQTTしてみた

JavaScript for Robotics or Hardware Advent Calendar 2015 14日目です。
ロボットネタじゃねえけどJSBoardでもいいって書いてあったからEspruinoのネタにしました。

 

Espruino PicoはKickstarter発のマイコンボードでJavaScriptコンパイルして即実行するインタプリタを搭載しています。つーかインタプリタの名前がEspruinoでPicoはそのリファレンスボードのひとつって感じね。先輩のEspruino Boardに比べてめっちゃちっちゃいので本格的なデバイス実装にもいろいろ使えそうな感じです。最近ではAmazonで取扱もあって国内でも入手できるようになったのだけどめっちゃ高い。これならAdafruitとかで買ったほうがいいっすね。

 

EspruinoのいいところはなんといってもJavaScriptネイティブなマイコンボードであるということ。JSでマイコン制御を体験できる、センサー&デバイスの豊富な対応ライブラリがビルトインされているIDEで簡単に対話/書き込み実行が可能、STM32, Raspberry Piをはじめとする様々なデバイスでビルド可能といったところがメリットとして挙げられます。個人的には一番漢なJSBoardだと思っていてJSネイティブってだけで他のことはどうでもいいです。ですよね。

 

去年はEspruino Advent Calendar 2014をいっぱい書いて燃え尽きた感あったので今年は書かないつもりだったけどJavaScript for Robotics or Hardwareというキーワードに釣られて一個でも書こうかと思った次第。で、ネタとしてはPicoになってから新たに加わったMQTT機能といま絶賛ブレイク中のESP8266 Wifiチップを使ってなんかやることにします。送るデータはなんでも良かったのでとりあえずDS18B20デジタル温度計で気温取って送った。Espruino公式のチュートリアル的にはこれこれの合わせ技プラスアルファみたいな感じです。

 

配線

ブレッドボード上での配線はこんな感じです。

f:id:bathtimefish:20151206161958j:plain

上だとわかりづらいのでEspruino Picoとの話ワイアードを図にしたのがこちら。

f:id:bathtimefish:20151206164443p:plain

Fritzing使ったことないけど練習で描いてみたのがこちら。今回使ってるのはESP-WROOM-2だけどFritzingのオブジェクトになかったので違うESP8266チップになってます。そのためWROOM-2よりピン1列少なくて配線が異なったりしてますが、その辺は雰囲気です。上の写真が正しいので参考程度にしてください。

f:id:bathtimefish:20151206160136p:plain

CerevoのESP-WROOM-2ブレイクアウトボードを使用しました。他のブレイクアウトボードよりもピン出しが素直な感じで気に入ってます。ピンレイアウトはこちら。

http://tech-blog.cerevo.com/wp-content/uploads/2015/07/53f0389a5f6bf0a2dfde0073841dbd67.jpg

ネーブルとリセットを10kΩの抵抗でプルアップ、電源をEspruino Picoの3.3V、各GNDをPicoのGND、TXDをPicoのB7(UART1 RX), RXDをPicoのB6(UART1 TX)に接続します。DS18B20デジタル温度計はこちらを参考に。GND(左ピン)をPicoのGNDに、データ(真ん中ピン)をPicoのB1、電源(右ピン)をPicoの3.3Vに接続します。データ(真ん中ピン)と電源(右ピン)を4.7kΩの抵抗で接続します。

MQTT subscriberの準備

MQTT subscriberは去年のEspruino Advent Calenderのrockymanobiくんのものを使わせてもらいました。rockymanobi/espruino-mqtt-sample をcloneして以下を実行します。

node broker.js

別のウィンドウで

node subscriber.js

broker.jsの画面でIPアドレスが表示されるので後述のEspruinoのソースコード中の mqttHostにIPアドレスをセットします。

Espruinoのプログラミング

ソースコードは以下。

使用したESP8266のファームバージョンは0.25.0.0だったのでドキュメントにしたがってESP8266WiFi_0v25をrequireしました。ボーレートは115200です。configオブジェクトにはWifiSSID、パスワード、MQTT subscriberのホストIPをセットします。

Espruino IDEでプログラムを転送してしばらくすると、Wifiに接続されてpublisherのコンソールで温度が表示されるようになります。

f:id:bathtimefish:20151206160808j:plain

DS18B20の温度取得をsetIntervalで回して、それとは別にWifiをセットアップしてMQTT接続を確立、確立後2秒ごとにsubscriberに向かって温度データをpublishしています。こんな感じで非同期でセンサー毎にループが書けるのはJSのメリットが活かせて便利だと思う。

f:id:bathtimefish:20151205171420j:plain

まとめ

EspruinoはMQTTライブラリをビルトインでサポートしているので簡単にMQTT通信するデバイスをつくることができます。あとESP8266安くていいですね。Espruinoでも最近ESP8266対応のリファクタリングが積極的に行われています。さらにEspruinoをESP8266上に直接書き込んでビルドする方法も公開されていて激アツです。これは今度やってみたい。

MQTT対応側でもAWS IoT Message Broker向けと思われるライブラリがマージされたりと面白そうなことになってる。こんなマージもあったし今後も注目したいですね。

以上です。
Espruino日本でももっと流行んねぇかな。

Android WearのアプリをHTML5つくってみる

最近キャラ的にHTML5属性のほかにウェアラブル属性が追加された気がして、まあ日本ウェアラブルデバイスユーザー会(WUG)とかやってたりヘンなデバイスたくさん買ったりしてるので仕方ない。つーかソフトウェアと違ってハード持ってると目立ちますね。最近イベントいったらよく写メ撮られます。塚本先生には遠く及ばないけど。

 

ウェアラブルのこと話してるとよく「職業変えたんですか?」と聞かれるけど、そんなことはない。そもそもWUGをやりたかったのもGoogle Glassをはじめてみたときに「あー、これのアプリはそのうちHTML5で動くだろうな」と思ったから。Androidウェアラブルになるという時点でどうせそのうちウェアラブルデバイスにもHTML5の波がおしよせてくると思ったんです。なのでその感覚を忘れないためにウェアラブルデバイスを日常的に追っかける必要があると思ったからみんなとユーザー会を立ち上げたというのが本音。

 

まあGlassは当分ないでしょうけど、そう遠い将来でもないんじゃないでしょうか。昨今のAndroidChromeの融合っぷりをみるともちろんモバイルのほうが先だろうけど、そのうちアプリランタイムとしてのAndroidChromeは見分けがつかなくなるんじゃないかな。そのころにはウェアラブルAndroidは普通にHTML5だと。まあそうなったら誰得かは別にしておもしろいなと思います。

 

で、そういう未来を見据えてかどうか、去年からCocoonJSがAndroid Wearに対応していてかなり限定的ではあるけどHTML5Android Wearアプリが書けるという選択肢が登場しました。これ速攻で試すつもりだったんだけど実機持ってなかったりハンダ付けにはまったりしてたんでやるの遅くなりました。昨年末にLG Watch Rを購入したのでやれる状況になったのでやってみた。やってみた結果がこれ。

 

f:id:bathtimefish:20150210122550j:plain

f:id:bathtimefish:20150210122554j:plain

f:id:bathtimefish:20150210122557j:plain

HTML5, JS, CSS3のロゴがsetIntervalでふわふわ切り替わります。ちょっと外出の用事があってデモ動いてからバスの中で写真とった。家に出る前に作業してだいたい15分くらいで動くところまでできたと思う。ソースコードはこちら。

bathtimefish/html5-wear-app · GitHub

 

ludei公式の app-wear-demo をちょっといじってシンプルにした感じ。元がcaat.js使ってたんで何も考えずにフローをなぞったけど、やってることが単純なので素のCanvas 2Dで書いたほうがもっと良くなる気がする。まあその気になったらリファクタリングするかもしないかも。


ソースコードのビルドの仕方は app-wear-demo のREADMEに書いてあります。また、CocoonJS Enables Android Wear HTML5 App Development のブログにも書いてある。まあざっくり言うと、CocoonJSでプロジェクト作ってソースzipでアップして、コンパイルオプションでAndroid Wearを指定。出来上がったapkをAndroid Wearに直接 adb install するだけです。

 

まあCocoonJS使えばAndroid WearもHTML5だぜーざまーと言えるかなと思ったけど、現状はネタ的にそう言えるレベルかなと思いました。現状ではCanvasでのグラフィック描画とタップイベントくらいがサポートされているようで、Bluetoothとかセンサー系のAPIは用意されていない。handheldとやりとりするアプリとかはできないからつくれるものにかなり制限がある。

 

あと、起動遅い、バッテリーの減りが尋常じゃない、しばらく動かしてると時計がホカホカしてくるなどの特典があってまあそうだよなーという感じ。このあたりがどう進化していくか、CocoonJS的にネタで終わるのか。今後もぬるく見守っていこうと思いました。

AngularJSリファレンスを読んで書いたりしてみた

HTML5 Expertsやhtml5j部長のよしみで著者の金井さんに献本いただいたAngularJSリファレンス。
いただいてから結構時間が経ってしまったけど、とりあえずざっと読み通したのでレビューなど書かせていただこうかと思います。

 

AngularJSリファレンス

AngularJSリファレンス

 

 
まずは献本いただきありがとうございます。恐縮です。
AngularJSはぼちぼち勉強していってるんだけどまだ仕事で使ったことなくて具体的なノウハウがあんまりない感じ。あとディレクティブとかコンポーネントとか興味のある部分しか見てないので全体的な知識があまりない状態。
ボクはそんな感じなのでこの本をいただいて全体的に勉強できるチャンスだなと思った次第です。結果的に知らなかったことが多くて大変勉強になりました。

入門しやすさがよく考えられてると思う

AngularJSといえばJS高機能フロントエンドフレームワークとしてよく知られていると思います。高機能である一方、入門の敷居が高いことでも知られているわけで、便利便利と言われているわりに日本のユーザーがイマイチ増えてない気がしてます。

特にチュートリアルを抜けてさあ自分で考えて使ってみようなシーンになるととたんに難しくなるイメージがあって、その時点で諦めちゃうユーザーが多いんじゃないかなと思います。リファレンス本はその敷居をどう切り抜けるんだろうかと思ってたら、まずビルトインディレクティブの使い方をサンプルコード付きで説明するというアプローチをとってます。

これはとてもうまいなと思った。JS初心者でも入りやすいと思います。個人的にこの本で一番好感だったのがこの点です。ビルトインディレクティブの使い方ということは、9割がたソースコードもHTMLのみになるわけで、HTMLを書けば動的なUIができるというのはAngularJSの恩恵が実感できる。

さながら「jQuery Mobileで簡単Webアプリ作成」みたいなノリがあってまったくAngularJSを知らない人にも最初に興味を持ってもらえるいいアプローチだと思いました。その前に「AngularJSとは」でAngularJSの基本的な構造や決まり事の説明があるけど、そのへんも理論抜きでさらっとやってるところも好感です。

技術屋だとこのあたりで構造や設計理論などをつい説明しがちだけど、それって入門者のストレスを上げるだけなので入門本としては不向きかもしれない。その辺の気遣いが垣間見えた気がしてよく考えられてるなと思いました。

DOM操作系のディレクティブから先に説明しているのもいい。なんというかngAppあたりから説明するのがセオリーかなと思えるんだけど、ngBindTemplateとかngClassとか実践でよく使うものを優先しているのもいいです。

とにかく端的な説明と豊富なサンプルコードがいい

全章とおして説明が端的簡潔なのと必ずその後にサンプルコードがついているのがいいです。タイトルのとおりリファレンスとして開発中に字引として使える。
なんせビルトインディレクティブだけでも大量にあって、フィルタやサービスとそのセマンティクスなんか全部覚えるの不可能なのでなんとなく覚えといて使う時に都度調べる。
そういう現場でのニーズによくはまってると思います。会社に一冊置いてあってもいいでしょうね。

個人的にはカスタムディレクティブの作成法とか詳しく知りたくて、他の章とばしてそこ読んだんだけどとにかく理論的なことは省いて実装例がたくさん載せてあったのはよかったです。まあ2,3回読んで覚えられることじゃないし、ざっくり何が書いてあるか覚えておいて実際使う時にピンポイントで実装例を参考にするという使い方ができる。実装例のコードも丁寧に書いてあるのでそのまま使えてありがたいです。

考えてみれば最近、「〜〜徹底解説」みたいな本を読んでもサンプルコードしか見てない気がする。まあ制作者の立場からすると、ある意味使えて動けばいいわけで、そういう立場の人にはよく合う本じゃないかなあと思います。

とりあえず動かせるようになってから本家やソースコードを見て理論を把握すればよいしね。もし「AngularJS徹底解説」なんて本が出たら間違いなくタウンページみたいな厚さになるし高いからたぶん買わないなあ。

1.3のコラムが興味深い

各章のコラムに現在開発中の1.3や2.0系の情報があって、これがためになりました。
2.0なんて全然追っかけてないので勉強になった。個人的にはObject.observe の普及とAngularJSのアップデートの関係が興味深いけど、そのあたりを意識した未来のAngularJSの設計がどうなってるかを追いかけてなかった。

コラムの情報はそれほど多くないけど、いろいろ想像するきっかけになって本性並みにためになったというのが感想です。

まとめ

いい本です。献本いただいたのでお世辞をいいたいところですが、ガチでいいです。増刷かかったって聞いたけど納得の内容。
献本なくても本屋で立ち読みしたら買ってました。

特に、とりあえず理屈はいいんで早く使えるようになりたいって人にオススメです。

あと、あけましておめでとうございます。本年もどうぞよろしくお願い申し上げます。

Espruino TypeScript向けに espruino.d.ts を書いたっていうか書きかけ

Espruino Advent Calender 22日目です。

Web屋というのはソフトウェア開発者の中でも最も組込み系と縁が遠いところにいるような気がしていて、そんな立場でEspruinoを使っているとなんかこう微妙な気持ちになってくることがあります。
特に組込み系というと静的型付けという先入観があって、動的でそのへんをよくdisられるJavaScriptで書いてると、なんとなくなんか言われそうな強迫観念というか被害妄想というかそういうのが片隅に湧いたりします。っていうのはボクだけなんでしょう。

まあべつにJS好きだし普通に動くのでいいんですが、一方でEspruinoで込み入った制御を書いてるときはちょっとクラスにまとめてみたいなという欲求も出てきてTypeScriptを試してみようという気になってきました。
そんなわけでEspruinoの処理をTypeScriptで書いてみようと思いました。つまりTypeScriptで書いてコンパイルしたJSをEspruino IDEで転送する。というやり方です。

やってみると個人的にはなかなか気に入りました。しかしEspruinoでTypeScriptをやるとそのままでは動かないことがあります。
それはEspruino独自のグローバルオブジェクトがコンパイルエラーを起こすことです。

EspruinoにはA0, C6, LED1といったGPIO用などのグローバルなオブジェクトが存在します。また digitalWrite, analogRead, setWatchといった独自のグローバル関数もあります。
これらがTypeScriptでは未定義のオブジェクトとなりコンパイルエラーが出てJSが生成されません。

これはTypeScriptで jQueryやnode.jsなどのライブラリを使ってコードを書いても起こることで、型厳密を追求するTypeScriptの特長です。
解決するには各ライブラリ向けのdeclaration fileをつくります。拡張子は .d.ts です。

というわけで、Espruino向け declaration file espruino.d.ts を書きました。っていうか書きかけです。


bathtimefish/espruino.d.ts · GitHub

使い方は、.ts ファイルと同じディレクトリに置いて .tsの行頭に以下のコメントを書きます。

こうすることでコンパイル時にespruino.d.ts中のアンビエント宣言が参照されるようになります。
espruino.d.tsは今のところすべてのオブジェクトを定義できていません。ていうかすごく単純なことしか定義できてないです。anyだらけでゆるゆるです。
そもそもTypeScriptの declareやinterfaceの書き方がいまいちつかめなくてDefinitely Typedを参考にしながら手探りで書いてます。TS力が足りてない。。

まあ、Espruino独自のオブジェクトの型が定義されることで存在しないプロパティを参照したりする危険性が少なくなるのでいいかもしれません。
必要なところからぼちぼちアップデートしていこうと思います。

よく考えたらこの記事はEspruinoっていうかTypeScriptの記事だった気がしますが気にしないことにします。

Espruino 圧力センサーでつまむとLEDが光るやつをつくる

Espruino Advent Calender 21日目です。

先日、ハード系のハッカソンに参加したら圧力センサーを使ってるチームがいて圧力おもしろいなと思ったので買ってみました。
値段も手頃だし壊れにくそうなので電子回路の勉強には使いやすいかなと思います。
というわけで今回はEspruino と圧力センサーをつなげてみようと思います。

とりあれずセンサーに圧力をかけたらLEDが光るみたいなarduinoとかでよくあるデモをつくってみようと思います。
圧力センサーは与えられた圧力に応じて抵抗が変化するのでespruinoで回路の電圧の変化を読み取ります。そのために抵抗分圧回路というのをつくります。

用意するもの

* 圧力センサーFSR402
* LED
* 抵抗 10kオーム
* 抵抗 220オーム
* ジャンパワイヤ 7本

回路はこんな感じになります。

f:id:bathtimefish:20141221103353j:plain

赤いケーブルを espruinoのvbatに、黒いケーブルを espruinoのGNDに接続します。
緑のケーブルを espruinoのA0ピンに、青いケーブルを espruinoのA8ピンに接続します。

JavaScriptはこんな感じ。

Espruino IDEでプログラムを転送するとこんな感じで動きます。
analogRead(A0)で取得した値が0.5以下になるとLEDが点灯する仕組みです。

f:id:bathtimefish:20141221103611j:plain

vbat(赤ケーブル)からくる電圧に10kオームの抵抗をかませます。その後にA0ピン(緑ケーブル)を挿しその後に圧力センサの片方のピンを接続、圧力センサのもう片方のピンをGNDに落とします。

こうすることで圧力センサをつまんだときに変化する抵抗で回路の電圧が変化しA0ピンでその電圧の変化を計測できます。こういうのを抵抗分圧回路というらしいです。

秋月のページによるとFSR402圧力センサーは力いっぱいつまんで10kオームということなので前に10kオームかませることで力いっぱいつまむと約5V、半分くらいだと約2.5V、何もしないと約0V。おおざっぱにいうとそんなかんじで電圧が変化します。

温度計や圧力センサーなんかは単純な回路でアナログ値が取得できます。単純なんだけどやってみると意外に面白くて初歩的な回路の勉強にもなります。
なるほどarduinoとかのチュートリアルでよくやられる理由がわかります。

Espruinoには各種センサー向けのビルトインライブラリが豊富に用意されていてチュートリアルも充実していますが、個人的にはanalogReadみたいな基本的な機能を使いこなすのもおもしろくなってきた今日このごろです。

Espruino 人感センサーで動きを検知してみる

Espruino Advent Calender 14日目です。

なんとなく人感センサーが好きです。焦電素子で生き物の動きを検知。自動ドアとかで使われているやつです。
回路も単純でいかにもセンサー使ったっぽくなるので電気回路初心者のボクでも動かしやすいわけで、今回はEspruinoで人感センサーを使って動きを検知してみます。

基本的にはこちらのCode Exampleそのまんまです。人感センサーもここに載ってるのと同じやつを使います。

人体感知センサーモジュール HC-SR501

配線はこんな感じ

f:id:bathtimefish:20141214160833j:plain

まず黒いワイヤをEspruinoのGNDピンに挿します。次に赤いワイヤをBatピン、緑のワイヤをA1ピンに挿します。

f:id:bathtimefish:20141214155355j:plain

そして黒いワイヤを人感センサーの左端のピン(GND)に、緑のワイヤを真ん中のピン(OUT)、赤いワイヤを右端のピン(VCC)に挿します。
これで配線は完了です。

Javascriptソースコードは以下です。

setWatch()関数を使って焦電センサーの状態を監視します。
動きが検知されるとsetWatch内のコールバックが呼ばれLED2(緑LED)が点灯する仕組みです。
setTimeoutで3秒後にLED2を消灯します。

f:id:bathtimefish:20141214154006j:plain

setWatch() はEspruino独自の関数で setInterval(callback, 0) みたいな動きをする関数ですが、オプションで監視の繰り返しや監視する電圧状態の指定、監視間隔が指定できるのでセンサーの監視に特化してるみたいです。

玄関に人が来たらアラームがなるやつとか、Espruinoで普通に作れそうでおもしろいです。

EspruinoのビルトインLEDをコントロールするクラスを書いた

Espruino Advent Calender 13日目です。

Espruinoでちょっとまともなモックアップをつくったりしていると、電源状態やエラーの通知などでビルトインのLEDを点灯させたり点滅させたりする必要がでてきました。
Espruinoには赤、緑、青の3つのLEDがついてJavaScript的にはLED1, LED2, LED3というオブジェクトが割り当てられています。
なんかちょっとそれっぽいプロトタイプをつくるときに例えば電源ONのときには緑を点灯、通信中のときは青を点滅、エラーのときには赤を点滅といった制御をすると見た目それっぽくていいです。

処理的には単純なんだけど、毎回書くのがめんどうだなと思って簡単に使えるSignalsクラスを書きました。

こんな感じで使います。

LED1~3の振る舞いをセットしたオブジェクトを segnals.set()の引数にするだけです。
上記のコードではLED1(赤)が消灯、LED2(緑)が点滅、LED3(青)が点灯です。

Signalsのソースコードはこんな感じ。最近慣れてきたTypeScriptで書きました。

tscで吐かれたJavaScriptコードは以下。こちらをEspruino IDEに貼り付けて動かします。

Espruinoはrequire()で外部JSモジュールを読み込めるんだけど、 9日目で書かれているようにSDカードが必要だったりちょっとしたことでやるには面倒です。
なので今のところmoduleにせず単なるクラスとして利用するようにしてます。

利用する場合は Signals クラスを単にプログラムに含めるかたちで。ちょっとソースが冗長になるけど、まあ簡単便利とトレードオフかなと思ってます。
個人的には便利に使えてます。