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アプリを見るとレイアウトがかなり崩れています。
よい方法を見つけられた方は是非教えてください。