Sencha Cmd と Ext JS 5+ の使用

本ガイドは、Ext JS 5アプリケーションで Sencha Cmd を使用するプロセスを解説します。sencha generate app コマンドからアプリケーションの実行まで取り扱います。

想定される Sencha Cmd に適合するように既存の（Sencha Cmd以外の）アプリケーションをアップグレードするプロセスについて本ガイドの最後で取り扱っています。最初に比較するために「理想の」構造と「デフォルトの」構造を理解することが重要です。このデフォルト構造と既存アプリケーションの構造の違いが、既存のアプリケーションをアップグレードする要因となっています。

前提条件

先に進む前に以下のガイドをご覧になることをお勧めします。

• Sencha Cmdについて

アプリケーションの生成

最初に、アプリケーションの骨格を生成します。これは、以下のコマンドを使用して実行します:

sencha generate app -ext MyApp /path/to/MyApp

これは、Ext JS Commercial Trial パッケージを自動的にダウンロードして、アプリケーションを生成するために使用します。Commercial エディションを購入している場合、Ext JS ZIP アーカイブをダウンロードしてシステムの任意のフォルダに抽出する必要があります。Ext JS をダウンロードして抽出したら、このコマンドを実行してアプリケーションを生成します。

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

上記のコマンドによって生成されたアプリケーションファイルの構造は以下のようになります。

.sencha/                        # Sencha-specific files (primarily configuration)
    app/                        # Application-specific content
        sencha.cfg              # Application configuration file for Sencha Cmd
        Boot.js                 # Private, low-level dynamic loader for JS and CSS
        Microloader.js          # Loads app based on app.json content
        build-impl.xml          # Standard application build script
        *-impl.xml              # Implementations of various build phases
        defaults.properties     # Default values and docs for build properties
        ext.properties          # Build property values specific to Ext JS
        *.defaults.properties   # Build properties by environment (e.g. "testing")
        plugin.xml              # Application-level plugin for Sencha Cmd
        codegen.json            # Data for merging generated code during upgrade
    workspace/                  # Workspace-specific content (see below)
        sencha.cfg              # Workspace configuration file for Sencha Cmd
        plugin.xml              # Workspace-level plugin for Sencha Cmd

ext/                            # A copy of the Ext JS SDK
    cmd/                        # Framework-specific content for Sencha Cmd
        sencha.cfg              # Framework configuration file for Sencha Cmd
    packages/                   # Framework supplied packages
        ext-theme-classic/      # Ext JS Theme Package for Classic
        ext-theme-neptune/      # Ext JS Theme Package for Neptune
        ...                     # Other theme and locale packages
    src/                        # The Ext JS source
    ...

index.html                      # The entry point to your application
app.json                        # Application manifest
app.js                          # Launches the Application class
app/                            # Your application's source code in MVC structure
    model/                      # Folder for application model classes
    store/                      # Folder for application stores
    view/                       # Folder for application view classes
        main/                   # Folder for the classes implementing the Main View
            Main.js             # The Main View
            MainModel.js        # The `Ext.app.ViewModel` for the Main View
            MainController.js   # The `Ext.app.ViewController` for the Main View
    Application.js              # The `Ext.app.Application` class

packages/                       # Sencha Cmd packages

build/                          # The folder where build output is placed

単一ページアプリケーションでは、ワークスペースとアプリコンテンツは区別されません。ワークスペースについて詳しく知るには、Sencha Cmd のワークスペースを参照してください。

アプリケーションのビルド

アプリケーションをビルドするためには、以下のコマンドを実行するだけです:

sencha app build

このコマンドで、マークアップページ、JavaScriptコード、Sass、テーマが"build"フォルダにビルドされます。

重要このコマンドを実行するためには、現在のディレクトリがアプリケーションの最上位フォルダにある**必要**があります（この場合、"/path/to/MyApp"）。

重要 sencha app コマンドに対して -sdk パラメータを指定しないでください。これらのコマンドはアプリケーションのルートフォルダから実行する必要があるため、Sencha Cmd は使用する SDK を識別します。これらのコマンドで -sdk を使用すると、Sencha Cmd は現在のディレクトリが指定された SDK であると判断します。これは、アプリケーションにとって正しい現在のディレクトリではありません。

Sencha Cmd Webサーバー

Sencha Cmd Webサーバーを使えば、アプリケーションディレクトリからファイルを扱えるようになります。以下のコマンドを使用してWebサーバーを起動します。

sencha web start

このコマンドでは、デフォルトの1841ポートおよびカレントディレクトリが使用されます。このWebサーバーは、Ctrl+Cまたは別のウインドウで以下のコマンドで停止されるまで作動し続けます。

sencha web stop

Sencha Cmd Webサーバーにアクセスするためには、以下を使用します。

http://localhost:1841/

-port オプションを使用して別のポートを指定できます。また、-map オプションを使用してパスを別のディレクトリに指定することもできます。

アプリケーション拡張

sencha generateコマンドは、コントローラやモデルなど、一般的なMVCコンポーネントの迅速な作成に役立ちます:

sencha help generate

以下を参照してください:

Sencha Cmd vX.Y.Z.nnn
sencha generate

このカテゴリには、アプリケーションを生成し、新しいクラスをアプリケーションに追加するのに使用されるコードジェネレーターが含まれています。

Commands
  * app - スターターアプリケーションを生成します。
  * controller - 現在のアプリケーションのコントローラを生成します。
  * form - 現在のアプリケーション（Sencha Touch仕様）のフォームを生成します。
  * model - 現在のアプリケーションのモデルを生成します。
  * package - スターターパッケージを生成します。
  * profile - 現在のアプリケーション（Sencha Touch仕様）のプロファイルを生成します。
  * theme - スライス操作のテーマページを生成します（Ext JS仕様）。
  * view - 現在のアプリケーション（Ext JS仕様）のプロファイルを生成します。
  * workspace - 複数アプリのワークスペースを初期化します。

重要以下に記載のコマンドを実行するには、コンソール上の現在のディレクトリがアプリケーション内部にあることが**必要**です(この場合は、“/path/to/MyApp”)。

モデルの生成

アプリケーションにモデルを追加するには、"/path/to/MyApp"ディレクトリに移動してから、以下のようにSencha Cmdを実行します:

cd /path/to/MyApp
sencha generate model User id:int,name,email

このコマンドは、所定の3つのフィールドを含むUserと呼ばれるモデルクラスを追加します。

注意:これは Sencha Architect プロジェクトと互換性のある唯一の generate コマンドです。一般的に、このコマンドは Sencha Architect でデータモデルの自動作成やスクリプト化に使用します。

ビューの生成

アプリケーションへのビューの追加も同様です。

cd /path/to/MyApp
sencha generate view foo.Thing

上記は次のファイルを生成します。

app/
    view/
        foo/                    # Folder for the classes implementing the new view
            Thing.js            # The new view
            ThingModel.js       # The `Ext.app.ViewModel` for the new view
            ThingController.js  # The `Ext.app.ViewController` for the new view

この場合、ビューの名前以外に必要なパラメータはありません。ただし、必要に応じてベースクラスを追加できます。

cd /path/to/MyApp
sencha generate view -base Ext.tab.Panel foo.Thing

これは、ビュークラスが使用する extend を Ext.tab.Panel を使用するように変更します。

注意:このコマンドは Sencha Architect プロジェクトとは互換性が*ありません*。

コントローラの生成

Ext JS 5 では、Sencha Cmd が生成する各ビューにデフォルトの Ext.app.ViewController があるため、ほとんどの場合に Ext.app.Controller に基づきグローバルコントローラを生成する必要はありません。新しいコントローラが必要な場合、Models や Views と同じ基本的な方法で生成できます。

cd /path/to/MyApp
sencha generate controller Central

この場合、コントローラの名前以外に他のパラメータはありません。

注意:このコマンドは Sencha Architect プロジェクトとは互換性が*ありません*。

ビルドのカスタマイズ

ビルドをカスタマイズする際に最初に確認する場所は "app.json" です。このファイルにはインラインで記述されている多数のオプションが含まれています。さらに、ビルドスクリプトプロパティファイル ".sencha/app/*.properties" に他のオプションがあります。

".sencha/app/sencha.cfg"ファイルにも、さまざまな設定オプションがあります。シングルページアプリケーションの場合、".sencha/workspace"フォルダは無視するほうがよいでしょう。このフォルダにも設定ファイルがあります。

クラスパス

sencha app build コマンドは、 "app.json" に格納された classpath プロパティによって、アプリケーションのソースの場所を認識します。デフォルトでは、この値は以下のとおりです:

"classpath": "${app.dir}/app"

このカンマで区切られたリストにディレクトリを追加して、アプリケーションをビルドするために必要なソースコードの場所をコンパイラに知らせます。

参考文献

Sencha Cmd が提供するビルドプロセスに関する詳細は、アプリのビルドプロセスの内部を参照してください。

アプリケーションのアップグレード

生成したアプリケーションには、ビルドスクリプト（または足場）と使用した Sencha SDK の重要なコンテンツという、Sencha Cmd に関係する 2 種類の基本的なコンテンツが含まれます。このため、時々、これらをアップグレードすることが必要になります。アップグレードを実行するには、以下のコマンドを使用します。

sencha app upgrade [ path-to-new-framework ]

“path-to-new-framework” はオプションで、Sencha Cmd Scaffold と アプリケーションが使用するフレームワークの両方をアップグレードするために使用されます。

既存のアプリケーション

Sencha Cmd が作成するスキャフォールド（足場）は主に以下で構成されます。

.sencha/
app.json
build.xml
index.html

最初の 3 つは一時フォルダに作成されたアプリケーションからコピーするだけです。既存のアプリケーションは通常マークアップエントリページが含まれ、"index.html" でない場合は、次を "app.json" に追加できます。

{
    ...

    "indexHtmlPath": "index.php"
}

当然、値はアプリケーションで有効なものとなります。生成されたビルドスクリプトがこのマークアップファイルを認識するためには、生成された "index.html" にあるような標準的な定型コードがファイルに含まれている必要があります。

<script id="microloader" type="text/javascript" src="bootstrap.js"></script>

開発モードでは、sencha app build または sencha app refresh 中にSencha Cmd が生成するファイルをロードします。sencha app build コマンドは 1 つの手順としての「更新」操作を含むビルドです。

設定

Sencha Cmd アプリケーションのデフォルト構造に一致しない既存のアプリケーションがいくつかあります。この時点では、2 つのパスを検討します。

• 生成された構造に適合するようにアプリケーションを再構成
• アプリケーション構造に一致するようにビルドプロセスを設定

ビルドプロセスの設定方法についての詳細は、アプリのビルドプロセスの内部を参照してください。

代替案

既存のアプリケーションを想定されるビルドスクリプトに（アプリの再構築またはビルドの設定によって）適合させられない場合でも、Sencha Cmd には低レベルコマンドでアクセスできる便利な機能があります。

次のステップ

• Sencha Cmd のワークスペース
• アプリのビルドプロセスの内部