HOME > 開発者向けBLOG > Ext JS >  トレーニングのポイント: Ext JS 6 へのアップグレード

Technology Note 開発者向けBLOG

Ext JS

トレーニングのポイント: Ext JS 6 へのアップグレード

こんにちは、ゼノフィseoです。

この記事は、US Sencha社ブログTraining Tip: Upgrading to Ext JS 6 (2015年11月19日|David Marsland) を翻訳したものです。

Ext JS 6 が7月にリリースされました。恐らく皆さんはExt JS 5 アプリの移行がどれくらい簡単であるかを気にされていることでしょう。幸いExt JS 6 はExt JS 5.1 およびSencha Touch 2.4 の全てを実質的に備えており、このためアプリのアップグレードは非常に簡単です。

この記事ではExt JS 5.1 もしくはSencha Touch 2.4 のサンプルアプリをExt JS 6 にアップグレードする方法を説明しています。まず新機能の詳細についてドキュメンテーションとブログ記事をご覧ください:

Ext JS 6 に移行する

アプリには3つの種類があります。

  • クラシックツールキットコンポーネントを使用したクラシックアプリ
  • モダンツールキットコンポーネントを使用したモダンアプリ
  • クラシックユーザーインターフェースとモダンユーザーインターフェースの両方を兼ね備えたユニバーサルアプリ

クラシックアプリとモダンアプリは共にレコード定義、ストア、コントローラ、ビューモデルなどのコアクラスを使用します。ユニバーサルアプリではクラシックビューとモダンビューでコアクラスを共有することができます。

Ext JS 5.1 アプリケーションをアップグレードする

アップグレードプロセスの最初のステップは”.sencha” フォルダや、アプリケーションに重要なものをアップグレードすることです。アプリケーションのルートフォルダで sencha app upgrade を実行してください:

sencha app upgrade ../path/to/ext6

あるいは単に、同一名のクラシックスタータアプリを生成した上でappフォルダ、および必要に応じてSassを上書きしても結構です

sencha -sdk path/to/ext6 generate app - classic MyClassicApp ../myclassicapp

app.jsonファイルは、パッケージやテーマに対する requires などを手作業で更新する必要があります。パッケージに付記されていた”ext-” や”sencha-” のプレフィックスは必要なくなりました。つまり”sencha-charts” は今では”charts”、”ext-theme-neptune” は”theme-neptune” となります。

Ext JS のアップグレードについて詳しくは、Ext JS 6 アップグレードガイドをご覧ください。

Sencha Touch 2.4 アプリケーションをアップグレードする

Sencha Touch 2.4 アプリケーションをアップグレードするには、下記のコマンドを実行してください:

sencha app upgrade ../path/to/ext6

あるいは単に、同一名のモダンスタータアプリを生成した上でappフォルダ、および必要に応じてSassを上書きしても結構です

sencha -sdk path/to/ext6 generate app -modern MyModernApp ../mymodernapp

繰り返しになりますが、app.jsonファイルの記載を手作業で更新する必要があります。Sencha Touch のアップグレードについて詳しくは、 Sencha Touch 2.4 からExt JS 6 へのアップグレードガイドをご覧ください。

Sencha Touch Model に必要な変更

モダンExt JS 6 アプリは共通のデータパッケージや、その他のコアパッケージを使用します。新しいコアパッケージでモデルは、configブロックにコンフィグをネストしません。proxyやfieldsのようなコンフィグをconfigブロックから取り出しましょう。

Sample Sencha Touch Model:

Ext.define('MyApp.model.Person', {
    extend: 'Ext.data.Model',
    // config: {
        proxy: {
            type: 'ajax',
            url: 'resources/Data/json/marxBrothers.json'
        },
        fields: ['name', 'born', 'died']
    // }
});
詳しくはSencha Touch 2.4 からExt JS 6 へのアップグレードガイドをご覧ください。

ユニバーサルアプリケーションに変換する

Ext JS 5.1 もしくはSencha Touch 2.4 アプリが既に出来上がっており、それをユニバーサールアプリに変換したいのであれば以下の手順に従ってください。

1. Sencha Cmdを使ってユニバーサルアプリを作成

sencha -sdk path/to/ext6 generate app -starter=false MyUniveralApp ../myuniversalapp

-starter=false パラメータにより、appフォルダの無い状態でアプリのインフラを作成します。

古いアプリフォルダのコンテンツを classic/src に移動してください。

ユニバーサルアプリには三つのキーフォルダが存在します:

  • app
  • classic/src
  • modern/src

appフォルダはモデルやビューコントローラなど、共通のコードを格納しています。classicディレクトリおよびmodernディレクトリはコードパッケージのように構造化されています。それらのsrcフォルダはごく一般的なアプリケーションと同じようにmodelフォルダ、storeフォルダ、viewフォルダで構造化されています。また、Sass ディレクトリもあります。

2. Ext JS 5.1 をクラシックappフォルダに移動

  • app のコンテンツを classic/src にコピーする
  • sass フォルダを classic にコピーする
  • resources フォルダを myuniversalapp にコピーする
  • classic/src/Application.js を app フォルダに移動する

ユニバーサルアプリケーションをコーディングする場合、ソースファイルの作成、命名変更、移動、削除の都度、sencha app refresh を実行してください。

app.jsonのクラスパスはこのようにセットされます:

"classpath": "app,${toolkit.name}/src"

アプリケーションのクラシック側のコードは app および classic/src 両方のクラスを使用することができます。同様に、アプリケーションのモダン側では app および modern/src を使用できます。

app のクラスはapp 内のクラスしか使用できません。

アプリのクラシックバージョンおよびモダンバージョンでビューモデル(VM)とビューコントローラ(VC)を共有したい場合、もし全てを共有するのであれば単に、app に残しておいてください。もしこれらのファイルのキー部分のみを共有したいのであれば、VCとVMのサブクラスを作成してください。

ViewModels and ViewControllers

詳しくはExt JS 6 ユニバーサルアプリで共有コードおよびビュー固有コードを使う (英語)をご覧ください。

3. アプリに最初のモダンビューを追加

ユニバーサルアプリはメインとなるモダンビューが必要です。ターミナルウィンドウを開き、 myuniversalapp に移動して下記のコマンドを実行してください:

sencha generate view -modern main.Main

これによりメインビュー、ViewController、ViewModelが myuniversalappアプリケーションの中のモダン側に作成されます。

4. ユニバーサルアプリを実行:

classicアプリと同じコードを含んだユニバーサルアプリを新しく作成できました。app.jsonファイルを編集し、Sassファイルをコピーしているので、アプリをビルドする必要があります。ターミナルウィンドウを使用してアプリケーションに移動し、下記のコマンドを実行してください:

sencha app build development

続いてブラウザで以下を実行してください:

myuniversalapp

Ext JS 5.1 アプリと同様に動作するはずです。アプリのモダン側を見ることもできます。アプリケーションをモダンアプリとして実行するには:

  • ChromeのDeveloper Toolsを使って端末エミュレーションを有効にし、再度読み込む
  • もしくは

  • ?modern をURLのハッシュマークの前に加える
  • アプリのモダン側はこの時点で、生成されたビューに”Hello World!!”を表示します。既存のデータモデルおよびコントローラの上にモダンツールキット UIを載せることができます。モダンアプリはビューモデルおよびビューコントローラ、バインドを使用することもできます。必ずしも必要とされてはいませんが、これらの機能をご利用いただくことができます。

    端末に応じたビルドをターゲットにする

    Ext JS 6 とCmd 6 により、両方のツールキットを使用するアプリケーションを作成することができるだけでなく、スマートフォンやIE 8を動作させているデスクトップ、その他端末、ブラウザ等、特定の端末に向けたビューを載せることができます。Cmdにより生成されたapp.jsonファイルからツールキットキーを省き、変更したbuildブロックをその代わりに追加することで、どのツールキットがどのテーマを使うか指定することができます。

    "toolkit": "classic",  // or "modern"
    "builds": {
        "classic": {
            "toolkit": "classic",
            "theme": "theme-triton"
        },
        "modern": {
            "toolkit": "modern",
            "theme": "theme-triton"
        }
    }
    

    新しいFont Awesomeアイコンを使用する

    Sencha フォントパッケージ (英語)をご覧ください。Font Awesome Cheatsheet に全てのレパートリーを掲載しています。

    さらに学習されたい方はSencha トレーニングクラスをご利用ください

    Ext JS 6 をさらに学習されたい方はSencha トレーニングにお申し込みください。トレーニングクラスでお会いできることを楽しみにしています。

    PAGETOP