Home

code:x

Sencha Ext JS 5 で新規アプリケーションを生成する

  • Posted by: Kotsutsumi
  • 2014/7/6 日曜日 10:40:07
  • Ext JS 5

2014年、初投稿のようです、お久しぶりです、小堤です。

さて、Sencha Ext JS 5がリリースされてからしばらくたちますが、未だに
「Ext JS Trialが消えない」とか、抜かしてる人もいるようで、いやいや、何言ってんの、って話なんですけど、
確かにやり方はっきりさせとかないと、「せっかくライセンス買ったのにExt JS Trial消えないよぉ」なんて人が生まれないようにメモを残しておきます。

まず、Sencha Cmdをインストールするのは、よいですね?
ライセンス購入していなくても、Sencha Ext JS 5を試すことはできます。

Sencha Cmdで次のように、コマンドを実行することで、アプリケーションのひな形を生成することができます。

sencha generate app -ext MyApp ./

オンライン上から、Sencha Ext JS 5のトライアル版をダウンロードしてきて、配置、ひな形の生成を行ってくれます。

しかし、この状態でアプリケーションを実行すると、次のように「Ext JS Trial」という文字が表示されます。

screen-20140706

ライセンス購入して、サポートページからSencha Ext JS 5ダウンロードしたのに、「あれ?それつかわねーの?」的な感覚になる人もいるようです。
「手動で上書き?」とか、まぁそれでも消えません…、さてどうしましょうか。

というのが、今日の本題です。

答えは簡単で、次のコマンドでアプリケーションを生成してください。

sencha -sdk ~/Library/Sencha/ext-5.0.0 generate app MyApp ./

-sdkで、サポートページからダウンロードしてきた(ライセンス購入者のみ)Sencha Ext JS 5を指定します。

これだけです。そうすると、先ほどの「Ext JS Trial」は、表示されません。

screen-2014070602

めでたしめでたし!…..

….

…. 「俺、既にExt JS Trial 表示されたまま、開発しちゃってるんですけど… 」

絶対いるよねっ!こういう人!!

ってことで、一度Trial表示されたところに、SDKを指定してアップデートする方法も、載せておきますね。

sencha app upgrade ~/Library/Sencha/ext-5.0.0

以上です。

Happy coding with Sencha Ext JS 5 !!

Sencha Advent Calendar 2013 まとめ

sencha-logo この記事は、 Sencha Advent Calendar 2013 の25日目の記事です。

Sencha Advent Calendar 2013 まとめ、です。

本年も、1日もかけず25日目を、迎えることができました。

ありがとうございました。


2014のSencha動向

先日、お知らせしたとおり、ExtJS Data-Driven Application Design が、無事リリースされたようです。 近日、Amazonなんかにもでてくるんじゃないでしょうか。
Ext JS Data-driven Application Design [ペーパーバック] Kazuhiro Kotsutsumi (著) にて、掲載されました。

はい、宣伝終了。

来年は、今後ますます急増するであろう、エンタープライズにおけるタブレット端末ソフトウェア開発、そのBYOD環境を提供する、Sencha Space がまもなくUSでリリースされます。

詳細に関しては、今後、ゼノフィでも追加情報を随時出していきますが、Sencha Spaceは、Sencha Touchのみならず、ただのWebページから、jQueryなどHTMLベースであれば、セキュアにBYODとしてコンテンツを提供・管理することができるようになります。

iOS / Android / BrackBerry のマルチOSで、HTMLベースアプリケーションを、BYODでセキュアに提供したい要件には、ぴったりです。

さて、Sencha Spaceは、まだ姿形がお見せできなく、「正直どんなもんなの?」っていう感じのところもあるでしょう。 これは、先ほど申し上げたとおり、順次お伝えしていきます。

一方で、開発者が気になるのは、Ext.next といわれてきた、Sencha Ext JS 5、そして、Sencha Touch 3の動向でしょう。

来年の早い段階で、Sencha Ext JS 5に関しては、何らかのアナウンスがあるでしょうし、 カンファレンスで紹介された、タッチイベントの対応、MVVC、グリッドの中にコンポーネントいれこめるガジェット機能など、目を見張る新機能についても、触れる日が近そうですね!

もちろん、可能な限り早くみなさんにアナウンスします。

Sencha Touch 3 に関しても、既に開発は進んでいるようです、まだまだベータ版が出てくる段階では、なさそうですが、カンファレンスで紹介されたExt Coreの統合が注目されますね。

Sencha Spaceの画面が、Sencha Touch 3でできているところを見ていると、開発が進んでないこともなさそうですし…

既に、Sencha Touch 2.3.1でTizenの対応が行われているので、Sencha Touch 3 の動向ともに、Tizenに関しても併せて注目していきましょう。

みんなが想像するような、Sencha SpaceのWindows Phone、Tizenなどの対応拡大…、コアの共通化による、ハイブリッドHTML5アプリケーションの開発手法(Ext JS / Sencha Touchを別々に作るのではなく、Sencha Touchだけでデスクトップもまかなうシーンが出てくるかもしれませんね..)

そうです、**大人の事情ではっきり言えないことが多いのです! **が、まもなくです!!

2014年のイベント

2014年になると、次々Senchaがらみのイベント発表があるでしょう(あるんです)

私事ですが、html5jえんぷら部」のスタッフになりました。近日名前が掲載されるはずです。(川田部長はじめ、スタッフの方よろしくお願いします。) Sencha UGはもちろん、html5jえんぷら部としても、Senchaに関する発信を行っていきたいと思いますので、是非イベントの際は、お集まりください。

1月には、html5jえんぷら部で、Senchaがらみの講演(ちょっと)、2月にも絡ませてもらう予定です。 2月には、デブサミのオープンジャムもSencha UGとして参加します。 3月には、Senchaに関するお祭りを日本でできたらいいな、と、鋭意調整中です。

来年は、イベント、そして私含め、Senchaを広げていくために、露出が増えるように、皆さんの力をかりながらやっていこうと思います。 そして、ゼノフィで行ってきたコンサルテーションや、大規模なショーケースの発表、まだまだ不確定ですが、2014年はいってから、次々情報発信していきたいと思います。

エンタープライズ開発におけるSenchaの優位性を的確にお伝えしていく中で、ビジネスとしての人材選定の基準となるであろうSencha技術者認定試験も、日本でも開始したいですね(ねっ!大変なの!!w ここら辺も揃ってくると、PHP技術者、Java技術者のように、JavaScript技術者ではなく、Sencha技術者というカテゴリが生まれてくるかもしれませんね。

来年は、今年以上に 日本のエンタープライズHTML5開発をSenchaで。 に尽力します。

最後に

xmax

技術記事を1日でも記述するのは、なれてない人も挑戦してもらって、なんとか25日間継続できました。

みなさん、ありがとうございました。

メリークリスマス(。◕ ∀ ◕。)

[PACKT] ExtJS Data-Driven Application Design(洋書) 執筆完了&出版のお知らせ | Sencha Advent Calendar 2013 – 14日目

  • Posted by: Kotsutsumi
  • 2013/12/14 土曜日 0:00:00
  • Sencha
cover

※画面は開発中のものですw

この記事は、 Sencha Advent Calendar 2013 の14日目の記事です。

今日は、書籍のお知らせです。

今年の初めから、うにょうにょ書いていて、やっと形になりそうになったのでお知らせします。


ExtJS Data-Driven Application Design

この書籍は、既存のデータベースのデータを管理する画面を構築するまでを、ステップバイステップで解説した書籍です。

今日現在で確定している書籍情報は下記の通りです。

  • 出版社: PACKT Publishing
  • ISBN-10: 1782165446
  • ISBN-13: 978-1782165446
  • 発売日: 2013/12/xx

PACKT Publishingからでますので、もちろん 「 洋 書 」です。

全部英語でございます。

まぁ、そうはいっても画像やコードものってますので、Sencha Ext JSでアプリケーションをゼロから作る手順がちゃんと書かれています。

そして、Sencha社からもおすすめコメントもらえるようなので、そのうち掲載されるでしょう。

書籍の概要

Chapter 1, データ構造(Data Structure)

この章はデータベースの基盤を準備することに集中しています。既存している会社のデータ構造を扱って、SQLとテーブルをMySQLで作成します。

This chapter will focus on preparing the basic foundations of your database. It will deal with an existing virtual company’s data structure and the making of SQL and tables in MySQL.

Chapter 2, アプリケーションの設計を計画する(Planning Application Design)

この章はプロジェクトの環境を開発しながら、Sencha Cmdを紹介します。単純なアプリケーションの設計を学んで、画面をURLで管理できるようにAjaxの要求を最適化して、Ext DirectとExt.util.Historyを利用することを学びます。

This chapter will develop the environment of the project while at the same time introducing Sencha Cmd. You will learn to design a simple application and optimize Ajax requests in order to use Ext Direct and Ext.util.History to control the screen with URL.

Chapter 3, データ入力(Data Input)

データを入力するためにフォームを作成して、そのデータをExt Direct経由でサーバーに送信します。その上、この章では、入力の状況を監視することとExt Directがサーバーサイドで検証すことを学びます。

This chapter will discuss making a form to input data, then transmit that data to a server via Ext Direct. You will also learn in this chapter to monitor the state of the input and learn how Ext Direct will validate it on the server side.

Chapter 4, リストと検索(List and Search)

この章はほとんど3章で読み込んだデータを表示することについて書かれています。ユーザーはデータを検索したいと思いますので、この章でデータ検索を紹介します。

This chapter is mainly about displaying data that was read in Chapter 3. However, users will no doubt want to search the data, so this chapter will also introduce data searches.

Chapter 5, レポート(Reporting)

この章はレポートの実装について、それをダッシュボードに四つの異なる図の種類で表示します。

This chapter will focus on the implementation of the report displaying it with four different types of graph on the dashboard.

Chapter 6, データ管理(Data Management)

最後の章はデータインポート・エクスポートの実装(データの復元・バックアップのための実装)について説明します。

This final chapter will focus on the implementation of the data import/export – done to restore or backup the data.

まとめ

人生初の、洋書執筆は、周りの力を借りてなんとか完成させることができました。

Sencha Ext JSのアプリケーションHOW TO本であり、より実践的なアプリケーションの構築について書かれていると自負しております。

Sencha Ext JSで個々のコンポーネント制御はできても、アプリケーション設計がなかなかできないというかたは、ご一読を。

Sencha Ext JS 4 – Ext Directの通信エラーハンドリング | Sencha Advent Calendar 2013 – 9日目

  • Posted by: Kotsutsumi
  • 2013/12/9 月曜日 0:00:32
  • Sencha

sencha-logo この記事は、 Sencha Advent Calendar 2013 の9日目の記事です。

さて、いままでSencha Touchについて書いてきましたが、1回くらいはSencha Ext JSのネタを入れたいなぁと思います。

今日は、Ext Directにおける通信エラーハンドリングについてです。

Ext Directと題していますが、ここでお話するのは、Ext.form.Panelクラス(フォームパネル)のsubmit時処理についてです。


通信エラーハンドラ、failure

人の書いたコードを見ていると、Ext.form.Panel.submitを呼び出した時のコードが、次のようになっていることがあります。

var f = Ext.create("Ext.form.Panel"); // f はフォームパネルコンポーネントオブジェクト

f.submit({
    success: function() {
        // 処理
    }
});

「おい、failureどこ行った?」

と思うと、次のようなコードもあります。

f.submit({
    success: function() {
        // 処理
    },
    failure: function() {
    }
});

「・・・。」

そんなに、failure嫌いですかね(笑)

まぁ、正直「書くことがない」っていう回答が多いようですが、本当にそうでしょうか。

APIドキュメンテーションをみてみましょう。

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.Basic

もう、僕が何かを語る必要もない気がしますが…

myFormPanel.getForm().submit({
    clientValidation: true,
    url: 'updateConsignment.php',
    params: {
        newStatus: 'delivered'
    },
    success: function(form, action) {
       Ext.Msg.alert('Success', action.result.msg);
    },
    failure: function(form, action) {
        switch (action.failureType) {
            case Ext.form.action.Action.CLIENT_INVALID:
                 Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
                 break;
            case Ext.form.action.Action.CONNECT_FAILURE:
                Ext.Msg.alert('Failure', 'Ajax communication failed');
                break;
            case Ext.form.action.Action.SERVER_INVALID:
               Ext.Msg.alert('Failure', action.result.msg);
        }
    }
});

failureに設定した、コールバック関数の引数には、第二引数にactionオブジェクトが渡されます。 そのプロパティであるfailureTypeを判定しましょう。

  • Ext.form.action.Action.CLIENT_INVALID
  • Ext.form.action.Action.CONNECT_FAILURE
  • Ext.form.action.Action.SERVER_INVALID

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.action.Action-static-property-CLIENT_INVALID

が返された場合、それぞれ何が原因でエラーが起きているのかを特定することができます。

以上ですwww

まとめ

やっぱり、「failure後で書こう」と思って、そのままリリースしたり、特に書くことがないと放置したりしているソースをみていると、最低限上記のような対応を記述しておいた方がいいかもしれません。

プロジェクトでやるなら、Formクラスを継承した抽象クラスを作成して、エラー処理を実装させ、共通化します。

p.load({
    success: function(form, ret) {
    },
    failure: Ext.Function.pass(p.failureFn, [p])
});

failureFnが抽象クラスで定義されているメソッドです。 任意の引数を与えたい場合は、上記のように、Ext.Function.passを利用しましょう。

これで、今日から、放置気味なfailureとも、お別れです。

是非、活用してください。

Sencha Touch 2.3 – Ext Directの利用 | Sencha Advent Calendar 2013 – 8日目

  • Posted by: Kotsutsumi
  • 2013/12/8 日曜日 0:00:02
  • Sencha

sencha-logo この記事は、 Sencha Advent Calendar 2013 の8日目の記事です。

Sencha TouchでExt Directちゃんと使っていますか? いまだに、Ext.Ajax.requestなんかでやってないですよね?

今回は、Ext Directを利用する手順とNestedアクション対応です。


Ext Directを使おう

いまさら、Ext Directの説明をする必要はないでしょうが、ざっくりまとめるとExt Directとは、次のようになります。

クライアントのブラウザから擬似的にAjaxを利用して、サーバーサイドのクラスメソッドを呼び出すことができる、擬似RPC

今回は、コンポーネントと連携させるわけではなく、純粋にサーバーサイドのメソッドを呼び出す手順までを紹介します。

ルーター設置

まず、ルーターが必要です。

Ext Directのリクエストは、すべてこのルーターに対してなげられます。 Ext.Ajax.requestのように、自分でなげさきのURLを毎回指定することはありません。 どのようなリクエストも、ルーターになげられるわけですが、そのときにサーバーサイドのどのメソッドを、どういった引数で実行してくれ!というったことがパラメーターで一緒になげられます。

ルーターは、このパラメーターを解析して、実行し正しくJSONを返す必要があります。

もちろん、このルーターを自作することもできますし、使い勝手のよいルーターをZEROから作ってもらってもかまいませんが、Senchaでは、

Ext.Direct Pack

とが提供されていて、これを使って実装することができます。

スクリーンショット 2013-11-27 18.40.51

また、それぞれの言語や、フレームワークに対応したサードパーティー製のルーターも多数存在します。

http://www.sencha.com/forum/showthread.php?67992-Ext.Direct-Server-side-Stacks

Direct Packをダウンロードして解凍すると、各言語毎にディレクトリが分かれていますが、今回はPHPを利用します。 PHPディレクトリごと、ドキュメントルートに配置します。 もちろん、Sencha Cmdでワークスペースとアプリケーションはできあがっている前提ですよっ。

余談ですが、cacheディレクトリがあってそこにAPI定義をキャッシュするようになっているので、cache/api_cache.txtに書き込み権限をつけてあげてくださいね。

設置は、それでおわり。

プロバイダー登録

Direct Packには、api.phpとrouter.phpがあります。 api.phpをたたくと、サーバーサイドにどんなクラスとメソッドがあるかを返してくれます。

api.phpのルーターまでのURLを調整します。

$api->setRouterUrl('php/router.php'); // default

“php/”を追加しました。

classesディレクトリにPHPクラスを配置して、api.phpでクラスメソッドを追加つれば、公開されるって仕組みですね。 まぁともかくこのapi.phpをindex.htmlが呼び出すように書き足します。

    ...
    <script id="microloader" type="text/javascript" src="php/api.php"></script>
</head>

PHPからは、下記のようなJavaScriptコードが出力されています。

Ext.ns('Ext.ss'); Ext.ss.APIDesc = {"url":"router.php","type":"remoting","actions":{"Echo":[{"name":"send","len":1}],"Exception":[{"name":"makeError","len":0}],"Time":[{"name":"get","len":0}],"File":[{"name":"list","len":1,"serverMethod":"listFiles"},{"name":"add","len":2,"formHandler":true}]},"namespace":"Ext.ss"};

定義だけあっても、利用はできません。 このExt.ss.APIDescに設定されている情報をクライアント側に登録する必要があります。

記述すべきは、app.jsです。

Ext.application({
    ...
    requires: [
        'Ext.direct.*',
        'Ext.MessageBox'
    ],
    ...
    launch: function() {

        Ext.direct.Manager.addProvider(Ext.ss.APIDesc);

        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();
        ...

上記のように修正します。 requiresにExt.direct.*を追加し、launchで、Ext.ss.APIDescを登録します。 これで準備は完了です。

RPC利用

せっかく設定したので、実際に呼び出してみましょう。 本来アプリケーションの制御は、コントローラーに記述すべきですが、サンプルですのでコンポーネント内部で処理をします。

MyApp.view.Main(app/view/Main.js)に直接記述します。

Ext.define('MyApp.view.Main', {
    ...
    config: {
    ...
        items: [
            {
            ...
                items: [{
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Welcome to Sencha Touch 2'
                }, {
                    xtype: 'button',
                    text: 'サーバーサイドメソッド実行',
                    handler: function() {
                        Ext.ss.Echo.send("サーバーに送信して、そのまま返ってくるメッセージ", function(msg) {
                            alert(msg);
                        });
                    }
                }],
                ...

ボタンを一つ追加して、handlerに処理を記述します。

Ext.ss.APIDescで定義されたサーバーサイドのクラスメソッドは、プロバイダー登録が正常に終了する任意のオブジェクト下に、サーバーサイドと同じメソッド名の関数オブジェクトを生成します。 今回は、Ext.ssしたになります。

この生成オブジェクトをネームスペースと言います。

呼び出しを行うには、単純にクライアントサイドに生成されたメソッドを呼び出すだけですが、なんらかのコールバックが必要な場合は、引数+1個目にコールバック関数を設定することで、非同期処理実行後の任意処理を記述することができます。

また、このExt.ss.Echo.sendのことを、Direct関数といいます。(directFn)

Storeに対して設定したり、Formに対して設定することで、これらのコールバック処理さえも記述することなくデータを読み込んだり、送信したりすることができるよになります。

が、今回は長くなるので割愛します。

まとめ

  • Ext Directを利用するには、ルーターが必要
  • ルーター介してRPCを利用するには、サーバーサイドの側の公開メソッド仕様を取得し、プロバイダー登録する必要がある。
  • プロバイダー登録が終われば、サーバーサイドと同じメソッド名の関数オブジェクト、指定された名前空間に生成される。
  • 生成された関数オブジェクトをダイレクト関数という
  • ダイレクト関数は、引数+1個目にコールバック関数を指定することができる。

Ext Directは、これ以外にも便利な機能がいっぱいありますが、今日紹介したように非常にシンプルな仕組みでもあります。 Ext JSでは、結構利用してもらえるようになってきたかなと思いますが、Sencha Touchでも使えますので、是非チャレンジしてみてください。

Ext.Ajax.requestによるURLの煩雑化を防ぐことができますし、実は自動的に通信の最適化も行われています。(コンバイン機能)

最初から、この設定して作るだけで通信処理がすっきりするなら、使わない手はないですよね。

Sencha Touch 2.3 MVC 2 – プロファイル機能 | Sencha Advent Calendar 2013 – 3日目

  • Posted by: Kotsutsumi
  • 2013/12/3 火曜日 0:00:14
  • Sencha

sencha-logo この記事は、 Sencha Advent Calendar 2013 の3日目の記事です。

前回に引き続きMVCベースでSencha Touchのアプリケーション作成を学んでいきましょう。

今回は、プロファイル機能です。


コントローラー設置

まずは、前回設置しなかったコントローラーを設置してみましょう。

Sencha Cmdを利用して、Mainコントローラーを生成します。

sencha generate controller Main

app/controller/Main.jsが生成されていることを確認します。

スクリーンショット 2013-11-27 16.52.54

生成されたMain.jsの中身は、以下のようになります。

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {

        },
        control: {

        }
    },

    //called when the Application is launched, remove if not needed
    launch: function(app) {

    }
});

Mainコントローラーが動作していることを確認するために、Mainコントローラーのlaunchメソッドにalertメッセージを入れておきましょう。

...
launch: function(app) {
    alert("Mainコントローラーのlaunchメソッドです。");
}
...

このコントローラーが、動作するように、Ext.applicationに設定を記述します。

Ext.application({
    ...
    controllers: [
        'Main'
    ],
    ...

viewsのように、配列をcontrollersに設定します。

これでアプリケーションを実行してみてください。 きっと、alertメッセージが表示されるはずです。

iOSシミュレータのスクリーンショット 2013.11.27 17.01.49

プロファイル機能

今回は、ここで紹介するプロファイル機能についてがメインなので、コントローラーの使い方はやりません。

コントローラーの記述の仕方は、上記のように生成したあとrefsなどコンポーネントクエリー駆使してイベント捕まえてハンドラガシガシ書いていけば、アプリケーションはできあがあります(そんな簡単なもんじゃないって?w)。

上記のように、Ext.applicationに直接controllersを指定して、コントローラーを登録し実行することはできました。

しかし、「iPhoneの時は、こっちのコントローラー動かしたいし、iPadの時は、こっちのコントローラー使いたいなぁ」ってことがあります。 あるんです。

もちろん、一つのコントローラーで次に紹介するプラットフォーム藩邸を用いて、if文羅列してもいいのですが、スマートに記述したいですよね?

プラットフォーム判定

Sencha Touchでは、動作している環境を判定することが簡単にできるクラスが用意されており、これらのプロパティを参照して判定を行うと便利です。

Ext.osクラス

APIドキュメンテーションをみれば、一目瞭然ですね。

if (Ext.os.is.Windows) {
    // Windows specific code here
}

if (Ext.os.is.iOS) {
   // iPad, iPod, iPhone, etc.
}

プロファイル機能は、この判定を利用しながら、どのクラスを利用するかを動的に切り替えることができる機能です。

実行クラスの動的変更

では、早速「Phone環境」なのか「Tablet環境、またはデスクトップ」なのかを判定して、ビューとコントローラーを切り替えてみましょう。

まず、「Phone環境」の判定

Ext.os.is.Phone

を利用します。

「Tablet環境、またはデスクトップ」は、

Ext.os.is.Tablet || Ext.os.is.Desktop

とします。

では、これをどこに記述するのか?

Sencha Cmdで生成したディレクトリに、app/profileというディレクトリがあります。

ここに、Phone.jsTablet.jsを作成します。

Phone.js

Ext.define('MyApp.profile.Phone', {
    extend: 'Ext.app.Profile',

    config: {
    },

    isActive: function() {
        return Ext.os.is.Phone;
    },

    launch: function() {

        var me = this;

        me.callParent();
    }
});

Tablet.js

Ext.define('MyApp.profile.Tablet', {
    extend: 'Ext.app.Profile',

    config: {
    },

    isActive: function() {
        return Ext.os.is.Tablet || Ext.os.is.Desktop;
    },

    launch: function() {

        var me = this;

        me.callParent();
    }
});

もちろん、作っただけでは動きませんので、Ext.applicationに設定を記述します。

Ext.application({
    ...
    profiles: [
        'Tablet',
        'Phone'
    ],
    ...

先ほど記述した、controllersは削除してください。

profilesに、配列でクラス名を指定すると、自動的に読み込みが行われます。

さて、このままPCブラウザで実行するとどうなるでしょうか?

答えは、「Tablet.jsのlaunchが実行される」です。

Phone.jsのlaunchは実行されません。

なぜでしょうか?

各プロファイルクラスの、「isActive」メソッドに注目してください。 プロファイルクラスは、このisActiveメソッドオーバーライドし、その戻り値によって実行するプロファイルを内部で切り替えています。

今度は、2個コントローラーを用意して、コントローラーも切り替わるようにしましょう。

Sencha Cmdを利用してコントローラーを生成します。

sencha generate controller phone.Main
sencha generate controller tablet.Main

app/controller/phone/Main , app/controller/tablet/Main クラスが生成されていることを確認し、先ほどのようにalertメッセージを設定して、どこが動いているのかわかるようにします。

Ext.define('MyApp.controller.phone.Main', {
    ...
    launch: function(app) {
        alert("Phone用Mainコントローラーのlaunchメソッドです。");
    }
});

Ext.define('MyApp.controller.tablet.Main', {
    ...
    launch: function(app) {
        alert("Tablet用Mainコントローラーのlaunchメソッドです。");
    }
});

さて、ここまででコントローラーは、用意できましたが利用するための宣言ができていません。 もちろんExt.applicationからcontrollersを外したので。

今度は、それぞれのコントローラーを設定するために、Ext.applicationのコンフィグオプションに直接記述するのではなく、 各プロファイルのconfigに記述します。

Phone/Tabletそれぞれ設定を行うと次のようになります。

Ext.define('MyApp.profile.Phone', {
    extend: 'Ext.app.Profile',

    config: {
        controllers: ['Main']
    },

Ext.define('MyApp.profile.Tablet', {
    extend: 'Ext.app.Profile',

    config: {
        controllers: ['Main']
    },

こう設定することで、実行環境によって動的に実行されるコントローラー、また、コントローラー以外にもビューやストア、モデルも切り替えることができます。

デバイスタイプ指定

動作確認をするのに、ほとんどの場合PCブラウザで開発を行うと思います。

そのときに、この動作環境をプログラムレベルで修正するのではなく、簡単に切り替えることができます。

URLに?deviceType=プロファイル名をつける。

です。

具体的には、

?deviceType=Phone

のようにクエリーストリングに記述すれば、プロファイルが切り替わって実行させることが可能です。

まとめ

Sencha Touchは、ワンソースマルチデバイスがキーワードです。

もちろん、Sencha Touch SDKが対応していますが、開発を行うにあたり動作環境においてUIを切り替えたり、その振る舞い(コントローラー)を切り替えたりできる「MVC + プロファイル機能」は、 最初の段階で仕込んでしまう、おきまりの実装になるのではないでしょうか。

プロファイルって出てきて、よくわからんなぁと使ってなかった人は、是非試してみてください。

Sencha Touch 2.3 MVC 1 – 導入編 | Sencha Advent Calendar 2013 – 1日目

  • Posted by: Kotsutsumi
  • 2013/12/1 日曜日 0:00:25
  • Sencha

sencha-logo この記事は、 Sencha Advent Calendar 2013 の1日目の記事です。

今年も、始まりました、Sencha Advent Calendar 2013

今日から25日間、ブログ間リレーでSencha製品に関する記事をお届けしていきます。

第1日目は、Sencha Touch。 僕が、Sencha Ext JS ではなくて、いきなりSencha Touchから触れるのは珍しいんじゃないですかね、はい。

今日は、Sencha Touchを導入してアプリケーションを作成していくところから、MVCの構造を確認する簡単な内容です。


アプリケーション生成

まずは、アプリケーションを作成します。 Sencha Cmdは、もちろん入ってますね?

-sでSDKを指定しますが、ここでは、Sencha Touch 2.3.1が該当のディレクトリに配置されているものとします。

sencha -s ~/Library/Sencha/touch-2.3.1 generate app MyApp ./

生成すると、以下のようにディレクトリとファイルが生成されます。

スクリーンショット 2013-11-27 15.04.50

MVC構造

Sencha TouchにおけるMVC構造は、Sencha Ext JSと、そんなに大きく異ならないのですが、一緒ではありません。

アプリケーションのブートポイントは、Ext.applicationメソッドを利用して設定されたところから始まります。

これは、app.jsに記述されています。

Ext.application({
    ...
    launch: function() {
        // すべての準備ができるとここが呼び出されます。
    }
});

古いサンプルなどでは、Ext.setupや、Ext.onReadyなどの記述もありますが、 まず、Ext.setupは、このExt.applicationに吸収(内包)されているので、直接利用することは、通常ありません。

また、Ext.onReadyもありますが、これは、アプリケーションを作成する場合に利用することはないということを覚えておいてください。

もちろん、簡単なサンプルや動作確認のためにExt.onReadyは利用されます。

ビュー

ビューは見た目を表現する部分ですが、Sencha Touchでは、ビューは、コンポーネント(コンテナー)クラスを指します。

このアプリケーションで利用したいコンポーネントを、Ext.applicationで設定する必要があります。

Sencha Cmdによって既に設定されていて、

Ext.application({
    ...
    views: [
        'Main'
    ],
    ...
});

viewsに配列で指定されています。 このクラス名のファイルを、app/view下にMain.jsを配置することで、自動的に読み込みが行われます。

コントローラー

同じように、コントローラーもcontrollersとして、配置することができますが、Sencha Cmdで出力したソースコードには記述がありません。

なぜでしょうか?

もちろん、記述することはできませんが、これについては、次回の「Sencha Touch 2.3 MVC 2 – プロファイル機能」で触れたいと思います。

ビルド

Sencha Touchのアプリケーションは、開発が終わるとビルドを行い、ソースコードの結合・ミニファイ、そしてSassのコンパイルなどを行いデプロイします。

これらの作業をSencha Cmdで行うには、次のように記述します。

sencha app build

コマンドを実行すると、buildディレクトリが生成されます。

スクリーンショット 2013-11-27 15.20.03

build/production/[アプリケーション名]

上記のディレクトリにビルドされた一式が出力され、これを任意のWEBサーバーに配置するということになります。

まとめ

Sencha Touch、まず何すればいいのか?

MVCでやるの?Ext.onReadyでサンプル動かすところから?

最初非常に悩むかもしれませんが、今日紹介したように、これからSencha SDKを利用する方は、必ずSencha Cmdを入れて、ここでやったようにひな形を生成してアプリケーションの開発を開始しましょう。

また、それさえも苦手な方は、先日リリースされたSencha Architect 3を利用することで、マウス操作でUI構築することができます。

まだ、Sencha TouchをSencha Cmdで生成したことのない人は、是非試してみてください。

Sencha製品販売開始3ヶ月、そしてBryntum製品販売へ

  • Posted by: Kotsutsumi
  • 2013/3/8 金曜日 0:19:48
  • Sencha | 日記

ども、小堤です。

僕が適当に書く、このcode:xも結構長く続いてるんですな。
既に3ヶ月くらい放置状態っていう…

さて、今日はタダの日記。

昨年、12月1日より米Sencha社のライセンス販売を開始しました。
sencha-large

当初、諸々の事情があり、Ext Japanも、昨年12月31日を持ってライセンスの販売ができなくなりました。
まぁ、俗に言う大人の事情というか、あきれて物も言えないというか、最終的には法的な理由により、云々。

まぁそもそもExt Japanは、給料もらっていたわけでも、役員だったわけでもなく、そもそも株式会社でさえないので、
ただのボランティア扱いの上、勝手にメンバの首きられるという、まぁ人生でも希な経験をさせてもらったわけですが。
今となっては、どーでもいいですね。

Senchaライセンスの販売開始は、端的に言うと日本でライセンスが購入できなくなる、という事実を回避するために奮闘していました。
ライセンスを販売して、うっしゃっしゃーと儲けるためでもないし、そこまで儲からないし。
ただ、Sencha Ext JS / Sencha TouchならびにSencha製品が、必須な人、大好きな人の声を無視したくなかったし、
ここ数年間、Ext Japanへの不満を僕にずっとぶつけてきた人たちに、なんとか状況を変えて喜んでもらいたかった。

そして、少しか会社としてその役に立てているのでは無いかと実感している。
思った以上に、ライセンスも順調に売れている。

さらに今後はライセンスの説明を明確にするために、我々はSencha社から承認してもらったライセンスケースをどんどん紹介していく予定である。
そういったクソ面白くもない日陰作業ばっかりしていて、正直ウンザリすることも多いし、
クソみたいな汚い話、エロい話ばかりで、本質見失っているバカどもを相手にする日々も正直しんどいところではある。

しかし、先日Jack Slocumとメールでチョコチョコ話をした。
5年ぶりだ。

彼は、何よりExt JSの生みの親であり、僕は尊敬している。
(今年、また会えるかもしれないので、非常にテンションは上がっているのだが)

彼と5年前に約束した、Ext JSを日本で広める、ユーザーの表向きでは無く、本質的な役に立つビジネスにしていく、それが少しだけかなってうれしく思っている。
だから、変なのが増えてきても、「仕事だから…」っていう理由だけじゃなくて、ちゃんと役に立ててもらいたいから、
バカにされようが、変な話してくるバカどもがいようが、我々Xenophyだけでも真摯に取り組んでいきたいと考えている。

そして、3月10日、営業日では3月11日からスウェーデンのBryntum社の製品販売を開始する。
inner_shadow_5001

この会社は、JSユニットテストツールのSiesta、Sencha 製品の強力なコンポーネントを開発して提供している会社だ。

我々Xenophyは、彼らと非常に仲が良く、コンセンサスも取れている。
今年は彼らとの連携も日本で行っていく予定だし、もちろんSenchaでつながっているので、ビジネス的にも、テクノロジー的にも非常に面白い展開ができるのではないかと、すごく興奮している。

ここ数ヶ月、非常に激変でXenophy社員の数も、倍になっている。

そして、今年は大阪事業所が開設する。

すべて、予定通りにはいかないかもしれないけど、我々Xenophyは【実現力】が社訓だ。
泥臭くても、馬鹿にされても、どんなにしょぼくてもダサくても、ちゃんと形にして実現していくこと、それができる会社であり、そういうメンバーで構成されている
僕にとって最高に誇らしい組織である。

一人一人の努力や、思いは小さいし、何もできないことがほとんどだし、投げ出したくなることの方が圧倒的に多い。

だけど、どこぞの誰かさんたちのように、表向きだけ綺麗にして、レンコンのように、ピーマンのようにスッカラカンでは、組織として存続できないし
何より、会社組織を利用する(作る、運営する)本来の目的から逸脱している。

反面教師にしながら、明日は我が身。

最初に思ったこと、行動し始めたときの考え、気持ちを大事にしながら、現実に降りかかってくる汚らしい事実を1つずつ解決して、
しっかりとしたサービスを提供できるように、成長していきたいと思っている。

Xenophy社内の人間だけでなく、周りで、金銭的にも精神的にも支えてくれるすばらしい会社の人たちに恵まれて、
このステージで仕事がちょっとでもできてることを、誇りに思っています。

だからこそ、言いたくないことも言うし、やりたくないことも一生懸命やります。
人を傷つけたり、だましたり、自分のことしか考えない人間を、全力で潰し排除します。

大人なので全部をぶっちゃけて話せないのは、非常に悔しい思いもありますが。

僕らにできることは、本当に小さいけど、守るべき大切な物は、そんなにみんな変わらないと思うんです。
ご飯がくえることや、子供や彼女の笑顔みれることとか、すげーくだらない、ちょっとしたことのために
これだけ真剣に取り組んでいるつもりですし、それは僕だけでは無く、まわり全員で。

だから、みんな大好きです。

今後ともよろしくお願いします。

Ext JS 4 アプリケーション開発における便利関数と使いどころの紹介など

Sencha Advent Calendar 2012 の24日目の記事です。

ども、小堤です。
なにやら、Sencha界隈では色々変化がありまして、僕も製品販売やらなにやら、執筆やらなにやらいつも通り追われている感じです。
おかげさまで、色々な方たちとおもしろく仕事をさせてもらっているので、感謝しております。

さて、Sencha Advent Calendar 2012の記事ということで、何か書きましょうか。
そもそも、Advent Calendar自体をやったことがないので、人生初にして絡まれての参加という最悪の参加の仕方ですがw ご容赦ください。

今回は、いつもSencha Ext JSで開発を行っている中で、「えっ?知らないの?」っていう人が一人でもいなくなるように、
便利な関数などを紹介したいと思います。

Sencha CmdでExt JSプロジェクトを生成する

sencha-tools-250

いきなり、話は変わりまして(笑)
Sencha Cmdのお話です。
Sencha SDK Toolsなどいろんな呼ばれ方してきましたが、取り急ぎ現状はSencha Cmd、「センチャコマンド」です。
Download Sencha Cmdからダウンロードしてくださいね。
コマンドのパスは、ちゃんと通しておいた方がよいでしょう。
初期設定は、マニュアル見ましょう。

取り急ぎ、Macのターミナルで解説します。WindowsやLinuxの人は、読み替えてください。

Sencha Ext JS のプロジェクトを生成するに当たり手順は次のようになります。

  1. 空のディレクトリを作る
  2. Sencha Ext JSを配置する
  3. 生成する

空のディレクトリを作る

とりあえず、ホームディレクトリにプロジェクト用のディレクトリを作成します。

/Users/kotsutsumi% mkdir MyApp;
/Users/kotsutsumi% cd MyApp;

Sencha Ext JSを配置する

次に、Sencha Cmdは、sencha generateを使って生成するのですが、SDK、つまりSencha Ext JSのディレクトリで生成するわけではないので、次のように、MyAppディレクトリ下にextディレクトリを作成して、Sencha Ext JSを配置します。

こんな感じ。

20121223image1

この状態で、次のようにコマンドラインで入力してプロジェクトを生成します。

sencha -sdk ./extjs-4.1.3 generate app MyApp ./

そうすると、MyAppというプロジェクトが作成されます。もちろんMVC形式です。

20121223image2

extjs-4.1.3ディレクトリは、お役御免です。
削除して構いません。
もちろん、生成時のパスをextjs置き場を作ってそこに指定すれば、そんなことはしなくても良いです。
また、最初からディレクトリ名をextにしておくと削除する手間が省けます。

Sencha Cmdの設定情報は、.senchaディレクトリに格納されています。

生成する

さて、プロジェクトは出来上がりました。
開発中は、生成されたindex.htmlをWebサーバー経由で叩きながら、開発をゴリゴリ行います。

最終的にビルドするには、次のようにコマンドを実行します。

sencha app build

そうすると

/Users/kotsutsumi/MyApp/build/MyApp/production

に、ビルドされた全てが配置されます。

20121223image3

all-classes.jsには、あなたが開発したコードとSencha Ext JSで使われているクラスファイルたちが圧縮されて配置されます。

ここが、Google Closure ComplierとかYUI Compressorを自前でたたいたときの違いですね。
まぁSencha Cmd自信が、YUI Compressor使ってるんですけど。

この作業はMVCで作るなら最初にやっておいた方が吉ですね。
(俺←公開した人)

Ext.Object

Ext.Objectクラスというのがあります。Ext JS 4からJava Scriptのビルトインに寄生しなくなったんですねー。
さて、これらの基本的なクラスは、実際開発していて、自分は関係無い、Sencha Ext JS内部で使われているんでしょ?
って思っている開発者多いですねー。ダメです。

なぜなら、あなたは既にライブラリが用意している関数を無駄に低速なもので準備しているからです。

実際、知りませんけどw
よくコンサルなどでみていると、なぜある物をわざわざ作ったあげくにバグってるか・・・、しかも遅いとか見かけます。
PHPや他の言語でもそうですが、ビルトイン関数やライブラリの準備した関数・メソッドは積極的に使っていくべきです。

オブジェクトのキーを列挙する

次のオブジェクトが存在ます。

var o = {
   name: 'Kazuhiro Kotsutsumi',
   age: 33,
   live: 'Tokyo'
};

このキーだけを配列でほしいシーンで、次のように配列を生成することができます。

var arr = [];
for(key in o) {
    arr.push(key);
}
console.log(arr);

実行結果は、["name", "age", "live"]です。

いや、これでいいならいいんですが、さっき言ったとおり便利関数はありますんで、ソッチ使いましょ。
同じことをExt.Object.getKeysを使って処理します。

var arr = Ext.Object.getKeys(o);
console.log(arr); // ["name", "age", "live"]

値からオブジェクトのキーを取得する

また、値からキーを取得したいときは、getKeyを利用します。

var arr = Ext.Object.getKey(o, 'Tokyo');
console.log(arr); // 'live'

オブジェクトのサイズをカウントする

オブジェクトのキーがいくつあるのかカウントします。

var cnt = Ext.Object.getSize(o);
console.log(cnt);  // 3

Ext.Function

処理を遅らせる

一覧の処理を遅らせて実行するには、setTimeoutを使う方法があります。

setTimeout(function() {
    console.log('delayed');
}, 1000);

setTimeoutの場合、スコープの制御が行えません。まぁこねくり回せばできますが。

そこで、deferを使いましょう。

Ext.Function.defer(function(){
    console.log('delayed');
}, 1000);

スコープ切り替えたり、引数与えたりもできます。
詳しくは、ドキュメントを。

関数委譲関数を生成する

はい、イミフですね。
次の処理を見てください。コントローラーでのボタンクリックリスナーを設定しているところです。

this.control({
    'myapp-panel button[action=hoge]': {
        click: this.onButtonClick
    },
    'myapp-panel button[action=foo]': {
        click: this.onButtonClick
    }
});

ボタンアクション、hogeとfooでほとんど同じ処理をしたのですが、どちらのボタンが押されたかを判定したい場合を想定しています。

this.onButtonClickの処理内容は次のようになります。

onButtonClick: function() {
    alert('xxxx Button');
}

xxxxにhogeかfooかを判定するにはどうすれば良いでしょうか。

ボタンの場合、btnが第一引数に渡ってくるので、そのプロパティをうにゅうにゅあさるのも一つの手です。

onButtonClick: function(btn) {
    // btn.xxxx.xxxで探して判定
    alert('xxxx Button');
}

しかし、もっと簡単な方法があります。

Ext.Funciton.passを利用します。

this.control部分を次のように書き換えます。

this.control({
    'myapp-panel button[action=hoge]': {
        click: Ext.Function.pass(this.onButtonClick, ['hoge'])
    },
    'myapp-panel button[action=foo]': {
        click: Ext.Function.pass(this.onButtonClick, ['foo'])
    }
});

こうすると

onButtonClick: function(name) {
    // nameに名前が入ってくる
    alert(name + ' Button');
}

こうかけます。
Ext.Function.passは、このようにイベントリスナーの引数を調整することができます。
もちろん、元々の引数もちゃんと受領できますんで、詳しくはドキュメントみてね。

おわりに

Sencha Cmdについては、これからMVCで作るなら最初から、ココで紹介した程度でよいので導入しておくと
Compass/Sassも一緒にやってくれるので、便利ですよ、デプロイが。
さらにプラグイン作り込めば、まぁAntと連携もできるんで、そういうことです。デプロイ手順を自動化できます。

関数については、この他にも、Ext.String、Ext.Functionなど多数の便利関数が、Ext JS / Sencha Touchには備わっています。
まぁつまりは、Ext Coreに内蔵されているんですが、まだExt JS 4ベースのExt Coreはリリースされていませんねぇ。
Sencha Touchとの整合性に苦労してるようですが・・・。

Ext JS 4 実践開発ガイドにも、便利関数についてはある程度書いてあると思いますが、最近はさらに進化していますので
ドキュメントも追いかけるとよいでしょう。

時々、Sencha Ext JSできます!Sencha Touchできますけど何か?と僕のところに来る人いますがw
この基礎関数も知らなかったらどん引きしますので、ご注意くださいw 恥ずかしエンジニアしかいませんけど、そういうのは。

また、これ以外のデバッグテクニックをExt JS 4 実践開発ガイド2にもできるだけ書いたつもりです。
全部は書き切れませんが、毎回。今回書店にも並ぶようにしますので(書店が並べてくれるところならw)是非、お手元に。

ということで、責務は果たしたぜ!

gitでGitHubのgh-pagesのように完全分離したブランチを作る

  • Posted by: Kotsutsumi
  • 2012/12/23 日曜日 19:40:57
  • 日記

ども、小堤です。

JSをビルドしたものを配置するproductionリポジトリをつくたかったのですが、
普通にブランチ切っても、そりゃコミットするまで、他のブランチに切り替えてもファイル表示されちゃうんですよね。

コレジャナイ

まぁ、GitHubのgh-pagesのように、完全に分離した形で切り替えたかったのですね。
なので、次のようにproductionブランチを作れば良いことがわかりました。

git symbolic-ref HEAD refs/heads/production
rm .git/index
git clean -fdx
echo "production" > index.html
git add .
git commit -a -m "First pages commit"
git push origin production

他の環境での作業(開発チームの別な人)とか、自分がCheckoutし直したときは、

git pull --rebase;
git branch -a;
git checkout -b production origin/production;

してあげて、リモートブランチからちゃんとローカルに持ってきてあげればOK。

たったこれだけのことをしたかっただけなのに、無知は時間を食う・・・。

Home

Search
Feeds
Meta

Return to page top