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のはじめかた

14,439 views

Published on

Sencha touchのはじめかた

  • Be the first to comment

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勉強会@名古屋の資料

×