Sencha Touch について調べました。

Posted by & filed under 開発.

このエントリーをはてなブックマークに追加
Bookmark this on Digg

今月から開発部に配属された川野です。

自社製品のモバイル用UIを刷新する調査をひとりで細々とやっていて、そのなかで Sencha Touch について、ある程度情報がまとまったので記事にさせて頂きました。

Sencha Touch 概要

Sencha Touch は、モバイル WEB アプリを開発するための、JavaScript フレームワークです。

HTML5 と CSS3、JavaScript を駆使して、ネイティブアプリケーションっぽい見た目と操作感を、ブラウザ上で実現しようとしています。

iOS（iPhone とか iPad）と Andoroid に対応。（※正確には、WebKit 系のブラウザにのみ対応）

ExtJS で有名な Sencha が開発を行っています。Sencha Touch は無料で商用利用可能です。

どんなことができるの？

百聞は一見に如かず、ということで、、

Sencha Touch で作られた GitHub を閲覧するアプリです。

# iPad での利用を想定したものですが、PC上でも Chrome や Safari であれば利用できました。

Sencha Touch を使うことで、上記のようなネイティブアプリライクなモバイルWEBアプリを比較的簡単に開発することができます。

Sencha Touch が提供してくれる機能

  • タッチイベントのハンドリング
  • ネイティブアプリライクな UI コンポーネント
  • オフライン機能（localstorage などを利用）のサポート
  • Ajax を使った画面遷移をブラウザの履歴に残す機能
    => 具体例で言うと、Ajax の遷移が戻るボタンで戻れる
  • 複雑なプログラムのサポート（Sencha Touch MVC）
  • ネイティブアプリに変換することも想定（PhoneGap との相性がよい）
  • Ajax関連、その他いろいろ便利なユーティリティ

などなど

列挙されても、何のことかよく分からないと思いますが、とにかくモバイルデバイスに最適化された WEB アプリを開発するために必要なものが一通り揃っている、ということで。。

# jQuery Mobile との違い
モバイル用の JavaScript ライブラリで語られることの多い jQuery Mobile は、モバイル用の WEB「ページ」作成に適しているのに対し、Sencha Touch は、モバイル用の WEB「アプリケーション」作成に適している印象です。

Sencha Touch を利用したプログラミング

いわゆる、「コンポーネントをレゴブロックのように積み上げていく」スタイルです。

ライブラリのコアは ExtJS と同じものを使っているので、ExtJS を使ったことのある人には取っ付きやすいと思います。コンポーネントにコンフィグオブジェクトを定義して、振る舞いを指定していきます。

コンポーネントが HTML を出力して UI を構築していくため、HTML ファイルに直接 タグを記述することはありません。

Sencha Touch 独自の MVC 構成でアプリケーションを実装していきます。

ざっくり言うと、

  • Model では、アプリケーション内で使うモデルの定義
  • View では、UIコンポーネントの定義と、イベントハンドリング => Controller へのディスパッチ
  • Controller では、ディスパッチされたイベントの具体的な処理

を記述していく感じです。

Sencha Touch MVC の詳細は、以下のページで説明されています。

その他周辺技術

Sencha Touch では、効率よく高品質なアプリを開発するために、比較的新しい技術を採用しています。

SASS、Compass
CSS の作成に、「SASS」と「Compass」を利用しています。SASS は CSS を生成するためのメタ言語、Compassは SASS を便利に使うためのフレームワークライブラリです。
SASS、Compass を使うことで、Sencha Touch が提供してくれているテーマを、簡単にカスタマイズすることができます。

Jasmine
JavaScript のテストフレームワークに「Jasmine」を利用しています。Jasmine は TDD（テスト駆動開発）の概念に基づいて設計されています。

その他、JavaScript の圧縮には、YUI Compressor が使われており、「JsBuilder」というビルドツールがフレームワークに同梱されています。

まとめ

Sencha Touch を使う魅力は、WEBアプリの開発効率の良さ・クロスプラットフォーム性を維持しつつ、ネイティブアプリのようなユーザーエクスペリエンスを提供できる点にあると思います。

また、Sencha Touch + PhoneGap の組み合わせは、モバイルアプリ（ネイティブ）のプロトタイプ開発にも適しているような気がしました。

まだまだ日本語の情報は少ないですが、将来有望なフレームワークだと思います。

お役立ちリンク


関連文書:

Comments are closed.