HTML5モバイルWebフレームワークの比較

モバイル用でJavaScriptでアプリケーションを作成できるフレームワークについて比較した記事を翻訳しました。
Comparing HTML5 Mobile Web Framework - Dzyngiri

Comparing HTML5 Mobile Web Framework

Apr 27, 2012 by Dzyngiri

今年はモバイルWebにとって面白い年になっている。HTML5とCSS3の採択、モバイルブラウザのパフォーマンス向上、モバイルアプリケーションフレームワークの爆発は、モバイルデバイスでのリッチでインタラクティブなWeb体験の作成がこれまでよりも現実的になったことを意味する。PhoneGapのようなラッパを使うことで、iPhoneやiPad、AndroidのネイティブのAppストアでアプリケーションを配布することも可能になった。単一のコードベースでマルチプラットフォームを対象にして。

モバイルWeb開発者はたくさんのフレームワークを手にいれた。変形のアニメーション、ツールバー、ボタン、リストビュー、そしてオフラインストレージでさえも。これらの多くは新しく、状況はせわしく移り変わる。私は、多くのモバイルWebフレームワークを試してみて、比較・考察した。これらは私が気づいたことである。

jQTouch

jQTouchは利用が簡単で、比較的ドキュメントが整っている。それは「Building iPhone Apps with HTML, CSS, and JavaScript」ですばらしくまとめられている。jQTouchは、適切に作成されたHTML上でiPhoneのような体験の構築ができるよう、プログレッシブエンハンスメントのアプローチをとっている。簡潔であり、基本的なウィジェットやアニメーションのセットを提供していて、動的なふるまいをプログラムで制御するのに十分である。
(訳注：プログレッシブエンハンスメントは、どのブラウザでも見れるHTMLに追加でUI表現などを構築していく考え方)

しかし、私の単純なテストアプリケーションでさえも、パフォーマンスの問題があった。ページ遷移は飛び飛びだったり抜けていたりする。そしてタップイベントの応答には断続的な遅延がある。そして、プロジェクトは技術的にはアクティブであるけども、立ち上げの作者は異動してしまって、開発はゆっくりになっているように見える。

jQTouchは寛大なMITライセンスで利用可能である。これは私のお気に入りのオープンソースライセンスのひとつだ。

jQuery Mobile

jQuery Mobileは新しく売り出し中である。2010年8月にアナウンスされ、非常に機能的なAlpha2まで迅速に進み、今では2月28日にJQM 1.1.0が来た。これはjQTouchと同じような、しかしもっと標準に準拠したアプローチで、幅広いUIコントロールとスタイルのセットがあり、そのフレームワークの後継者として非常によく感じる。

jQuery Mobileのパフォーマンスは変化しやすい(しかしながら、jQTouchよりもよい)。特に、タップイベントへの反応でのアニメーションのレンダリングで。また、もっと動的なアプリケーションを簡単に作成できるようにする、少数のプログラム可能なフックも欠けている。実際に、ページが読み込まれたときに発生するイベントがある(例えばスライドして表示される)。しかし、どのUIエレメントがページ切り替えのきっかけになるかを関連付けられたハンドラコードに知らせる方法や、追加の情報をハンドラに渡す方法がない。回避策を作成することもできるが、将来のバージョンではjQTouchから手がかりをえて、このような機能性をもう少し構築することを望む。

2011年末と2012年始めに、jQuery Mobileは多くのWebギークの目にとまった。そしてモバイルWeb開発において最も改善されたフレームワークである。

jQuery MobileはMITライセンスかGPL2ライセンスで利用可能である。

Sencha Touch

Sencha TouchはExt JSフレームワークに対するモバイル版である。このアプローチは、jQTouchやjQuery Mobileとは明確に異なっている。用意したHTMLに機能追加するのではなく、JavaScriptで作成したオブジェクトに基づくDOMを生成する。このように、Senchaでの作業には「Webっぽさ」は少なく、JavaやFlexなど他の技術でアプリケーションを構築するほうに近く感じる(jQueryよりはYUIにすこし近い)。私は個人的にはプログレッシブエンハンスメントのアプローチをお勧めするが、これは完全に好みの問題だ。

Senchaは非常に豊富なUIコンポーネント、明確なiPadサポート、JSONやHTML5オフラインストレージを使ったストレージやデータバインディング機能など、競合に比べてはるかに広範である(Senchaのデータ構造内のアプリケーションデータを操作すると、対応するリストにリアルタイムで表示されるのは、とてもクールだ)。ツールバーのように、リストなど他のコンポーネントがスクロールしても動かないオブジェクトを元からサポートしている、私が見た中では唯一のWebフレームワークでもある。

明白な重厚さにもかかわらず、Senchaのパフォーマンスは目に見えてよく、私のテストではjQTouchやjQuery Mobileよりも頼りになった。起動時のロード時間を除いては。

ライブラリやフレームワークを使うときには、通常「フレームワークとの戦い」を行ってから自分の作業に入る。Sencha Touchで広範な機能が与えられているというのは、アプリケーションのほとんど全てをSenchaの方法で行わないといけない可能性があるということだ。私はもともとWebKit組み込みのSQLiteデータベースをオフラインストレージを使っていたが、Senchaデータストアで動かすようにするのに、複雑さとバグとで最終的に取り除いた。

ドキュメントは、幅広くはあるが、半端な抜けがある。これらと険しいサイズのフレームワークであることの両方で、私は多くの時間を、たどって理解することが難しいバグとの戦いに費やした。デベロッパフォーラムでの私の質問に対する返答は、他のフレームワークに比べて高頻度で役に立った。しかしまだ最終的には不十分である。Senchaは$300/年からの有償サポートを提供しており、購入しようと強く考えたが、しかし奇妙なことに、私の販売担当の問い合わせへの返答は、信じられないほど送金への興味を失わせた。

Sencha TouchはGPL3ライセンスで使用可能である。いくぶんまぎらわしいGPLへの例外があり、LGPLと同等に見える。もしくは無償の商業ライセンスで利用できる。

Titanium Mobile

Sencha Touchに似て、AppceleratorのTitanium MobileはJavaScript APIでアプリケーションを書くことを可能にする。ただしSenchaとは異なり、ほとんどのコードをiPhoneやAndroidのネイティブコードにコンパイルする。これは、本来のWebフレームワークではないことを意味するが、互換性のレイヤーでありコンパイラーである。(これは姉妹品のTitanium Desktopは、Webベースでデスクトップ上のネイティブラッパで動くHTML/JSアプリケーションの記述を可能にする。)

TitaniumはWeb開発者にパフォーマンスの高い、スキンで外見を変えやすいネイティブアプリケーションをJavaScriptと少しのXMLを使うことで開発することを可能にする。Objective-CやCocoa Touchを学ぶ必要はない。私の単純なテストアプリケーションは、パフォーマンスの観点からは本来のWebフレームワークを立ち去らせた。そして両立させるのは難しいわけではない。

しかし、利点はまた大きな不利点でもある。Titaniumがサポートしているプラットフォームだけをターゲットにできる。そして開発ツールに疲れてしまう。この点を示すかのように、私のテストアプリケーションはさっさとiPhoneでは起動しない状態になってしまった。Titaniumはデバッガを含んでいない。TitaniumプロジェクトはXCode中で起動したりデバッグしたりできない。そしてシミュレータではうまく動き、問題に対処する現実的な方法がないままになっている。

考察

自分のアプリケーションをこれら４つのフレームワークのうち３つで構築しなおすことは退屈ではあったが勉強になった。私はjQTouchが好きではあるが、トラブルもあり、これからもっと進化すると信じている。jQuery Mobileの簡潔さと非常にWeb中心的な開発アプローチには声援を送る。しかしいくつか重要な機能が欠けており、Sencha Touchほどにはうまく動かない。

アルファ版の2つのプロダクトと1.0のプロダクトを比較するのは公平ではないが、ひとつ尊重するべき点を除いては。私はなにかを今必要としている。
私はSencha Touchに至った。最初はパフォーマンスと幅広さに印象付けられたが、その開発スタイルで利用に至った。私が掘り返したように、ドキュメントの穴にはがっかりしたが、幅広さには感激しつづけた。そして、そのコーディングスタイルに魅入られた。有償サポートがあることも関心を引く。そして、もし私のメールに答えてくれるなら、おそらく私は購入するだろう。しかし今は、焦点はSenchaベースのアプリケーションである。

まとめ

私は大きな問いに答えていない。Webベースのアプリケーションは本当にネイティブアプリケーションと並び立つだろうか。そうだとして、その挑戦で単一のコードベースの価値はあるだろうか。
答えはYESだ！なぜならWebベースのアプリケーションはHTML5とCSS3のコア知識を必要にするからだ。

訳注：参考文献

jQTouchであげられている書籍の邦訳

iPhoneアプリケーション開発ガイド ―HTML+CSS+JavaScript による開発手法

jQuery Mobileの本

jQuery Mobile

Sencha Touchの日本語の本は見当たらないけど、Ext JSの本が役に立つと思う。

Sencha Ext JS 4実践開発ガイド

Titaniumの本

TitaniumMobile iPhone/Androidアプリ開発入門