ExtJSで楽しくRIA業務アプリ開発 » 佐竹裕行

Ext.Carouselのインジケーター設定 | Sencha Touch Tips

佐竹裕行 — Wed, 01 Sep 2010 02:15:15 +0000

Sencha Touchにはいかにもタッチスクリーン向けなパネルとして、Ext.Carouselがあります。
このパネルはカードレイアウトのパネルの一種で複数のカードを左右（または上下）に一列にならべて、
スワイプジェスチャーによって切り替えることができます。

各カードの下にはインジケーターとして、○がアイテムの数だけ並んで現在のアイテムの位置は●になります。
今回はこのインジケーターの表示/非表示を簡単に切り替えるサンプルです。
インジケーターについての記述はほとんどAPIリファレンスに載っていないので、ソースコードを見ないとわかりません。

Ext.Carousel – Sencha Touch API Documentation
http://dev.sencha.com/deploy/touch/docs/?class=Ext.Carousel

・サンプルコード

Show/Hide Carousel Indicator – jsdo.it – share JavaScript, HTML5 and CSS

インジケーターの初期設定はExt.Carouselのindicatorコンフィグで行えます。

indicator : Boolean
Provides an indicator while toggling between child items to let the user know where they are in the card stack.

APIリファレンスによると受け付けるのはBooleanとのことですが、ソースコードを見ると以下のようになっています。
インジケーターについての記述はこれくらいで、他の情報がありません。なのでソースコードを見ます。


//Ext.Carouselクラス

    initComponent: function() {
       ・
       ・
       ・
        if (this.indicator) {
            var cfg = Ext.isObject(this.indicator) ? this.indicator : {};
            this.indicator = new Ext.Carousel.Indicator(Ext.apply({}, cfg, {
                direction: this.direction,
                carousel: this,
                ui: this.ui
            }));
        }

        Ext.Carousel.superclass.initComponent.call(this);
    },
   ・
   ・
   ・

indicatorコンフィグにオブジェクトが渡された場合、Ext.Carousel.Indicatorクラスのコンフィグオプションとしてバイパスするようになっています。
またCarouselが生成されると、このインスタンスのindicatorにはExt.Caorousel.Indicatorオブジェクトが設定されます。

つまり

Ext.CarouselのindicatorコンフィグにはExt.Carousel.Indicatorクラスのコンフィグが渡せる。
Ext.Carouselのindicatorコンフィグにtrueを渡すとデフォルトのExt.Carousel.Indicator、falseだと何も生成しない。
Ext.CarouselオブジェクトのindicatorプロパティによってExt.Carousel.Indicatorオブジェクトが参照できる。

Ext.Carousel.IndicatorクラスはExt.Componentのサブクラスなので、Ext.Componentで設定できるコンフィグは受け付けることができます。サンプルコードではインジケーターの初期値にhiddenとshowAnimationを設定しています。


indicator:{
  hidden:true,
  showAnimation:{
    type:'fade'
  }
}

サンプルコードではさらにツールバーの稲妻ボタンで、インジケーターの表示/非表示を切り替えています。


if (carousel.indicator.isVisible()){
  carousel.indicator.show();
}else{
  carousel.indicator.hide();
}

ここではコンフィグで設定した、showAnimationで設定したアニメーションで表示が切り替えられます。ただし現状では非表示するときのアニメーションしか効いてないようです。
インジケーターもコンポーネントとして扱えるので、もっと複雑なことできそうです。

Ext JS/Sencha Touch入門40　Ajaxリクエスト処理

佐竹裕行 — Thu, 05 Aug 2010 02:06:27 +0000

今回はExt JS,Sencha Touchのどちらでも非常によく使うAjaxの処理を紹介します。

サンプルコードはSencha Touchですが、Ajaxリクエストの処理はExt JSでもほぼ同じです。

Ajax サンプル

まずAjaxでリクエストする先を用意する必要があります。
今回はPHPで作成しました。
・PHP

3秒処理を遅らせています。
レスポンスにはJSON形式でPOSTされた情報とサーバーサイドでの処理が正しく終わったらsuccessにtrueを返すようにしています。

HTMLファイルはSencha Touchの基本形のものでよいです。
・HTML





    
    Ajax Sample

今回のサンプルではパネルをひとつ作ってツールバー上に、Ajaxリクエストをキックするボタンを配置します。このボタンをタップするとAjax リクエストが実行されるようにします。

・Javascript


Ext.setup({
    onReady: function() {

        //リクエスト処理
        var ajax = function(callback) {
            //ローディングマスク
            panel.el.mask(
                false,
                '  
お待ちください...');

            //Ajax リクエスト
            Ext.Ajax.request({
                url:'post.php',
                params:{
                    id:'test'
                },
                success:function(result,opt){
                    //マスクを外す
                    panel.el.unmask();
                    var res = Ext.decode(result.responseText);
                    if (res.success) {
                        window.alert('Success');
                        if (Ext.isFunction(callback)) {callback()};
                    }
                },
                failure:function(result,opt){
                    window.alert('リクエスト失敗。ネットワーク接続を確認してください。');
                }
            });
        };

        //パネルの生成
        var panel = new Ext.Panel({
            fullscreen: true,
            styleHtmlContent:true,
            dockedItems:[
                {
                    xtype:'toolbar',
                    dock:'top',
                    items:[
                        {
                            ui:'mask',
                            iconCls:'action',
                            handler:function(){
                                //コールバック関数
                                var callback = function(){
                                    panel.update('Success!');
                                };

                                //Ajax処理実行
                                ajax(callback);
                            }
                        }
                    ]
                }
            ],
            html:'Ajax Request Sample'
        });
    }
});

前回のHello, World　+ Tbarのサンプルによく似ていますが、今回はxtypeでツールバーを作成しています。
xtypeについてはコチラ

ボタンのコンフィグオプションで
ui:’mask’,
iconCls:’action’
が設定されています。iconClsではボタンに配置する画像をCSSで設定できますが、今回はSencha Touchに予め用意されているactionクラスをそのまま使います。
Sencha Touchのパッケージ内のexamplesのiconsサンプルをみるとどんなアイコンがあるのかが分かります。

Ajax リクエスト処理
Ext JSおよびSencha TouchではExt.Ajaxクラスを使用してAjax処理を行ないます。このクラスはシングルトンですので、Ajax処理を呼びたい箇所でExt.Ajaxのrequestメソッドを呼び出します。パラメーターはURLなので設定はオブジェクトで渡します。

・Ext.Ajax.request
Ext.Ajax.requestの引数に渡しているもの

url:(String)リクエスト先のURL
params:(Object) パラメータ
success:(Function) Ajaxリクエスト成功時のコールバック関数
failure:(Function) Ajaxリクエスト失敗時のコールバック関数

最も単純なAjaxリクエストへ渡す設定は上の4つのものになります。
paramsに設定されているパラメータをurlの先にPOSTして,正しいレスポンスが返ってきたときにsuccessに設定されているコールバック関数が実行されます。リクエスト自体が失敗した場合(404などが返ってきた場合。)にfailureに設定されているコールバックが実行されます。

サンプルではajaxという関数にAjaxの処理をまとめています。
Ext.Ajax.request()の部分で実際にAjaxを実行します。

ajax関数の中では、リクエスト中に画面全体にマスクを掛ける処理を、行っています。

・ローディングマスク

ローディングマスクを表示


panel.el.mask(
                false,
                '  
お待ちください...');

Ext.Elementのmaskメソッドでそのエレメントにマスクをかける処理を実行します。Ext JSとSencha Touchでは引数が違うので注意が必要です。
Sencha Touchのマスク処理はスタイルがあんまり良くないので、独自で設定する必要があります。ローディング用の画像もないので適当なものを用意する必要があります。今回はこんなのGifアニメを作って設定しています。

ローディング用Gifアニメ

マスクを外すときは同様にExt.Elementのunmaskメソッドで行ないます。サンプルでは
successのコールバックの中でpanel.elをunmaskを実行しています。


success:function(result,opt){
　//マスクを外す
　panel.el.unmask();
　　　　　・
　　　　　・
　　　　　・
}

・コールバック処理


success:function(result,opt){
  //マスクを外す
  panel.el.unmask();
  var res = Ext.decode(result.responseText);
  if (res.success) {
    window.alert('Success');
    if (Ext.isFunction(callback)) {callback()};
  }
},
failure:function(result,opt){
  window.alert('リクエスト失敗。ネットワーク接続を確認してください。');
}

リクエスト成功/失敗時はwindow.alertを使って結果を表示してます。
また今回のサンプルではsuccess時にさらに呼び出し元でコールバックを設定して、パネル内の要素を”Success”に書き換えています。

・レスポンスボディーの取り出し
successのコールバックの第一引数にレスポンスがオブジェクトとして渡されます。
サンプルではresultという名前に設定しています。resultの中のresponseTextにレスポンスのボディーが格納されています。
サンプルのPHPの場合ではJSONの文字列を返しています。レスポンスボディーはそのままではただのテキストです、そのため文字列からJSONに変換する必要があります。
Sencha TouchでもExt JSと同じようにExt.util.JSONクラスを使ってJSONの変換を行います。
今回は文字列からオブジェクトへの変換(JSON.decode)処理を使います。


success:function(result,opt){
  //文字列からオブジェクトに変換する
  var res = Ext.decode(result.responseText);

  //resはオブジェクトとして扱えるようになる。
  if (res.success) {
    window.alert('Success');
   　　・
　　　・
　　　・
  }
}

Ext.decodeはExt.util.JSON.decodeへのエイリアスです。Ext.decodeで呼び出した方が簡素なのでこちらを使っています。
このExt.decodeを使ってレスポンスボディの文字列をJavascriptのオブジェクトとして扱えるように変換します。
変換されたレスポンスボディはオブジェクトとして扱えるので、res.successのようにドットシンタックスで任意のプロパティ値を取得できるようになります。

以上、Ext.Ajax.requestの簡単な使い方です。詳しくはAPIリファレンスをご覧ください。
Sencha Touch API Documentation
http://www.sencha.com/deploy/touch/docs/?class=Ext.Ajax

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

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

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

佐竹裕行 — Tue, 27 Jul 2010 05:44:06 +0000

2010/7/25のExt JS & Sencha Touch勉強会7月＠東京でのsus4　佐竹の担当箇所のSencha Touch入門篇アジェンダです。

時間と場所は下記の通りです。残念ながら既に定員に達しているようです。
当日はUstreamでも配信も予定されているようですので、こちらでご覧ください。
http://www.ustream.tv/channel/extjapan
以下 Ext Japanブログより転載

日時：2010年7月28日（水）19:00～21:00（18:45開場）
募集人数：45名
場所：東京都港区東新橋1-9-1 東京汐留ビルディング9Fソフトバンク株式会社内（今回はいつもと会場が違いますので、ご注意ください。）
参加費：無料
アジェンダ：
Senchaへのブランド変更について（直鳥）
Sencha Touch入門（株式会社sus4 佐竹様）
Sencha TouchとYubizoで作るネイティブアプリ（株式会社アイキューブドシステムズ佐々木様）
SpreadOfficeとSencha Touch（小堤）
ホワイトクラウドシェアードHaaSのご紹介（ソフトバンクテレコム株式会社加藤様）

—–

Sencha Touch入門：Sencha Touchのはじめかた　佐竹裕行 – 株式会社sus4

・Sencha TouchでつくるiPhone/iPadアプリ

・Sencha Touchの環境
エディタ等
デバッグコンソール

・Hello, World!
Sencha Touchのアプリを作る。
HTML + JS合わせても30行くらいで
APIリファレンス、デバッグ環境など

・付属サンプルCarouselの解説
以前書いたブログの記事ベースにもう少し詳しく、Sencha Touchアプリの作り方を紹介します。
http://extjs.blog.sus4.co.jp/2010/06/28/sencha-ex-carousel/

—–

時間的にSencha Touchのさわり位しかできないと思いますが、
実際に手を動かしてSencha Touchを作ることと、その際のTipsが紹介できれば良いかなと思います。
APIリファレンスの読み方、フォーラム利用等。
内容はできるだけ簡単にして、ExtJSを知らなくても分かる内容です。
まさに入門という内容で、サンプルもできる限り簡単なものにしました。
Hello,World!に至ってはHTML + JS合わせても30行程度コードを書くだけです。
Sencha Touchの開発の雰囲気がつかめれば良いかなと思っています。
またSencha Touchのパッケージに含まれるexamplesを自力で読めるようになるのが目標です。

事前の準備しておくと良いもの：
・Sencha Touch ライブラリのダウンロード
http://extjs.co.jp/products/touch/

・iPhone、iPad、Androidでバイスの実機　もしくは　XCode付属iPhoneシュミレーター
Android,iPhone 3G以下はあまりおすすめできません。
XCodeはダウンロードに数GBかかるので事前にインストールしておくいていただくとスムーズです。

・ExtJS自体を知らない方はこのブログのチュートリアルの以前の記事を読んでおいていただけると良いかと思います。
勉強会ext-onreadyからはじめるextjsのまとめ
 sus4 Ext JSブログ内Sencha Touchの記事

Sencha Touch入門:Sencha Touch の付属サンプルCarouselを使ってSencha Touchのコツをつかむ

佐竹裕行 — Mon, 28 Jun 2010 06:39:24 +0000

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: 'Carousel
Navigate the two carousels on this page by swiping left/right or clickin    g on one side of the circle indicators below.'
}, {
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 をはじめよう 1　(Getting Started with Sencha Touch の邦訳その１)

佐竹裕行 — Mon, 21 Jun 2010 08:38:14 +0000

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の使い方（基本編）までです。

Sencha Touch の紹介：Introduction to Sencha Touch
Sench Touch はタッチパネルデバイス向けWebアプリケーション開発用JavaScriptフレームワークです。Sencha Touchを使うことで、Webデベロッパーの既に持っているスキルを使いながらエレガントで一貫性のあるUIを使ったWebアプリケーションを最小限の努力で作成することができます。

Sencha Touch の使い方（基本編）：Using Sencha Touch: Main Steps

開発環境を作る
HTMLファイルの作成
アプリケーションのJSファイルを作成
アプリのテスト
リリースのための設定　Update the Application for Production
アプリケーションを運用する　Put the Application into Production

1.環境を作る

Sench Touchライブラリのダウンロード

Webアプリの開発環境の確認（エディタ、ブラウザなどのことだと思います。）
開発及び運用のためのサーバーの設定を確認
独自のCSSファイルを使う場合はファイル名を確認しておく（これは次のステップでHTMLファイルの中で必要になるためです。）

2.HTMLファイルを作る
お好きなエディタでこのアプリケーションのためのHTMLファイルを作ります。HTMLファイルの例は以下のようなものがあります。ここではmyapp.htmlとしています。
アプリケーションのHTMLには特定のリンクを設定する必要があります。

Sencha TouchのデフォルトのCSSファイル ext-touch.css
アプリケーションのカスタムのCSS(mycss.cssなど)
使用したバージョンのSencha Touch ライブラリ
ただしSenechaチームは以下の点をお勧めしています。
アプリケーションの開発、テスト時：ext-touch-debug.js（デバッグバージョン：このバージョンはライブラリのどこでエラーが起きているかを見つけやすくなっています。非圧縮バージョン　難読化されていない。)
運用時：ext-touch.js(運用バージョン：圧縮バージョン　運用時のtipsは「リリースのための設定」をご覧下さい)
アプリケーションのJavaScriptファイル（次のステップで作成します。myApp.jsなど）

※訳注：以下はオリジナルのドキュメントではアンカーリンクの先の部分です。

HTMLファイルの作成の詳細
Sencha Touchのアプリケーションの開発の最初のステップはHTMLファイルの作成です。
このHTMLファイルはSencha Touchライブラリ、Sencha TouchのデフォルトCSS、アプリケーションのためのCSS,JSとリンクしている必要があります。

例えばGeoTweetsのHTMLファイル（index.html）は以下のようになります。

GeoTweets

先日の会社名変更の衝撃からまだそんなに日がたっていませんが。早くも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.

Ext JSはSenchaに

佐竹裕行 — Wed, 16 Jun 2010 08:31:32 +0000

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を構築できるようになりそうです。
追加情報に期待しましょう。

ExtJS入門39　ファイルをアップロードするフォームフィールド

佐竹裕行 — Mon, 24 May 2010 09:15:23 +0000

ExtJSの標準のライブラリではファイルアップロード用のフォームフィールドは用意されていません。ファイルのアップロードフィールドを作成するためには、uxのExt.ux.form.FileUploadFieldを使うことが比較的多いです。今回はこのUXを使ってファイルを送信するフォームパネルのサンプルです。

Ext.ux.form.FileUploadField

フォーム関連の過去の記事はこちらからです。

PHP


 true
    );

    if (!file_exists($target)) {
        $res = array(
            'success' => false,
            'msg'   => 'ファイルのアップロードに失敗しました。'
        );
    }

    header("Content-Type: text/html; charset=utf-8");
    echo json_encode($res);

HTML:






    
    ExtJS名古屋勉強会　フォーム　ファイルのアップロード

    
    
    
    

    
    

    
    
    

    
    



    
        
            Extのファイルのアップロードフォーム

            ux.fileUploadField　を使ってファイルをアップロードできるフォームを作成します。
        
        
        

        

        

        Java Script：form-fileupload.js

Java Script:


Ext.onReady(function()
{
    var form = new Ext.form.FormPanel({
        renderTo:'form',
        url:'file-upload.php',
        fileUpload: true,
        title:'フォームの簡単な紹介',
        height:280,
        width:500,
        bodyStyle:{
            padding:'8px'
        },
        footerStyle:{   //ボタン周りの表示の調整用スタイル
            border:'solid 1px #99BBE8',
            'border-top':'none'
        },
        labelWidth:180,
        monitorValid:true,  //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する
        defaults:{
            anchor:'100%'
        },
        items:[
            {
                xtype: 'fileuploadfield',
                id: 'form-file',
                emptyText: 'ファイルを選択',
                fieldLabel: 'ファイルアップロードフィールド',
                name: 'my-upload-file',
                buttonText: 'ファイルを選択'
            },{
                xtype:'textfield',
                fieldLabel:'キャプション',
                name:'caption'
            }
        ],
        buttonAlign:'center',
        buttons:[
            {
                text:'送信',
                formBind:true,
                iconCls:'tick',
                handler:function(){
                    //ファイルを送信してコールバックを設定。
                    form.getForm().submit({

                        //リクエスト時にローダーを表示する
                        waitMsg: 'ファイルを送信中です...',

                        //リクエスト成功時
                        success:function(basicForm,action){

                            if (action.result.success){
                                form.getForm().reset();
                            }else{
                                Ext.Msg.alert('エラー','ファイルのアップロードに失敗しました。').setIcon(Ext.Msg.ERROR);
                            }
                        },

                        //失敗時
                        failure:function(basicForm,action){
                            Ext.Msg.alert('エラー','サーバーへの接続に失敗しました。').setIcon(Ext.Msg.ERROR);
                        }
                    });
                }
            }
        ]
    });
});

uxは都度作者のサイトやExtJSのフォーラムなどで入手する必要があります。
Ext.ux.form.FileUploadFieldはExtJSのライブラリをダウンロードしたときに含まれるexsamplesの中にもあります。

今回は
js/ext
js/ux/fileupload/FileUploadField.js
js/ux/fileupload/css/fileuploadfield.css
というディレクトリ構成になっています。

uxファイルの読み込みはext-all.jsの後、使用される処理の前に行います。
今回はファイルをポスト後にPHP側で処理を行うので、サーバーサイドも所定の位置に設定しておきます。
これで読み込みが正しくできれば準備は完了です。

では早速FileUploadFieldを使ってみます。基本的いままのフィールドと同じやり方で作成します。
formPanelには送信先のURLをurlコンフィグに設定しておきます、またfileUploadコンフィグをtrueにしてファイルを送信するためformPanelを指定します。
次にfileuploadfieldをitemsに設定します。xtypeは’fileuploadfield’です。


    var form = new Ext.form.FormPanel({
        ・・・
        url:'file-upload.php',
        fileUpload: true,
		・・・
        items:[
            {
                xtype: 'fileuploadfield',
                id: 'form-file',
                emptyText: 'ファイルを選択',
                fieldLabel: 'ファイルアップロードフィールド',
                name: 'my-upload-file',
                buttonText: 'ファイルを選択'
            },{
                xtype:'textfield',
                fieldLabel:'キャプション',
                name:'caption'
            }
        ],
		・・・・
  });

実行結果:

Ext.ux.form.FileUploadField

フォーム送信時のローディングマスク

フィールド自体の設定はこれまでのほかのフォームフィールドと同じです。formPanelのfileUploadをtrueにすることが重要です。
後は送信ボタンをつけてformPanelのurlに指定した場所にPOSTするだけです。送信されるサーバーの方は簡単なサンプルです。適時お好みの処理に変更してください。
ファイルの送信ではページの読み込みは行われません、フォームのsubmit()メソッドの引数にリクエスト成功後のコールバックを指定して。ファイルの送信が完了したら、フォームをクリアして初期状態に戻るようにします。

basicFormのsubmit()メソッドにオブジェクトでコールバックが設定できることは既に説明しました。今回もファイルの送信成功後の処理をsuccessの中で実行します。また接続などのエラーはfailureの中に記述します。今回は成功すればフォームをクリアし、失敗時はポップアップを表示します。


    var form = new Ext.form.FormPanel({

        items:[
			・・・ファイルアップロードフィールド・・・
		],
        buttonAlign:'center',
        buttons:[
            {
                text:'送信',
                formBind:true,
                iconCls:'tick',
                handler:function(){
                    //ファイルを送信してコールバックを設定。
                    form.getForm().submit({

                        //リクエスト時にローダーを表示する
                        waitMsg: 'ファイルを送信中です...',

                        //リクエスト成功時
                        success:function(basicForm,action){

                            if (action.result.success){
                                form.getForm().reset();
                            }else{
                                Ext.Msg.alert('エラー','ファイルのアップロードに失敗しました。').setIcon(Ext.Msg.ERROR);
                            }
                        },

                        //失敗時
                        failure:function(basicForm,action){
                            Ext.Msg.alert('エラー','サーバーへの接続に失敗しました。').setIcon(Ext.Msg.ERROR);
                        }
                    });
                }
            }
        ]
    });

formの送信後はファイル保存の処理はサーバーサイドで行われます。ファイルを送信するので、これまでの短いテキストのやり取りとは違いリクエストからレスポンスまでの時間が多少気になります。そのためsubmit()メソッドに渡す設定の中のwaitMsgに送信～完了までの間に表示するロードマスクで表示するテキストを設定します。このロードマスクはリクエストが完了後に自動的に消えるので手軽に使用できます。ファイルアップロードなどの処理はサーバーサイドでの処理に時間が駆るので、一般的にロードマスクを表示させるようにしておくのがよいでしょう。

今回のサンプルの注意として,FireFoxでfirerebugを起動したままファイルの送信リクエストを事項すると、レスポンスのJSONが上手く展開できないようです。上手くいかないときは一度Firebugを無効にして試してみてください。

ExtJSで楽しくRIA業務アプリ開発 » 佐竹 裕行

Ext.Carouselのインジケーター設定 | Sencha Touch Tips

Ext JS/Sencha Touch入門40 Ajaxリクエスト処理

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

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

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

Sencha Touch入門:Sencha Touch の付属サンプルCarouselを使ってSencha Touchのコツをつかむ

Carousel

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

Ext JSはSenchaに

ExtJS入門39 ファイルをアップロードするフォームフィールド

ExtJSで楽しくRIA業務アプリ開発 » 佐竹裕行

Ext JS/Sencha Touch入門40　Ajaxリクエスト処理

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

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

ExtJS入門39　ファイルをアップロードするフォームフィールド