Sencha TouchでHTML5アプリを作ってみる
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 4,070 views

わんくま大阪 #47セッション資料

わんくま大阪 #47セッション資料

Statistics

Views

Total Views
4,070
Views on SlideShare
2,910
Embed Views
1,160

Actions

Likes
3
Downloads
10
Comments
0

5 Embeds 1,160

http://blog.tworks.jp 1141
http://bonpworks.tumblr.com 15
http://webcache.googleusercontent.com 2
http://safe.tumblr.com 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 神戸地区スタッフ わんくま同盟 大阪勉強会 #47
    • PR• Windows Phoneの本書きました! – はじめてのWindows Phone プログラミング 工学社 共著 – 通称「はじフォン」 – よかったら買ってください。 わんくま同盟 大阪勉強会 #47
    • アジェンダ• Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
    • • Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
    • 概要• JavaScriptのスマートフォンWebアプリ開 発フレームワーク – iOS/Android向けWebアプリ作成 – JQuery MobileはWebページ作成• 母体はPC向けのExt JS• タッチデバイスを前提としている – マルチタッチもサポート• HTML5を活用 – iOS/Androi向け = WebKit用 わんくま同盟 大阪勉強会 #47
    • 概要• ライセンス – GNU GPL license v3または商用ライセンス• GNU GPL license v3 – ソースコードの開示義務がある• 商用ライセンス – 99,500円/パック(パック=1開発者数) – 永年ライセンス – ソースコードの開示義務なし わんくま同盟 大阪勉強会 #47
    • • Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
    • Viewの種類• フォーム – HTML5のフォーム わんくま同盟 大阪勉強会 #47
    • Viewの種類• ネストList – リスト&ナビゲーション わんくま同盟 大阪勉強会 #47
    • Viewの種類• カルーセル – コンテナの連続した切り替え わんくま同盟 大阪勉強会 #47
    • Viewの種類• Map – HTML5 GEO APIに対応 – GoogleMapsのEULAどうでしたっけ?(汗 わんくま同盟 大阪勉強会 #47
    • Viewの種類• Overlays – 入力・表示の補助 わんくま同盟 大阪勉強会 #47
    • Viewの種類• バッヂ表示可能なツールボタン• タッチデバイス筆頭iOS、iOSの洗練され たUserInterfaceを<del>パクリ</del>活用• タッチデバイスのUIを活用することで、 タッチ操作できることを自然に表現 わんくま同盟 大阪勉強会 #47
    • • Sencha Touchの 1.1紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
    • Viewの定義• コンテナ(Panel)Ext.setup({ onReady: function() { var panel = new Ext.Panel({ fullscreen: true,}); わんくま同盟 大阪勉強会 #47
    • Viewの定義• HTML Hello, Wankuma!!Ext.setup({ onReady: function() { var panel = new Ext.Panel({ fullscreen: true, html:’Hello, Wankuma!!’}); わんくま同盟 大阪勉強会 #47
    • Viewの定義• cls (css class) Hello, Wankuma!!Ext.setup({ onReady: function() { var panel = new Ext.Panel({ fullscreen: true, html:’Hello, Pronama!!’, cls: title //cssクラス名});– CSS定義が別途必要 わんくま同盟 大阪勉強会 #47
    • Viewの定義• itemsExt.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 }]}); わんくま同盟 大阪勉強会 #47
    • Viewの定義• dockedItemsExt.setup({ top onReady: function() { var panel = new Ext.Panel({ fullscreen: true, dockedItems items: [{ xtype: toolbar, left rigiht dock: top, items: [{ xtype: button, ui: normal, text: button2 }] }] bottom}); わんくま同盟 大阪勉強会 #47
    • Viewの定義• layout : vboxExt.setup({ onReady: function() { var panel = new Ext.Panel({ 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 },}); わんくま同盟 大阪勉強会 #47
    • Viewの定義• layout : hvoxExt.setup({ onReady: function() { var panel = new Ext.Panel({ 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 },}); わんくま同盟 大阪勉強会 #47
    • Viewの定義• handlerExt.setup({ onReady: function() { var panel = new Ext.Panel({ button1 fullscreen: true, items: [{ xtype: button, ui: normal, text: button1, handler: function() { window.alert(hello!); } }]})}}); わんくま同盟 大阪勉強会 #47
    • Viewの定義• レイアウトはBOXモデル• itemsに追加することで入れ子に• 入れ子のBOXの位置、方向を調整• .htmlファイルにタグ書きません• htmlもcssもJavaScriptで書く – JavaScriptとデザイン要素が一緒に – これってどうなん? わんくま同盟 大阪勉強会 #47
    • • Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
    • データパッケージ• 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} ]}); わんくま同盟 大阪勉強会 #47
    • データパッケージ• Store/Proxy – Store=Model+Proxy – Proxy:データの実体の取得先/フォーマット ajax/rest/sessionstoregestore: new Ext.data.Store({ model: Product, proxy: { type: ajax, url : /products.json, // products.xml reader: { type: json, // xml root: products } }}), わんくま同盟 大阪勉強会 #47
    • データパッケージ• 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 } }); わんくま同盟 大阪勉強会 #47
    • データパッケージ• getGroupString – データをグルーピング(インデックス化) – Functionで記述getGroupString : function(record) { return record.get(name)[0]; //商品名の頭文字でグループ化 },• sorters – データの並び替え – 複合指定も可 わんくま同盟 大阪勉強会 #47
    • • Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
    • アプリケーションの開発手順• Demo:リストを表示するアプリケーション – どんなフレームワークでも手間がかかる – Sencha Touchでは、どのような感じになるか – コンタクトリスト(姓・名)、姓でグルーピング わんくま同盟 大阪勉強会 #47
    • • Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
    • 初期設定1. Sencha Touchライブラリをダウンロード http://extjs.co.jp/products/touch/download.php2. 開発環境がセットアップ済みであることを確認 HTML5対応ブラウザで開発可3. 開発用およびリリース用のWebサーバーがセッ トアップ済みであることを確認 Sencha Touchで完結するなら何でもよい4. 開発するアプリに必要なHTMLモックとCSS ファイルの作成 わんくま同盟 大阪勉強会 #47
    • • Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
    • HTMLの作成• アプリケーションのJavaScriptファイル /CSSファイルをリンクしたHTML<!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-debug.js"> </script> <!-- アプリケーション JS -- > <script type="text/javascript" src="src/myapp.js"> </script></head> <body> <!-- body部には何も書かないこと、sencha touchが生成する --> </body></html> わんくま同盟 大阪勉強会 #47
    • • Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリケーションJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
    • アプリケーションJavaScriptの作成• ModelExt.regModel(‘Contact, { fields: [ {name:firstName, type: string}, {name: lastName, type: string}, {name:email, type:string} ]}); わんくま同盟 大阪勉強会 #47
    • アプリケーションJavaScriptの作成• Store/Proxy/getGroupStringvar 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}); わんくま同盟 大阪勉強会 #47
    • アプリケーションJavaScriptの作成• 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,...}); わんくま同盟 大阪勉強会 #47
    • アプリケーションJavaScriptの作成• myapp.js• リストをタップしたときのイベントlist.on(itemtap, function(dataView, index, item, e){ data = contactStore.getAt(index); alert(data.get(firstName) + + data.get(lastName));}); わんくま同盟 大阪勉強会 #47
    • • Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
    • デバッグ/リリース切り替え• 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> わんくま同盟 大阪勉強会 #47