Sencha Touchを試してみた

先週ですが、Sencha Touchのベータ版がリリースされましたね。

Introducing Sencha Touch: HTML5モバイル用フレームワーク
先週の2つの発表(SenchaとSencha Touch)の件について

ということで早速、触ってみました。
Hello Worldが表示される簡単なページを作りました。
下の様な画面です。

Sencha Touch Panel Example ScreenShot

ソースコード

サンプルではExt.setupでページの起動設定、onReadyプロパティではExt.Panelを生成しています。

サンプルを実行

Ext.setup

Ext.setupはページの起動設定をするメソッドです。以下のプロパティが指定できます。 (試しながら確認したのでたぶんあっているハズ・・・)

コンフィグ 説明
fullscreen trueにすると、apple-mobile-web-app-capableが有効になる。
tableStartupScreen フルスクリーン表示時のスプラッシュ画像を指定。iPad用。
phoneStartupScreen フルスクリーン表示時のスプラッシュ画像を指定。iPhoneやiPod Touch用
statusBarStyle フルスクリーン表示のときのステータスバー(時計とかバッテリーとか表示されているバー)の表示を指定。”black”(黒)と”black-translucent”(半透明)が指定できる。
icon ページをホーム画面に追加したときのアイコンを指定。このプロパティで設定されたアイコンはデバイス共通で使用される。
tabletIcon iPad用のアイコン設定
phoneIcon iPhone、iPod Touch、Android用のアイコン設定
glossOnIcon アイコンに光沢効果を適用するか
preloadImages 事前にキャッシュしておきたい画像ファイルを配列で指定
onReady セットアップ完了後に実行される関数
scope onReadyの実行スコープ

所感

簡単にモバイル用のページが作れるのが、単純に楽しいです。

ネイティブアプリの知識なくてもSencha Touchを使えば、
基本的なHTMLやJavaScript、CSSの知識だけで
ネイティブアプリちっくなページが作れるなぁと。

Ext Japanのブログで、Sencha Touch を始めようが公開されているので
次はこれを試してみます。