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.

TumblrTouch

powered by Sench Touch2

  • Login to see the comments

TumblrTouch

  1. 1. Tu m bl r To u ch b y S e n c h a金沢デザイン部, 石本 光司2012.05.11 © 2012 DMM.com Labo Co.,Ltd.
  2. 2. KOJI ISHIMOTO - @t32k 突然ですが。。。 5/14(月)で退職します。 5年間駆け抜けました。 ありがとうございます! 就職先は... 続きはWebで! よろしくお願いします。2 © 2012 DMM.com Labo Co.,Ltd.
  3. 3. 今回作ったもの Tumblr Touch3 © 2012 DMM.com Labo Co.,Ltd.
  4. 4. 作った経緯 tumblr gear の不具合... http://tumblrgear.tumblr.com/4 © 2012 DMM.com Labo Co.,Ltd.
  5. 5. 公式 App の選択5 © 2012 DMM.com Labo Co.,Ltd.
  6. 6. © 2012 DMM.com Labo Co.,Ltd.
  7. 7. tumblr gear official tumblr Flick! Tap!7 © 2012 DMM.com Labo Co.,Ltd.
  8. 8. 最高のUXとは...(僕にとって)8 © 2012 DMM.com Labo Co.,Ltd.
  9. 9. 一枚でも多くのエロクールな画像を早く見たい9 © 2012 DMM.com Labo Co.,Ltd.
  10. 10. Nativeの操作性をWebで Touch10 © 2012 DMM.com Labo Co.,Ltd.
  11. 11. Sencha Touchに取り組むメリット - モバイルフレームワークの調査 - jQuery Mobile 以外の選択 - UIコンポーネントの学習11 © 2012 DMM.com Labo Co.,Ltd.
  12. 12. Demo © 2012 DMM.com Labo Co.,Ltd.
  13. 13. 要件定義 1. Tumblr API (Photo Posts)の使用 2. 1画面1アイテム 3. タップによる遷移 4. 自動読み込み (できませんでした...)13 © 2012 DMM.com Labo Co.,Ltd.
  14. 14. 1. Tumblr API -Photo Posts -   Ext.data.proxy.Ajax Same Domain proxy: { type: ajax, url : users.json } -   Ext.data.proxy.JsonP Different Domain proxy: { type: jsonp, url : http://domainB.com/users }14 © 2012 DMM.com Labo Co.,Ltd.
  15. 15. Ext.define(TumblrTouch.model.FetchData, { extend: Ext.data.Model, config: { fields: [photos], proxy: { type: ajax, url: resource/data/posts.json, reader: { type: json, rootProperty: response.posts } } } }); var ttdata = Ext.create(Ext.data.Store, { model: TumblrTouch.model.FetchData, });15 © 2012 DMM.com Labo Co.,Ltd.
  16. 16. 2. 1画面1アイテム -   Ext.Layout.Card var panel = Ext.create(Ext.Panel, { layout: card, items: [ { html: "First Item" }, { html: "Second Item" }, { html: "Third Item" } ] }); panel.setActiveItem(1);16 © 2012 DMM.com Labo Co.,Ltd.
  17. 17. Ext.define(TumblrTouch.view.CardPanel, { extend: Ext.Panel, xtype: tt_cardpanel, config: { layout: { type: card, animation: { type: slide, direction: down} }, id: cardpanel, defaults: { xtype: img,  style: background-size:contain;..., }, items: [ {src: resource/img/loading.png} ] } });17 © 2012 DMM.com Labo Co.,Ltd.
  18. 18. 3. Tapによる遷移 -   Ext.app.Controller Ext.define(MyApp.controller.Main, { extend: Ext.app.Controller, config: { refs: { nav: #mainNav} }, addLogoutButton: function() { this.getNav().add({text: Logout}); } }); Ext.create(Ext.Toolbar, { id: mainNav, items: [{ text: Button}] });18 © 2012 DMM.com Labo Co.,Ltd.
  19. 19. Ext.define(TumblrTouch.controller.Main, { extend: Ext.app.Controller, config: { refs: { go: #go }, control: { go: { tap: goPager} } }, goPager: function() { var panel = Ext.getCmp(cardpanel); var index = Number(panel.getActiveItem().id.replace(ext- image-, )) - 1; panel.animateActiveItem(index, {type: slide, direction: down}); panel.setActiveItem(index); } });19 © 2012 DMM.com Labo Co.,Ltd.
  20. 20. Sencha Touch Applicationの構造20 © 2012 DMM.com Labo Co.,Ltd.
  21. 21. Tumblr Touchの構造21 © 2012 DMM.com Labo Co.,Ltd.
  22. 22. Sencha Touch 2を触ってみた感想 - 学習コスト高いがドキュメント・サンプル豊富(英語...) - 非常に良くできている(と思う...) - 日本の開発者人口少ない(#senchajp) - Viewだけならなんとかデザイナーも... - 最悪、CSSでなんとかできる - jQuery Mobileよりも触ってて楽しい♪22 © 2012 DMM.com Labo Co.,Ltd.
  23. 23. Thank You!23 © 2012 DMM.com Labo Co.,Ltd.

×