HTML5でスマーフォンアプリを作ろう 【HTML5-WEST x 日本Androidの会 神戸支部】に行ってきました。Androidと言うことでiPhoneユーザとしてはビクビクしながら行ったのですが、発表自体もiPhoneだったくらい心配不要でした。
[twitter:@kadoppe]さんの発表が面白かったので、今日はSenchaTouchの日にしました。
概要
SenchaTouchは、iPhoneやAndroidのネイティブアプリと同等の操作性を実現する、HTML5によるJavaScriptフレームワークです。これを使用すると、ネイティブアプリと比べても遜色のない表示や操作性をWebアプリで簡単に実装できます。つまり、Webアプリとネイティブアプリの差がブラウザ上で動くか否か程度に。うだうだいっても仕方がないので、デモを見るのが手っ取り早いです。デモはこちら。*1
ライセンスは商用ライセンスとオープンソースライセンス（GPLv3）のデュアルライセンスモデルです。商用ライセンスがあるので仕事で使うにしても安心ですね。よく判ってませんけど。
まずダウンロード
http://www.extjs.co.jp/products/touch/download.php
ダウンロードしてこなきゃ話になりません。気合を入れてダウンロードボタンをクリックしてください。メールアドレス入れろって言われたら、それは商用版です。日本語読んでください。主に自分。
この時点でのバージョンは 1.0.1a でした。思った以上に大きく、zipで24.4MBで、展開すれば46.1MBありました。
サンプルを見る
ダウンロードしたファイルには、多くのデモが付属しています。exsamplesにわんさか入っています。勿論PCブラウザで表示しても微妙です。くそう。でもでもイメージは掴めるよ、と自分に言い聞かせて続行です。
Getting Started
geting-started.html が入ってるので開いてみます。わあ英語。
環境を設定しろ
SenchaTouchをダウンロードをする。しました。作業場所は適当なディレクトリで良いでしょう。後で適当なWebサーバにのっけてiPhoneから確認します。対象のCSSを選択します。iPhone向けのつもりなので"sencha-touch/resources/css/apple.css"でしょうか。
HTMLファイルを作れ
作りましょう。昨日の発表の中で見せてもらった感じで、HEADでjsとcssを読み込むだけ。BODYには何も書かない。"application's CSS" は前述の apple.css を入れておきます。
JavaScriptファイルを作れ
ファイル名とか特にないし、手を抜いてコピペします。ぺし。
Applicationをテストしろ
もうテストです。非常に簡単。今回はとりあえずChromeで表示してみます。なんか"Google Maps API is required"とか出てるだけでした。これは単なるtypoでして、GoogleMapsのJavaScriptのアドレスを打ち間違ってました。素直にコピペしましょう。
http://maps.google.com/maps/api/js?sensor=true （直接アクセスして表示できなきゃ使えないです。）
そこを直せば、Chromeでもそれなりに動きました。後の手順はリリースの為の作業みたいなのでパス。ここまでの分をWebサーバに乗っけて、iPhoneで表示確認。おー表示できて…る？なんか変。位置がとれてないし、css狂ってるし。
ChromeのJavaScriptコンソールで見て見たらなんかエラーが出てます。
Uncaught TypeError: Cannot call method 'on' of null
コピペで出来ないのは、環境周りの設定不足かGetting-Startedと最新版のバージョンのズレです。環境はちょっと考えにくいので、最新のAPIを検索することにしました。今回は Ext.Map から見てみることに。
http://dev.sencha.com/deploy/touch/docs/ *2
http://dev.sencha.com/deploy/touch/docs/source/Map.html
if (Ext.isDefined(this.getLocation)) { console.warn("SpinnerField: getLocation has been removed. Please use useCurrentLocation."); this.useCurrentLocation = this.getLocation; }
と言うことなんで getLocation→useCurrentLocation に変える。動いたひゃっほう。…でもconsoleにwarnで出たりしそうな気もするんだけど、JavaScriptよくわかんないんです。勉強中です。許してください。
とりあえずGetting-Startedを通過。サンプルである近所のツイートを拾って表示するアプリケーションはできました。使っているのはGoogleMapsAPIと、Twitterのjsonを使った検索ですね。JavaScript部分はコピペりましたが、中でやってることは大体こんな感じになります。
- GoogleMapを現在位置を使って表示。
- Mapの位置情報を使ってtwitterを検索。
- 戻ってきたTweetをタイムラインに表示。
- Tweetの位置情報からMap上にマーカー表示。
- あとはTweetの更新タイミングをMapの更新と更新ボタンにハンドリングする。
実際にコレをコーディングしようとしたら結構手間になる気もします。SenchaTouchでは100行未満の短いコードで実現していますし、ざっと読んだ感じで理解できる記述が出来るようで、とても気に入りました。その上見栄えがネイティブアプリとと殆ど変わらない。今まで手を出してこなかった分野ですが、使わない手はないと思いました。
