ExtJSで楽しくRIA業務アプリ開発 » 未分類

7月のExt JS勉強会（東京）「Sencha Touchのはじめかた　」まとめ

佐竹裕行 — Thu, 29 Jul 2010 11:52:18 +0000

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


 
 
 
 helloworld

この中でやることは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の中を眺めてみるとよいかもしれません。

Twitter Updates for 2010-07-29

野村亮之 — Thu, 29 Jul 2010 06:14:00 +0000

UStream中継10分ぐらい前から始まりました (#extjapan live at http://ustre.am/gab3 ) #
配信レート若干下げました。皆さん調子よさそうでしょうか？ (#extjapan live at http://ustre.am/gab3 ) #
@shirotorabyakko http://extjs.blog.sus4.co.jp/　でいろいろ公開しています in reply to shirotorabyakko #
これはいいな　Yubizo Engine (#extjapan live at http://ustre.am/gab3 ) #

Sencha Touch 入門:Sencha Touchのはじめかた（Ext JS & Sencha Touch勉強会7月＠東京）のサンプルコード

佐竹裕行 — Tue, 27 Jul 2010 12:27:19 +0000

2010/7/25のExt JS & Sencha Touch勉強会7月＠東京でのsus4　佐竹の担当箇所のSencha Touch入門篇で使うサンプルコードをjsdo.itで公開しました。
明日の勉強会では、PCのブラウザでも動作するサンプルばかりですので、jsdo.it上でも動作を確認できます。
また簡単なサンプルばかりですので、forkしていただいて実際に手を動かしてももらうとより理解が深まると思います。
勉強会では持ち時間的に２,３つしか紹介できないと思います。
勉強会のアジェンダはこちらです。

Sencha Touch 入門: Ext JS & Sencha Touch勉強会7月＠東京(2010/7/25 )のアジェンダ

Sencha Touchのはじめかたサンプルコード

Sencha Hello, World!
Hello, World! – jsdo.it – share JavaScript, HTML5 and CSS

Sencha Hello, World! + tbar

Hello, World + tbar – jsdo.it – share JavaScript, HTML5 and CSS

Sencha Touch Complex Docked Items
Sencha Touch Complex Docked Items – jsdo.it – share JavaScript, HTML5 and CSS

Sencha Carousel (Edit)

Sencha Carousel (Edit) – jsdo.it – share JavaScript, HTML5 and CSS

Twitter Weekly Updates for 2010-07-18

野村亮之 — Sun, 18 Jul 2010 06:14:00 +0000

ちょっと宣伝です。うちの森中がやります。インタネット動画マーケティングセミナー from 名古屋 to 熊本。本日20時15分頃開始予定。USTのチャンネルはこちらです。→ http://www.ustream.tv/channel/dougana #

Twitter Updates for 2010-07-17

野村亮之 — Sat, 17 Jul 2010 06:14:00 +0000

ちょっと宣伝です。うちの森中がやります。インタネット動画マーケティングセミナー from 名古屋 to 熊本。本日20時15分頃開始予定。USTのチャンネルはこちらです。→ http://www.ustream.tv/channel/dougana #

Twitter Weekly Updates for 2010-07-04

野村亮之 — Sun, 04 Jul 2010 06:14:00 +0000

ExtJSブログをセグメント中。Senchaを気にしてくる人は、やっぱ営業時間外なんですね。仕事というよりは、まだ実験的要素が強そうですね。http://extjs.blog.sus4.co.jp/ #

Twitter Updates for 2010-07-01

野村亮之 — Thu, 01 Jul 2010 06:14:00 +0000

ExtJSブログをセグメント中。Senchaを気にしてくる人は、やっぱ営業時間外なんですね。仕事というよりは、まだ実験的要素が強そうですね。http://extjs.blog.sus4.co.jp/ #

Twitter Weekly Updates for 2010-06-20

野村亮之 — Sun, 20 Jun 2010 06:14:00 +0000

@extjapan みましたよー。ちょっと煎茶って、、、 in reply to extjapan #
@kudakurage　言い出した人が頑張るのがいいと思いますｗ in reply to kudakurage #
@kudakurage　名古屋でも勉強会やりますか、久しぶりに #

Twitter Updates for 2010-06-18

野村亮之 — Fri, 18 Jun 2010 06:14:00 +0000

@kudakurage　言い出した人が頑張るのがいいと思いますｗ in reply to kudakurage #
@kudakurage　名古屋でも勉強会やりますか、久しぶりに #

Ext JS +JQTouch = Sencha Touch!!

佐竹裕行 — Fri, 18 Jun 2010 04:02:11 +0000

先日の会社名変更の衝撃からまだそんなに日がたっていませんが。早くもSencha.comからSenchaブランドのプロダクト第一弾が公開されました。

ExtJSとJQTouchを組み合わせたようなモバイルWebアプリ開発フレームワークです。

Sencha – Sencha Touch Overview – HTML5 Mobile App Framework.

タイトルにもあるようにHTML5の機能をふんだんに使用しています。ExtJSがIE6から動くマルチプラットフォームが一つの売りだったためHTML5の機能を入れられないんじゃなと思っていました。

モバイル機器専用として割り切ることでHTML5に対応させたExtJSとも考えられます。

将来的にHTML5の機能はExtJSに組み込まれんだろうと思います。

サンプルも沢山用意されているので、一度iPhoneやiPadで試してみるとよいかもしれません。

iPhone 3G,3GSで試すと3GSはなかなかの使用感ですが、3Gだとピッカー系のUIやフォームの動きがあやしいかんじです。メモリとCPUが結構必要な感じです。

Androidはまだ改善中とのことです。UIの制御でバグっぽい箇所がいくつかありました。スライドさせるUIが全体的に不安定な気がします。

現在のところまともに使えそうなのはiPadとiPhone 3GSですね。

実際サンプルのソースコードを見ると、Ext.～が使われて安心しました。Sencha.get()だったらどうしようと心配してましたがExtで使えるようです。

サンプルのソースコードを見ると、Extと同じ書き方がされているのが分かります。ExtJSの開発者はスムーズにSencha Touchに移行できそうです。APIドキュメントも慣れ親しんだExtJS APIドキュメントと同じようなものが用意されているので全体を眺めてみるとExtJSとの違いが分かります。videoやaudioといったHTML5っぽいクラスが追加されています。

ただこのSencha TouchドキュメントはiPadではまともに動きません。Sencha TouchドキュメントはExt JSで書かれているということなんだと思います。APIドキュメントがiPadで見れると実用は別にして、なんとなくうれしい気がするので期待しています。

あとはCANVASが使えれば、携帯ゲームを作ることも簡単になるかもしれません。

Sencha Touchは既存のモバイル向けJavascriptライブラリとは違いフレームワークです。雰囲気でいえばApple のDashcodeのようにモバイルアプリケーションを作るのに近いといえます。JQTouchを含め既存のJSのCocoa Touch風UIライブラリではUIのみしか提供されませんでしたが、Sencha TouchではモデルやAjax処理も内包しています。そのためより高度なモバイル向けWebアプリを作ることが可能になりそうです。

またいわゆるハイブリッドアプリケーションの形式を取れば、iPhone Appとして開発してAppstoreへの申請も可能かもしれません。

最近AppleのiPhone AppではFlashやC#など開発言語の締め出しがおこなわれましたが、Javascript + HTMLは現状OKです。またAppleのDashcodeがある以上Javascriptが禁止されることはまずないと思います。

色々期待はしますが、まだベータ版といった感じなので遊びで色々やってみるのも面白いかもしれません。Ext JSを開発してれば、簡単なアプリをすぐ作れてしまうんじゃないかなと思います。

追記：Vimeoにビデオも上がってました。

Sencha Touch Introduction from Sencha on Vimeo.