はじめに
本ガイドは、Sencha TouchアプリケーションでSencha Cmdを使用するプロセスを解説します。最初にsencha generate appコマンドを起動して、アプリケーションを実行して終了します。
本ガイドは、新しいSencha Touchアプリケーションにも既存のSencha Touch 2アプリケーションのアップグレード版にも適用されます。
前提条件
先に進む前に以下のガイドをご覧になることをお勧めします。
新しいアプリケーションの作成
次のコマンドでは、名前空間のMyAppを持つ新しいアプリケーションを“/path/to/www/myapp”に生成します。
# Make sure the current working directory is the Sencha Touch SDK
cd /path/to/sencha-touch-sdk
sencha generate app MyApp /path/to/www/myappまた、コマンドライン上でSDKにパスを指定することもできます。
sencha -sdk /path/to/sencha-touch-sdk generate app MyApp /path/to/www/myappWebKitベースのブラウザをhttp://localhost/myappにポイントすれば、それを試行できます。
おめでとうございます。わずか数秒で完全に動作するSencha Touchアプリケーションを作成しました。
アプリケーションの構造の理解
生成されるアプリケーションは、以下のファイル構造を持たなければなりません:
.sencha/ # Sencha-specific files (for example configuration)
app/ # Application-specific content
sencha.cfg # Configuration file for Sencha Cmd
plugin.xml # Plugin for Sencha Cmd
workspace/ # Workspace-specific content (see below)
sencha.cfg # Configuration file for Sencha Cmd
plugin.xml # Plugin for Sencha Cmd
touch/ # A copy of the Sencha Touch SDK
cmd/ # Sencha Touch-specific content for Sencha Cmd
sencha.cfg # Configuration file for Sencha Cmd
plugin.xml # Plugin for Sencha Cmd
src/ # The Sench Touch source
sencha-touch-*.js # Pre-compiled and bootstrap files
...
app # Your application's source code in MVC structure
controller
model
profile
store
view
Main.js # The main view of the application
resources
css
app.css # The main stylesheet, compiled from app.scss
sass
app.scss # The Sass file which compiles to app.css above,
# includes Sencha Touch theme by default
icons # Application icons for all mobile devices
# When replacing these default images with your own,
# make sure the file name and the dimension stays exactly the same
...
loading # Application start-up screens for iOS devices
# Similarly to icons, make sure the file names and
# dimension stays the same
...
images # Put other images used by your application here
index.html
app.js # Contains application's initialization logic
app.json # Application descriptor
packager.json # Configuration for native packaging“app.json”も“packager.json”も、設定可能な各アイテムのインラインドキュメンテーションを持っています。単純に開いて、必要に応じて編集します。
アプリケーションの開発
sencha generateコマンドのファミリーを使用すれば、共通のMVCコンポーネントを素早く生成できるようになります。
重要現在のディレクトリをアプリケーションのルートフォルダにしてください。
例えば、
cd /path/to/www/myapp
sencha generate model User --fields=id:int,name,emailこのコマンドは、id、name、emailという名の3つのフィールドを持つUserという新しいModelクラスをapp/model/User.jsに生成し、その参照を“app.js”ファイルに追加します。
アプリケーションのアップグレード
生成されるアプリケーションは、最初に生成されたSDKのコピーを常に備えています。アプリケーションをSDKの新バージョンにアップグレードすると、旧バージョンを新バージョンに交換することが求められます。sencha app upgradeのコマンドで、これを実行します。
重要 現在のディレクトリをアプリケーションのルートフォルダにしてください。
より完全な例を以下に示します。
cd /path/to/www/myapp
sencha app upgrade /path/to/new_version_of_sdkアプリケーションの運用
アプリケーションを開発するということは、単純にソースコードを編集してブラウザを更新することを意味します。すべてのソースファイルは、要求に応じて動的にロードされます。関与していないビルドのプロセスはありません。運用時には、Sencha Cmdによって以下の4つのビルド環境オプションが提供されます。
testing- 生産工程の前の品質保証工程用です。すべてのJavaScriptとCSSソースファイルは結合されますが、最小化はされず、簡単にデバッグできるようにします。package- Webサーバーを必要としないで、ローカルファイルシステムで正常に実行される自己完結型、再配布可能な製品ビルドを作成します。production- 通常、Webサーバーでホストされている製品ビルドを作成し、複数のクライアント（デバイス）に提供します。このビルドは、HTML 5のアプリケーションキャッシュを使用してオフライン対応になり、Over-the-Airアップデートを実行できるようになります。native- 最初にpackageビルドを生成してから、それをネイティブアプリケーションへパッケージ化し、ネイティブプラットフォームに配置する準備を整えます。
例として、次のコマンドを実行すると、アプリケーションのtestingビルドが生成されます。
重要現在のディレクトリをアプリケーションのルートフォルダにしてください。
cd /path/to/www/myapp
sencha app build testing同様に、本番展開の準備ができた場合:
cd /path/to/www/myapp
sencha app build productionデフォルトデプロイパスはapp.jsonのbuildPathsから取られます。オプションの引数についての詳細は、以下のコマンドを実行してください。
cd /path/to/www/myapp
sencha help app buildSencha Cmdでは、以下のようなアプリケーションのすべての最適化が自動化されます。
- アプリケーション読み込みの依存関係の解決、および最適なファイルサイズ／パフォーマンスに使用されるものの正確な追加。
- “cache.manifest”およびリソースチェックサムの自動生成を介したHTML 5のアプリケーションキャッシュの有効化。
- すべてのJavaScriptとCSSのアセットの縮小。
- 最初のロード時のローカルストレージ内のJavaScriptとCSSの全アセットのストア、およびリリース間のdeltaアップデートによるパッチ。
その結果、本番ビルドは最小限のネットワーク転送で後続のアクセスを瞬時にロードし、高速更新することができます。
重要cache.manifestファイルは自動で生成されます。Webサーバーがtext/cache-manifestの正しいContent-Typeヘッダーでこれを提供していることを確認してください。HTML5アプリケーションキャッシュについての詳細は、HTML5 Rocksのチュートリアルアプリケーションキャッシュを使用するための初心者ガイドを参照してください。
アプリストアでの公開に向けたアプリケーションのパッケージ化
packager.jsonは、アプリケーションをパッケージ化するためのすべての設定値が含まれています。
OS Xを使用していて、XCodeをインストールしている場合、以下のコマンドによってアプリケーションがパッケージ化され、iOS Simulator上で実行されます。
sencha app build nativeトラブルシューティング
Sencha Cmdの使用における共通の問題については、Sencha Cmdの導入のトラブルシューティングセクションを参照してください。
依存関係の解決中のエラー - パート2
新しいSencha Cmdコンパイラは、デフォルトでは依存関係を決定するために使用されます。旧リリースとは異なり、このコンパイラでは、ソースコード（アプリケーションとフレームワーク）を処理することによって依存関係が決定されます。これは依存関係を見失うことに繋がることがあります。つまり、過去リリースでは自動的に検出されていたものが、コンパイラでは検出できない、ということです。
この場合、解決法として理想的なのは、欠落しているrequiresステートメントを追加して問題を解決することです。これによって、スイッチングオーバーライドが以下のような新しい名前のあるフォームに追加されます。
Ext.define('MyApp.patches.foo.Bar', {
override: 'Ext.foo.Bar',
...
});これによって、その名前はオーバーライドを必要とするようになり、コンパイラはオーバーライドを正しい順序で処理するようになります。
その作業を延期する必要がある場合には、バージョン2の互換モード（依存関係を抽出するヘッドレスのWebView内のファイルシステムプロトコルを介したアプリケーションの実行に基づく）を有効化できます。これを行うには、sencha app buildの代わりに次のコマンドを使用します。
sencha config -prop v2deps=true then app buildまたは、以下の列を“.sencha/app/sencha.cfg”ファイルに追加し、上記のとおりsencha app buildを実行することもできます。
v2deps=trueこのレガシーモードで、アプリケーションが動的なサーバーサイドスクリプティング（PHPスクリプトからのクラス設定のロードなど）に依存する場合には、アプリケーションがWebブラウザ上でロードされるURLにapp.json内のurlアイテムを設定する必要があります。例えば、
// app.json
{
"url": "http://localhost/myapp/",
// ...
}これは、コンパイラを予定どおりに最適化してアプリケーションに自動で役立てることができないため、一時的な計測として表示される必要があります。