5分でわかるsencha touch
DESCRIPTION
AITC勉強会 第2回 資料 http://aitc.jp/events/20130713-HTML5/info_v2.htmlTRANSCRIPT
![Page 1: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/1.jpg)
5分で分かる
2013.07.13AITC第2回勉強会
「jQuery MobileとSencha TouchでWebアプリを作ってみよう!」~ 2大スマホ向けWebアプリフレームワークを使いながら比較 ~
TAKAOKA Daisuke
Sencha Touch
![Page 2: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/2.jpg)
5分でわかる Sencha Touch
Sencha Touchとは
モバイルWebアプリフレームワークの一つなの。
いわゆるスマホ向けWebアプリが簡単にできるの。
AITC非公式キャラクターハルミン2
![Page 3: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/3.jpg)
5分でわかる Sencha Touch
米Sencha社が、PC向けで実績のあるExt JSをベースに開発したの。
HTMLはほとんど書かず、JavaScriptでUIコンポーネントを組み立てるの。
AITC非公式キャラクターハルミン
Sencha Touchとは
3
![Page 4: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/4.jpg)
5分でわかる jQuery Mobile
特徴•豊富なコンポーネント•クロスプラットフォーム•パフォーマンスが良い•MVC,Sass/Compass•ネイティブパッケージ
4
![Page 5: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/5.jpg)
5分でわかる jQuery Mobile
豊富なコンポーネント
5
50個以上の標準コンポーネントButton, Form, DetaView, List, Icons, Toolbar, Panel, Tab, Carousel, Button Tab, Overlay, Slider, Spinner, Check, Radio, Picker, DatePicker, and more,,,
300個以上のビルトインアイコン
![Page 6: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/6.jpg)
5分でわかる jQuery Mobile
クロスプラットフォーム
6
iOS, Androidがメインだったが、最新版ではBlackBerry, IE10 ( Windows 8), FireFox (Aurora) もサポートしてるぞ
![Page 7: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/7.jpg)
5分でわかる jQuery Mobile
パフォーマンス
7
HTML5だめぽ
![Page 8: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/8.jpg)
5分でわかる jQuery Mobile
パフォーマンス
ネイティブよりも早いfastbook7
HTML5だめぽ
![Page 9: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/9.jpg)
5分でわかる jQuery Mobile
Sass/Compass
• Sass/Compassを使ったテーミングシステム
• プラットフォーム毎テーマも8
![Page 10: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/10.jpg)
5分でわかる jQuery Mobile
MVC• 堅牢なClassシステム• MVCアーキテクチャ• Data Package
9
【キャラクターパターン 2】
ダイキボ デモハタンシニクイゾ
![Page 11: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/11.jpg)
5分でわかる jQuery Mobile
コンポーネントの定義
• JavaScriptで定義• Ext.define でクラスを定義• configオプションでカスタマイズ•ブロックのように積み上げる
10
![Page 12: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/12.jpg)
5分でわかる jQuery Mobile
コード例
11
Ext.define('SampleApp.view.Main', { extend: 'Ext.navigation.View', config: { items: [{ xtype: 'panel', title: 'Hello', html: 'Hello Sencha Touch' }] }});
![Page 13: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/13.jpg)
5分でわかる jQuery Mobile
コード例
11
Ext.define('SampleApp.view.Main', { extend: 'Ext.navigation.View', config: { items: [{ xtype: 'panel', title: 'Hello', html: 'Hello Sencha Touch' }] }}); configオプション
![Page 14: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/14.jpg)
5分でわかる jQuery Mobile
表示例
12
TitleBar
Panel
Contents
![Page 15: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/15.jpg)
5分でわかる jQuery Mobile
デメリット• 重厚長大なフレームワーク• ファイルサイズがおおきい• JavaScript必須• 最初の学習コストが高い• 仕様がよく変わる
13
ちょっと難しいの
![Page 16: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/16.jpg)
5分でわかる jQuery Mobile
関連ツール• Sencha Architect• Sencha Animator• Sencha.io• Sencha market• Sencha try• Eclipse Plugin
14
![Page 17: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/17.jpg)
5分でわかる jQuery Mobile
Sencha Touch App Gallery
15
![Page 18: 5分でわかるSencha Touch](https://reader033.vdocuments.mx/reader033/viewer/2022051209/549a463fac79590e2e8b5ac4/html5/thumbnails/18.jpg)
5分でわかる jQuery Mobile
詳しくはこちらで
16
Sencha Touchパーフェクトガイドッ!!
電子書籍はこちら