Post on 30-Aug-2019
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
豊富なコンポーネント
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
コンポーネントの定義
• 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
デメリット• 重厚長大なフレームワーク• ファイルサイズがおおきい• 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パーフェクトガイドッ!!
電子書籍はこちら