Sencha touchのはじめかた

14,335 views

Published on

Sencha touchのはじめかた

Sencha touchのはじめかた

  1. 1. Sencha Touchをはじめよう 佐竹裕行 株式会社sus4
  2. 2. sus4 Ext JSブログ ● http://extjs.blog.sus4.co.jp/ ● Ext JSチュートリアル ● Ext JS勉強会@名古屋の資料
  3. 3. Sencha Touchをはじめよう ● はじめに ● Sample 1 ● iPhoneアプリ ● Carouselサンプル ● Sencha Touch アプリ ● Sample 2 ● Sencha Touchをはじめる ● Overlaysサンプル ● 開発環境 ● Hello, World
  4. 4. iPhoneアプリ ● ネイティブ型 ● インストールするアプリ ● Objective-C、C、C++で作成 ● ハイブリッド型 ● iPhoneに特化したWebアプリ ● HTML + CSS + Javascriptで作成
  5. 5. Sencha TouchでつくるiPhoneアプリ ● HTML5をベース前提にしたWebアプリ ● Web開発の知識でiPhoneに特化したアプリを開発 ● Androidやその他のモバイルプラットフォームでも動く
  6. 6. Sencha Touchをはじめる ● ライブラリのダウンロード ● エディタ、ブラウザ、検証機 ● Hello, World!
  7. 7. sencha-touch-beta-0.91の中身 ● docsフォルダ ● getting-started.html ● examplesフォルダ ● release-notes.html ● resourcesフォルダ ● index.html ● srcフォルダ ● license.inc/license.txt ● ext-touch.js ● ext-touch-debug-w-comments.js ● ext-touch-debug.js
  8. 8. Sench Touchのダウンロード ● extjs.co.jpから ● http://extjs.co.jp/products/touch/ – 20MB位あるので注意
  9. 9. 開発環境 ● お好きなエディタ ● お好きなモバイルデバイス ● (iPhone、iPad、Androidデバイス、シュミレータでも良い) ● Javascriptコンソール ● Mobile Safari + デバッグコンソール ● Safari + デバッグコンソール ● Firefox + Firebug
  10. 10. 今すぐコード書きたい人 ● jsdo.itを使う ● Sencha Touch beta 091がサポートされています。 KAYACさんありがとう!! ● 今日使うコード – http://jsdo.it/satake.sus4
  11. 11. Hello, Wolrd! ● HTML ● index.html – Sencha Touch ライブラリの読み込み – アプリケーションのJavascriptの読み込み ● JS ● Sencha Touchのパネルを起動 ● “Hello, Worldを表示”
  12. 12. HTMLファイルの編集 ● 1. Sencha Touch CSSの読み込み ● 2. Sencha Touchの読み込み ● 3. アプリケーションjsの読み込み
  13. 13. index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>helloworld</title> <!-- 1. Sencha Touch CSSの読み込み--> <link rel="stylesheet" href="st/resources/css/ext-touch.css" type="text/css"> <!-- 2. Sencha Touch ライブラリの読み込み--> <script type="text/javascript" src="st/ext-touch-debug.js"></script> <!-- 3. Sencha Touch アプリケーションの読み込み--> <script type="text/javascript" src="main.js"></script> </head> <body></body> </html>
  14. 14. Javascriptの編集 ● ExtJSの書き方 ● オブジェクトリテラル ● Ext.setUp()メソッド ● Ext.Panelクラス ● APIリファレンスの使い方 ● 本家フォーラムの使い方
  15. 15. main.js Ext.setup({ onReady: function() { var panel = new Ext.Panel({ fullscreen: true, styleHtmlContent:{ 'padding':'20px' }, html:'Hello, Sencha Touch!!' }); } });
  16. 16. Hello, World
  17. 17. dockedItem ● パネルにツールバーを設定する場合に使う ● dockできる場所は4つ ● top ● bottom ● left ● Right ● dock先とdockアイテム ● dockアイテムはExt.Toolbarなど ● dock先のdockedItemコンフィグにオブジェクトまたは配列でアイテムを設定
  18. 18. Hello, World!にTbarを設置 ● 見づらいので外部エディタ表示 ● Ext.Toolbarを作成 ● Ext.PanelのdockedItemsコンフィグに設定
  19. 19. Hello, World + tbar
  20. 20. Sample 1:Carouselサンプル ● Examples付属のCarouselサンプル ● example/carousel ● sus4 Ext Jsブログの記事 ● http://bit.ly/bkkscZ ● Ext.Carouselクラス ● レイアウト
  21. 21. Ext.setup()のコンフィグ ● Fullscreen : フルスクリーン設定 ● glossOnIcon : アイコンのグロスのエ フェクト ● TabletStartupScreen : iPad用起動画像 ● StatusBarStyle : のステータスバーのス phoneStartupScreen : iPhone起動画像 タイル ● ● Icon : 汎用アイコン画像へのパス ● PreloadImages : プリロードする画像 ● TabletIcon : 汎用タブレット用アイコン ● onReady : 起動ポイント 画像 ● scope : スコープの設定 ● PhoneIcon : 汎用スマートフォン用アイ コン画像
  22. 22. Ext.Carouselクラス ● itemsに子となる複数のパネルを持つ ● フリックでパネルを切り替え ● 水平方向 / 垂直方向に配置できる
  23. 23. レイアウト ● Sencha Touchにもレイアウトがある。 ● auto (初期値) ● card (Ext.Carouselクラスは内部的にcard使っている) ● ft ● hbox ● vbox
  24. 24. vboxレイアウト ● Ext.layout.VBoxLayoutで定義 ● 縦方向にパネル等並べるレイアウト ● 横方向に自動伸縮 ● 子となるパネルにfexの値を設定して、そのパ ネルの比率を変更できる
  25. 25. fexオプション ● Aに対してBは0.5倍 A:1 ● Aに対してCは1.5倍 B:0.5 C:1.5
  26. 26. おわり
  27. 27. sus4 Ext JSブログ ● http://extjs.blog.sus4.co.jp/ ● Ext JSチュートリアル ● Ext JS勉強会@名古屋の資料

×