5分で分かる

2013.07.13AITC第2回勉強会

「jQuery MobileとSencha TouchでWebアプリを作ってみよう！」～ 2大スマホ向けWebアプリフレームワークを使いながら比較 ～

TAKAOKA Daisuke

Sencha Touch

5分でわかる Sencha Touch

Sencha Touchとは

モバイルWebアプリフレームワークの一つなの。

いわゆるスマホ向けWebアプリが簡単にできるの。

AITC非公式キャラクターハルミン2

5分でわかる Sencha Touch

米Sencha社が、PC向けで実績のあるExt JSをベースに開発したの。

HTMLはほとんど書かず、JavaScriptでUIコンポーネントを組み立てるの。

AITC非公式キャラクターハルミン

Sencha Touchとは

3

5分でわかる jQuery Mobile

特徴•豊富なコンポーネント•クロスプラットフォーム•パフォーマンスが良い•MVC，Sass/Compass•ネイティブパッケージ

4

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

5分でわかる jQuery Mobile

クロスプラットフォーム

6

iOS, Androidがメインだったが、最新版ではBlackBerry, IE10 ( Windows 8), FireFox (Aurora) もサポートしてるぞ

5分でわかる jQuery Mobile

パフォーマンス

7

HTML5だめぽ

5分でわかる jQuery Mobile

パフォーマンス

ネイティブよりも早いfastbook7

HTML5だめぽ

5分でわかる jQuery Mobile

Sass/Compass

• Sass/Compassを使ったテーミングシステム

• プラットフォーム毎テーマも8

5分でわかる jQuery Mobile

MVC• 堅牢なClassシステム• MVCアーキテクチャ• Data Package

9

【キャラクターパターン 2】

ダイキボ デモハタンシニクイゾ

5分でわかる jQuery Mobile

コンポーネントの定義

• JavaScriptで定義• Ext.define でクラスを定義• configオプションでカスタマイズ•ブロックのように積み上げる

10

5分でわかる jQuery Mobile

コード例

11

Ext.define('SampleApp.view.Main', { extend: 'Ext.navigation.View', config: { items: [{ xtype: 'panel', title: 'Hello', html: 'Hello Sencha Touch' }] }});

5分でわかる jQuery Mobile

コード例

11

Ext.define('SampleApp.view.Main', { extend: 'Ext.navigation.View', config: { items: [{ xtype: 'panel', title: 'Hello', html: 'Hello Sencha Touch' }] }}); configオプション

5分でわかる jQuery Mobile

表示例

12

TitleBar

Panel

Contents

5分でわかる jQuery Mobile

デメリット• 重厚長大なフレームワーク• ファイルサイズがおおきい• JavaScript必須• 最初の学習コストが高い• 仕様がよく変わる

13

ちょっと難しいの

5分でわかる jQuery Mobile

関連ツール• Sencha Architect• Sencha Animator• Sencha.io• Sencha market• Sencha try• Eclipse Plugin

14

5分でわかる jQuery Mobile

Sencha Touch App Gallery

15

5分でわかる jQuery Mobile

詳しくはこちらで

16

Sencha Touchパーフェクトガイドッ!!

電子書籍はこちら