Tu m bl r To u ch b y S e n c h a金沢デザイン部, 石本 光司2012.05.11                          © 2012 DMM.com Labo Co.,Ltd.
KOJI ISHIMOTO - @t32k    突然ですが。。。    5/14(月)で退職します。    5年間駆け抜けました。    ありがとうございます!    就職先は... 続きはWebで!    よろしくお願いします。2     ...
今回作ったもの          Tumblr Touch3                  © 2012 DMM.com Labo Co.,Ltd.
作った経緯        tumblr gear の不具合...        http://tumblrgear.tumblr.com/4                                       © 2012 DMM.co...
公式 App の選択5                © 2012 DMM.com Labo Co.,Ltd.
© 2012 DMM.com Labo Co.,Ltd.
tumblr gear   official tumblr                                          Flick!         Tap!7                          © 201...
最高のUXとは...(僕にとって)8                       © 2012 DMM.com Labo Co.,Ltd.
一枚でも多くのエロクールな画像を早く見たい9                    © 2012 DMM.com Labo Co.,Ltd.
Nativeの操作性をWebで                 Touch10                       © 2012 DMM.com Labo Co.,Ltd.
Sencha Touchに取り組むメリット     - モバイルフレームワークの調査     - jQuery Mobile 以外の選択     - UIコンポーネントの学習11                           © 2012...
Demo       © 2012 DMM.com Labo Co.,Ltd.
要件定義     1. Tumblr API (Photo Posts)の使用     2. 1画面1アイテム     3. タップによる遷移     4. 自動読み込み (できませんでした...)13                     ...
1. Tumblr API -Photo Posts     -   Ext.data.proxy.Ajax    Same Domain           proxy: {               type: ajax,        ...
Ext.define(TumblrTouch.model.FetchData,	 { 	  extend:	 Ext.data.Model, 	  config:	 { 	  	  fields:	 [photos], 	  	  proxy:...
2. 1画面1アイテム     -   Ext.Layout.Card           var panel = Ext.create(Ext.Panel,           {               layout: card,   ...
Ext.define(TumblrTouch.view.CardPanel,	 { 	 	 	 	 extend:	 Ext.Panel, 	 	 	 	 xtype:	 tt_cardpanel, 	  	 	 	 	 config:	 { ...
3. Tapによる遷移     -   Ext.app.Controller           Ext.define(MyApp.controller.Main, {               extend: Ext.app.Control...
Ext.define(TumblrTouch.controller.Main,	 { 	 	 	 	 extend:	 Ext.app.Controller, 	 	 	 	 config:	 { 	 	 	 	 	 	 	 	 refs:	 ...
Sencha Touch Applicationの構造20                             © 2012 DMM.com Labo Co.,Ltd.
Tumblr Touchの構造21                 © 2012 DMM.com Labo Co.,Ltd.
Sencha Touch 2を触ってみた感想     - 学習コスト高いがドキュメント・サンプル豊富(英語...)     - 非常に良くできている(と思う...)     - 日本の開発者人口少ない(#senchajp)     - View...
Thank You!23                © 2012 DMM.com Labo Co.,Ltd.
Upcoming SlideShare
Loading in …5
×

TumblrTouch

2,249 views
2,183 views

Published on

powered by Sench Touch2

Published in: Design, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,249
On SlideShare
0
From Embeds
0
Number of Embeds
1,177
Actions
Shares
0
Downloads
1
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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.

×