Home

code:x

テーマとSass

  • Posted by: Kotsutsumi
  • 2014/12/16 火曜日 0:00:35
  • Ext JS 5

Sencha Advent Calendar 2014 16日目の記事です。

ども、@kotsutsumiです。

DYSTOPIA

@martini3oz さんが、記事冒頭に書いていたので、同じ感じで。 先日大阪出張の最終日に、THE KIDDIEのライブに行ってきました。

音楽もさることながら、揺紗やユウダイを始め、THE KIDDIEのメンバを話をしていると、ホント普段周りにいる考え方と色々違って、本当に刺激になるし、クリエイターという共通のステージでやっていくにあたり、色々考えさせられるものですし、 僕にとっては、プログラム以外はあんまり遊びといった遊びもしないので、唯一の趣味でしょうか。精神的なリフレッシュになります。 クリスマスの25日には、渋谷公会堂でのライブ、嫁さんと2人でいけそうなので、楽しみにしっかり仕事したいと思います。


さて、本日は、テーマとSassについてです。

ADCなんで、あまり突っ込んだネタはいつもどおりかけないんですけどw まず、Sencha Ext JSにおける、テーマ、そしてSassの違いを理解しましょう。

結局は、CSSでDOMを装飾する

Sencha Ext JSを利用しようが、他のライブラリを利用しようが、要するにDOMをCSSで装飾して見た目を表現しているのは、みなさんもご存じかと思います。 ただ、注意が必要なのは、Sencha Ext JSを利用して外観を変更して行くに当たり、ここで止まることです。

「どうせCSSでしょ、Sassも使った方が楽だよね」

くらいの感覚でのぞみ

「Sencha Ext JSは、外観変更するのが、やりにくい」

だの抜かす馬鹿者がいるんですが、決してそんなことはありません。 すぐに素の状態からオレオレでやった方がいいみたいな発想になることは、今の時代非常に危険ではないかと思います。

Sass / Compass そして、テーミングフレームワーク

Senchaのテーマは、Sass / Compassを利用した上になりたるテーミングフレームワークで形成されています。 もちろんローレイヤーでは、一つ一つのCSSクラスに対して装飾を行っています。

その構造は、マニュアルにも記載されているとおり、下記のような構造になっています。

よくみかける、青いテーマはNeptuneと呼ばれるテーマで、Ext JS 5から導入された白っぽいテーマは、Crispといい、Neptuneテーマを継承しています。 テーマは、ベースのテーマを決定し継承することができます。

さぁ、テーマを作らねば!いや、それは間違い

CSSのテーマと呼ばれる物は、Wordpressを始め着せ替えるためのCSS群を差しますし、それはExt JSでも同様です。 ただ、自分のアプリケーションに対して、テーマを必ずしも作る必要があるかどうかを、これをみて判断してください。

部分的な修正などは、sassを直接書いて対応できる

スクリーンショット 2014-12-16 15.54.53

テーマと作らずとも、必要な部分に必要なCSSを適用する程度で良い場合は、Sassを記述します。

srcディレクトリ以下に、main.scssなどファイルを配置して、

sencha app build

をかければ適用されます。

結局、生でCSSやSassを書くの?

書いてもいいですが、Sencha Ext JSの良い部分は、マルチブラウザ対応ですよね。 見た目を変更するためのMixinsが用意されています。 例えば、ボタンの見た目を変えたいときに、イチイチ背景を指定したりしません。

http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.button.Button

実際にSassには、以下のように記述してmixinを利用します。

@include extjs-button-medium-ui(
    $ui                                 : 'mybutton',
    $color                              : #666,
);

これだけでは、適用されず、uiに指定した名前を、ボタンコンポーネントのuiコンフィグオプションに指定する必要があります。

Ext.widget('button', {
    ui: "mybutton"
});

もちろん、mixinが用意されていない物は、Sassで対応していきます。

.#{$prefix}container-desc {
  color       : #999;
  margin-top  : 10px;
  font-size   : 12px;
}

テーマは?

テーマは、上記の様にSassで作っていくと、いくつも共通な部分が出てくると思います。 それらをまとめてテーマにするのは、再利用可能ですし、非常に効率的なので、その場合はテーマを作成すると良いでしょう。

テーマは、Sencha Cmdのパッケージ管理下で管理されます。

sencha generate theme my-custom-theme

Sencha Cmdでテーマを生成すると、

<pre>packages/my-custom-theme</pre>

が生成されます。 ディレクトリの仲には、nodeのnpmのようなpackage.jsonが配置されています。

{
    "name": "my-custom-theme",
    "type": "theme",
    "creator": "anonymous",
    "summary": "Short summary",
    "detailedDescription": "Long description of package",
    "version": "1.0.0",
    "compatVersion": "1.0.0",
    "format": "1",
    "slicer": {
        "js": [
            {
                "path": "${package.dir}/sass/example/custom.js",
                "isWidgetManifest": true
            }
        ]
    },
    "output": "${package.dir}/build",
    "local": true,
    "requires": [],
    "extend": "ext-theme-neptune"
}

最後のextendで、どのテーマを継承するかを指定できます。

テーマを利用するように設定する

テーマのアクティブ化は、app.jsonで行います。

"theme": "my-custom-theme",

後は、Sassを記述するだけなので、同じ手法で見た目を変更していくことができます。

まと麺

いやぁ、昼飯のつけ麺、上手かった。

さて、よく勘違いしがちな、「Ext JSの見た目を変更=テーマを作らなくてはいけない」ってことではない、ということが分かっていただけたでしょうか。 さらに、Sassを利用している点、mixinたちは非常に優秀にできています。 Ext JSがサポートしているブラウザでの見た目を保証してくれるわけですね、JSはマルチブラウザ対応なのに、CSSは、自力で… って対応してるのにバカっぽいですよね。 積極的に、mixinを利用して装飾していくことで、JSコードのように、マルチブラウザ対応が行われるという点も安心感があります。

そして、もちろんIE8も対応しているので、CSSで表現できない部分には、自動的に画像スライサーが画像を生成配置してくれますので、見た目の互換性はばっちりです。

2015年は、Sencha カンファレンス 2015 を始め、様々なイベントを、SenchaやXenophyでも計画しています。 来年は、このSencha製品に関しても、様々な良いUPDATEを皆さんにお伝えできそうなので、楽しみにしていてください。

明日は、@uno_yuta さんです。

進化したクラスシステム

師走なのか、なんなのか、忙しすぎてブログ書く時間がありません…。
ということで、スキップエントリーでも書いてしまおうかと思ったけど、
ちょっとでもいいから書いておこうかなぁと、振り絞って書きます。

粗いの勘弁w

Sencha Ext JS 4、および Sencha Ext JS 5は、Sencha Coreと呼ばれる
コアパッケージから成り立っています。

Ext JSは、パッケージ(ローカルnpmみたいな)管理されていて、
テーマ、チャート、そして、Sencha Coreなど、利用するパッケージを指定して、
Sencha Cmdが上手く配置してくれる仕組みがあります。

まぁ、Sencha Cmdのパッケージの話し始めると1日終わるんで、どっかで。

んで、クラスシステムなんですけど、4と5で色々変わっていまして、
本当は、骨の髄までしゃぶるくらいリスト化してやろうとおもってたんですが。

無理でした…時間的に。

なので、とりあえず、これだけはというのを。

プライベートメンバを作成する

これ、確か昔にどっかで書いたかもしれませんが、Ext JS 4の場合、Ext.defineの第二引数に関数オブジェクトを指定して実現するんですね。
具体的には、以下のようになります。

Ext.define('MyApp.hoge.Hoge', function() {

    // privates
    prvProp = 1;

    return {

        pubMethod: function() {

            // アクセス可能
            console.log(prvProp);

        }

    };

});

// アクセス不可能
Ext.create('MyApp.hoge.Hoge').prvProp;

まぁ、ここ1年くらいで、Ext JS 4 から入った人、Ext JS 5最近さわり始めた人は、
Ext.defineが何となくクラスを定義するものであることは、理解しているようですが、
その詳細までは、意外とテンプレで覚えてるだけで、こういうことができるのは覚えておくと良いです。

また、脱線しますけど、クラス定義後の処理は、第三引数に関数オブジェクトを指定します。
先ほどのクラスの場合だと

Ext.define('MyApp.hoge.Hoge', function() {

    // privates
    prvProp = 1;

    return {

        pubMethod: function() {

            // アクセス可能
            console.log(prvProp);

        }

    };

}, function() {

    // ここ

});

これは、あくまでクラスが定義された後に実行されるコールバック関数なんですけど、
クラスが生成されたタイミングではありませんので、ご注意を。
一般的にアプリケーション開発では、使わないかもですね。

さて、Ext JS 5では、上記のプライベートクラス作成が、もっと楽にできるようになっています。

Ext.define('MyApp.hoge.Hoge', {

    privates: {

        prvProp: 1

    }

});

// アクセス不可能
Ext.create('MyApp.hoge.Hoge').prvProp;

privatesメンバに、オブジェクトで、プライベートにしたいメンバを定義するだけです。
コードとしてもスッキリしますね。

まぁ以上なんですけど、似たような物に、staticsがあります。

Ext.define('MyApp.hoge.Hoge', {

    statics: {

        TRACE: 0,
        DEBUG: 1

    }

});

console.log(MyApp.hoge.Hoge.TRACE); // 0

まぁ、定数定義するときも、こんな感じで。

JavaScriptをちゃんと理解していれば、Prototypeチェーンや、スコープチェーンなど
上手く使いこなして、なんとでもなるんでしょうけど、最近nodeのコードとか色々みてても、
やはり、書けるのと、可読性が高いのは、別な話で、パッと見てなんとなく、こーだろうなって
予想が付きやすいコードが、どれだけ開発にやメンテナンスにおいて重要かを痛感しています。

そういう意味では、Sencha Coreクラスシステムは、mixins、requires、uses、extendなど含めて
コードも見やすく、動的ローディングも自動で行ってくれるので便利ですね。

ES6で、JavaScriptの仕様が拡張されていくなかで、その仕様を追いかけることも非常に重要な
行為ですが、なんども言いますが、Sencha Ext JSは、今日現在できる現実解を提示していると思います。

夢や理想、こうなるからすごい!とかいってて、うんこーど書いてるエンジニアも結構いるんですけど、
普通に、まともなエンジニアなら、Sencha Coreも他のライブラリも適材適所で使いこなせるはずなんですけど、
まぁその程度ってことなんですかね。

そういう意味では、Sencha Coreも、表面だけではなく、今回のように細かい使い方を是非テクニックとして
覚えて行ってもらえるといいなと思います

Sencha Coreのソースは、Ext JSのソース内に格納されています。
ext/packages/sencha-core

最後に、話は変わりますが、まだまだ作りかけなんですけど、とりあえず、nodeでおんなじ様なクラスシステム使いたいなぁ
と思って、CLI Frameworkってのをnpmで作りました。

興味のある方はどうぞ:
https://www.npmjs.org/package/cli-framework

ということで、義務は果たせたかな?w

Sencha Ext JS 5 開発環境構築

この記事は、 Sencha Advent Calendar 2014 の1日目の記事です。

いやぁ、ブログも書かなくなったものです。 日々のことは、TwitterかFacebookで終わり、そんな時代なんですかね。

さて、今年も終わりますが、Sencha Ext JS 5 開発環境構築と題して、まずSencha Ext JS 5 を初導入する場合の開発環境構築をおさらいしましょう。

前回の記事:Sencha Ext JS 5 で新規アプリケーションを生成する とほぼ丸かぶりで、なんだか進歩ねーなーという感じですが…

Sencha Ext JS 5 をダウンロードする

Sencha Ext JS は、商用ライセンスと、オープンソースライセンス(GPLv3)があります。 用途に合わせて選択してください。

まぁ、とりあえずプログラマが試すのであれば、GPLv3版で問題ないでしょう。 さて、このGPLv3版、どこにあるの?ってことなんですが、以外と忘れてしまいがち、みつからない、などもあるようで。

スクリーンショット 2014-11-28 15.39.05

画像をリンクにしておきました、ページの一番下にいってDownloadすれば手に入ります。

商用ライセンスを持っている方は、サポートページ(https://support.sencha.com/)からダウンロードしてください。

スクリーンショット 2014-11-28 15.42.28

ダウンロードしたら、1つ注意点:ダウンロードしたソースコードをドキュメントルートなどに配置することは、ない。ということです。 昔のExt JSは、jQueryのようにライブラリとして、ドキュメントルートに配置するところからはじまりましたが、いまは、違います。

~/Library/Sencha/ext-5.0.1

のように、すきなところに配置しておいてください。

Sencha Cmdを導入する

スクリーンショット 2014-11-28 15.44.36

Sencha Cmdをダウンロードして、インストールします。 インストーラーでインストールするので、つまずくことはないでしょう。

ターミナルやDOSプロンプトで

$ sencha

とコマンドが利用できることを確認できれば、OKです。

ドキュメントルートで、環境を構築する。

ドキュメントルートで、

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

とコマンドを実行すると、先ほどダウンロードして配置したSencha Ext JSを用いて、Sencha Cmdがアプリケーションのひな形と、ビルド環境が構築されます。

ブラウザでアクセスすると、次のような画面が表示されます。

スクリーンショット 2014-11-28 15.54.48

後は、appディレクトリ以下のソースコードをガリガリいじったり、足したりしてアプリケーションを開発します。

Sencha Ext JS 5の開発にSencha Cmdは必須ということ

ソースコードを追加したり、Sassのコンパイルを行ったり、Sencha Ext JS 5の開発において、Sencha Cmdがないと何もできません。

最終的に、ビルドしてプロダクション用コードをはき出すときも

sencha app build

とします。

sencha ap b

でも、同じです、短く打ちたいひとは、どうぞ。

別なドキュメントルートに、

build/production/MyApp

の内容をコピーすれば、Sencha Ext JS 5と、自分が作ったコードが圧縮され、動的ローディングも行われない非常にハイスピードなアプリケーションができあがります。

Sencha Cmdは、これ以外にもSassのコンパイルをファイル更新監視で行ってくれる、

sencha app watch

や、CordovaやPhoneGapを利用したハイブリットアプリケーションの作成、簡易Webサーバーの起動など、色々な機能があります。

是非、以下のドキュメントを一読して、利用していただきたい。

http://docs-origin.sencha.com/cmd/

まとめ

  • Sencha Ext JS 5は、商用ライセンス・GPLv3ライセンス
  • 開発にSencha Cmdは必須
  • ソースコード:開発時は動的ローディング、プロダクションは一括ローディング

Sencha Ext JS 5は、HTML5アプリケーションを作る上で、DOM操作などの低レイヤーから指向を解放してくれるだけでなく、大規模なアプリケーション開発に欠かせない、開発フローが確立されています。

また、様々な技術を包括的にサポートしてくれているため、開発者が作りたい物の設計やコーディングに集中することができます。大変残念なことに、一部のエンジニアの人は、カスタマイズしにくいとか、複雑だとか、挫折したりなどもあるようですが、これは非常に残念なことですね、色々。

構築しなくてはならないアプリケーションによって、全てにおいてSencha Ext JS 5が適しているとは思いませんが、エンタープライズ向けのHTML5アプリケーションを作成するにあたり、ライセンスを購入して、トレーニングを受けて、サポート受けて開発しても、まともな開発であれば、おつりが来るくらいの価値があると思います。

逆に言えば、それだけこのHTML5の開発は、変化が激しく対応に追われる、学習をし続けなくてはいけない、などの要素が多いのかもしれません。しかし、Senchaの開発スタッフと話をしていても、彼らは、現実的なエンタープライズ開発の解を提供していると思います。

理想も求めながら、現実的に今日現在できる、そして、それを効率的に開発していく選択肢として、Sencha Ext JSは、これからも進化し続けていくことでしょう。まだまだエキサイティングな、報告がしていけるように、我々も邁進します。

次回の、私の記事は、進化したクラスシステムとして、クラスシステムの概要と進化点について書きたいと思います。

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で生成したことのない人は、是非試してみてください。

Home

Search
Feeds
Meta

Return to page top