HOME > Learning Place >  Sencha Cmd 5アップグレードガイド

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

このガイドは Sencha Cmd を利用して、Ext JS 4.1.1a 以降から Ext JS 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 で行った変更は簡単に確認でき、カスタマイズした部分が残っているかどうかも確認できます。

Install Merge Tool (推奨します)

Sencha Cmd はアップグレードの最中に、あなたが編集したファイルのいくつかを変更する必要があるかもしれません。 このような状況では、Sencha Cmd がアップデートする行と同じ行を編集した可能性があり、マージコンフリクトが生じます。

しかし、嬉しいことに、バージョンコントロールと同じように、このマージコンフリクトを解決するツールがあります。 Sencha Cmd はコマンドラインから実行できるほとんどのビジュアルマージツールを利用できます。 この手順はオプションですが、アップグレードがより簡単になるので、強く推奨します。

よくある選択肢としては下記のものがあります。 (無料のものも、商用のものもあります)

次の手順で、使いたい結合ツールをSencha Cmd で利用する設定を行います。

Sencha Cmdをアップグレードする

次は Sencha Cmd 5 の最新版を手に入れましょう。

Senhca Cmd 5 のダウンロードや既知の問題をリリースノートでチェックするには次にアクセスします。

Release Notes

既に Sencha Cmd のバージョンがある場合には、最新版をダウンロードページからダウンロードするか、次のコマンドを実行して取得します。

    sencha upgrade

Sencha Cmd をインストールして、ターミナルを再起動して下さい。

注：もし以前のバージョンの Cmd がインストールされていても、それと入れ替わることはありませんが、Cmd ソフトウェアを実行するときには優先されます。 詳しくは上記をご覧ください。

結合ツールを設定する

結合ツールを選択したら、Sencha Cmd がそのツールを利用できるように設定する必要があります。 そのためには、コンフィグファイルに二つのプロパティを追加する必要があります。

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

これらを Sencha Cmd のインストールフォルダにある "sencha.cfg" ファイルにセットします。 また、この二つのプロパティが全てのバージョンの Sencha Cmd に反影されるようにセットすることもできます。 詳しくは、"sencha.cfg" ファイルの最後をご覧ください。

App Upgrade

アップグレードを始める準備ができました。 始めるためには、アプリケーションのルートフォルダから次のコマンドを実行して下さい

    sencha app upgrade -ext

アプリケーションが無事にアップグレードできたことを知らせる小さな緑の文字が表示されているはずです。

Microloader

Sencha Cmd の前のリリースでは、Ext JS のアプリケーションと Sencha Touch のアプリケーションは、まったく異なるプロセスにしたがっていました。 この差異の原因は Sencha Touch の microloader でした。 Sencha Cmd のバージョン 4 では、microloader は Sencha Touch から Sencha Cmd に移動しましたが、当時 microloader は Ext JS がサポートしている全てのブラウザで動作することができませんでした。

Sencha Cmd 5 と Ext JS 5 では、もうこの制限はありません。 Ext JS 5 のアプリケーション は Sencha Touch と同じ処理を利用することができます。 これによってとても便利な機能がいくつか使用可能になりました。

app.json

それをうまく利用するには、まずはマークアップページを “x-compile” コメントフォームから microloader スクリプトタグと関連している "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 によって生成され、microloader とその他のものを読み込むために利用されます。 このファイルは開発モードだけで利用されます。 上記のスクリプトタグはビルドの一部を切り替えられます。 過去に x-compile のブロックを置き換えたときに似ています。

等価の "app.json" は次のようになります

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

js のエントリーの中に "ext-dev.js" ファイルがなかったことに気づきましたか？ これは Sencha Cmd 5 はフレームワークパッケージ ( “ext” ) を理解できるため、あなたのワークスペース内から自動的に見つけだします。

"app.json" のファイルで試せるオプションは他にも色々あります。 このファイルは (“requires” を利用して) パッケージに簡単なアクセスを提供しますし、ランタイムにオプションを渡すこともできます。 これは "app.json" ファイルの内容は Ext.manifest として読み込まれるからです。

Build Properties

Sencha Cmd の前のバージョンでは、多くのプロパティは ".sencha/app" の中のファイルで指定される必要がありました。 Sencha Cmd 5 では、たいていのことを app.json で指定できます。 app. に続けて、app.json の内容のプロパティ名を “.” で繋げば、フラットなビルドプロパティになります。 例えば、app.json で次の二つのプロパティを設定するには

    {
        "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 build を行うか、sencha app watch でウォッチすることです。 どちらもあなたのアプリケーションをアップデートして、使用の準備を整えます。

watch を利用すると、あなたのアプリケーションを自分のウェブサーバーの localhost で見るか、または我々が自動的に生成するサーバー http://localhost:1841 で見ることができます。 ウェブサーバーは app watch のデフォルトの一部分になりました。 過去のリリースでは、Sencha Cmd ウェブサーバーを利用するには、別に sencha web start を実行する必要がありました。 次のプロパティを利用して、ウェブサーバーの設定を変更することができます (デフォルト値が表示されています) ：

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

このリリースで、watch がより早く起動して、余分な Sass コンパイルをせずに Compass との作業共有をさらにできるように最適化しました。

まとめ

これで終わりです！ あなたのアプリケーションは Ext JS と Sencha Cmd の最新版にアップグレードされました。 色々テストした後に変更をコミットできます (多くの変更は .sencha のフォルダに入っています) 。

他の注意事項

ログ出力

Sencha Cmd をよくご存知の方は、Sencha Cmd のコンソール上の出力が非常に少なくなったことに気づくかもしれません。 もし元のログレベルにしたかったら、コマンドに -info を追加すれば、再び有効になります。

    sencha -info app watch

出力を減らしたい場合には -quiet で実行できます。

    sencha -quiet app watch

参考資料

アップグレードの処理に関して、詳しくは次のガイドをご覧ください：

Learning Placeトップに戻る

PAGETOP