エンタプライズアプリケーション開発フローでのSencha Cmdの利用

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

この記事は、US Sencha社ブログ Using Sencha Cmd in an Enterprise Application Development Workflow を翻訳したものです。

私は Sencha社のプロフェッショナルサービスチームの一人として、よくお客様が Ext JS や Sencha Touch フレームワークをベースとしたプロジェクトを立ち上げるサポートをしています。

多くの場合、Sencha Cmd はプロジェクトの基礎となります。強力な機能を解説するドキュメントもありますが、私は Sencha Cmd をアプリケーション開発フローに適合させる方法を説明することがとても重要だと思っています。

ワークフローを説明する前に、まずは Sencha Cmd そのものとなぜ Sencha Cmd は業務ソフトウェア開発に重要なのか説明します。

Sencha Cmdとは？

Sencha Cmd は、Sencha アプリケーションをビルドするためのコマンドラインツールです。この数年間 Sencha 社のツールボックスの一部になっていますが、最近では Sencha Cmd は Sencha アプリケーション開発の基盤へと成長してきました。

新しいプロジェクトのスケルトンの生成から製品用にアプリケーションを最小化しデプロイするまで、Sencha Cmd はあなたの Sencha プロジェクトを補助し、ライフサイクル全体を管理する機能を提供します。豊富なコマンドラインシンタックスと Ant インテグレーションがあり、 Cmd は企業のビルド環境に統合する場合でも、そのまま利用するに場合でも最適な環境です。

なぜ企業はSencha Cmdを利用するべきなのか？

ライフサイクル管理ツール自体の利点もありますが、Sencha Cmd を使って構築されたアプリケーションは標準的なアーキテクチャを持つという利点があります。このため、アプリケーションのメンテナンスとアップグレードは簡単になりますし、Sencha 開発者は全員アプリケーションを同じようにビルドすることになります。

ツールとアプリケーションアーキテクチャが標準化されると、企業は Sencha アプリケーションが全て社内の内部システムと一貫して統合することを予測できるようになります。開発とデプロイはより早く行えますし、開発者に必要な教育と知識の伝達にかかる時間や手間を削減できます。

Sencha 開発者がデスクトップとモバイルアプリケーションを構築するための一般的なワークフローを見てみましょう。

Sencha Cmd: アーキテクチャのワークフロー

Ext JS または Sencha Touch のどちらでアプリケーションを構築していても、開発フローはほとんど同じです。しかし、主にどちらか一方でだけ使われるコマンドもいくつかあります。

Sencha アプリケーションを作り始める時に、次のようなコマンドが必要になるでしょう。

sencha generate workspace
sencha generate app
sencha cordova/phonegap init
sencha upgrade and sencha app upgrade

sencha generate workspace

どの Sencha アプリケーションでも、最初の手順はワークスペースを作成することです。Senchaワークスペースは複数のアプリケーション／ライブラリ／フレームワーク (例えば Touch と Ext JS ) が共有しているリソースと並んで存在する環境になります。このため、Sencha Cmd がアプリケーションの様々な部分で利用されているページ／フレームワーク／共有コードを理解しやすくなります。また、これにより Sencha Cmd が一般的なタスクを自動化できるようになります。

Senchaワークスペースの作成：

sencha generate workspace ~/path/to/workspace

このコマンドはアプリケーション開発フローの最初の手順として、普通一回だけ必要になります。

sencha generate app

ワークスペースを作成したら、Sencha Cmd を利用して最初のアプリケーションアーキテクチャをスケルトンを作成します。これは Ext JS または Touch のデフォルト設定と全ての依存関係がセットされたアプリケーションを生成します。

sencha -sdk ~/path/to/extjs_or_touch_sdk generate app MyAppName ~/path/to/workspace/app

このコマンドを Ext JS または Touch SDK フォルダ内から実行する場合は、-sdk フラグを省略できます：

sencha generate app MyAppName ~/path/to/workspace/app

このコマンドも通常はプロジェクトの一番最初に一回だけ使用されます。しかし、もし同じワークスペース内で複数のアプリケーションを生成する場合には、このコマンドを何度も使うことになります。

sencha cordova/phonegap init

Sencha Touch を使ってモバイルアプリケーションを作成するお客様の多くは、Cordova や PhoneGap を使って、HTML5 アプリケーションをパッケージ化したいと思っています。Sencha Cmd でこれがとても簡単になります。

ドキュメントや Ross Gerbasi が書いた以前の記事ではより細かく説明していますが、Senchaアプリケーションに Cordova と PhoneGap を統合するのは、たった二つの手順になるほど簡単です：

アプリケーションの重要なメタデータが含まれている config.xml を作成して下さい（サンプルとリソースは上記の APIドキュメントのリンクをご覧下さい）
次を実行してください：
sencha cordova init [appId]
sencha cordova init [appId]
または
sencha phonegap init [appId]
sencha phonegap init [appId]
appId は、あなたの開発者ポータルの完全修飾の appID となります(例えば com.sencha.myapp)

Sencha CmdはCordova や PhoneGap コマンドラインのフックを通して、自動的に関連するアプリケーション部分をスケルトン化します。後の開発フローで sencha app build native を実行するだけで、Sencha Cmd が自動的にバンドルされたアプリケーションリソースを iOS, Android, その他のプラットフォーム用に構成されたプロジェクトにコピーします。

このコマンドは Sencha Touchアプリケーションを最初に Cordova または PhoneGap と統合する時だけ必要となります。

Sencha アップグレード

時折、アプリケーションを (1) 新しい Sencha Cmd のバージョン、または (2) 最新の Ext JS または Touch SDK にアップグレードする必要があることがあります。Senchaツールの最新バージョンを利用すると、最新のバグフィックスとパフォーマンス改善があるためとてもおすすめです。

Sencha Cmd を最新版にアップグレードするには、 sencha upgrade コマンドが利用できます：

sencha upgrade

自動的に新しい Sencha Cmd のバージョンを探して、インストールします。

アプリケーションを Ext JS や Sencha Touch の新しいバージョンにアップグレードするには、 sencha app upgrade コマンドを実行します。最新のフレームワークSDKをダウンロードして、次を実行してください：

sencha app upgrade ~/path/to/new/SDK

しかし、Sencha アプリケーションアーキテクチャの重要な部分をカスタマイズすることがあります。そのような場合はアップグレードがこのカスタマイズした部分に影響してほしくないことがあります。この状況に対処するため、Sencha Cmd にはいくつかのオプションがあります：

-noa (or –noappjs): app.js のアップグレードを無効にする
-nob (or –nobackup): アップグレード前のアプリケーションのバックアップを無効にする
-nof (or –noframework): Sencha Cmd のスケルトンだけアップグレードして、SDK はアップグレードしない

Sencha Cmd: 日々の開発ワークフロー

毎日の Sencha アプリケーション開発では、開発者はしょっちゅうブラウザでアプリケーションを見て、コードの編集して、アプリケーションのテストを様々な環境で行う必要があります。そのため、ほとんどの開発者は次のコマンドを日常的に利用します：

sencha web start
sencha app watch
sencha app build

sencha web start

これでアプリケーションが起動し、ローカルWebサーバーを起動させればすぐにブラウザで見ることができます。マシンに IIS や Apache の設定を行う必要はありません、Sencha Cmd に組み込まれています。

sencha web start

デフォルトで、Sencha Cmd はhttp://localhost:1841でアプリケーションをホスティングするWebサーバーを起動させます。詳しくはターミナルでオプションを確認して下さい。

sencha app watch

この時点でアプリケーションのコーディングを始めることができます。

とは言え、アプリケーションが次の項目を知るために、Sencha Cmd にコードのアップデートを定期的に知らなければなりません：

依存関係はどこに配置されているのか
クラスが追加・削除されたり、名前の変更があったかどうか
アップデートされたリソース (SASSなど) は再コンパイルする必要があること

sencha app watchを実行すると、この処理を合理化し、手動で Sencha Cmd にアプリケーションをリフレッシュさせる必要がなくなります。

次のコマンドをターミナルで実行すると…

sencha app watch

Sencha Cmd はファイルシステムの変更を監視します。アプリケーションが依存するものが変更されたことを検出すると、Cmd は自動的に bootstrapファイルと CSS を再コンパイルします。

sencha app build

アプリケーションである程度完成してくると、Sencha Cmd を必要なリソースを集めて、アプリケーションのテスト用あるいはデプロイ用のバージョンを作成するために使います。

sencha app build コマンドはあなたの企業の様々なデプロイのニーズに対応するために、いくつかのビルド環境を提供しています。Sencha Cmd にはアプリケーションビルドプロセスをさらに細かく管理するためのオプションがあります。

基本形式は比較的シンプルです：

sencha app build [options] [environment]

ビルド環境は次の様になります

testing: 製品化前のQAのため。全ての JavaScript と CSSソースファイルがバンドルされており、必要であればデバッグすることもできます。ただし最小化されていません。
production: 通常のWebサーバーでホスティングされ、複数のクライアント (デバイス) を扱う本番ビルドを作成します。ビルドにはオフライン対応のHTML5アプリケーションキャッシュを利用し、無線環境での差分アップデート機能も組み込まれています。
package*: Webサーバーなしで、通常のローカルファイルシステムから動作する、独立した再配布可能なビルド環境を生成します。
native*: まず ‘package’ ビルドを生成します。その後、ネイティブプラットフォームにデプロイできるように、ネイティブアプリケーションとしてパッケージングします。

よく使われるビルドオプションは次の通りです

-c (or —clean): ビルドを実行する前に、以前のビルドの出力を削除します
-d (or —destination): ビルド出力を書き込むディレクトリ
-r* (or —run*): ビルドするときにネイティブパッケージャーを自動的に実行させます

*注意: これらは Sencha Touch 専用のオプションです。

したがって、完全なアプリケーションのビルドコマンドは次のようになります：

sencha app build -c production

高度な Cmd ワークフロー

Sencha Cmd で使う重要なコマンドを説明しました。では、より高度な Sencha アプリケーションアーキテクチャの部分を少し説明しましょう。

Sencha Cmd がアプリケーションのビルド方法をカスタマイズする必要がある場合、次のことを理解している必要があります。

build.xml

Sencha Cmdがあなたのコードをコンパイルする方法を理解するためには、アプリケーションビルドプロセスを理解していることが重要です。

内部的には sencha app build コマンドはアプリケーションのルートにある “build.xml” の中にある Apache Antビルドスクリプトの中の基本的バリデーションを実行し、呼び出します。特に、このスクリプトの “build” ターゲットを呼び出します。このため、ビルドプロセス全体は検査、拡張、(必要であれば) 改善することができます。

設定ファイル

Sencha Cmd のコンフィグプロパティはビルドスクリプトに使用できるだけでなく、他の Sencha Cmd 機能も動作させることもできます (例えばコンパイラ) 。

ほとんどの場合は、プロパティのプリフィックスを見るとどこで定義されたのかが分かります：

app. — “app.json” と “.sencha/app/sencha.cfg” を見て下さい
workspace. — “workspace.json” と “.sencha/workspace/sencha.cfg” を見て下さい
framework. — Ext JS または Sencha Touch SDK の “cmd/sencha.cfg” を見て下さい
cmd. — Sencha Cmd インストールフォルダの “sencha.cfg” を見てください。

ビルドプロパティ

ビルドプロパティを設定する方法は様々で、最もシンプルなのはビルドプロパティファイルの一つを編集することです。ファイルの優先順位とどんな状況で読み込まれるのかを知れば、どのファイルを編集したらよいかを判断できます。

local.properties — このファイルがあれば、最初に読み込まれ、このプロパティの優先度は最も高く設定されています。このファイルはローカルでのみ適用され、ソースコントロールにコミットされるべきではありません。
Sencha Cmd configuration properties — Sencha Cmd インストールフォルダ内の”sencha.cfg”
.sencha/app/${build.environment}.properties — このファイルにプロパティを設定すると、アプリケーションのビルドの種類によって、プロパティに様々な値をセットすることが可能です。
- .sencha/app/native.properties
- .sencha/app/package.properties
- .sencha/app/production.properties
- .sencha/app/testing.properties
.sencha/app/build.properties — このプロパティは次に読み込まれ、ビルド環境ごとのプロパティよりも低い優先度になります。このプロパティは全て (またはほとんどの) 環境で利用されます。
.sencha/app/defaults.properties — このプロパティは最後に読み込まれる（デフォルト）値です。このファイルは Sencha Cmd の”所有”のもので、各リリースで新しいプロパティが追加されていくたびにアップデートされます。このファイルは定義されたビルドプロパティのセットへの参照となりますが、編集するべきではありません。

local.properties より高い優先度はコマンドライン経由で渡すプロパティだけになります。

例えば、Sencha Cmd は sencha app build native において JavaScript コードを圧縮するために YUI Compressor を使っていることはご存知でしょう。しかし、そのかわりに Google Closure や UglifyJS を使うのも簡単なのは知っていましたか？

~/.sencha/app/defaults.properties の 150 行目辺りに次の部分があります。

# enables / disables yui compression
build.compression.yui=0
 
# enables / disables closure compression
build.compression.closure=0
 
# enables / disables uglify compression
build.compression.ugilfy=0

さらに、~/.sencha/app/native.defaults.properties は YUI フラグをセットしてくれています。

# enable yui compression
build.compression.yui=1

他の最小化ツールを使うには、より高いレベルの設定ファイル (例えば ~/.sencha/app/native.properties) でそのプロパティに違う値をセットして下さい:

# disable yui compression
build.compression.yui=0
 
# enable closure compression
build.compression.closure=1
 
#or for UglifyJS
#build.compression.ugilfy=1

Cmd のパッケージ

Sencha Cmd の中で、比較的新しい機能はパッケージというコンセプトです。Sencha パッケージは簡単に配布したり使ったりできるテーマライブラリ、または自己完結したコードです。大まかに言えば、npm, Ruby gems, Python eggs と似たパッケージですが、Sencha 環境専用のものです。

Sencha パッケージは共通のユーザーエクステンションやテーマを共有するとてもいい方法です。多くの企業は独自のコアライブラリを構築するので、Senchaパッケージは複数のアプリケーションにおいて、コードを統合するとてもいい方法となります。

詳しくは sencha generate package のドキュメントをご覧ください。

まとめ

Sencha Cmd は Sencha のアプリケーションプラットフォームの基盤になりました。新しいプロジェクトのスケルトン生成から、製品版アプリケーションの最小化とデプロイまで、Sencha Cmd のライフサイクル管理機能は企業の開発フローに必要です。

Sencha Cmd がアプリケーションの生成とビルドに使う基本的なコマンドを学ぶと、開発者は標準的なアプリケーションアーキテクチャを既存システムとデプロイするプロセスをスムーズに統合できます。Senchaビルドプロセスのより高度な部分を理解すると、開発者が Sencha Cmd がコードをコンパイルする方法を完全にカスタマイズできます。

Sencha Cmd が Ext JS と Sencha Touch フレームワークにおいてどのように動作するかについては、各フレームワークの API 内のガイドをご覧ください。

Sencha