TumblrTouch

© 2012 DMM.com Labo Co.,Ltd.

Tumblr Touch by Sencha

金沢デザイン部, 石本光司2012.05.11


KOJI ISHIMOTO - @t32k

突然ですが。。。

5/14(月)で退職します。

5年間駆け抜けました。

ありがとうございます！

就職先は... 続きはWebで！

よろしくお願いします。

2


今回作ったもの

3

Tumblr Touch


作った経緯

4

tumblr gear の不具合...http://tumblrgear.tumblr.com/

http://tumblrgear.tumblr.com/

http://tumblrgear.tumblr.com/


公式 App の選択

5


© 2012 DMM.com Labo Co.,Ltd.7

tumblr gear official tumblr

Tap!

Flick!


最高のUXとは...（僕にとって）

8


一枚でも多くのエロクールな画像を早く見たい

9


TouchNativeの操作性をWebで


Sencha Touchに取り組むメリット

11

- モバイルフレームワークの調査

- jQuery Mobile 以外の選択

- UIコンポーネントの学習


Demo


要件定義

13

1. Tumblr API (Photo Posts)の使用

2. 1画面1アイテム

3. タップによる遷移

4. 自動読み込み (できませんでした...)


1. Tumblr API -Photo Posts

- 　　Ext.data.proxy.Ajax

- 　　Ext.data.proxy.JsonP

14

proxy: { type: 'jsonp', url : 'http://domainB.com/users'}

proxy: { type: 'ajax', url : 'users.json'}

Same Domain

Different Domain


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


2. 1画面１アイテム

- 　　Ext.Layout.Card

16

var panel = Ext.create('Ext.Panel',{ layout: 'card', items: [ { html: "First Item" }, { html: "Second Item" }, { html: "Third Item" } ]});

panel.setActiveItem(1);

http://docs.sencha.com/touch/2-0/#!/api/Ext-method-create


http://docs.sencha.com/touch/2-0/#!/api/Ext.Panel

http://docs.sencha.com/touch/2-0/#!/api/Ext.Panel

http://docs.sencha.com/touch/2-0/#!/api/Ext.Container-method-setActiveItem

http://docs.sencha.com/touch/2-0/#!/api/Ext.Container-method-setActiveItem


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


3. Tapによる遷移

- 　　Ext.app.Controller

18

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'}]});

http://docs.sencha.com/touch/2-0/#!/api/Ext-method-define

http://docs.sencha.com/touch/2-0/#!/api/Ext-method-define

http://docs.sencha.com/touch/2-0/#!/api/Ext.app.Controller

http://docs.sencha.com/touch/2-0/#!/api/Ext.app.Controller



http://docs.sencha.com/touch/2-0/#!/api/Ext.Toolbar

http://docs.sencha.com/touch/2-0/#!/api/Ext.Toolbar


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


Sencha Touch Applicationの構造

20


Tumblr Touchの構造

21


Sencha Touch 2を触ってみた感想

- 学習コスト高いがドキュメント・サンプル豊富（英語...）

- 非常に良くできている（と思う...）

- 日本の開発者人口少ない（#senchajp）

- Viewだけならなんとかデザイナーも...

- 最悪、CSSでなんとかできる

- jQuery Mobileよりも触ってて楽しい♪

22


Thank You!

Design

TumblrTouch