7月のExt JS勉強会（東京）「Sencha Touchのはじめかた 」まとめ
7月の勉強会(東京)のまとめになります。
開発環境
→ 好きなやり方。とりあえずささっと試したいならjsdo.itがおすすめ。コードの共有もできる。デバイスに依存しない部分なら結構使える。
検証機(タッチパネルデバイス)
→ iPhone 3GS以降 or iPad が無難。Mac があるならiPhone シュミレーターが一番安定している。iPhone 3G,Android端末は微妙。
APIリファレンス
→ 発表し忘れ項目。Sencha Touchを学ぶうえで公式のAPIリファレンスはとても重要。Ext JSほど充実していないが、サンプルコードも載っているのですごく参考になります。Sencha Touchのパッケージにも入っていますが、以下のURLで見れます。もちろん英語です。
http://www.sencha.com/deploy/touch/docs/
本家フォーラム
→ Sencha はExt の頃からforumで活発な議論が交わされています。Sencha のメンバーからのリプライも早いので、バグっぽいものを見つけたらとりあえずforum内を見てみると以外とすでに質問があがっていたりします。Sencha Touchのライブラリ自体に怪しい部分がたくさんあるので、困ったら覗いてみると良いかもしれません。
http://www.sencha.com/forum/
Hello,World!
とにかく短い行数でSencha Touchアプリを書く。
HTML + JSで30行くらいかけば、とりあえずSencha Touchで動くWebアプリになっている。
XCodeのプロジェクトテンプレートのviewベースのテンプレートのようなものを目指しました。
コードはjsdo.itにあがっている Hello, World!になります。
勉強会当日のサンプルコード間違ってました。すいません。jsdo.it上も修正済みです。
Hello, World! – jsdo.it – share JavaScript, HTML5 and CSS
多くのSench TouchのHTMLは以下のようにシンプルなものになります。
・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>
この中でやることは3つ。
- Sencha TouchのCSSを読み込む
- Sencha TouchのJSを読み込む(3種類から選べるますが,ext-touch-debug.js)
- 自分のアプリケーションのJSファイル
Sencha Touchの中には3種類のライブラリがあります。ext-touch.jsが本番用の圧縮されたライブラリです。
運用環境ではこのライブラリを使うとファイル読み込みファイルが小さくなります。
ただし、難読化されているのでライブラリ中のバグが見つけにくくなります。開発中は-debugのついた2つのライブラリから選択するが無難です。
ext-touch-debug.jsとext-touch-debug-w-comments.jsはファイル名の通りコメントがあるかないかの違いがあります。コメント付きは当然ファイルが大きくなるので、ext-touch-debug.jsを選んでおくとちょうどよいかもしれません。
ではmain.jsの中を見ていきます
・javascript
Ext.setup({
onReady: function() {
var panel = new Ext.Panel({
fullscreen: true,
styleHtmlContent:true,
html:'Hello, Sencha Touch!!'
});
}
});
これだけです。なるべくよけいな物を排除しました。ポイントはExt.setup()とその引数のオブジェクトです。複雑なアプリを作る場合でも、このサンプルのような処理を必ず行います。
Ext.setup()でアプリの起動時の動作を定義します。引数にアプリの基本設定をオブジェクトの形式で渡します。(オブジェクトリテラル)
Ext.setup(
{
//オブジェクトリテラル
}
);
Ext JSおよびSencha Touchではこのオブジェクトでコンポーネントの基本設定を記述する方法をよく取ります。
引数に渡されているオブジェクトはこんな感じです。
{
onReady: function() {
//起動の処理
}
}
onReadyというプロパティに関数をセットしています。この関数がSencha Touchアプリの起動ポイントになります。複雑なアプリでも基本的にこのonReadyに設定されている部分から処理が始まっていきます。
さらに、その処理の中身をみると、以下のようになっています。
var panel = new Ext.Panel({
fullscreen: true,
styleHtmlContent:true,
html:'Hello, Sencha Touch!!'
});
panelという変数で新しいExt.Panelを作成しています。このパネルの引数にもパネルの初期設定がオブジェクトが渡されています。
ここで今回のサンプルの基本となるパネルを作成します。Sencha Touchでは様々なパネルが用意さていますが、このサンプルでは最も基本的なExt.Panelクラスのパネルを作成しています。
Ext.Panelクラスにはコンフィグオプションと呼ばれるもので作成するパネルを定義することができます。new Ext.Panel()の引数に渡されてるオブジェクトの中身が今回作成するExt.Panelのコンフィグオプション設定になります。
コンフィグオプションはクラスごとにあらかじめ定義されている、
特別なオプションのことでAPIリファレンスを見るとどのクラスがどんなコンフィグオプションを持っているかが分かります。
http://www.sencha.com/deploy/touch/docs/?class=Ext.Panel
今回のサンプルではfullscreen,styleHtmlContent,htmlの３つだけを使っています。
・fullscreen:boolean パネルのwidthとheightを可能であれば100%に設定する。初期値false。これをtrueにするとmonitorOrientationのコンフィグが強制的にtrueに設定されるそうです。
・styleHtmlContent:多分boolean(APIリファセンス間違ってる) 自動的にHTMLコンテンツ用のスタイルを適応します。初期値はfalse。これをtrueにするとSencha Touchで定義されているパネルないHTMLコンテンツ用のスタイルを設定します。パネルの内容がコンポーネント等でなくHTMLの時はtrueにしておくと良いようです。具体的には以下のCSSがパネルのHTML要素に設定されます。
-webkit-user-select: auto;
color: #333;
font-size: 0.8em;
line-height: 1.5;
padding: 1.5em;
・html:パネル内のHTMLコンテンツを設定。パネルがレンダリングされた後にこのHTMLが描画されます。
以上がHello, Worldサンプルのためのすべてのコードになります。
jsdo.it上であればHTMLファイルの方を記述する必要がないので、javascriptを10行書いて、Sencha Touchのライブラリ(jsとcss)を追加すればおしまいです。
・実行結果
Hello,Worldにツールバーを追加するサンプル
Hello, World + tbar – jsdo.it – share JavaScript, HTML5 and CSS
・HTML
同じ
・Javascript
Ext.setup({
onReady: function() {
//dockするアイテム
var tbar = new Ext.Toolbar({
dock:'top', //dockする場所,
title:'Hello, World', //Toolbarの見出し
items:[
{
text:'ボタン'
}
]
});
//Dock先
var panel = new Ext.Panel({
fullscreen: true,
styleHtmlContent:true,
dockedItems:tbar, //ここでtbarをdockedItemsに設定。
html:'Hello, Sencha Touch!!'
});
}
});
つぎにHello,Worldにツールバーを追加します。Ext JSではtbarというコンフィグオプションで設定していました。Sencha TouchではdockeItemsというコンフィグで設定します。
APIリファレンスによると
dockedItems:このパネルにドックされるコンポーネントまたはコンポーネントのまとまり(配列)
となっています。
コンポーネントであればなんでも設置できそうです。ここにExt.Toolbarオブジェクトを渡すことでiPhoneぽいUIのツールバーをパネルに追加できます。
まずExt.Toolbarを作成します。
//dockするアイテム
var tbar = new Ext.Toolbar({
dock:'top', //dockする場所,
title:'Hello, World', //Toolbarの見出し
items:[
{
text:'ボタン'
}
]
});
Ext.Toolbarにも様々なコンフィグオプションがあります。詳しくはAPIリファレンスで確認してください。ここではdock,title,itemsの3つを設定します。
http://www.sencha.com/deploy/touch/docs/?class=Ext.Toolbar
・dock：String(ドックさせる場所)。APIリファレンスに載っていませんが、親パネルのどの位置に自分を設置するかを指定します。選べる位置は4種類,top,bottom,left,rightです。
・title：String このツールバーの見出しのテキストを設定します。
・items：Object/Array このツールバーの子の要素を設定します。
今回のサンプルではExt.Toolbarのitemsにnew したクラスでなくオブジェクトを渡しています。今のところはサンプルのように書けばボタンが作れると思っておいてよいです。そのうちブログでも取り上げるかもしれません。defaultsコンフィグとxtypeでボタンを生成しています。こちらの記事を参考にしていただけるよいかもしれません。
http://extjs.blog.sus4.co.jp/2009/11/11/extjs-tutorial5/
これでExt.Toolbarがtbarという変数で作成できたので、これをパネルのdockedItemsに設定します。
//Dock先
var panel = new Ext.Panel({
fullscreen: true,
styleHtmlContent:true,
dockedItems:tbar, //ここでtbarをdockedItemsに設定。
html:'Hello, Sencha Touch!!'
});
・実行結果
ツールバーがあるだけで、iPhoneアプリっぽくなりました。
Sencha Touchアプリの基本は今回のHello, Worldになります。これを改造していくことでより複雑なアプリが作れるようになります。Sencha Touch付属のexamplesの中を眺めてみるとよいかもしれません。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
