5分でわかるSencha Touch

3,634 views

Published on

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

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,634
On SlideShare
0
From Embeds
0
Number of Embeds
1,031
Actions
Shares
0
Downloads
10
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

5分でわかるSencha Touch

  1. 1. 5分で分かる 2013.07.13 AITC第2回勉強会 「jQuery MobileとSencha TouchでWebアプリを作ってみよう!」 ∼ 2大スマホ向けWebアプリフレームワークを使いながら比較 ∼ TAKAOKA Daisuke Sencha Touch
  2. 2. 5分でわかる Sencha Touch Sencha Touchとは モバイルWebアプリフレームワーク の一つなの。 いわゆるスマホ向けWebアプリが 簡単にできるの。 AITC非公式キャラクター ハルミン2
  3. 3. 5分でわかる Sencha Touch 米Sencha社が、PC向けで実績のある Ext JSをベースに開発したの。 HTMLはほとんど書かず、JavaScript でUIコンポーネントを組み立てるの。 AITC非公式キャラクター ハルミン Sencha Touchとは 3
  4. 4. 5分でわかる jQuery Mobile 特徴 •豊富なコンポーネント •クロスプラットフォーム •パフォーマンスが良い •MVC,Sass/Compass •ネイティブパッケージ 4
  5. 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. 6. 5分でわかる jQuery Mobile クロスプラットフォーム 6 iOS, Androidがメイン だったが、最新版では BlackBerry, IE10 ( Windows 8), FireFox (Aurora) もサ ポートしてるぞ
  7. 7. 5分でわかる jQuery Mobile パフォーマンス 7 HTML5だめぽ
  8. 8. 5分でわかる jQuery Mobile パフォーマンス ネイティブよりも早いfastbook 7 HTML5だめぽ
  9. 9. 5分でわかる jQuery Mobile Sass/Compass • Sass/Compassを使った テーミングシステム • プラットフォーム毎テーマも 8
  10. 10. 5分でわかる jQuery Mobile MVC • 堅牢なClassシステム • MVCアーキテクチャ • Data Package 9 【キャラクターパターン 2】 ダイキボ デモハタン シニクイゾ
  11. 11. 5分でわかる jQuery Mobile コンポーネントの定義 •JavaScriptで定義 •Ext.define でクラスを定義 •configオプションでカスタマイズ •ブロックのように積み上げる 10
  12. 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. 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. 14. 5分でわかる jQuery Mobile 表示例 12 TitleBar Panel Contents
  15. 15. 5分でわかる jQuery Mobile デメリット • 重厚長大なフレームワーク • ファイルサイズがおおきい • JavaScript必須 • 最初の学習コストが高い • 仕様がよく変わる 13 ちょっと難しいの
  16. 16. 5分でわかる jQuery Mobile 関連ツール •Sencha Architect •Sencha Animator •Sencha.io •Sencha market •Sencha try •Eclipse Plugin 14
  17. 17. 5分でわかる jQuery Mobile Sencha Touch App Gallery 15
  18. 18. 5分でわかる jQuery Mobile 詳しくはこちらで 16 Sencha Touch パーフェクトガイドッ!! 電子書籍はこちら

×