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