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

日々常々

ふつうのプログラマがあたりまえにしたいこと。

Sencha Touchを触ってみた

ってみた JavaScript iPhone

HTML5でスマーフォンアプリを作ろう 【HTML5-WEST x 日本Androidの会 神戸支部】に行ってきました。Androidと言うことでiPhoneユーザとしてはビクビクしながら行ったのですが、発表自体もiPhoneだったくらい心配不要でした。

@さんの発表が面白かったので、今日はSenchaTouchの日にしました。

概要

SenchaTouchは、iPhoneAndroidのネイティブアプリと同等の操作性を実現する、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狂ってるし。
ChromeJavaScriptコンソールで見て見たらなんかエラーが出てます。

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と、Twitterjsonを使った検索ですね。JavaScript部分はコピペりましたが、中でやってることは大体こんな感じになります。

  • GoogleMapを現在位置を使って表示。
  • Mapの位置情報を使ってtwitterを検索。
  • 戻ってきたTweetをタイムラインに表示。
  • Tweetの位置情報からMap上にマーカー表示。
  • あとはTweetの更新タイミングをMapの更新と更新ボタンにハンドリングする。

実際にコレをコーディングしようとしたら結構手間になる気もします。SenchaTouchでは100行未満の短いコードで実現していますし、ざっと読んだ感じで理解できる記述が出来るようで、とても気に入りました。その上見栄えがネイティブアプリとと殆ど変わらない。今まで手を出してこなかった分野ですが、使わない手はないと思いました。

*1:一部はGoogleChromeHTML5をある程度サポートしているブラウザならば挙動が確認できますが、PCブラウザだとイマイチ判らないと思います。iPhoneの開発環境に付属しているシミュレータや、Androidのシミュレータとかを入れれば確認できるかもしれませんが。

*2:ダウンロードした中のdocsにも同じものがあるっぽいのですが、いつまで経ってもLoadingのまま動かなかったのでWebのを使います。