Architect 3.1 の新機能

この機会に、Sencha Architect 3.1 に追加された多くの新機能についてご紹介します。これらの更新には、Ext JS 5 のサポートと Architect での操作性の向上が含まれます。追加された新機能をぜひご覧ください。Ext JS 5 のサポート

Architect 3.1 の最大の更新内容は Ext JS 5 サポートの追加です。Ext JS 5 で新たに導入された機能が多数あります。以下が含まれます。

• タッチスクリーンのサポート
• 新しいテーマ
• 応答性の高いコンフィグ
• ルーティング
• グリッドウィジェット
• ViewControllers
• ViewModels とデータバインディング

これらは追加機能の一部に過ぎません。新しい追加機能について詳しくはExt JS 5 の新機能をお読みください。

以前からのユーザー

Ext JS 5 では MVVM アーキテクチャのサポートと MVC での (C) の改良が行われています。これらの機能強化を調べて活用するようにお勧めしますが、既存の Ext JS 4 MVC アプリケーションが引き続き変更なしで機能するように最大限の努力を払っています。チャートとおそらくテーマには手動の変更が必要です。これについては以下でさらに説明します。

MVC での新しい “C”

MVC アーキテクチャでは、ほとんどのクラスは Model、View、Controller のいずれかです。ユーザーは Model に保持されているデータを表示する View を操作します。これらの操作は Controller によって監視されます。これは、View と Model を必要に応じて更新することで操作に対応します。

Ext JS 4 では、任意のアプリケーションを参照できる “global” コントローラの使用が推奨されていました。ところが、そのコンセプトは大規模なアプリケーションでは間もなく混乱をきたすようになりました。Ext JS 5 では ViewController を導入することによってこの問題を解決しています。ViewController は作成するビューに直接結び付けられます。ロジックの範囲は簡単に判断でき、ビューのあらゆる面への直接リンクがあります。

コントローラに対してこの新しいアプローチをサポートするために、Sencha Architect は作成する最上位レベルのビューすべてに対して自動的に ViewController を生成します。すでに説明した通り、ViewController の使用が推奨されますが、コントローラの古いスタイルは引き続き動作します。

MVVM とデータバインディング

MVC と MVVM の主な違いは MVVM が ViewModel と呼ばれる View の抽象化を搭載している点です。ViewModel は Model のデータと View のそのデータのプレゼンテーションの変更を「データバインディング」と呼ばれる手法で調整します。

その結果、Model とフレームワークはできるだけ作業を行い、View を直接操作するアプリケーションのロジックを最小化または排除します。

アプリケーションアーキテクチャに対するこの新しいアプローチをサポートするために、Sencha Architect は作成するすべてのビューに対して自動的に ViewModel を生成します。

ルーティング

さらに、Ext JS 5 のルーティングも導入され、アプリケーションとの「深いリンク」が可能になっています。これはアプリケーションの URL をコントローラのアクションとメソッドに変換することによって達成できます。

Ext JS ルーターは単一 URI の複数ルートをサポートします。各ルートの処理はその他からサンドボックス化され、柔軟なアプリケーションの制御が可能になります。

Architect 3.1 は関数を発火する url を指定する分かりやすいインターフェイスを提供します。これによってカスタムアクションを作成して、アプリケーションとの「深いリンク」を追加できます。

チャート

Sencha チャート

Sencha Touch 2.1 では、新しく高性能でタッチに最適化されたチャートパッケージを導入しました。Ext JS 5 では、Ext JS と Sencha Touch の両方で動作するようにこのチャートパッケージの機能を拡張しました。

この新規チャートパッケージでは、以下を含めて Ext JS 5 に多くの新機能を追加しています。

• ローソク足と OHLC データ系列
• パン、ズーム、十字線の操作
• 浮動軸
• 複数軸
• SVG と HTML Canvas のサポート
• パフォーマンスの向上
• カスタマイズ性の向上

sencha-charts と古い Ext JS チャートには重大な違いがいくつかあります。チャートは更新しません。チャートの移行は手動プロセスなので、チャートアップグレードガイドを参照してください。

Ext チャート

Sencha Architect 3.1 では “ext-charts” レガシーパッケージの使用はサポートされなくなりました。ネイティブフレームワークでの使用にはスタンドアロンパッケージを利用できますが、Architect 3.1 は他のバージョンのチャートとは統合しません。

ただし、sencha-charts パッケージへの更新のための便利な移行情報を提供するように最大限の努力を払っています。

主要バージョン間のシンプルな移行（4.2.x から 5.0.x）

Ext JS 5 と Architect 3.1 の目的の 1 つは、移行をできるだけシンプルに行うことです。

フレームワークのバージョンのアップグレード方法

アプリケーションをアップグレードするには、Ext JS 4.2 プロジェクトの [Library] ノードを右クリックして [Upgrade to Ext JS 5.0.x] をクリックします。

Sencha Cmd の新機能

最新の Sencha Cmd 統合には Architect と Cmd を高速に動作させるための数々の最適化が施されています。

Sencha App Watch

Sencha Architect 3.1 は Sencha Cmd の sencha app watch 機能を活用しています。Sencha Cmd はコードへの変更を監視しているのでアプリケーションを自動的に摘要してリコンパイルできます。

ウェブサーバーの有効化

さらに、Architect は独自の軽量ウェブサーバーを配備できます。これは主に概念検証プロジェクトを行うか、開始したばかりで、サーバー環境が未設定となっているユーザー向けです。ウェブサーバーの基本設定は [Preferences] -> [Web Server] で見つけることができます。有効または無効にしたり、指定のポート番号を変更できます。

新しいプロジェクトインスペクタ

プロジェクトインスペクタを強化し、大きなプロジェクトでの移動およびロードの高速化が可能となりました。

名前空間設定

Architect で最も要望が強かった機能の 1 つが名前空間をフォルダとして表示するメインインスペクタです。これが最高のアイデアと考え Sencha Architect 3.1 に追加しました。この機能はクラスを整理する際に非常に便利です。

スプリットインスペクタ

インスペクタに横に並んだ 2 つのツリーパネルが用意されています。左側のパネルは最上位レベルのすべてのクラスを表示し、右側のパネルは選択されたクラスの詳細を表示します。

リンクされたインスタンスの可視化

また、Architect 3.1 ではインスペクタの “Linked Instances” への接続を可視化する新しい手法を導入しています。リンクされたインスタンスはメインインスペクタと詳細インスペクタ間の描画矢印で表示されるようになりました。これはリンクされたインスタンス上でマウスをかざした場合に発生します。

これらのオーバーレイは右パネルでリンクされたインスタンスアイコンの上にかざすことでトリガーできます。リンクされたインスタンスの逆はリンクされたインスタンスアイコンを左のパネルでもクリックすることで表示できます。

データ UI ビルダー

新しい データ UI ビルダーでは、完全機能で設定可能なデータビューとコンポーネントを既存のデータソースから素早く生成できます。また、グリッドビュー、リストビュー、詳細ビュー、フォーム、バリデーション、コントローラ、ストア、モックデータを手順ごとのビジュアルインターフェイスで素早く簡単に自動作成できます。これは複雑でデータ中心のアプリやプロトタイプを素早く構築する際に理想的です。

テーマ設定

クイックテーマ

ユーザーは一部の変数を変更するだけでテーマの外観を調整できます。この前提はクイックテーマの導入によって実現されています。クイックテーマを使用することによって、Neptune、Neptune Touch、Crisp、Crisp Touch のテーマの幅広いバリエーションを数クリックだけで作成できます。これによって、コンポーネントをカスタマイズする必要がなくなり、テーマ設定を容易に行うための明確なパスを提供します。

クリックテーマは標準カスタムテーマのように動作します。ただし、クリックテーマは非表示の追加の SCSS を使用してテーマの外観全体をスマートにコントロールする変数を表示させます。

さらに詳細なカスタマイズが必要ですか。心配は要りません。さらに詳細にカスタマイズする必要があると判断した場合は、クイックテーマは常に標準カスタムテーマに変換できます。

その他のテーマ設定の機能強化

Sencha Architect 3.1 でのテーマ設定に多くの機能強化を追加しました。以下が含まれます。

• 速度 - Architect が多くの点で最適化されているためテーマ設定が高速化されています。
• SCSS Autocomplete - SCSS 変数から値のセットを設定し始めることで利用できるすべての組み込み SCSS 変数を表示します。
• Gradient Selector - グラデーションセレクタが追加され、コンポーネントに対して多数の異なるシェーディングオプションを利用できるようになりました
• Font Selector - フォントセレクタが追加され、アプリケーションに対して異なるフォントオプションを利用できるようになりました。

エディタの機能強化

個別のクラス内でインライン編集ができるようにエディタが刷新されています。これによって、プロパティを編集し、関数を作成し、コメントを追加しながらクラスの前後関係をすべて表示できます。