Ext JS 7.0 によるアプリケーションのモダナイズ

Senchaのエンジニアとして、私は顧客を訪問したり、テレビ会議での顧客と画面共有するなどの対応に多くの時間をかけて、優れたUIの構築を支援しています。私たちの顧客ベースに見られる傾向の1つは、これらのWebアプリケーションの寿命を延ばす必要性です。

Webアプリケーションを介して顧客や従業員にリーチするビジネスの必要性は確立されており、ほとんどのビジネスセクターに共通しています。企業は、構築する各Webアプリにより多くの投資を行っており、アプリが社内およびクライアントベースの両方で長期的な価値を提供することを期待しています。Webアプリは新しいエンタープライズアプリケーションになりつつあります。

私は、Ext JSバージョン5.xおよび6.xのアプリをたくさん見てきました。それらは機能豊富で業務に必要な機能を備えているものの、すこし古くなり始めています。Webアプリに慣れるユーザーが増えるにつれて、品質、使いやすさ、アプリケーションのルックアンドフィールへの要求水準は非常に高くなります。実際、従来のアプリの多くは、完全な手直しが必要なくらい古くなっています。

Ext JS 5またはExt JSをClassic Toolkitアプリケーションで使用している場合、Ext JS 7では、わずか2行のコードでアプリケーションのルックアンドフィールをモダナイズできるシンプルで低コストの方法が提供されます！

Ext JS 7に移行するとClassic Toolkitの新しいモダンなマテリアルテーマを使用できるようになります。このテーマは、Googleが開発したマテリアルデザインを利用します。マテリアルデザインは、アプリケーションの視覚的なコンポーネントとレイアウト、可能な相互作用、色、形状、動きなどを統一感のある品質で表現できます。マテリアルデザインは、アプリの視覚的な側面だけでなく、動きも対象にしています。この新しいテーマを興味深いものにしているのは、インターフェイスモーションに関するガイドラインであり、開発者が明るくて光沢のある新しいUIを作成するだけでなく、モーションを使用してエンドユーザーにはるかに改善されたエクスペリエンスを提供する機会を与えています。

マテリアルデザインを最大限に活用するには、アプリケーションの2行のコードを文字通り変更する必要があります。

まず、package.jsonファイルで新しいNPMパッケージ@sencha/ext-classic-theme-material を参照します（modernツールを使用している場合）：

"dependencies": {
    "@sencha/ext": "~7.0.0",
    "@sencha/ext-classic": "~7.0.0",
    "@sencha/ext-classic-theme-material": "~7.0.0",
  ...
},

次に、app.jsonファイルでビルドプロファイルの新しいテーマを指定します。

そして、アプリケーションをリビルドします。以上です！

Classic Toolkitの新しいマテリアルテーマ（およびModernツールキットのマテリアルテーマ）は、CSS変数をサポートし、色を取得および設定するAPIを提供します。検証済みのマテリアルカラーのみでカラーピッカーを作成できるようになりました。外部サーバーやSencha Cmdを必要とせずに、アプリケーションのルックアンドフィールをライブアップデートできます。

マテリアルテーマは、すべてのマテリアルの色と重みを持つネストされたオブジェクトを提供する色を取得するAPIを提供します。

マテリアルテーマは、次のように使用できる色を設定するAPIを提供します。

Ext.theme.Material.setColors({
    'darkMode': darkMode,
    'base': base || me._materialBaseColor,
    'accent': accent || me._materialAccentColor
});

既存のアプリをアップグレードするためだけに開発リソースを使用することを正当化するのは困難な場合がありますが、v5またはv6からExt JS 7.0への移行は簡単なステップです。マテリアルデザインテーマを実装すると、ユーザーのエクスペリエンスが向上し、アプリケーションのライフサイクルを伸ばすことができます。

Ext JS 7.0 を試用するには

• Ext JS 7.0 アーリーアクセス版のトライアルを申し込む
• Webセミナー「Learn What’s New in Sencha Ext JS 7.0」を視聴する
• Ext JS 7.0 examples にブラウザでアクセスする
• 入門ガイド（Getting Started Guide）を読む