HTML5 プログラミング生放送勉強会 第11回＠大阪 での発表資料です。

1. プログラミング生放送勉強会
第11回＠大阪
楽しいアプリ制作の会
代表 TWorks

2.  本名: 大場知悟（Tomonori Ohba）
 Twitter ID: tworks
 コミュニティー
 楽しいアプリ制作の会（代表）
 Windows Phone Arch（大阪スタッフ）
 (株)PFUでアプリ開発やってます
 WPF、Silverilght、iOS、Androidなど
 特異履歴 和菓子職人
プロ生 #11@大阪

3.  ここ丸３年はiOS/Androidネイティブアプリ開発
に専念
 HTMLは３年前に時間が停まったまま
 JavaScriptも３年前n(ry
 でもJSONは読めるよ
このセッションは、こんな人が「Sencha
Touch」を24時間前からさわりはじめた物語であ
る。（ノンフィクション）
プロ生 #11@大阪

4. 1.Sencha Touchって？
2.レイアウト
3.リスト表示
4.まとめ（感想）
プロ生 #11@大阪

5. プロ生 #11@大阪

6. JavaScriptのスマートフォンWebア
プリ開発フレームワーク
iOS/Android向けWebアプリ作成
JQuery MobileはWebページ作成
HTML5
iOS/Androi向け ＝ WebKit用
プロ生 #11@大阪

7. タッチ処理
ネイティブアプリ似のUI/UX表現
UIレイアウト
iOS向け機能
デバッグ
ストレージ（オフラインキャッシュ）
プロ生 #11@大阪

8. デモ
プロ生 #11@大阪

9. レイアウト
プロ生 #11@大阪

10. Ext.setup({
onReady: function() {
var panel = new Ext.Panel({
fullscreen: true,
});
プロ生 #11@大阪

11. Hello, Pronama!! Ext.setup({
onReady: function() {
var panel = new Ext.Panel({
fullscreen: true,
html:’Hello, Pronama!!’
});
プロ生 #11@大阪

12. Hello, Pronama!! Ext.setup({
onReady: function() {
var panel = new Ext.Panel({
fullscreen: true,
html:’Hello, Pronama!!’,
cls: 'title' //cssクラス名
});
プロ生 #11@大阪

13. Ext.setup({
onReady: function() {
var panel = new Ext.Panel({
button1 fullscreen: true,
items: [{
xtype: 'button',
ui: 'normal',
text: 'button1'
}, {
button2 xtype: 'button',
ui: 'normal',
text: 'button2'
}, {
xtype: 'button',
ui: 'normal',
button3 text: 'button3'
}]
});
プロ生 #11@大阪

14. Ext.setup({
top onReady: function() {
var panel = new Ext.Panel({
fullscreen: true,
dockedItems
items: [{
xtype: 'toolbar',
dock: 'top',
items: [{
left rigiht xtype: 'button',
ui: 'normal',
text: button2'
}]
}]
});
bottom
プロ生 #11@大阪

15. Ext.setup({
onReady: function() {
var panel = new Ext.Panel({
button1 fullscreen: true,
layout: 'vbox',
items: [{
xtype: 'button',
ui: 'normal',
text: button1'
button2 }, {
xtype: 'button',
ui: 'normal',
text: button2'
}, {
xtype: 'button',
button3 ui: 'normal',
text: button3'
},
});
プロ生 #11@大阪

16. Ext.setup({
onReady: function() {
var panel = new Ext.Panel({
fullscreen: true,
layout: 'hbox',
items: [{
xtype: 'button',
ui: 'normal',
button button button text: button1'
}, {
1 2 3
xtype: 'button',
ui: 'normal',
text: button2'
}, {
xtype: 'button',
ui: 'normal',
text: button3'
},
});
プロ生 #11@大阪

17. BOX（入れ子）モデル
layout （方向）を指定する
itemsに追加していく
プロ生 #11@大阪

18. Ext.setup({
onReady: function() {
var panel = new Ext.Panel({
button1 fullscreen: true,
items: [{
xtype: 'button',
ui: 'normal',
text: button1',
handler: function() {
window.alert('hello!');
}
}]
})
}
});
プロ生 #11@大阪

19. .htmlファイルにタグ書きません
htmlもcssもJavaScriptで書く
JavaScriptとデザイン要素が一緒に
慣れると簡単
プロ生 #11@大阪

20. iOS向け機能
プロ生 #11@大阪

21. Ext.setup({
phoneStartupScreen: "phone.png",
tabletStartupScreen: "tab.png",
onReady: function() {
var panel = new Ext.Panel({
fullscreen: true,
});
プロ生 #11@大阪

22. Ext.setup({
icon: 'appicon.png',
glossOnIcon: false,
phoneStartupScreen: "phone.png",
tabletStartupScreen: "tab.png",
onReady: function() {
var panel = new Ext.Panel({
fullscreen: true,
});
プロ生 #11@大阪

23. Ext.setup({
icon: 'appicon.png',
glossOnIcon: false,
phoneStartupScreen: "phone.png",
tabletStartupScreen: "tab.png",
onReady: function() {
var panel = new Ext.Panel({
fullscreen: true,
});
プロ生 #11@大阪

24. リスト
プロ生 #11@大阪

25.  リストの表示はどんなフレームワークでも手間
がかかる
 手法は似たり寄ったり
 Sencha Touchだとどんな感じ？
プロ生 #11@大阪

26. 1. リストに表示するもとのデータを定義
2. データストアを定義
3. リストを定義
1. どのデータストアを使うか
2. リスト1行の表示（テンプレート）を定義
4. リストがタッチされたときのイベントを定義
プロ生 #11@大阪

27. Ext.regModel(‘Pronama11', {
fields: [
{name:'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name:'email', type:'string'}
]
});
プロ生 #11@大阪

28. var store = new Ext.data.JsonStore({
model : ‘Pronama11',
sorters: [
{property: 'lastName', direction: 'ASC'},
{property: 'firstName', direction: 'ASC'}
],
getGroupString : function(record) {
return record.get('lastName')[0];
},
proxy : {
type : 'ajax',
url : ‘data/pronama11.json',
reader : {
type : 'json',
root : pronama11',
idProperty : 'email'
}
},
autoLoad : true
});
プロ生 #11@大阪

29. var list = new Ext.List({
store : store,
tpl : new Ext.XTemplate(
'<tpl for=".">',
'<div class="contact">',
'{firstName} {lastName}',
'</div>',
'</tpl>'
),
itemSelector : 'div.contact',
singleSelect : true,
grouped : true,
indexBar : true,
floating : true,
width : 320,
height : 400,
centered : true,
modal : true,
hideOnMaskTap: false,
fullscreen : true
});
プロ生 #11@大阪

30. list.on('itemtap', function(dataView, index, item, e){
data = store.getAt(index);
alert(data.get('firstName') +
' ' +
data.get('lastName'));
});
プロ生 #11@大阪

31.  HTML5の表現力を生かしたWebアプリ
 お手軽、HTML5対応ブラウザとテキストエディ
タがあれば開発可能
 お好みのテキストエディタでどうぞ
 モックを作るのに便利
 デバイス機能を使わないなら有用
 ライセンス
 無償（GPLv3）
 有償（商用利用）
プロ生 #11@大阪

32.  12/4(日)
Windows Phone Arch神戸
「Windows Phone Hackathon in Osaka」
http://atnd.org/events/21641
 12/7（水）
楽しいアプリ制作の会
「楽しいLTの会」
楽しいLTしてくれた方に粗品プレゼント企画
 12/10（土）
Windows Phone 7勉強会＠四日市市
http://atnd.org/events/21546
プロ生 #11@大阪