Sencha Touchをさわってみた

3,035 views

Published on

HTML5 プログラミング生放送勉強会 第11回@大阪 での発表資料です。

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

No Downloads
Views
Total views
3,035
On SlideShare
0
From Embeds
0
Number of Embeds
467
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Sencha Touchをさわってみた

  1. 1. プログラミング生放送勉強会 第11回@大阪 楽しいアプリ制作の会 代表 TWorks
  2. 2.  本名: 大場知悟(Tomonori Ohba) Twitter ID: tworks コミュニティー  楽しいアプリ制作の会(代表)  Windows Phone Arch(大阪スタッフ) (株)PFUでアプリ開発やってます  WPF、Silverilght、iOS、Androidなど 特異履歴 和菓子職人プロ生 #11@大阪
  3. 3.  ここ丸3年はiOS/Androidネイティブアプリ開発 に専念 HTMLは3年前に時間が停まったまま JavaScriptも3年前n(ry でもJSONは読めるよこのセッションは、こんな人が「SenchaTouch」を24時間前からさわりはじめた物語である。(ノンフィクション)プロ生 #11@大阪
  4. 4. 1.Sencha Touchって?2.レイアウト3.リスト表示4.まとめ(感想)プロ生 #11@大阪
  5. 5. プロ生 #11@大阪
  6. 6. JavaScriptのスマートフォンWebア プリ開発フレームワーク iOS/Android向けWebアプリ作成 JQuery MobileはWebページ作成HTML5 iOS/Androi向け = WebKit用プロ生 #11@大阪
  7. 7. タッチ処理ネイティブアプリ似のUI/UX表現UIレイアウトiOS向け機能デバッグストレージ(オフラインキャッシュ)プロ生 #11@大阪
  8. 8. デモプロ生 #11@大阪
  9. 9. レイアウトプロ生 #11@大阪
  10. 10. Ext.setup({ onReady: function() { var panel = new Ext.Panel({ fullscreen: true, });プロ生 #11@大阪
  11. 11. Hello, Pronama!! Ext.setup({ onReady: function() { var panel = new Ext.Panel({ fullscreen: true, html:’Hello, Pronama!!’ });プロ生 #11@大阪
  12. 12. Hello, Pronama!! Ext.setup({ onReady: function() { var panel = new Ext.Panel({ fullscreen: true, html:’Hello, Pronama!!’, cls: title //cssクラス名 });プロ生 #11@大阪
  13. 13. Ext.setup({ onReady: function() { var panel = new Ext.Panel({ button1 fullscreen: true, items: [{ xtype: button, ui: normal, text: button1 }, { button2 xtype: button, ui: normal, text: button2 }, { xtype: button, ui: normal, button3 text: button3 }] });プロ生 #11@大阪
  14. 14. Ext.setup({ top onReady: function() { var panel = new Ext.Panel({ fullscreen: true, dockedItems items: [{ xtype: toolbar, dock: top, items: [{left rigiht xtype: button, ui: normal, text: button2 }] }] }); bottomプロ生 #11@大阪
  15. 15. Ext.setup({ onReady: function() { var panel = new Ext.Panel({ button1 fullscreen: true, layout: vbox, items: [{ xtype: button, ui: normal, text: button1 button2 }, { xtype: button, ui: normal, text: button2 }, { xtype: button, button3 ui: normal, text: button3 }, });プロ生 #11@大阪
  16. 16. Ext.setup({ onReady: function() { var panel = new Ext.Panel({ fullscreen: true, layout: hbox, items: [{ xtype: button, ui: normal, button button button text: button1 }, { 1 2 3 xtype: button, ui: normal, text: button2 }, { xtype: button, ui: normal, text: button3 }, });プロ生 #11@大阪
  17. 17. BOX(入れ子)モデルlayout (方向)を指定するitemsに追加していくプロ生 #11@大阪
  18. 18. Ext.setup({ onReady: function() { var panel = new Ext.Panel({ button1 fullscreen: true, items: [{ xtype: button, ui: normal, text: button1, handler: function() { window.alert(hello!); } }] }) } });プロ生 #11@大阪
  19. 19. .htmlファイルにタグ書きませんhtmlもcssもJavaScriptで書く JavaScriptとデザイン要素が一緒に慣れると簡単プロ生 #11@大阪
  20. 20. iOS向け機能プロ生 #11@大阪
  21. 21. Ext.setup({ phoneStartupScreen: "phone.png", tabletStartupScreen: "tab.png", onReady: function() { var panel = new Ext.Panel({ fullscreen: true, });プロ生 #11@大阪
  22. 22. Ext.setup({ icon: appicon.png, glossOnIcon: false, phoneStartupScreen: "phone.png", tabletStartupScreen: "tab.png", onReady: function() { var panel = new Ext.Panel({ fullscreen: true, });プロ生 #11@大阪
  23. 23. Ext.setup({ icon: appicon.png, glossOnIcon: false, phoneStartupScreen: "phone.png", tabletStartupScreen: "tab.png", onReady: function() { var panel = new Ext.Panel({ fullscreen: true, });プロ生 #11@大阪
  24. 24. リストプロ生 #11@大阪
  25. 25.  リストの表示はどんなフレームワークでも手間 がかかる 手法は似たり寄ったり Sencha Touchだとどんな感じ?プロ生 #11@大阪
  26. 26. 1. リストに表示するもとのデータを定義2. データストアを定義3. リストを定義 1. どのデータストアを使うか 2. リスト1行の表示(テンプレート)を定義4. リストがタッチされたときのイベントを定義プロ生 #11@大阪
  27. 27. Ext.regModel(‘Pronama11, { fields: [ {name:firstName, type: string}, {name: lastName, type: string}, {name:email, type:string} ]});プロ生 #11@大阪
  28. 28. var store = new Ext.data.JsonStore({ model : ‘Pronama11, sorters: [ {property: lastName, direction: ASC}, {property: firstName, direction: ASC} ], getGroupString : function(record) { return record.get(lastName)[0]; }, proxy : { type : ajax, url : ‘data/pronama11.json, reader : { type : json, root : pronama11, idProperty : email } }, autoLoad : true});プロ生 #11@大阪
  29. 29. var list = new Ext.List({ store : store, tpl : new Ext.XTemplate( <tpl for=".">, <div class="contact">, {firstName} {lastName}, </div>, </tpl> ), itemSelector : div.contact, singleSelect : true, grouped : true, indexBar : true, floating : true, width : 320, height : 400, centered : true, modal : true, hideOnMaskTap: false, fullscreen : true});プロ生 #11@大阪
  30. 30. list.on(itemtap, function(dataView, index, item, e){ data = store.getAt(index); alert(data.get(firstName) + + data.get(lastName));});プロ生 #11@大阪
  31. 31.  HTML5の表現力を生かしたWebアプリ お手軽、HTML5対応ブラウザとテキストエディ タがあれば開発可能  お好みのテキストエディタでどうぞ モックを作るのに便利  デバイス機能を使わないなら有用 ライセンス  無償(GPLv3)  有償(商用利用)プロ生 #11@大阪
  32. 32.  12/4(日) Windows Phone Arch神戸 「Windows Phone Hackathon in Osaka」 http://atnd.org/events/21641 12/7(水) 楽しいアプリ制作の会 「楽しいLTの会」 楽しいLTしてくれた方に粗品プレゼント企画 12/10(土) Windows Phone 7勉強会@四日市市 http://atnd.org/events/21546プロ生 #11@大阪

×