ExtJSで楽しくRIA業務アプリ開発

Sencha Touch入門

Sencha Touch に付属するでもCarouselを見ながら、基本的なSencha Touchの使い方を紹介します。
コードは配布されているSencha Touchパッケージの/examples/carousel　にあります。
ここではindex.htmlについては,前回の記事をごらんください。
index.jsをお好きなエディタで開きながらご覧下さい。
iPad or iPhoneがあるとなおよいと思います。

Ext JSの基本についてはこちらをご覧下さい：
Ext.onReadyからはじめるExtJSのまとめ

Sencha Touch Examples

Sencha TouchはこれまでのExt JSのコードと違う個所がいくつかあります。
今回はその中でも基本となる、3点を紹介します。
1.Ext.setup()
2.onReadyコンフィグ
3.panelのfullscreenコンフィグ

1.Ext.setup();

これまでのExt JSのアプリではExt.onReady()をアプリの起動ポイントとして使っていることがほとんどでした。
Sencha Touch付属のサンプルではExt.setup()を使って、様々な初期設定を行っています。onReady()もこの
Ext.setup()のなかで設定されています。

APIをみるとsetupで設定できる項目一覧が乗っているので簡単に訳しておきます。

• fullscreen – Boolean -　フルスクリーン設定
• tabletStartupScreen – String – iPad用の起動時画像へのパス　サイズは768×1004 縦長でないといけない
• phoneStartupScreen – String – iPhoneと iPod touch用起動時画像へのパス　320×460 で縦長でないといけない
• icon -タブレットとスマートフォン両方に使われるアイコン画像へのパス　72×72がよい
• tabletIcon – String – タブレット用アイコン画像へのパス こちらがiconで設定される画像より優先される　72×72がよい.
• phoneIcon – String – スマートフォン用アイコン画像へのパス こちらがiconで設定される画像より優先される　57×57がよい.
• glossOnIcon – Boolean – iPhone, iPad and iPod Touchのアイコンにグロスのエフェクトをつけるかどうか
• statusBarStyle – String – iOS web アプリのステータスバーのスタイルの設定. default, black,black-translucentのどれかを選択。
• preloadImages – Array – プリロードする画像へのパスの配列（詳細は後日調査）
• onReady – Function – DOM構築後に実行される関数。アプリの起動ポイントになることが多い。
• scope – Scope – スコープの設定

画像系の設定が多いですね。

CarouselサンプルのExt.setup()で設定される、他の項目をみるといくつか画像が設定されています。
Sencha TouchのWebアプリをホーム画面に追加してから起動すると,iPadはtabletStartupScreen,
iPhoneはphoneStartUpScreenが起動時の画面として登録されます。

Safariのツールバーで[+]をタップすると以下のようなメニューがでるので、ホームに追加します。

Sencha Touch アプリをホーム画面に追加

iconはホーム画面に設定される際のアイコンになる画像です。（ただし現状ではiPadでは正しく設定されましたが、iPhone4では上手くいきませんでした。もう少し詳しく調べてみます。）
iPhone4だとこうなりました。

ホーム画面に追加されたSencha Touch アプリ

• tabletStartupScreen　:　タブレット用（iPad）
• phoneStartupScreen　: スマートフォン用（iPhone,iPod Touch）
• icon :アイコンとなる画像（iPadでしか正しく設定されない？）

まだAndroidの文字がありませんが、これから対応されていくと思います。

iPhoneでの起動時の画像

またホーム画面から起動すると自動的にURLバーとSafariのツールバーが非表示になります。これだけでぐっとネイティブアプリのような見た目になります。

2.onReadyコンフィグ
次にonReadyで実行される処理を見ていきます。
Carouselサンプルでは上下2つの領域に2つのカルーセルのコンテナが配置されています(carousel1,2)。それぞれのコンテナにはさらに子となる要素を設定して、その要素をスライドさせることができます。
carousel1も2もほぼ同じ内容ですので1のほうだけを紹介します。

// Create a Carousel of Items
var carousel1 = new Ext.Carousel({
defaults: { cls: 'card' },
items: [
{
html: '<h1>Carousel</h1><p>Navigate the two carousels on this page by swiping left/right or clickin    g on one side of the circle indicators below.</p>'
}, {
title: 'Tab 2',
html: '2'
}, {
title: 'Tab 3',
html: '3'
}]
});

基本的にはExt JSでpanel等の配下にさらに子となるパネルを入れる作業とおなじです。
TabPanelやCardレイアウトのパネルで設定したように,itemsの中にパネルを設定しています。ここでは単純にHTMLで内容を記述した3枚のパネルを使っています。defaultsでそれぞれのパネルのCSSクラスにcardというセレクタを追加してます。

3.fullscreen設定
このサンプルはほんとに簡単で上で作ったカルーセルコンテナをパネルに配置しているだけです。
ただしこのカルーセルの親となるパネルのコンフィグでfullscreen設定をtrueにする必要があります。
この設定で、Ext JSのViewportのように画面全体にパネルを広げます。
ここではlayoutでvboxを設定しています。これはExt JSのレイアウトと同じですね。
この部分だけをみるとExt JSのコードとほとんど区別が付きません。
これまで培ったExt JSのノウハウをそのままSencha Touchで作るタッチスクリーンのアプリに活かせるのよく分かります。

new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel1, carousel2]
});

またデバッグの方法を考える必要があります。モバイルSafariではデバッグメニューを表示できますが不十分です。
FirefoxでSencha Touchアプリを見るとレイアウトがかなり崩れています。
よい方法を見つけられた方は是非教えてください。

Sencha Touch をダウンロードするとGetting Started width Sencha Touchというオライリーの本のタイトルっぽいチュートリアルが付属しています。
当然英語なので勝手に翻訳してみます。

英語としては簡単な文章になっているので、原文でも読みやすいとおもいます。
Ext JSの知識がある人にとっては、内容があまりありません。ExtJSの知識無しでいきなりSencha Touchはじめる人のためのチュートリアルといった感じです。

Sencha Touch をはじめよう　(Getting Started with Sencha Touch の邦訳)

これはSencha Touchのはじめ型を解説した文書です。
Sencha Touchを使ってタッチスクリーンを持つデバイスに特化したWebアプリを作る際の基本的なステップを紹介しています。この解説では、今回のSencha Touchのリリースに含まれるサンプルアプリGeoTweetsの詳細な製作ステップも紹介しています。

この解説はSencha Touchを使ってすばやく、タッチスクリーンに対応したデバイス向けのWebアプリを作りたい全てのWebデベロッパーに向けて書かれています。
以下の準備を先に済ませている前提で話を進めます
Sencha Touchのライブラリをダウンロード。
開発用のサーバーの準備
HTML + CSS + JSを使用したWebアプリの開発の知識がある。
それでははじめましょう。

この解説では以下のセクションがあります。

• Sencha Touch の紹介 ：Introduction to Sencha Touch
• Sencha Touch の使い方（基本編）：Using Sencha Touch: Main Steps
• Sencha Toutchの使い方（応用編：GeoTweetsの解説）：Using Sencha Touch: Detailed Steps for Creating the GeoTweets Application
• まとめ：Summary and Further Reading

※訳注：今回の翻訳はSencha Touchの使い方（基本編）までです。

Read the rest of this entry »

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

Powered by Twitter Tools

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

Powered by Twitter Tools

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

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

Sencha – Sencha Touch Overview – HTML5 Mobile App Framework.

Read the rest of this entry »

• @extjapan みましたよー。ちょっと煎茶って、、、 in reply to extjapan #

Powered by Twitter Tools

ExtJSはJQTouchとRaphaëlを統合してSenchaというプロダクトになるようです。
会社名もSenchaになり、www.extjs.com も www.sencha.comになっています。

以下Extブログ改めSenchaブログです。

Ext JS + jQTouch + Raphaël = Sencha

なぜSencha(煎茶)なのかは、

Why Sencha?
We’re choosing Sencha as our name because it evokes next-generation software development and it’s easy to remember, spell and pronounce. Sencha — the name of a popular Japanese green tea — is in the tradition of Java, and represents a new level of development. It feels memorable to us. We hope you like it too.

The roadmaps for Ext JS, Ext GWT, Designer, Direct etc. don’t change as a result of this. We’re very excited about the new things in Ext JS 4.0 and the rest of the product line. Some of the individual product names might evolve in the future (for example, we’re thinking of renaming Ext Designer to Sencha Designer), but don’t expect any major or immediate changes here. One of the benefits of the name change is also that it separates a product name – Ext JS – from the company name, Sencha.

だそうです。
名前が変わるよ以外は今のところあまり情報がありません。
JQTouchはJQueryベースのCocoa Touch風UIプラグインで、Raphaël ベクター系のJavascriptグラフィックライブラリです。
JQTouchとRaphaëlを取り込んでモバイルや、タッチスクリーンに適したUIを構築できるようになりそうです。
追加情報に期待しましょう。