Your SlideShare is downloading. ×
Sencha touchのはじめかた
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Sencha touchのはじめかた

13,699
views

Published on

Sencha touchのはじめかた

Sencha touchのはじめかた


0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
13,699
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
64
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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