Sencha Touchを利用したスマートフォン向けアプリ開発のススメ

あけましておめでとうございます。Sencha Japan(Ext Japan)/株式会社ゼノフィの小堤です。

今回は、スマートフォン向けのJavaScriptフレームワークであるjQtouch, jQuery Mobile, Sencha Touchを簡単に紹介した後に、昨年正式リリースされたSencha Touchを利用してスマートフォン向けのコンテンツまたはアプリケーション開発を行っていく上でのポイントを解説します。

2011年のスマートフォン事情とOSプラットフォーム

iPhoneをもつユーザーはかなり増えた感じがしますし、特別な感じもないくらいiPhoneは普及してきた感じがします。それに加えて、昨年末から各キャリアから続々とAndroid端末が発売され、そのバージョンも2.1/2.2がほとんどです。

スマートフォン自体の機種が増え、開発者としてはテストを行う苦労が増えていきそうな感じですが、これからAndroid端末を購入しようかというユーザーには機種の選択肢が広がった気がします。スマートフォンと一言でいっても、その種類は、ここで触れているiPhone(iOS)やAndroid以外にも存在します。しかし、現実的なコンテンツやアプリケーション開発において、このiOS、Androidの対応が多くなってくるのではないでしょうか。

また、スマートフォン開発（以後、この記事ではiOSとAndroidを指すことにします）では、HTML5/CSS3と新しいWEB技術を習得していく必要があるとともに、JavaScriptを組み合わせることでネイティブアプリケーションに負けないアプリケーション開発が可能になってきました。

jQuery Mobile/jQTouch

HTML5+CSS3+JavaScriptという、このJavaScriptの部分を開発していく中で、ゼロからすべて自分で実装することは非常に困難です。そこで、利用していきたいのがスマートフォン向けのJavaScriptフレームワークです。

jQuery Mobile

jQueryはいわずと知れた有名なJSライブラリですが、jQueryを読み込んで、さらにjQuery Mobileを読み込むことでスマートフォン向けの見た目を構築していくことができます。UIが存在しないjQueryとは異なり、jQuery MobileではCSSが用意されているため、このCSSを読み込んで利用します。

ちょうどPC用のjQuery UIに近いライブラリです。特徴として、HTMLエレメント（タグ）は最低限、開発者がマークアップする必要があります。

jQTouch

jQTouchも、jQuery Mobile同様にjQueryを必要とします。jQuery Mobileとの違いは、WebKitベースのブラウザに最適化されている点です。また、用意されているテーマもjQuery Mobileとは異なります。

また、jQTouchの開発は、後述するSencha Touchの開発元であるSencha Inc.が行っているsenchalabs内で開発が進められています。

Sencha Touch

Sencha Inc.が開発を行っているスマートフォン向けフレームワークです。昨年に登場し1.0がリリースされました。また、当初予定していた有料のライセンスが、無料になりさらに利用しやすくなりました。

jQuery Mobile/jQTouchと違い、UIの構築をするために、基本的にHTMLエレメント（タグ）を自分で記述しなくても、コンポーネントという仕組みを利用して、部品を画面に当て込んでいく作り方が特徴です。また、このSencha Touchは、同社のExt JSがベースとなり開発されているため、Ext JSのセオリーを習得しているエンジニアにとっては、非常に利用しやすいライブラリになっています。

コンポーネントの仕組みは、Visual StudioやDelphi/C++Builder(VCL)などでWindowsアプリケーションを開発、Swingでの開発を行ったことのある方にとっては、なじみやすいアーキテクチャだと思います。コンポーネントの配置にはレイアウトという仕組みがありますので、ネストしたコンテナの中に自由にコンポーネントを配置していくことが可能です。

デザイン面に関しても、CSSを生成するためのメタ言語であるSASSで生成している点も特徴的です。 Sencha Touchのテーマは、CompassというフリーウェアでSASSをサポートしたCSSフレームワークライブラリで構築されています。

もちろん、SASSを自分で書き換えることで、Sencha Touchのデザインテーマをカスタマイズすることができます。

本稿で紹介仕切れないほど、Sencha Touchは魅力的でパワフルなフレームワークです。Sencha Japan(Ext Japan)の立場としては、ぜひSencha Touchをご利用いただきたいのですが、それ以外にも理由があります。

2011年2月28日に正式リリースされるとアナウンスされているExt JS 4との関連性です。Ext JS 4とSencha Touchは共通のExt Platformという内部ライブラリを使用しています。

今後、ブラウザの進化が止まらない今、スマートフォンだけではなくPC用のアプリケーション開発でもJavaScriptを利用した開発が増えるかもしれません。PCもスマートフォンもリッチなアプリケーションにしなくてはならないかもしれません。そういった場合に、Ext JS 4を利用すれば、Sencha Touchと共通であるExt Platform部分の知識、基礎的なコンポーネントに関する知識は、完全ではありませんが共通です。さらに、Sencha Touchの開発を行える開発者が、PC版の開発に着手する敷居は非常に低くなると考えてよいと思います。

Sencha Touch/Ext JSでは、JavaScriptでMVC(Model-View-Controller)構造でアプリケーション開発を行っていくための仕組みが用意されています。さらには、MVC構造を出力するSencha Commandについてもアナウンスがありました。PC用アプリケーション、スマートフォンアプリケーションの両開発を視野にいれ、さらにサポート（有償）もありますので、ビジネスでの利用には、おすすめいたします。

最後に

今回紹介したjQuery Mobile、jQTouch、Sencha Touch以外にも、今後、優秀なフレームワークやライブラリがどんどん登場してくるかもしれません。さらに、node.jsなど今後はサーバーサイドもJavaScriptで記述していく時代がすぐ目の前まできています。

ただタッチインターフェースに対応するだけではなく、WebSocketを用いたリアルタイムアプリケーションの開発も当たり前になるかもしれません。2011年は、昨年よりも、これらのJavaScript周りの進化がめざましいことを期待するとともに、現場の開発者たちが知識ともにおいていかれている感じも否めません。

プログラマもデザイナも、このタイミングでこれらのライブラリに触れて、新しいスタイルのコンテンツ、アプリケーション開発に挑んでみてはいかがでしょうか。