Sencha Cmd 5 アップグレードガイド

本ガイドは Sencha Cmd を使用して ExtJS 4.1.1a 以降から ExtJS 5.0.x へと移行する開発者を支援するために提供されています。このリリースではいくつかの重要な変更がありますが、アップグレードプロセスができるだけ簡単に済むように配慮しています。開始する前に、本ガイドの前提条件を見てみましょう。

• Ext JS 4.1.1a 以降を使用してアプリケーションが構築されている
• アプリケーションが推奨 MVC パターンを使用して配置されている
• アプリケーションが現在 Sencha Cmd にバインドされている

すべてのお客様が最新バージョンの Ext JS と Sencha Cmd を実行できるわけでないことは理解しています。時間的な制約、納期、サポートライセンスによって、企業内で使用する Ext JS が決まります。

Ext JS 4.x や Cmd 4.x の最新バージョンにアップグレードする時間をかけると 5.x シリーズに移行するのが非常に円滑になります。最新リリースを使用することで、最新のバグフィックスを利用して重要な API の変更を避けることができます。

移行プロセス

開始する前に

クリーンスレート

移行プロセスでは、最初にソースコントロールシステムに保留中の変更がないか確認します。他の変更中にアップグレードを開始することはお勧めしません。これによって、Sencha Cmd の変更をより簡単に見直すことができ、適用したカスタマイズを確実に残すことができます。

マージツールのインストール（推奨）

アップグレード中、場合によって Sencha Cmd は変更を一部の編集済みファイルに適用する必要があります。このような場合、Sencha Cmd でマージ競合作成中に更新する必要のある行を編集した可能性があります。

このような場合でも、バージョンコントロールと同様に、これらのマージ競合を解決できるツールがあります。Sencha Cmd はコマンドラインから実行できるビジュアルマージツールを利用できます（ほとんどすべて）。この手順はオプションですが、アップグレードの対処がシンプルになるため、強くお勧めします。

以下は人気のあるツールのリストです（フリーウェア、商用）。

• p4merge
• SourceGear
• kdiff3
• Syntevo SmartSynchronize 3
• TortoiseMerge - （TortoiseSVN の一部）
• AraxisMerge

次の手順では好みのマージツールを使用するように Sencha Cmd を設定します。

Sencha Cmd のアップグレード

次に、最新バージョンの Sencha Cmd 5 を取得する必要があります。

Sencha Cmd 5 をダウンロードするか、以下の既知の問題に対するリリースノートを確認できます。

リリースノート

Sencha Cmd 5 をすでにご利用になっている場合、ダウンロードページから最新ベータを入手するか、次を実行できます。

sencha upgrade --beta

Sencha Cmd をインストールして、ターミナルを再起動します。

注意:_旧バージョンの Cmd がインストールされている場合、置換しませんが、Cmd ソフトウェアを実行する場合には優先されます。詳細は上記を参照してください。_

マージツールの設定

マージツールを取得するように選択した場合、マージツールを使用するためには Sencha Cmd を設定する必要があります。設定するには、コンフィグファイルに 2 つのプロパティを追加する必要があります。

cmd.merge.tool
cmd.merge.tool.args

これらは、Sencha Cmd インストールフォルダの "sencha.cfg" ファイルで設定できます。さらに、この 2 つのプロパティはバージョンごとに設定できるので、基本設定がすべてのバージョンの Sencha Cmd に適用されます。詳細は、"sencha.cfg" ファイルの最後を参照してください。

アプリのアップグレード

アップグレードを開始する準備が整いました。開始するにはアプリケーションのルートフォルダでこのコマンドを実行するだけです。

sencha app upgrade -ext

小さな緑色のテキストが表示され、アプリケーションが正常にアップグレードされたことを示します。ほとんどの場合、すべてが想定通りに動作するようになるまでにアプリケーションでビルドを行う必要があります。これを行うには、以下のコマンドを実行します。

sencha app build

マイクロローダー

旧バージョンの Sencha Cmd では、Ext JS アプリケーションは Sencha Touch アプリケーションとは大きく異なったプロセスに従っていました。これは主に Sencha Touch の「マイクロローダー」が理由です。Sencha Cmd バージョン 4 では、マイクロローダーが Sencha Touch から Sencha Cmd に移行しましたが、その時点ではマイクロローダーは Ext JS がサポートするすべてのブラウザでは実行できませんでした。

Sencha Cmd 5 と Ext JS 5 では、この制限は適用されなくなりました。これは、Ext JS 5 アプリケーションが Sencha Touch と同じプロセスを使用できるようになったことを意味します。これによって、非常に便利な機能が利用できるようになります。

app.json

そのメリットを活かすために、最初にマークアップページを “x-compile” コメント形式からマイクロローダースクリプトタグと関連 "app.json" ファイルに変換する必要があります。ほとんどの場合、これはスクリプトと CSS リファレンスを "app.json" ファイルに移動するだけで済みます。旧バージョンの Sencha Cmd が生成したデフォルトのマークアップはこのようになります。

<!-- <x-compile> -->
     <!-- <x-bootstrap> -->
         <link rel="stylesheet" href="bootstrap.css">
         <script src="../ext/ext-dev.js"></script>
         <script src="bootstrap.js"></script>
     <!-- </x-bootstrap> -->
     <script src="app.js"></script>
 <!-- </x-compile> -->

上記のマークアップはこのように変更されます。

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

"bootstrap.js" ファイルが Sencha Cmd によって生成され、マイクロローダーをロードするためなどに使用されます。このファイルは開発モードのみで使用されます。今まで “x-compile” ブロックが置換されていたように、上記のスクリプトタグはビルドの一部として置換されます。

これに相当する "app.json" は次のようになります。

{
    "framework": "ext",
    "css": [
        {
            "path": "bootstrap.css",
            "bootstrap": true
        }
    ],
    "js": [
        {
            "path": "app.js",
            "bundle": true
        }
    ]
}

"ext-dev.js" ファイルには js エントリがないことが分かります。これはフレームワークパッケージ（“ext”）を Sencha Cmd 5 が認識し、自動的にワークスペースで検索するためです。

"app.json" ファイルでは検討できる他のオプションも多数あります。このファイルによって、パッケージ（“requires” 使用）に簡単にアクセスでき、オプションも実行時に渡すことができます。これは "app.json" ファイルのコンテンツが Ext.manifest としてロードされるためです。

ビルドプロパティ

旧バージョンの Sencha Cmd では、".sencha/app" ファイルで多くのプロパティを指定する必要がありました。Sencha Cmd 5 では、多くの場合に app.json を使用できます。app.json のコンテンツは app. を追加してプロパティ名を “.” で結合することによってビルドプロパティにフラット化されます。例えば、app.json の 2つのプロパティです。

{
    "theme": "ext-theme-crisp",
    "sass": {
        "namespace": "MyApp"
    }
}

これらのプロパティは今までは ".sencha/app/sencha.cfg" で置換していました。

app.theme=ext-theme-crisp
app.sass.namespace=MyApp

app.json で指定できないその他のビルドプロパティが多数ありますが（多くの場合 app. がプレフィックスされていないなどの理由）、可能な限り "app.json" でコントロールできるプロパティのみを利用することをお勧めします。app.json でコントロールできるアイテムの詳細は、ファイルのコメントを参照してください。その他のプロパティについては、".sencha/app/defaults.properties" を参照してください。

Watch

最後の手順として、アプリケーションのルートフォルダから sencha app watch を監視、または sencha app build をビルドします。これらのいずれもアプリケーションを更新し、使用できるように準備します。

監視を使用すると、自社ウェブサーバーのローカルホストまたは http://localhost:1841（自動的にスピンアップさせるサーバー） でアプリケーションを表示できます。これで、ウェブサーバーがアプリ監視のデフォルトになりました。以前のリリースでは、Sencha Cmd ウェブサーバーを使用するために sencha web start を個別に実行する必要がありました。これらのプロパティ（デフォルト値は以下参照）を使用してウェブサーバーの設定を調整できます。

build.web.port=1841
build.web.root=${workspace.dir}

このリリースでは、開始時間の高速化と Compass との作業の共有を改善し、Sass での不要なコンパイルを排除するように監視を最適化しました。

Cordova / PhoneGap

ご利用のアプリケーションで Cordova または PhoneGap 向けの Sencha Cmd の統合サポートをご利用の場合、アップグレードプロセスにいくつかの手順が追加されています。

ビルドプロファイル

Sencha Cmd 5 は app.json ファイルで複数のビルドを定義するためのサポートを追加しました。このサポートはネイティブのパッケージ化に最適です。Cordova または PhoneGap 対応アプリケーションの場合、“sencha app upgrade” コマンドはデフォルトのビルドプロファイルを app.json ファイルの上に追加します。これらのビルドプロファイルは旧バージョンの Sencha Cmd と一貫性のあるコマンドインターフェイスを提供し、さらに必要とされるアイテムを盛り込んでいます。

Cordova アプリケーションのアプリアップグレードで追加されたビルドプロファイルは次のようになります。

"builds": {
    "web": {
        "default": true
    },

    "native": {
        "packager": "cordova",
        "cordova" : {
            "config": {
                "platforms": "ios",
                ...
            }
        }
    }
},

これらのビルドプロファイルによって、“sencha app build” コマンドのバリエーションすべてが旧リリースと等しくなります。ただし、“native” が環境（“testing” または “production” など）ではなくビルドプロファイルになっていることが分かります。これは、今までできなかった “sencha app build native testing” を行えるようになったことを意味します。

ローカルプロパティファイル

Sencha Cmd が生成する新しいプロジェクトは “cordova.local.properties” や “phonegap.local.properties” を使用しなくなりました。アプリケーションにこれらのファイルが残っている場合、引き続き処理します。新しいプロジェクトは個人プロパティ（PhoneGap Build 認証情報など）を標準 “local.properties” ファイルに追加します。

まとめ

これで終わりです。アプリケーションが最新の Ext JS および Sencha Cmd にアップグレードされました。テストが終わったら、変更を確定できます（多くは ".sencha" フォルダ内）。

その他の注意

ログ出力

Sencha Cmd に慣れている場合、Sencha Cmd のコンソールの出力が大幅に削減されていることに気付かれたかもしれません。元のログレベルをお好みの場合、-info をコマンドに追加することによって再度有効にできます。例:

sencha -info app watch

少ない出力をご希望の場合、-quiet を付けて実行できます。

sencha -quiet app watch

詳細

アップグレードプロセスの詳細については、次のガイドを参照してください。

• チャート - アップグレードガイド
• Ext JS 5 - アップグレードガイド