Sencha TouchでHTML5ア   プリを作ってみる        TWorks(大場 知悟)    楽しいアプリ制作の会 代表       http://blog.tworks.jp/     http://tanoapp.twork...
自己紹介• 大場知悟(Tomonori Ohba) – HN TWorks – TwitterID @tworks• PFUという会社でSI/SEやってます – iOS/Android/WP/SL/WPF/ASP.NET/etc...• コミュ...
PR• Windows Phoneの本書きました! – はじめてのWindows Phone   プログラミング   工学社 共著 – 通称「はじフォン」 – よかったら買ってください。       わんくま同盟 大阪勉強会 #47
アジェンダ• Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え...
• Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え     ...
概要• JavaScriptのスマートフォンWebアプリ開  発フレームワーク – iOS/Android向けWebアプリ作成 – JQuery MobileはWebページ作成• 母体はPC向けのExt JS• タッチデバイスを前提としている ...
概要• ライセンス  – GNU GPL license v3または商用ライセンス• GNU GPL license v3  – ソースコードの開示義務がある• 商用ライセンス  – 99,500円/パック(パック=1開発者数)  – 永年ライ...
• Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え     ...
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を活用することで、  タッチ操作できることを自然に表現    ...
• Sencha Touchの 1.1紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え     ...
Viewの定義• コンテナ(Panel)Ext.setup({ onReady: function() { var panel = new Ext.Panel({   fullscreen: true,});               わんく...
Viewの定義• HTML                               Hello, Wankuma!!Ext.setup({ onReady: function() { var panel = new Ext.Panel({ ...
Viewの定義• cls (css class)                               Hello, Wankuma!!Ext.setup({ onReady: function() { var panel = new E...
Viewの定義• itemsExt.setup({ onReady: function() { var panel = new Ext.Panel({                                         button...
Viewの定義• dockedItemsExt.setup({                                      top onReady: function() { var panel = new Ext.Panel({...
Viewの定義• layout : vboxExt.setup({ onReady: function() { var panel = new Ext.Panel({   fullscreen: true,                   ...
Viewの定義• layout : hvoxExt.setup({ onReady: function() { var panel = new Ext.Panel({   fullscreen: true,   layout: hbox,   ...
Viewの定義• handlerExt.setup({ onReady: function() { var panel = new Ext.Panel({                button1   fullscreen: true,  ...
Viewの定義•   レイアウトはBOXモデル•   itemsに追加することで入れ子に•   入れ子のBOXの位置、方向を調整•   .htmlファイルにタグ書きません•   htmlもcssもJavaScriptで書く     – Java...
• Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え     ...
データパッケージ• Model/Store/Proxy• Model   – データスキームを定義する   – DatabaseのTableに相当Ext.regModel(Product, {       fields: [          ...
データパッケージ• Store/Proxy    – Store=Model+Proxy    – Proxy:データの実体の取得先/フォーマット             ajax/rest/sessionstoregestore: new E...
データパッケージ• products配列のイメージ       – readerにより読み込まれ格納される{ "products": [              {"name": "Some Product", "price": 9.99, ...
データパッケージ• getGroupString     – データをグルーピング(インデックス化)     – Functionで記述getGroupString : function(record) {     return record....
• Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え     ...
アプリケーションの開発手順• Demo:リストを表示するアプリケーション – どんなフレームワークでも手間がかかる – Sencha Touchでは、どのような感じになるか – コンタクトリスト(姓・名)、姓でグルーピング       わんくま...
• Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え     ...
初期設定1. Sencha Touchライブラリをダウンロード http://extjs.co.jp/products/touch/download.php2. 開発環境がセットアップ済みであることを確認   HTML5対応ブラウザで開発可3....
• Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え     ...
HTMLの作成• アプリケーションのJavaScriptファイル  /CSSファイルをリンクしたHTML<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="...
• Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリケーションJavaScriptの作成 – デバッグ/リリース切り替え...
アプリケーションJavaScriptの作成• ModelExt.regModel(‘Contact, {    fields: [       {name:firstName, type: string},       {name: lastN...
アプリケーションJavaScriptの作成• Store/Proxy/getGroupStringvar store = new Ext.data.JsonStore({    model : ‘Contact,    sorters: [  ...
アプリケーションJavaScriptの作成• myapp.js• V(List)とM(Store)の紐付けvar list = new Ext.List({    store     : contactStore,    itemTpl :<d...
アプリケーションJavaScriptの作成• myapp.js• リストをタップしたときのイベントlist.on(itemtap, function(dataView, index, item, e){         data = conta...
• Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え     ...
デバッグ/リリース切り替え• Sencha Touch.jsの差し替え<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charse...
Upcoming SlideShare
Loading in …5
×

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

4,522 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,522
On SlideShare
0
From Embeds
0
Number of Embeds
1,573
Actions
Shares
0
Downloads
12
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

  1. 1. Sencha TouchでHTML5ア プリを作ってみる TWorks(大場 知悟) 楽しいアプリ制作の会 代表 http://blog.tworks.jp/ http://tanoapp.tworks.jp/ わんくま同盟 大阪勉強会 #47
  2. 2. 自己紹介• 大場知悟(Tomonori Ohba) – HN TWorks – TwitterID @tworks• PFUという会社でSI/SEやってます – iOS/Android/WP/SL/WPF/ASP.NET/etc...• コミュニティー – 新大阪アプリ開発初級~中級者向け勉強会 楽しいアプリ制作の会 代表 – Windows Phone Arch 神戸地区スタッフ わんくま同盟 大阪勉強会 #47
  3. 3. PR• Windows Phoneの本書きました! – はじめてのWindows Phone プログラミング 工学社 共著 – 通称「はじフォン」 – よかったら買ってください。 わんくま同盟 大阪勉強会 #47
  4. 4. アジェンダ• Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
  5. 5. • Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
  6. 6. 概要• JavaScriptのスマートフォンWebアプリ開 発フレームワーク – iOS/Android向けWebアプリ作成 – JQuery MobileはWebページ作成• 母体はPC向けのExt JS• タッチデバイスを前提としている – マルチタッチもサポート• HTML5を活用 – iOS/Androi向け = WebKit用 わんくま同盟 大阪勉強会 #47
  7. 7. 概要• ライセンス – GNU GPL license v3または商用ライセンス• GNU GPL license v3 – ソースコードの開示義務がある• 商用ライセンス – 99,500円/パック(パック=1開発者数) – 永年ライセンス – ソースコードの開示義務なし わんくま同盟 大阪勉強会 #47
  8. 8. • Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
  9. 9. Viewの種類• フォーム – HTML5のフォーム わんくま同盟 大阪勉強会 #47
  10. 10. Viewの種類• ネストList – リスト&ナビゲーション わんくま同盟 大阪勉強会 #47
  11. 11. Viewの種類• カルーセル – コンテナの連続した切り替え わんくま同盟 大阪勉強会 #47
  12. 12. Viewの種類• Map – HTML5 GEO APIに対応 – GoogleMapsのEULAどうでしたっけ?(汗 わんくま同盟 大阪勉強会 #47
  13. 13. Viewの種類• Overlays – 入力・表示の補助 わんくま同盟 大阪勉強会 #47
  14. 14. Viewの種類• バッヂ表示可能なツールボタン• タッチデバイス筆頭iOS、iOSの洗練され たUserInterfaceを<del>パクリ</del>活用• タッチデバイスのUIを活用することで、 タッチ操作できることを自然に表現 わんくま同盟 大阪勉強会 #47
  15. 15. • Sencha Touchの 1.1紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
  16. 16. Viewの定義• コンテナ(Panel)Ext.setup({ onReady: function() { var panel = new Ext.Panel({ fullscreen: true,}); わんくま同盟 大阪勉強会 #47
  17. 17. Viewの定義• HTML Hello, Wankuma!!Ext.setup({ onReady: function() { var panel = new Ext.Panel({ fullscreen: true, html:’Hello, Wankuma!!’}); わんくま同盟 大阪勉強会 #47
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. Viewの定義• レイアウトはBOXモデル• itemsに追加することで入れ子に• 入れ子のBOXの位置、方向を調整• .htmlファイルにタグ書きません• htmlもcssもJavaScriptで書く – JavaScriptとデザイン要素が一緒に – これってどうなん? わんくま同盟 大阪勉強会 #47
  25. 25. • Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
  26. 26. データパッケージ• 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
  27. 27. データパッケージ• 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
  28. 28. データパッケージ• 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
  29. 29. データパッケージ• getGroupString – データをグルーピング(インデックス化) – Functionで記述getGroupString : function(record) { return record.get(name)[0]; //商品名の頭文字でグループ化 },• sorters – データの並び替え – 複合指定も可 わんくま同盟 大阪勉強会 #47
  30. 30. • Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
  31. 31. アプリケーションの開発手順• Demo:リストを表示するアプリケーション – どんなフレームワークでも手間がかかる – Sencha Touchでは、どのような感じになるか – コンタクトリスト(姓・名)、姓でグルーピング わんくま同盟 大阪勉強会 #47
  32. 32. • Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
  33. 33. 初期設定1. Sencha Touchライブラリをダウンロード http://extjs.co.jp/products/touch/download.php2. 開発環境がセットアップ済みであることを確認 HTML5対応ブラウザで開発可3. 開発用およびリリース用のWebサーバーがセッ トアップ済みであることを確認 Sencha Touchで完結するなら何でもよい4. 開発するアプリに必要なHTMLモックとCSS ファイルの作成 わんくま同盟 大阪勉強会 #47
  34. 34. • Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
  35. 35. 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
  36. 36. • Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリケーションJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
  37. 37. アプリケーションJavaScriptの作成• ModelExt.regModel(‘Contact, { fields: [ {name:firstName, type: string}, {name: lastName, type: string}, {name:email, type:string} ]}); わんくま同盟 大阪勉強会 #47
  38. 38. アプリケーション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
  39. 39. アプリケーション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
  40. 40. アプリケーションJavaScriptの作成• myapp.js• リストをタップしたときのイベントlist.on(itemtap, function(dataView, index, item, e){ data = contactStore.getAt(index); alert(data.get(firstName) + + data.get(lastName));}); わんくま同盟 大阪勉強会 #47
  41. 41. • Sencha Touch 1.1の紹介 – 概要 – Viewの種類、定義 – データパッケージ• アプリケーションの開発手順 – 初期設定 – HTMLの作成 – アプリJavaScriptの作成 – デバッグ/リリース切り替え わんくま同盟 大阪勉強会 #47
  42. 42. デバッグ/リリース切り替え• 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

×