Sencha TouchでHTML5アプリを作ってみる

Sencha TouchでHTML5ア
プリを作ってみる

TWorks(大場知悟)
楽しいアプリ制作の会代表
http://blog.tworks.jp/
http://tanoapp.tworks.jp/

わんくま同盟大阪勉強会 #47

自己紹介

• 大場知悟（Tomonori Ohba）
– HN TWorks
– TwitterID @tworks
• PFUという会社でSI/SEやってます
– iOS/Android/WP/SL/WPF/ASP.NET/etc...
• コミュニティー
– 新大阪アプリ開発初級～中級者向け勉強会
楽しいアプリ制作の会代表
– Windows Phone Arch
神戸地区スタッフ

PR

• Windows Phoneの本書きました！
– はじめてのWindows Phone
プログラミング
工学社共著
– 通称「はじフォン」
– よかったら買ってください。


アジェンダ

• Sencha Touch 1.1の紹介
– 概要
– Viewの種類、定義
– データパッケージ
• アプリケーションの開発手順
– 初期設定
– HTMLの作成
– アプリJavaScriptの作成
– デバッグ/リリース切り替え


– 概要
– 初期設定
– HTMLの作成


概要
• JavaScriptのスマートフォンWebアプリ開
発フレームワーク
– iOS/Android向けWebアプリ作成
– JQuery MobileはWebページ作成
• 母体はPC向けのExt JS
• タッチデバイスを前提としている
– マルチタッチもサポート
• HTML5を活用
– iOS/Androi向け＝ WebKit用


概要
• ライセンス
– GNU GPL license v3または商用ライセンス
• GNU GPL license v3
– ソースコードの開示義務がある
• 商用ライセンス
– 99,500円/パック（パック＝１開発者数）
– 永年ライセンス
– ソースコードの開示義務なし


Viewの種類
• フォーム
– HTML5のフォーム


Viewの種類
• ネストList
– リスト＆ナビゲーション


Viewの種類
• カルーセル
– コンテナの連続した切り替え


Viewの種類
• Map
– HTML5 GEO APIに対応
– GoogleMapsのEULAどうでしたっけ？（汗


Viewの種類
• Overlays
– 入力・表示の補助


Viewの種類
• バッヂ表示可能なツールボタン

• タッチデバイス筆頭iOS、iOSの洗練され
たUserInterfaceを<del>パクリ</del>活用
• タッチデバイスのUIを活用することで、
タッチ操作できることを自然に表現


• Sencha Touchの 1.1紹介
– 概要
– 初期設定
– HTMLの作成


Viewの定義
• コンテナ（Panel）
Ext.setup({
onReady: function() {
var panel = new Ext.Panel({
fullscreen: true,
});


Viewの定義
• HTML
Hello, Wankuma!!
Ext.setup({
fullscreen: true,
html:’Hello, Wankuma!!’
});


Viewの定義
• cls (css class)
Hello, Wankuma!!
Ext.setup({
fullscreen: true,
html:’Hello, Pronama!!’,
cls: 'title' //cssクラス名
});

– CSS定義が別途必要


Viewの定義
• items
Ext.setup({
button1
fullscreen: true,
items: [{
xtype: 'button',
ui: 'normal',
text: 'button1'
}, { button2
xtype: 'button',
ui: 'normal',
text: 'button2'
}, {
xtype: 'button',
ui: 'normal', button3
text: 'button3'
}]
});


Viewの定義
• dockedItems
Ext.setup({ top
fullscreen: true,
dockedItems
items: [{
xtype: 'toolbar',
left rigiht
dock: 'top',
items: [{
xtype: 'button',
ui: 'normal',
text: button2'
}]
}] bottom
});


Viewの定義
• layout : vbox
Ext.setup({
fullscreen: true, button1
layout: 'vbox',
items: [{
xtype: 'button',
ui: 'normal',
text: button1'
}, { button2
xtype: 'button',
ui: 'normal',
text: button2'
}, {
xtype: 'button',
ui: 'normal', button3
text: button3'
},
});


Viewの定義
• layout : hvox
Ext.setup({
fullscreen: true,
layout: 'hbox',
items: [{
xtype: 'button',
ui: 'normal',
text: button1' button button button
}, { 1 2 3
xtype: 'button',
ui: 'normal',
text: button2'
}, {
xtype: 'button',
ui: 'normal',
text: button3'
},
});


Viewの定義
• handler
Ext.setup({
var panel = new Ext.Panel({ button1
fullscreen: true,
items: [{
xtype: 'button',
ui: 'normal',
text: button1',
handler: function() {
window.alert('hello!');
}
}]
})
}
});


Viewの定義
• レイアウトはBOXモデル
• itemsに追加することで入れ子に
• 入れ子のBOXの位置、方向を調整
• .htmlファイルにタグ書きません
• htmlもcssもJavaScriptで書く
– JavaScriptとデザイン要素が一緒に
– これってどうなん？


データパッケージ
• Model/Store/Proxy
• Model
– データスキームを定義する
– DatabaseのTableに相当
Ext.regModel('Product', {
fields: [
{name: 'name', type: 'string'},
{name: 'description', type: 'string'},
{name: 'price', type: 'float'},
{name: 'image_url', type: 'string'},
{name: 'in_stock', type: 'boolean'}
]
});


• Store/Proxy
– Store＝Model＋Proxy
– Proxy：データの実体の取得先/フォーマット
ajax/rest/sessionstorege
store: new Ext.data.Store({
model: 'Product',
proxy: {
type: 'ajax', url : '/products.json', // products.xml
reader: {
type: 'json', // xml
root: 'products'
}
}
}),


• products配列のイメージ
– readerにより読み込まれ格納される
{ "products": [
{"name": "Some Product", "price": 9.99, "image_url": "product1.jpg", "in_stock": true},
{"name": "Another Product", "price": 7.50, "image_url": "product2.jpg", "in_stock": true},
{"name": "A third product", "price": 2.35, "image_url": "product3.jpg", "in_stock": false},
...
]}

• sessionstorage / localstorage
– WebStorageに永続化されるデータ
var Cart = new Ext.data.Store({
model: 'Product',
proxy: {
type: 'sessionstorage', // or localstorage
id : 'shoppingCart'
}
}
);


• getGroupString
– データをグルーピング（インデックス化）
– Functionで記述
getGroupString : function(record) {
return record.get('name')[0]; //商品名の頭文字でグループ化
},

• sorters
– データの並び替え
– 複合指定も可


アプリケーションの開発手順
• Demo：リストを表示するアプリケーション
– どんなフレームワークでも手間がかかる
– Sencha Touchでは、どのような感じになるか
– コンタクトリスト（姓・名）、姓でグルーピング


初期設定
1. Sencha Touchライブラリをダウンロード
http://extjs.co.jp/products/touch/download.php
2. 開発環境がセットアップ済みであることを確認
HTML5対応ブラウザで開発可
3. 開発用およびリリース用のWebサーバーがセッ
トアップ済みであることを確認
Sencha Touchで完結するなら何でもよい
4. 開発するアプリに必要なHTMLモックとCSS
ファイルの作成


HTMLの作成
• アプリケーションのJavaScriptファイル
/CSSファイルをリンクしたHTML
<!DOCTYPE html> <html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ListSample</title >

</body>
</html>

– 概要
– 初期設定
– HTMLの作成
– アプリケーションJavaScriptの作成


アプリケーションJavaScriptの作成
• Model
Ext.regModel(‘Contact', {
fields: [
{name:'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name:'email', type:'string'}
]
});


• Store/Proxy/getGroupString
var store = new Ext.data.JsonStore({
model : ‘Contact',
sorters: [
{property: 'lastName', direction: 'ASC'},
{property: 'firstName', direction: 'ASC'}
],
getGroupString : function(record) {
return record.get('lastName')[0];
},
proxy : {
type : 'ajax',
url : ‘data/contacts.json',
reader : {
type : 'json',
root : contacts',
idProperty : 'email' // データの一意性を保証するプロパティー
}
},
autoLoad : true
});


• myapp.js
• V（List）とM（Store）の紐付け
var list = new Ext.List({
store : contactStore,
itemTpl :'<div class="contact">
{firstName} {lastName}
</div>',
itemSelector : 'div.contact',
singleSelect : true,
grouped : true,
indexBar : true,
...
});


• myapp.js
• リストをタップしたときのイベント
list.on('itemtap', function(dataView, index, item, e){
data = contactStore.getAt(index);
alert(data.get('firstName') +
''+
data.get('lastName'));
});


デバッグ/リリース切り替え
• Sencha Touch.jsの差し替え
<!DOCTYPE html> <html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ListSample</title >
<!-- Ext Touch CSS -- >
<link rel="stylesheet" href="../../resources/css/sencha-touch.css" type="text/css">
<!-- アプリケーションCSS -- >
<link rel="stylesheet" href="css/myapp.css" type="text/css">
<!-- Ext Touch JS -- >
<script type="text/javascript" src="../../sencha-touch.js"> </script>
<!-- アプリケーション JS -- >
<script type="text/javascript" src="src/myapp.js"> </script>
</head>
<body>
</body>
</html>

Sencha TouchでHTML5アプリを作ってみる

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Sencha TouchでHTML5アプリを作ってみる

Semelhante a Sencha TouchでHTML5アプリを作ってみる (20)

Mais de Tomonori Ohba

Mais de Tomonori Ohba (10)

Sencha TouchでHTML5アプリを作ってみる