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

タグ ‘JavaScript’ 一覧

0.95のハマリどころ

without comments

0.93から０.９５にアップデートした際に、動かなかったところをメモ。

itemsに直接オブジェクトを書くと、レンダーしてくれない（泣。0.93までしてくれていて便利だったのに。１つのComponentを仕込むだけでも、配列で書きましょう。
Ext.platform消滅。Ext.is.xxxで判断するように、サンプルの方は書き直されていました。
NestedListがStoreを使うようになったみたい（これは聞いただけなので、自分自身ではまったところではない）。

itemsのところだけが、見つけるのが大変でしたが、あとはエラーを吐いてくれるので、Touch本体のソースを見ながら修正しました。
いやー、まだまだ仕様変わりそうだなぁ。

2004年名古屋市立大学芸術工学部在学中に株式会社sus4を設立・取締役に就任（現職）。2005年同大学を卒業。
デザイン視点でのウェブサービスの在り方をアプローチの基本として、さまざまなウェブサービス構築に従事。
2006年8月日本初のオンライン動画編集サービスClipCast(http://clipcast.jp/)を開始。2009年7月OTSベース動画解析サービスVideoAnalytics(http://video-analytics.jp/)を開始。
2009年8月Ext Japan LLCにてSenior Software Architectに就任。

Written by 野村亮之

9 月 19th, 2010 at 6:56 pm

Posted in Sencha Touch

Tagged with JavaScript, sencha, Sencha Touch, Tips

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

without comments

はてなブックマーク - Ext JS/Sencha Touch入門40　Ajaxリクエスト処理

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

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

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

Ajax サンプル

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


<?php
//サンプル

//3秒待つ
sleep(3);

//POST値の処理
$param = $_POST['id'];
$res['id'] = $param;

if ($param) {
    $res['success'] = true;
}else {
    $res['success'] = false;
}

//JSONで返す
header('Content-Type: application/json');
echo json_encode($res);
die();
?>

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

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


<!DOCTYPE html>
<html manifest="index.manifest">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Ajax Sample</title>
    <link rel="stylesheet" href="../../st/resources/css/ext-touch.css" type="text/css">
    <script type="text/javascript" src="../../st/ext-touch-debug.js"></script>
    <script type="text/javascript" src="index.js"></script>
</head>
<body></body>
</html>

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

・Javascript


Ext.setup({
    onReady: function() {

        //リクエスト処理
        var ajax = function(callback) {
            //ローディングマスク
            panel.el.mask(
                false,
                ' <div style="margin:50% auto; text-align:center;color:#EEE;"><img src="loader.gif"/> <br />お待ちください...</div>');

            //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,
                ' <div style="margin:50% auto; text-align:center;color:#EEE;"><img src="loader.gif"/> <br />お待ちください...</div>');

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

佐竹裕行

1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。

Written by 佐竹裕行

8 月 5th, 2010 at 11:06 am

Posted in ExtJSチュートリアルｓｕｓ４版, Sencha Touch

Tagged with Ajax, Ext.Ajax, Ext.Ajax.request, ExtJS, JavaScript, js, Sencha Touch, Toolbar, サンプル, チュートリアル

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

without comments

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

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

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

Read the rest of this entry »

佐竹裕行

Written by 佐竹裕行

7 月 27th, 2010 at 9:27 pm

Posted in 未分類

Tagged with dockedItems, Ext.Carousel, Ext.Toolbar, ExtJS, JavaScript, js, jsdo.it, sencha, Sencha Touch, 勉強会, 勉強会まとめ

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

with one comment

はてなブックマーク - Sencha Touch 入門: Ext JS & Sencha Touch勉強会7月＠東京(2010/7/25 )のアジェンダ

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

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の記事

佐竹裕行

Written by 佐竹裕行

7 月 27th, 2010 at 2:44 pm

Posted in ExtJSチュートリアルｓｕｓ４版, Sencha Touch

Tagged with JavaScript, sencha, Sencha Touch, チュートリアル, 勉強会

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

with 3 comments

はてなブックマーク - Sencha Touch入門:Sencha Touch の付属サンプルCarouselを使ってSencha Touchのコツをつかむ

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

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

佐竹裕行

Written by 佐竹裕行

6 月 28th, 2010 at 3:39 pm

Posted in ExtJSチュートリアルｓｕｓ４版, Sencha Touch

Tagged with Carousel, Examples, Ext.setup(), JavaScript, onReady, sencha, Sencha Touch, チュートリアル, レイアウト, 入門

Ext JS +JQTouch = Sencha Touch!!

without comments

はてなブックマーク - Ext JS +JQTouch = Sencha Touch!!

Livedoorクリップ - Ext JS +JQTouch = Sencha Touch!!

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

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

Sencha – Sencha Touch Overview – HTML5 Mobile App Framework.

Read the rest of this entry »

佐竹裕行

Written by 佐竹裕行

6 月 18th, 2010 at 1:02 pm

Posted in 未分類

Tagged with Android, CSS3, ExtJS, HTML5, iPhone/iPad, JavaScript, js, sencha, Sencha Touch, Webアプリ, モバイル

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

without comments

はてなブックマーク - ExtJS入門39　ファイルをアップロードするフォームフィールド

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

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