powered by Sench Touch2

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. Nativeの操作性をWebで
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.