ありえるえりあミニ勉強会#1 〜Sencha Touch〜
URL:http://connpass.com/event/421/■ Sencha Touch ひとめぐり @kawanoshinobuさん
■ Sencha Touch アプリの開発デモ
※よく聞こえなかったので殴り書き。
and Ext JS, jQTouch
SDKツールズ
Node.js
Setup web server
Apacheを使うといい。
SDKツールが入っている前提
アプリケーションの雛形を作る。
Senchaの推奨のディレクトリ構成。
ライブラリがコピーされる。
機能が豊富すぎる。
・デフォルトではスクリプトをAjaxで読み込むため、webサーバーが必要。
styleHtmlContentを有効にする。
Main.js
Viewer.js
公式API Docで、リアルタイムに挙動確認ができる。
ドキュメント：http://docs.sencha.com/touch/2-0/#/api
リストにconfigを書いていく。
rootPropertyにdataのオブジェクトのパスを書く。
storeのautoloadコンテンツを自動で
typeはデータを取る。ラッパー？定義。jsonpでとる。
・発表に使われてたgithub
https://github.com/kawanoshinobu/tiny-instagram-viewer
Sass/Compassのインストール
CSSのプリプロセッサ
http://sass-lang.com/
sencha app native
iOSネイティブにしてくれるコマンド
sencha generate app native test
・ビルド
sencha app build native
packager.json
platform:android
"sdkPath":"~/android-sdk-macosx"
Androidの.apkファイルも出来る
iOSは.appのファイルが出来る。
1と2に比べたら2の方が早い。
複雑になると遅くなったり。
描画が早い。
CSS3のアニメーションが最適化。
タップのレスポンスなど。
・ネイティブ関係ドキュメント
http://docs.sencha.com/touch/2-0/#!/guide/native_apis
・2.xで新しいもの
http://docs.sencha.com/touch/2-0/#!/guide/whats_new
・1.xと2.xのスピード比較
http://vimeo.com/30296006
■ Sencha Touch 利用事例： @dsuket さんによる iPad用Webアプリ Inkpod Web の紹介 高岡大介さん
つくばの本部で。
Inkpot Web
Webブラウザで
iUI
jQuery Mobileは画面遷移がよくない。見た目も。重い。
SenchaTouchは拡張しやすい
Canvasでがりがり作りたい。Canvas
フルスタックFW
ウィジット類
ツールボックス 背景スタイル
パネルでスタイルで詳細編集。
カラーピッカー。
グラデーション。
スライダー。
Javaのawtやswingのような感じ
Extオブジェクトに対してぽこぽこ作る
Ext.Observable・・・イベント管理の既定クラス
Ext.Component・・コンポーネントの基底クラス
Ext.◯・・コンテナ〜クラス
・イベント駆動。
イベントの白化、リスナーの登録などのフレームワーク
DOMイベントや、Touchイベント以外にもカスタムイベントが利用できる
オブジェクトの状態遷移イベント
・Touchイベントは要注意
生のTouchイベントをSenchaがラップ
マウスイベントと等価的に扱える
マルチタッチがない
フォーカスの問題
Sencha Touch（1？）でハマりやすい3つののポイント
2.コンポーネントは遅延作成される
”背景スタイル”のパネルは表示される時に初めて生成される
初期化に、パネルの要素（div要素）に対して遅延評価される。
→初期化するのに難しい
2.PCブラウザ対応
PCでも使える。
マウスの概念がない
→マウスカーソル
ドラッグが出来る部分は、矢印のアイコンになっててどこが触れるかがわからない。→ポインタを設定してあげる。
→ホイールスクロール
→サポートされていないので自分で実装する
3.ソフトウェアキーボード
→タブレットではソフトウェアキーボードがでる。
明示的にダブルクリックするのはOK。
■まとめ
よくできた高品質、高性能のフレームワーク
・2が出た
ネイティブアプリ変換
デザイナーツール
Titanium、PhoneGapがあるがSencah1本でいける？
