![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.](https://image.slidesharecdn.com/tumblrtouch-120515074530-phpapp01/85/TumblrTouch-15-320.jpg)
![2. 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.](https://image.slidesharecdn.com/tumblrtouch-120515074530-phpapp01/85/TumblrTouch-16-320.jpg)
![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.](https://image.slidesharecdn.com/tumblrtouch-120515074530-phpapp01/85/TumblrTouch-17-320.jpg)
![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.](https://image.slidesharecdn.com/tumblrtouch-120515074530-phpapp01/85/TumblrTouch-18-320.jpg)
TumblrTouch
- 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. KOJI ISHIMOTO - @t32k 突然ですが。。。 5/14(月)で退職します。 5年間駆け抜けました。 ありがとうございます！ 就職先は... 続きはWebで！ よろしくお願いします。 2 ? 2012 DMM.com Labo Co.,Ltd.
- 3. 今回作ったもの Tumblr Touch 3 ? 2012 DMM.com Labo Co.,Ltd.
- 4. 作った経纬 tumblr gear の不具合... http://tumblrgear.tumblr.com/ 4 ? 2012 DMM.com Labo Co.,Ltd.
- 5. 公式 App の選択 5 ? 2012 DMM.com Labo Co.,Ltd.
- 6. ? 2012 DMM.com Labo Co.,Ltd.
- 7. tumblr gear official tumblr Flick! Tap! 7 ? 2012 DMM.com Labo Co.,Ltd.
- 8. 最高のUXとは...（僕にとって） 8 ? 2012 DMM.com Labo Co.,Ltd.
- 9. 一枚でも多くのエロクールな画像を早く見たい 9 ? 2012 DMM.com Labo Co.,Ltd.
- 10. 狈补迟颈惫别の操作性を奥别产で Touch 10 ? 2012 DMM.com Labo Co.,Ltd.
- 11. Sencha Touchに取り組むメリット - モバイルフレームワークの調査 - jQuery Mobile 以外の選択 - UIコンポーネントの学習 11 ? 2012 DMM.com Labo Co.,Ltd.
- 12. Demo ? 2012 DMM.com Labo Co.,Ltd.
- 13. 要件定义 1. Tumblr API (Photo Posts)の使用 2. 1画面1アイテム 3. タップによる遷移 4. 自動読み込み (できませんでした...) 13 ? 2012 DMM.com Labo Co.,Ltd.
- 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. 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. 2. 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. 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. 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. 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. Sencha Touch Applicationの構造 20 ? 2012 DMM.com Labo Co.,Ltd.
- 21. Tumblr Touchの構造 21 ? 2012 DMM.com Labo Co.,Ltd.
- 22. Sencha Touch 2を触ってみた感想 - 学習コスト高いがドキュメント?サンプル豊富（英語...） - 非常に良くできている（と思う...） - 日本の開発者人口少ない（#senchajp） - Viewだけならなんとかデザイナーも... - 最悪、CSSでなんとかできる - jQuery Mobileよりも触ってて楽しい? 22 ? 2012 DMM.com Labo Co.,Ltd.
- 23. Thank You! 23 ? 2012 DMM.com Labo Co.,Ltd.