Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sencha Touchをさわってみた

3,144 views

Published on

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

Published in: Technology
  • Be the first to comment

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@大阪

×