HOME > 開発者向けBLOG > Ext JS >  すべてが新しいSencha Cmd

Technology Note 開発者向けBLOG

Ext JS

すべてが新しいSencha Cmd

こんにちは、ゼノフィkotsutsumiです。

この記事は、US Sencha社ブログ “The All New Sencha Cmd”を翻訳したものです。

Sencha フレームワークのビルドツールでは、 内部的に多くのエキサイティングなことが起こっています。

数週間前、弊社はフレームワークを理解するJavaScriptコンパイラーという、 非常にエキサイティングな概念実証によって Sencha Cmd ("SDK Tools" または "Sencha Command"の新しい名前) の開発を再編成することを決めました。

最初の最適化による利益は、非常に有望なものだったので、 このテクノロジーのリリースを加速することを決め、 Sencha Comd チームは、できるだけ早くコンパイラーをラボの外へ運び出し、 あなたのアプリケーションのもとへ出荷することに注力しました。 もちろん、これまでバージョン2に対してレポートされた多くのバグについても、 できるだけフィックスするようにします。

またExt JSやSencha TouchでのSencha Cmdの使用法についての多くの新しいガイドを追加しました。 そのガイドはこちら にあります。

いつものように、forum の方へ、Sencha Cmdやドキュメントに関するフィードバックを送ってください。


Sencha 内部からの見解

いくつかの理由でSencha Cmd内の多くのツールをJavaで統合しました。 ビルドをする際にJavaが必須条件になりましたが、それに気付かないかも知れません。 社内の継続的インテグレーション(CI)システムへの最新の(そして大きな)アップグレード: この変更は、本当に我々の行動力を助けました。多分最もエキサイティングなハイライトです。 この新機能は、弊社製品チームがテストカバレッジの数字を大きくするだけでなく、 Sencha Cmdに入れることができたのです。

Javaによって、 CIシステムによるSencha Cmdの機能の全ての コードカバレッジの詳細を簡単にモニターできます。 ビルドサイクルの時間を抑えるために、多くの時間のかかる処理のパフォーマンス傾向を見ることもできます。 この報告ができてハッピーです。 現在の所、約70%のコードカバレッジ(行ベース)で、 ベータ プロセスの中で、カバーしていないコードを検査して、 カバレッジを大きく増やそうと思っています。

OK, 我々のことは充分話しました。では、いいものを紹介しましょう。


Sencha Cmd V3 の導入

以下は、Sencha Cmd V3 の主な機能の大まかなまとめです。 このうちのいくつかは拡張されています。 以前のバージョンを使っている人には幾分おなじみですが、 多くのものは完全に新しいか大きく拡張されています。

  • Ext JS と Sencha Touch 双方のアプリケーション全体を生成し、 アプリケーションを新しいMVCコンポーネントで拡張するコード生成ツール。
  • Sencha フレームワークの概念がわかっていて、 ソースを最小限のサイズにビルドすることができる、 フレームワークを理解しているJavaScriptコンパイラー。 将来的には、アプリケーションのロード時間を減らすために、 コンパイラーはSenchaフレームワークが提供する高水準な概念の多くを最適化します。
  • Sencha Mobile Packagerは、シームレスにWebアプリをネイティブ・シェルに「パッケージ」し、 簡単にAppストアで配布できる状態にする方法を提供します。
  • ページ間の共通のコードを検出し、何がアプリケーションの最終ビルドに含まれるかを調整し、 共通のコードを"パッケージ"に分割する、パワフルなコード選択ツール。- これらの機能には、 正確なビルドをするためのハイレベルなオペレーションのセットを使います。
  • ページまたはアプリケーション間で共有するのを支援するワークスペース マネジメント。
  • レガシーブラウザーにおいて、 CSS機能(border-radiusやlinear-gradientなど)を、 スプライトにコンバートするためのイメージ抽出機能。
  • アプリケーションまたはワークスペース レベル、 またはマシン上の全てのワークスペースに渡って、 コマンド オプションのデフォルトを指定できる フレキシブルなコンフィグレーション システム。
  • コマンドの内部動作を理解し、トラブルシューティングを容易にする、 強固なログ。
  • Apache Ant を統合。
  • あるページ特有であるか、ワークスペース上のすべてのページで共有されるかを 指定することができる、コード ジェネレーション フック。 (たとえば、コーディング規則や新しいモデルが生成されるときのガイドラインをチェックする)
  • サードパーティのネイティブ実行ファイルへの依存が非常に少ない。 これはそれぞれにIT承認を必要とするような大きな組織で役立ちます。 もう、HammerJS, Jsdb, Node は必要ありません。

コンパイラー vs ビルダー

以前のバージョンのツールでは、ビルドは基本的にファイルを結合するだけでした。 Ext JSでは、正しい順番でインクルードするため、ソースファイルのリストが入った "JSB"ファイルによって操作されていました。 このファイルは一部は手で、 一部はアプリケーションの依存関係を解決するツールによって メンテナンスしました。 Sencha Touch でも同様のapp.jsonが使われていました。

新しいコンパイラを使うと、この情報の全ては、アプリケーションのソースコードと フレームワークのソースコードから直接読み取られます。 ソース ファイル全体を見渡すことの主な利点の1つは、 コンパイラーがコード レベルの診断メッセージを提供できるということです。

Ext JSアプリケーションの完全なビューを取得するために、 コンパイラは、指定したマークアップのセクションの中で、 スクリプト タグを処理することもできます。 将来のリリースでは、 他の依存関係をロードする前に、往復するのを取り除くために 条件付きのロジックを直接マークアップの中に挿入できるようにします。

高水準なアプリケーション コマンドでコンパイラを使用できるようになっているので、 sencha app build のようなコマンドを使う分には、これまでと変わりはありません。 アプリケーションが sencha generate app で生成されたものではない場合や、 その構造に自分のコードを移行するつもりがない場合は、 直接コンパイラの機能を使う新しいコマンドがを使います。


Ext JS コード ジェネレーション

Sencha Touch にだけはすでにあった機能がコード ジェネレーションです。 Sencha Cmdは、今回、Ext JS においても、 Application, Mode, View, Controller に対して同じレベルのコード ジェネレーション 機能を提供します。

これは、プロジェクトの原型を手作りする必要がなくなることで、 新しいプロジェクトの立ち上げ速めることができます。 またチーム開発での一貫性を提供します。

プロセスは次のように開始します:

sencha -sdk /path/to/extjs generate app MyApp /path/to/app

生成されたアプリケーションを拡張する sencha generate modelsencha generate controller、 ビルドを生成する sencha app build などの いくつかの他のコマンドがあります。

Ext JSアプリケーションを生成するために提供される最も便利な機能の1つは、 Sencha Cmd が、アプリケーションのソース コードについて重要なメタデータを保持する、 "ブートストラップ" ファイルを管理することです。 このファイルは生成されるHTMLファイルでインクルードされ、 アプリケーションの全てのクラスをローダーに知らせるだけでなく、 ダイナミック ローダーに設定するパスを管理します。

以前は、このメタデータはフレームワーク コードに対してだけ利用できるものでした、 が、次のコードが機能できるようになりました。  

Ext.define(‘MyApp.foo.Bar', {
    requires: [
        ‘Ext.grid.*',    // this worked previously
        ‘MyApp.util.*',  // but now this works!
    ],
    // ...
});

さらに、 これらの情報は、ブートストラップファイルの中で管理されているので、 もうExt.Loader.setPathをコールする必要はありません。

唯一の問題は、クラスまたは名前空間を追加、削除、リネームした場合、 ブートストラップ・ファイルに含まれるメタデータが更新されないということです。 アプリケーションのメタデータを更新したい場合は、 アプリケーション フォルダで次のコマンドを実行します:

sencha app refresh

この機能は現在Ext JSのみをサポートしていますが、 以降のリリースにおいてSencha Touchもサポートする予定です。 ブートストラップ ファイルを生成する時のコンパイラーの使い方については、ガイドの Single-Page Ext JS Apps を参照してください。


ワークスペースを使ってコードを共有する

複数のページがある大きなアプリケーションを開発する際に、 ページ間でコードを共有できる方法が欲しいという要望がありました。 もっと一般的には、Ext JS と Sencha Touch フロントエンド間でコードを共有できるようにする、 という要望があります。

新しいワークスペース機能は、複数のページをまたいでコードや設定の共有を管理できるようにします。 ワークスペースには、.sencha フォルダー (内容はSencha Cmdによって解釈されます) があり、 ワークスペースは、Sencha Cmdがワークスペース内にある全てのページで共通する設定情報を見つけられる様にします。

まず行うべき事は、デフォルトの"classpath"を設定する事です。 そうするとすべてのコンパイル コマンドが共有コードを見つけられるようになります。 ワークスペースの classpath にフォルダーが追加されると、 ワークスペース内のページをコンパイルするときにそこが自動的に検索されます。


Sencha モバイル パッケージング

Sencha Cmd は、Sencha Mobile Packager の最新で素晴らしいバージョンを含んでいます。 これは、"Native Packager" の新しい名前で、 その名前は、Sencha Complete: Team. にバンドルされるエキサイティングなSencha Desktop Packager と合わせたものです。

Sencha Mobile Packager は Sencha Cmd の一部としてインストールされますので、 Sencha Cmd V3 をインストールすれば準備完了です。 またちょっとしたことですが: インストールするときにもう管理者権限はいりません。


コンパイラー

Sencha Architectで生成された構造であると指定して、 Ext JSアプリケーションをビルドするには、 次のようなコマンドを実行します。

sencha compile -classpath=app.js,app,ext/src \
       page -in=app.html -out=build/index.html

コンパイラーが動作するために必要条件が2つあります。

第一に、作成中の同期ローディングを排除するために、 必要に応じて、requires を使わなければなりません。 これは、現在のツールでも推奨条件となっていますので、 アプリケーションを変更する必要はないかもしれません。

第二に、いくつかの新しいディレクティブをマークアップ (HTML, ASPX, JSP, PHP…)ファイルに加える必要があります。

<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<script src="ext/ext-dev.js"></script>
<!-- </x-bootstrap> -->
<script src="app.js"></script>
<!-- </x-compile> -->

コンパイラがアプリケーション(この場合、"app.js")の"ルート"スクリプトを指定できるようにし、 これらのコメントは、開発時に使うフレームワークの"ブートストラップ"部分を無視します。 このファイルは、フレームワークの最低限だけを含み、ダイナミック ローダーの準備をします。 コンパイルされたアプリケーションには、 これらのファイルの全ては、 依存関係プロセスによってプルアップされます。 マークアップファイルのこのセクションは、 生成された、all-classes.js を指す1つのスクリプトタグに置き換えられます。

詳細を見る

フレームワークのカスタム ビルドを実行する必要があることがあります。 たとえば、パッチをソースに適用したいようなことがあるでしょう。 Ext JS 4.1.1a と 4.1.2a では、このコマンドを可能にするビルドスクリプトを出荷します。

sencha ant build

このコマンドは、 src フォルダーの内容から "ext*.js" ファイルの標準のセットをビルドします。

フレームワークをソースからビルドするために必要なコンパイラー コマンドを見るには、 提供されたbuild.xmlファイルを調べます。

コンパイラーを直接使ってカスタム ビルドをすることができます。 実例として、追加することを考えたことのあるビルド ext-all-no-charts.js を追加してみましょう。 コンパイラーで、次のようにすると作成できます。

sencha compile -classpath=ext/src \
        exclude -namespace Ext.chart and \
        concat -out ext-all-no-charts-dev.js and \
        -option debug:false \
        concat -out ext-all-no-charts-debug.js and \
        -yui \
        concat -out ext-all-no-charts.js

これを分解して、Sencha Cmd のいくつかの先進機能を見ることができます。 特に、"コマンド チェーン"の使用。 and コマンド結合子は、 Sencha Cmd に現在のコマンド カテゴリーに対する引数の処理を続行させます。 上記の例では、それは、compile コマンドです。

最初のパートでは、コンパイラーをロード アップして、 ソース フォルダー("classpath")を指定しています。 この例では、Ext JS SDK を展開したフォルダー名は ext です。

sencha compile -classpath=ext/src \

上記でclasspass内の全てのファイルがファイルの"カレントセット"に自動的にインクルードされます。 次に、チャートをインクルードしたくないので、名前空間を対象外にします。

exclude -namespace Ext.chart and \

次に(適切な順序で)ファイルを結合して、ext-all-no-charts-dev.js に出力します。

concat -out ext-all-no-charts-dev.js and

上記のコマンドで andを使ってチェーンしたので、 compile コマンドを継続しています。 デバッグコードを削除するために、optionsを再設定します。

-option debug:false \

ファイルのセットは同じですが、その内容は少々異なるものを連結し、 結果を、ext-all-no-charts-debug.js に出力します。

concat -out ext-all-no-charts-debug.js and \

別な、and により compile コマンドにもどり、 今度は、YIUコンプレッサーを有効に再設定しています。

-yui \

そして、圧縮されたものを ext-all-no-charts.js. に出力します。

concat -out ext-all-no-charts.js


Ext JS のテーマ構築

カスタム テーマのためにイメージ スプライトを作るのは少々複雑で、失敗することがありました。 レガシーブラウザーでもborder-radius や linear-gradient のようなCSS3機能の利点を 享受できるようサポートするために重要なので、このプロセスを刷新しました。

Sencha Cmd では、 まず、HTMLページをFirefoxやChromeなどのCSS3コンパチブルなブラウザーで開きます。 そうすると、テーマがイメージスプライトを生成する前に正しくレンダリングされていることを確認できます。

時間が経つにつれて、カスタム コンポーネント プロバイダーが、 コンポーネントと一緒に "テーマ構築" 定義ファイルを供給するようになることを希望します。 それにより、ユーザーはカスタム テーマの中で、そのコンポーネントを利用できます。


Beta版の入手

うまくいけば、あなたはSencha Cmdのベータ版を試用する時に興奮するでしょう。 Sencha Cmdがあなたのニーズを満たせるようになるために、 あなたのフィードバックを頼りにしてますし、それを大いに評価します。

Sencha Touch 2.1ベータ3で使うには、最新のSencha Touch SDKとSencha Cmdをダウンロードする必要があります。 Ext JSアプリケーションについては、Ext JS 4.1.1aかExt JS 4.1.2aが必要です。 これらのリリースには、Sencha Cmdで動作するように要求されることをなど、少しだけ変更されています。

これは主に、キー ファイルにコンパイラ指令(単なるコメント)を追加し、 Sencha Cmdで必要となるsencha.cfgファイルを追加したものです。

Ext JS 4.1.1a は Ext JS の product download ページ からダウンロードできます。

Ext JS 4.1.2a は、Sencha Support Portal から入手できます。

最新のベータ版の更新は、フォーラムの ここ にあります。

この原稿執筆時点でのSencha Cmd V3 のダウンロード先は次のとおりです。

Windows
Mac OSX
Linux 32
Linux 64


おわりに

私たちは、新しいSencha Cmdを利用した声を楽しみにしています。 良くも悪くも教えてください、私たちはそれを改善できます。 このバージョンで、Sencha フレームワークを使った開発を簡潔に、そして強化してもらいたい。

PAGETOP