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

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的にネタで終わるのか。今後もぬるく見守っていこうと思いました。