Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,619 views

Published on

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

Published in: Technology
  • Be the first to comment

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

×