Sencha Touch2をさわってみる

ほんとうにさわりだけ

Sencha Touch2とは？

モバイル向けのHTML5フレームワーク
ネイティブアプリ風の画面を作成することができる
Native Packaging
Nativeの機能を利用できるわけではない(その辺はPhoneGapを使う?)

どんなことができるのか？

こちらのサンプルでだいたいの機能は見れる

http://dev.sencha.com/deploy/touch/examples/production/kitchensink/index.html

まずはダウンロード

sencha-touch-2.1.0-commercial.zip
http://www.sencha.com/products/touch/download/
解凍してどこかに置いておきます

sencha-cmdをインストールするとsenchaコマンドが使えるようになります
SenchaCmd-3.0.0.250-osx.app.zip
http://www.sencha.com/products/sencha-cmd/download
解凍してできたSenchaCmd-3.0.0.250-osx.appを実行してインストールします
途中で実行ファイルをインストールするパスを聞かれます

senchaコマンド

senchaコマンドってrailsみたいにアプリのひな形を作ったり、コントローラを作ったりするみたいです。

アプリ作成

とりあえずアプリを作ってみます
以下のコマンドを先にダウンロードしたsencha-touch-2.1.0-commercial.zipを解凍してできたディレクトリ内で実行します

$ sencha generate app GS ../GS

Sencha Cmd v3.0.0.250
[INF]		init-properties:
[INF]		init-sencha-command:
[INF]		init:
[INF]		-before-generate-workspace:
[INF]		generate-workspace-impl:
[WRN]		Ignoring @require ../version/Version.js in js/String.js
[WRN]		Ignoring @require ../Ext-more.js in js/Format.js
[INF]		-before-copy-framework-to-workspace:
[INF]		copy-framework-to-workspace-impl:
[INF]		     [copy] Copying 1005 files to /Users/yuhei/tmp/GS/touch
[INF]		     [copy] Copied 158 empty directories to 3 empty directories under /Users/yuhei/tmp/GS/touch
[INF]		     [copy] Copying 1 file to /Users/yuhei/tmp/GS/touch
[INF]		     [copy] Copying 1 file to /Users/yuhei/tmp/GS/touch
[INF]		[propertyfile] Updating property file: /Users/yuhei/tmp/GS/.sencha/workspace/sencha.cfg
[INF]		-after-copy-framework-to-workspace:
[INF]		copy-framework-to-workspace:
[INF]		-after-generate-workspace:
[INF]		generate-workspace:
[INF]		init-properties:
[INF]		init-sencha-command:
[INF]		init:
[INF]		-before-generate-app:
[INF]		generate-app-impl:
[INF]		    [mkdir] Created dir: /Users/yuhei/tmp/GS/app/model
[INF]		    [mkdir] Created dir: /Users/yuhei/tmp/GS/app/controller
[INF]		    [mkdir] Created dir: /Users/yuhei/tmp/GS/app/store
[INF]		    [mkdir] Created dir: /Users/yuhei/tmp/GS/app/profile
[INF]		Generating new packager.json file using native packager
[INF]		copy-sdk:
[INF]		     [copy] Copying 1 file to /Users/yuhei/tmp/GS/resources/css
[INF]		-after-generate-app:
[INF]		generate-app:

こんな感じでアプリのひな形が作成されました

GS
├── app
│   ├── controller
│   ├── model
│   ├── profile
│   ├── store
│   └── view
│       └── Main.js
├── app.js
├── app.json
├── build.xml
├── index.html
├── packager.json
├── resources
└── touch

動かしてみます。webサーバーが必要ってことなんですが、pythonでとりあえず動かせます

$ cd ../GS
$ python -m SimpleHTTPServer 

http://localhost:8000で見れます

表示されたページのメッセージによるとapp/view/Main.jsで見た目を定義しているみたいです