Sencha Touch App をExt JS 6 モダンツールキットにアップグレードする方法パート1

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

この記事は、US Sencha社ブログHow to Upgrade a Sencha Touch App to Ext JS 6 Modern Toolkit – Part 1 (2016年1月7日 | Lee Boonstra) を翻訳したものです。

Cupertino Theme

Ext JS を使っていかに見た目の良いユニバーサルアプリを作ることができるかについて私は以前、記事を書きましたが、すでに開発を終えたモバイル(スマートフォンもしくはタブレット) アプリケーションをExt JS 6 にアップグレードされたいというユーザも多数いるようです。

このチュートリアルでは、どのようにアプリケーションをアップグレードし、なぜこの手順が必要であるかについて解説いたします。

今回は既存のチュートリアルファイル、”Do I need my umbrella” という天気アプリケーションを使いました。これは数年前にSencha Touch 2 を利用して書いたものです。元のチュートリアルはこちらにあります。チュートリアルファイルもここでダウンロードすることができます。

これらのチュートリアルファイルを使う必要はありません。このガイドに目を通していただき、ご自身のSencha Touch 2 アプリケーションでお試しください。

Ext JS 6 モダンツールキットとSencha Touch

Ext JS はSencha Touch よりも進化したクラスや機能が備わっています。より高度な企業用デスクトップアプリケーションを作ることができ、さらには高度なモバイルアプリケーションや、高度なクロスプラットホームアプリケーションを作ることができるようになりました。

我々はSencha Touch 2 からのコンセプトをそのまま「モダンツールキット」としてExt JS 5 に持ち込み、モダンコア(クラスシステム、mvvmパターンなど) とマージしました。また、アップデートされたクラスもたくさんあります。テーマ付けの観点では、Ext JS 6 モダンツールキットはさらにアップデートされ、Sencha Touch とは全く別のものとなりました。

モバイルアプリケーションを作るためのエンタープライズソリューションを探されている場合、それがユニバーサルアプリであろうと単なるモバイルアプリであろうと、Ext JS 6 モダンツールキットを選んでいただく理由は沢山あります。この記事ではどのような利点があるかも紹介いたします。

その後、Ext JS 6 モダンツールキットを使用してサンプルのSencha Touch 2 アプリケーションをExt JS 6 にマイグレートします。

Ext JS 6 モダンツールキットでは何が新しいか

Sencha Touch と比べてExt JS 6 に追加された新機能は下記のとおりです。

ベーシックアップグレード

(MVVM パターンへの変更なし)

このアップグレードにより:

最新版のモバイルフレームワークおよび、最新のOSとブラウザバージョンへのサポートを利用することができます
デスクトップPC でもモバイルアプリケーションを実行することができます
マウススクロールとキーボードで(タッチ対応とは別に) リストを制御することができます
新しいパッケージやテーマパッケージ構造を利用できます
新しいNeputuneテーマおよびTriton(ユニバーサル)テーマを利用できます
Fashionを使って素早くテーマ編集できます
実際に書くコードを減らすことでモデルを整理できます
JavaScriptのPromise使って非同期処理を書くことができます
すでに用意されたFont-awesomeを利用できます
新しいコンポーネントやクラスを利用できます

data grid
data tree
navigation tree list
soap, amf0, amf3 proxies
新しいcharts
form placeholders

アドバンスドアップグレード

(MVVM アーキテクチャパターンに変更あり)

このアップグレードにより:

ViewControllerやViewModelを利用できます

MVC内のストアとコントローラはグローバルです。VCとVM はビューを介して共存しており、つまりこれらはビューによって作成され、破棄されます。このため、ViewModelとViewController はアプリケーションのパフォーマンスを向上させることができます。また、書くコード量が減るため、その維持がより楽になります。

データバインドを利用できます

データまたはコンポーネントステートにバインドすることができます。より高度なことを、これにより少ないコードで実現可能になります。

ユニバーサルアップグレード

このアップグレードにより:

モバイルやタブレットだけでなく、デスクトップPC向けのクロスプラットホームアプリの作成が可能になります。これはモダン(軽量コンポーネントセット)とクラシックの両方のリッチデスクトップコンポーネントセットをサポートしているためです。
最新のモダン(モバイル)ブラウザと同じく、IE8などのレガシーブラウザへも対応できます

APIの変更点

Ext JS 6 API の全ての変更点はこのリストで確認いただけます。天気アプリをアップグレードする際に関係した点は：

ViewControllerとViewModel

MVC内のストアとコントローラはグローバルです。VCとVM はビューを介して共存しており、つまりこれらはビューによって作成され、破棄されます。このため、ViewModelとViewController はアプリケーションのパフォーマンスを向上させることができます。また、書くコード量が減るため、その維持がより楽になります。
Sencha Touch にはExt.app.Controller.launch()メソッドがあります。Ext JS 6 モダンツールキットではExt.app.Controller.onLaunch()がこれに相当します。
Sencha Touch では全てをコンフィグブロックで定義する必要がありました。Ext JS 6 モダンツールキットでは、マジックメソッド(getやset、apply、update) が必要なコンフィグブロックにプロパティをセットするだけです。特に必要ではありませんが、コンフィグブロックをクリーンアップすることも可能です。
ストアの結び付け方に関する変更点は下記のドキュメントをご覧ください:

Ext JS 6 Ext.app.Controller-cfg-stores
Sencha Touch 2.4.2 Ext.app.Controller-cfg-stores
またExt JS 6 でストアは、ストアIDを自動的にはクラスの名前に紐付けません

Sencha Touch バリデーションはバリデータと呼ばれるようになりました。

Sencha Touch のデフォルトテーマはExt JS 6 モダンツールキットテーマであるNeptuneとTritonに置き換わりました。
デフォルトのアイコンセットはPictosの代わりにFont Awesomeが使用されています。

ベーシックモバイルアップグレード

基本的で簡単なアップグレードに対しては既存のMVCパターンを採用します。手順の数が多くありません。しかしこれでは、Ext JS 6 を最大限には活用できていません。最新のフレームワークをその全ての機能やクラスと共に使用することにはなりますが、新しいMVVMパターンを利用してはいないのです。

Ext JS 6(トライアル版) をダウンロードします
Sencha Touch プロジェクトを調べ(例えばapp.js)、使用していたnamespaceを確認してください。天気アプリのnamespaceは“Dinmu” でした
Ext JS 6 モダンアプリを生成します:
Extフレームワークフォルダに移動し、プロジェクトをこちらで生成します:
sencha generate app -modern
例えば:
ext> sencha generate app -modern Dinmu ../dinmu1

参考: https://github.com/savelee/weatherapp/tree/master/dinmu1
ブラウザでプロジェクトに移動すると、新しいExt JS 6 デモアプリが確認できます
ファイルシステムで /app フォルダ名を他の名称に変更します(例えば app-backup)
app.jsファイルも同様に、app-backup.js に名称を変更します
続いてSencha Touch プロジェクトのappフォルダーとapp.jsをコピーし、新しいExt JS 6 プロジェクトにペーストします
app.json経由で外部のJSもしくはCSSファイルをロードしている場合、それらは手作業で新しいapp.jsonファイルにマージしてください。この手順はアプリが実行できるようになってから最後に行うと良いと思います
コマンドラインで下記のコマンドを実行してください:

sencha app refresh
APIの変更に起因してここでビルドエラーが発生するかもしれません。Dinmu appでは、Ext.device.Geolocationが廃止されていたためにエラーとなりました。
カスタムコンポーネントを多く組み込んでいる場合はここで問題に当たるでしょう。CLIからのメッセージを確認し、モダンツールキットAPIドキュメントで問題となったクラスを探すことが最も良い解決策です。私の場合はgeolocationクラスに問題がありました。ドキュメントを確認し、デバイス系APIがもう存在していないことを知りました。Sencha Touch では、これらのクラスはPhoneGap/Cordovaのためのラッパーであり、対象ブラウザで可能であればHTML5 API 機能に代替されています。Ext.util.Geolocationがあったので、コードを変更してそのクラスを使用するようにしました。行を書き換えてからもう一度sencha app refreshを実行し、この他のエラーを探しました。そのときの結果はこちらです

エラーをすべて解消した後、アプリをブラウザで実行してください。私のアプリを実行した場合、app.jsのlaunchメソッドでコンソールエラーが生じました
Ext.fly(‘appLoadingIndicator’).destroy();

このエラーは基本的に、”appLoadingIndicator” が存在しないために破棄することができない旨を知らせているものです。index.htmlに差異があります。しかしマイクロローダーのコールの仕方が異なるため、index.html ファイルをSencha Touch のもので置き換えたくないかもしれません。このapp.jsのlaunchメソッドの破棄の行を取り除くか、Sencha Touch app の>style<および>body<タグを修正するかはあなた次第です。私はSencha Touch のシンプルなCSSプリローダが好きで、これはロードする前にJSやCSSを確認することができるからですが、このためタグを修正をしました。この問題を解決すると、Ext JS 6 アプリをブラウザで開くことができました。
アプリケーションがやや不自然に動作しました。調べたところ、私のSencha Touch アプリケーションではコントローラにlaunchメソッドを使用していました。Ext JS 6 ではコントローラ上にlaunchメソッドは存在せず、その代わりにonLaunch と呼ばれるものがあります。このためメソッドの名称を変更し、アプリケーションを再度実行しました。
次の問題はストアで、ストアマネジャがExt.getStore(‘Settings’)を探し出すことができませんでした。コントローラに対して次のように紐付けていたからです: “Dinmu.store.Settings”。この代わり、完全なクラス名を経由すればストアマネジャはアクセスできるようになります。コントローラを修正し、パスではなくストア名で紐付けました
アイコンセットの変更により設定ボタンが非表示になっていました。デフォルトのfont-awesome セッティングアイコンを使用し、Main.js内の設定ボタンのiconCI をx-fa fa-cog に変更しました

最後のステップはビルドの実行で、アプリケーションをビルドできことを確かめました。Sencha app refresh コマンドが失敗に終わらなかったため、問題なく終わる確信はありました。

以上です。この最後の手順以降、天気アプリを完全なExt JS 6 モバイルアプリとして使うことができました。

次回

このシリーズの次の記事では、アドバンストアップグレードについて解説し、新しいMVVMパターンに切り替え、一部のコードをクリーンアップします。

Ext JS