Sencha Cmd コンパイラが追跡するメタデータには様々な使い方があり、本ガイドではそのうちいくつかを取り上げます。こうした使い方をするために、コンパイラは複数の異なる方法でメタデータをエクスポートしフォーマットしますが、これについても見ていきます。
前提条件
先に進む前に以下のガイドをご覧になることをお勧めします。
meta出力データの生成
コンパイラが提供する新しい特徴の1つは、様々なフォーマットでメタデータをエクスポートできることです。この機能を使ってext.js 「bootstrap」ファイルが作成されます。ファイルには様々なクラスと、フレームワーク内のすべてのファイルに関するメタデータブロックが含まれます。
コンパイラがmetaコマンドを使ってエクスポートできるメタデータの形式には次のものがあります。
- クラスのエイリアス
- クラスの別名
- ローダーパス
- ファイル名
- 定義
カスタムブートストラップを生成する
注意:このプロセスは、Sencha Cmdで作成されたアプリケーション用に自動的に処理されます。Sencha Cmdで作成されたアプリケーションを使用していない場合、このセクションでは同様の結果を手動で達成する方法を説明します。
metaコマンドの第一義的な使い方は、独自の「bootstrap」ファイルの作成です。このファイルにより、フレームワークは、フレームワークコードと同様の認識レベルをお使いのアプリケーションコードについて持つようになります。
ブートストラップファイルは、マークアップファイルと一緒に保存すると管理が簡単です。うまくいかない場合は、読み進んで関連パスの管理方法をご覧ください。クラスパスのソースフォルダにマークアップファイルがある場合、コンパイラにブートアップファイルを無視するよう伝える必要があります。これは-ignoreスイッチで行います。
sencha compile -classpath=sdk/src,app -ignore bootstrap.js \
...requiresでワイルドカードサポートを有効にする
"ext-debug.js"の最後には2つの関数呼び出しが含まれます。
Ext.ClassManager.addNameAlternateMappings({
"Ext.draw.engine.ImageExporter": [],
"Ext.layout.component.Auto": [],
...
});
Ext.ClassManager.addNameAliasMappings({
"Ext.draw.engine.ImageExporter": [],
"Ext.layout.component.Auto": [
"layout.autocomponent"
],
...
});requires文でワイルドカードを使えるのは、この2つのメタデータがあるためです。すなわち、
Ext.define('MyApp.App', {
requires: [
'Ext.grid.*'
],
...
});独自のコードでワイルドカードを使うために必要なのは、アプリケーションに同じブートストラップデータを提供することです。
このコマンドは次の動作を行うファイルを作成します。
sencha compile -classpath=app \
meta -alias -out bootstrap.js and \
meta -alt -append -out bootstrap.js上のコマンドラインは、appフォルダ内のソースを読み込むようコンパイラに伝え、2つのメタデータを生成します。2つ目のメタデータは1つ目と同じ出力ファイルに書き込まれますが、置き換えではなくファイルに追加する-appendオプションを使います。
いったん"bootstrap.js"ファイルを作成したら、このようにページを変えてx-bootstrapセクションに追加します。
<html>
<head>
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<script src="../sdk/ext-dev.js" type="text/javascript"></script>
<script src="bootstrap.js" type="text/javascript"></script>
<!-- </x-bootstrap> -->
<script src="app/app.js" type="text/javascript"></script>
<!-- </x-compile> -->
</head>
<body></body>
</html>次のいずれかを行う場合は、"bootstrap.js"ファイルを生成し直す必要があります。
- クラスの追加
- クラスの削除
- クラスのエイリアスの変更
- クラスの別名の変更
このブートストラップデータの再構築は様々なやり方で処理できますが、根本的な問題は、これらのファイルをソースコントロールに保持するか、開発者側でローカルに生成するよう要求するかということです。どちらも機能し、ある程度まで自動化できます。
注意:Sencha Cmdで作成されたアプリケーションの場合、sencha app buildの構築プロセスの一部として処理されます。あるいは、sencha app refreshコマンドを使用すれば、フル構築する代わりにブートストラップだけを更新できます。
ローダーパスのエクスポート
大規模なアプリケーションでは、複数のソースツリーを使って名前空間を整理すると便利です。Ext JS自体は3つのソースツリーを使用しています。ただしこのやり方では、この作業のためにローダーパスを手動で設定する必要がある動的ローダーにとっては、常に問題がありました。しかしコンパイラは、クラスパス内のすべてのソースを与えられたクラス・ファイル間の関係を完全に把握しています。またmetaコマンドは、お使いのアプリケーションで使えるようデータをエクスポートします。
すでに上のように"bootstrap.js"を作成している場合は、metaコマンドをさらに1つ追加すれば、このデータを追加できます（もちろんこのケースではクラスパスに複数のフォルダが含まれます）。
sencha compile -classpath=src1,src2,src3 \
meta -alias -out bootstrap.js and \
meta -alt -append -out bootstrap.js and \
meta -loader -append -out bootstrap.jsこれで"bootstrap.js"ファイルが両方の問題を解決します。このやり方では、次の場合に"bootstrap.js"を再構築する必要があります。
- ファイル名またはフォルダ名の変更
- クラスパスの再編成
- いずれかのソースツリーの内容の再編成
注意:この部分はまた、Sencha Cmdで作成されたアプリケーション用に自動的に処理されます。
-base-pathで関連パスを解決する
多くの理由から、パスは関連性を持つ必要があります。しかし関連パスを扱う場合は常に、これらの関連パスがどこをベースにしているかという問題を解決する必要があります。上の例では、少しごまかして"bootstrap.js"ファイルをマークアップファイルの隣に配置しました。これは、metaコマンドが、デフォルトで出力ファイルの場所にベースフォルダを設定することを利用しています。
これとは違う場合、metaコマンドに、関連パスを決定するためのベースを伝える必要があります。"bootstrap.js"ファイルを"build"フォルダに移動する場合を考えてみましょう（ソースコントロールに保持していない場合などの理由が考えられます）。ページが現在のフォルダにあり、ソースが"app"フォルダにあるので、これにより適切な関連パスが生成されます。
sencha compile -classpath=src1,src2,src3 \
meta -alias -out build/bootstrap.js and \
meta -alt -append -out build/bootstrap.js and \
meta -loader -append -base-path . -out build/bootstrap.js-aliasおよび-altモードがパスを扱わないため、-base-pathオプションは、metaコマンドの-loaderとしての使い方でのみ必要となります。
フォーマットの変更
デフォルトでは、metaコマンドは、メタデータのタイプに適した関数呼び出しラッパーを使って、メタデータをJSONPフォーマットでエクスポートします。別の関数呼び出しが望ましい場合、つまりJSONフォーマットでデータがほしい場合は、metaコマンド内でこれを要求します。
下の例では、aliases.jsonファイルがJSONフォーマットのエイリアスデータを含んでいます。このケースでは、JSONフォーマットが単一のトップレベルのオブジェクトまたは配列を要求しているため、-appendは使えません。
sencha compile -classpath=src1,src2,src3 \
meta -alias -json -out aliases.json次の例では、次を呼び出す関数を供給してJSONPラッピングをカスタマイズします。
sencha compile -classpath=src1,src2,src3 \
meta -alias -jsonp Foo.bar.doAliases -out aliases.jsこの形式はJavaScriptコードを生成するため、-appendと一緒に使えます。上の出力は、だいたい次のように見えます。
Foo.bar.doAliases(
// ... the JSON data ...
);ファイル名のエクスポート
metaコマンドがサポートするメタデータの形式で、時々便利なものにファイル名データがあります。それは適切な依存関係順に並んだファイルのリストです。このデータは多くの点で他のメタデータ形式と同じで、JSONまたはJSONPフォーマットでエクスポートでき、-appendを使って結合できます。
-filenamesの第一の相違点は、デフォルトのフォーマットがテキストだということです。JSONまたはJSONPを生成するには、-jsonまたは-jsonpオプションのいずれかを指定しなくてはなりません。
デフォルトのテキストモードでは、ファイル名はテキスト行として書かれ、1行に1つのファイル名があります。次のコマンドは"filenames.txt"を作成します。
sencha compile -classpath=src1,src2,src3 \
meta -filenames -out filenames.txtファイルの各行は-tplオプションを使って修飾できます。この例では特殊文字が必要なため、テンプレートを保有するレスポンスファイルを使います。これを次のように、"template.txt"に入れます。
<script src="{0}" type="text/javascript"></script>それから次のコマンドを実行します。
sencha compile -classpath=src1,src2,src3 \
meta -filenames -tpl @template.txt -out filenames.txtこれで、すべてのファイルに正しい順序で script タグを挿入するマークアップ群ができました。
例:
<script src="ext/src/ShadowPool.js" type="text/javascript"></script>
<script src="ext/src/Shadow.js" type="text/javascript"></script>定義のエクスポート
コンパイラは通常、ソースコードをパースすることで、クラス、名前空間および依存関係などのメタデータを読み取ります。これが、例えばライブラリの難読化などで非表示の場合、コンパイラは定義クラスや依存関係を認識しません。
この形式のメタデータエクスポートは、そうしたライブラリの「シンボル」を提供するために使われ、Sencha Cmdを使ってユーザーがアプリケーションをコンパイルできるようにします。
sencha compile -classpath=src1,src2,src3 \
meta -definitions -out symbols.js上記では、次のようなディレクティブを含むファイルを作成します。
// @define Foo.bar.Thing
// @require Ext.panel.Panel
// @uses Ext.layout.container.HBoxこれらのディレクティブはコンパイラにより認識され、ユーザーコードのコンパイルに必要なシンボリック名を導入します。これらのシンボルが難読化されたライブラリファイルに追加され、ライブラリコードが確実に正しい順序で連結されるようにします。