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