AITC勉強会 第2回 資料 http://aitc.jp/events/20130713-HTML5/info_v2.html

1. 5分で分かる
2013.07.13
AITC第2回勉強会
「jQuery MobileとSencha TouchでWebアプリを作ってみよう！」
∼ 2大スマホ向けWebアプリフレームワークを使いながら比較 ∼
TAKAOKA Daisuke
Sencha Touch

2. 5分でわかる Sencha Touch
Sencha Touchとは
モバイルWebアプリフレームワーク
の一つなの。
いわゆるスマホ向けWebアプリが
簡単にできるの。
AITC非公式キャラクター
ハルミン2

3. 5分でわかる Sencha Touch
米Sencha社が、PC向けで実績のある
Ext JSをベースに開発したの。
HTMLはほとんど書かず、JavaScript
でUIコンポーネントを組み立てるの。
AITC非公式キャラクター
ハルミン
Sencha Touchとは
3

4. 5分でわかる jQuery Mobile
特徴
•豊富なコンポーネント
•クロスプラットフォーム
•パフォーマンスが良い
•MVC，Sass/Compass
•ネイティブパッケージ
4

5. 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個以上の
ビルトインアイコン

6. 5分でわかる jQuery Mobile
クロスプラットフォーム
6
iOS, Androidがメイン
だったが、最新版では
BlackBerry, IE10
( Windows 8),
FireFox (Aurora) もサ
ポートしてるぞ

7. 5分でわかる jQuery Mobile
パフォーマンス
7
HTML5だめぽ

8. 5分でわかる jQuery Mobile
パフォーマンス
ネイティブよりも早いfastbook
7
HTML5だめぽ

9. 5分でわかる jQuery Mobile
Sass/Compass
• Sass/Compassを使った
テーミングシステム
• プラットフォーム毎テーマも
8

10. 5分でわかる jQuery Mobile
MVC
• 堅牢なClassシステム
• MVCアーキテクチャ
• Data Package
9
【キャラクターパターン 2】
ダイキボ デモハタン
シニクイゾ

11. 5分でわかる jQuery Mobile
コンポーネントの定義
•JavaScriptで定義
•Ext.define でクラスを定義
•configオプションでカスタマイズ
•ブロックのように積み上げる
10

12. 5分でわかる jQuery Mobile
コード例
11
Ext.define('SampleApp.view.Main', {
extend: 'Ext.navigation.View',
config: {
items: [{
xtype: 'panel',
title: 'Hello',
html: 'Hello Sencha Touch'
}]
}
});

13. 5分でわかる jQuery Mobile
コード例
11
Ext.define('SampleApp.view.Main', {
extend: 'Ext.navigation.View',
config: {
items: [{
xtype: 'panel',
title: 'Hello',
html: 'Hello Sencha Touch'
}]
}
}); configオプション

14. 5分でわかる jQuery Mobile
表示例
12
TitleBar
Panel
Contents

15. 5分でわかる jQuery Mobile
デメリット
• 重厚長大なフレームワーク
• ファイルサイズがおおきい
• JavaScript必須
• 最初の学習コストが高い
• 仕様がよく変わる
13
ちょっと難しいの

16. 5分でわかる jQuery Mobile
関連ツール
•Sencha Architect
•Sencha Animator
•Sencha.io
•Sencha market
•Sencha try
•Eclipse Plugin
14

17. 5分でわかる jQuery Mobile
Sencha Touch App Gallery
15

18. 5分でわかる jQuery Mobile
詳しくはこちらで
16
Sencha Touch
パーフェクトガイドッ!!
電子書籍はこちら