はじめに

私たちは Ext JS 5.1 Beta を発表できることを心から喜んでいます。Ext JS 5.0.1 以降、私たちは新しい機能を追加したり、Sencha コミュニティからのフィードバックに応えることに沢山の時間を費やしてきました。Ext JS 5.1 は、グリッドの全く新しいセレクションモデル (スプレッドシートモデル) 、新しくなったコンポーネントや機能の拡張 (3D column と bar charts)、ドローパッケージ の拡張、カラーピッカー、そしてレイティングウィジェット。こういった素晴らしい新機能の利用が一般的に可能になるにあたって、フォーラムを通して Ext JS 5.1 Beta サイクルに参加していただけたらと思っております。

スプレッドシード セレクション モデル

Ext JS グリッドは常にフレームワークの中心でした。Ext JS 5.1 では、スプレッドシートの体験を模倣する全く新しいセレクションモデル「スプレッドシート」を追加しました。このモデルを使えばユーザーはセル範囲を選択できます。

もちろん行全体や列全体、データセット全体も選択可能です。

行のチェックボックスを有効にすることもできるので、スプレッドシートが唯一必要になるセレクションモデルになるかもしれません。

クリップボード プラグイン

スプレッドシートセレクションモデルを使用する際に、グリッドに新しいクリップボードプラグインを追加することができます。これによりブラウザ外で実行されているアプリケーションとやり取りすることが可能になります。ユーザーはある一定のデータの範囲を選択し、CTRL+C (Mac ではCommand+C) を押すことでそれらのセルをシステムのクリップボードにコピーすることができ、Microsoft Excel などの外部のアプリケーションに切り替えてデータを貼り付けることができます。

もちろんその逆も可能です。ユーザーはデータを外部のアプリケーションからクリップボードにコピーしてきて、グリッド内の指定のセルに CTRL+V (Mac では Command+V) で貼り付けを行うことができます。

これらの機能は以下のようにしてグリッドに追加できます。

requires: [
    'Ext.grid.selection.SpreadsheetModel',
    'Ext.grid.plugin.Clipboard'
],
 
selModel: {
    type: 'spreadsheet',
    columnSelect: true  // replaces click-to-sort on header
},
 
plugins: 'clipboard'

デフォルトで、クリップボードプラグインはシステムのクリップボードを使用します。しかし、アプリケーション内では内部のバッファーを使用してカスタムデータの形式をグリッド間で変換することも可能です。

チャートで 3D Bar と 3D Column が使用可能に

Ext JS 5.1 では、sencha-charts パッケージが “bar3d” シリーズと “numeric3d” アクシスを提供することで、以下のような積み上げ棒グラフが作れるようになりました。

カスタム renderer メソッドを提供することで、列の fillStyle を調整するだけで、3Dの表示を保ちながら正しいグラデーションを得られます。

横棒グラフのことも忘れてはいけません。

積み上げグラフは3Dへの対応に加え、2つの新しいコンフィグがあります。fullStack と fullStackTotal です。これらのコンフィグによってチャートがストア内にデータを置くことができ、特定の範囲 (通常は 0% から 100% ) に収まるようにデータを動的にスケールさせるという指示をシリーズに出します。

フルスタックを有効にするには、シリーズ上の fullStack を true に設定すれば良いだけです。デフォルトで、シリーズの全ての y フィールドがパーセンテージを表すために合計100でスタックされます。fullStackTotal を使えば、アクシスを好きな範囲でスケールすることもできます。

チャート アイテム イベント

最後に、チャートではアイテムレベルでのイベント (例えば itemtap や itemmousemove) を結びつけることができます。これはチャートに “chartitemevents” プラグインを追加することで可能になります。

その他の新しいコンポーネント

アドバンスド カラーピッカー

過去の記事でカラーピッカーを紹介したことを思い出すかもしれません。

今では、3つのカラーピッカー コンポーネントが存在します。上記の例では colorfield と colorselector を見ることができます。colorfield コンポーネントは color 値 と サンプルスウォッチが表示されるフォームフィールドです。colorselector はポップアップウィンドウに表示されています。

3つ目のカラーピッカーは colorbutton で、colorselector を表示するためにクリックに反応するカラースウォッチです。

これらのコンポーネントは Ext.ux ネームスペース の一部で、今ではフレームワークの “ext-ux” パッケージにあります。“ext-ux” パッケージについては後で説明します。

レーティング ウィジェット

新しいレーティングウィジェット (この過去記事より) も “ext-ux” パッケージ の一部になりました：

レーティング ウィジェットは、ユーザーが瞬時に指定された範囲から値を決めるためのスライダーのようなものです。スライダーとは違って、レーティングは繰り返されるグリフ ( Web フォント) を使用して選択範囲を表します。そして1つのクリックで値が変動します。

ext-ux パッケージ

フレームワークの過去のバージョンでは、Ext.ux ネームスペースは “examples/ux” フォルダー内で開発されていました。これは常にテーマ相互作用では課題だったので、これらのコンポーネントを含める “ext-ux” パッケージを追加しました。時間をかけて、既存の Ext.ux メンバーは “ext-ux” に移されるか、フレームワークのプロパーに昇進されます。

“ext-ux” パッケージを Sencha Cmd アプリケーションで使用するには、app.json ファイルにひとつ加えるだけです。

"requires": [
    "ext-ux"
]

スタンダードなパッケージとして、ext-ux ビルドアウトプットは Sencha Cmd を使わない人も利用可能です。ビルドフォルダーは以下の様になっています：

JavaScript ファイル “ext-ux.js” と “ext-ux-debug.js” はトップレベルのビルドフォルダーにあります。アプリケーションのテーマによって、コンパイルされたCSS やリソースの入った 3つのテーマサブフォルダーから選択します。

ドロー パッケージの機能

“sencha-charts” 内の Ext.draw パッケージは簡単なチャート以上の物を扱う人のために新しい機能を用意しております。

スプライト イベント

スプライトイベント (itemtap や itemmouseover)を使えるようになりました。Ext.draw.Container に “spriteevents” プラグインを加えるだけです。

ヒットテスト

複雑なパスに対して一点のヒットテストを行う API を追加しました： pointInPath と pointOnPath。以下は新しい API によってできることの例となっております。

パス交差

二つのパスを交差させ、その交差点を処理できるようになりました。新しい例ではパスをドラッグし、交差する点がハイライトされていくのがわかります。

簡単な線や多数のベジエ曲線部分を含む複雑な図形の詳細は隠されるので、パスの内容については心配する必要はありません。

コアの統合へ前進

知っている人は多いと思いますが、Ext JS 5.x では シェアされた “sencha-core” パッケージに取り組んでいました。今回のリリースでは、Ext.app (MVC と MVVM クラス) をコアに移動し、イベントシステムの仕上げをしています。

Ext.app.Profile

元々 Sencha Touch にあったものですが、Ext.app.Profile は現在では他の Ext.app ネームスペースと共に sencha-core にあります。つまり、統合された MVC/MVVM 機能セットはシェアされたコードアリーナにあります。Ext JS 5.1 アプリケーションが Ext.app.Profile にアクセスできるため、ここでの論理的な疑問は「どのように動くのか」と「何を提供するのか」でしょう。

Sencha Touch のプロファイルを使用したことがない方のために簡単に説明すると、アプリケーションのミニチュアみたいなものです。アプリケーションは profiles コンフィグに求められたプロファイルをリスト化します。起動時に、フレームワークは全てのプロファイルのインスタンスを作成します。そして、リストを順番通りにイテレートし、isActive メソッドをコールします。最初に true を返したプロファイルインスタンスがアクテイィブ (もしくは現在の) プロファイルとして認識されます。

プロファイルの代表的な使用方法 (タブレットもしくはデスクトップで言うなら) は、ユーザーに提供するトップレベルのビューを制御することです。Ext JS 5.1 を使えば、アプリケーションもしくはプロファイルが指定できる新しい mainView コンフィグがあります。このコンフィグ が過去の Ext JS アプリケーションの “autoCreateViewport” コンフィグの代わりとなります。

Ext.app.Profile 以前は、Ext JS 5.0 アプリケーションは responsiveConfig (プラグインもしくはミックスイン経由で) をランタイムの選択肢として、もしくは Sencha Cmd ビルドプロファイルを使用して特定のターゲットのビルドを生成していました。アプリケーションプロファイルはこの2つのオプションの間に存在します。

アプリケーション プロファイルは、ロード時に実行され、それゆえに必要なことはなんでもできます。responsiveConfig のようにコンフィグプロパティを設定するのに制限はありません。ビルドに含まれる必要があるため、実行される端末に関わらず、アプリケーションの必要とするサイズやスペースに足されます。しかし、ビルドプロファイルを使えば、Android 特定のコンテンツを Apple App Store のための iOS 限定ビルドから取り除くこともできます。

イベントシステム (Observable と Element)

Ext JS 5.0 では Sencha Touch より派生した新しいマルチデバイス、タッチが有効になったイベントシステムを導入しました。これはモーメンタム スクローラーと ジェスチャー認識システムと Ext.Element の委譲イベントモデルをサポートしました。この新しいイベントシステムのエントリーポイントは Ext.mixin.Observable でした。ですがオリジナルの Ext JS システムは、Ext.util.Observable より提供されました。これら2つのクラスの API はほとんど同じでしたが、あまり一般的でないユースケースでは違いがあります。

Ext JS 5.1 で統合されたイベントシステムは、まだこれら2つのクラスを提供していますが (互換性のため) 、今存在する違いは Ext.mixin.Observable が initConfig をコンストラクター内でコールすることに対して、Ext.util.Observable が伝統的な Ext.apply アプローチを利用してインスタンス上にコンフィグオブジェクトプロパティをコピーしていることです。

統合のプロセスを完成する上で、イベントのリスト化と発火を最適化することに成功し、これらの大事な分野でのオーバーヘッドを減らすことに成功しました。いくつかある互換問題に関してはアップグレードガイドを参考にしてください。

アクセシビリティーとキーボード ナビゲーション

Ext JS 5.1 は、Ext JS 5.0.1 でも提供されていたアクセシビリティーサポートをさらに広げました。特に、様々なポップアップエレメント (ComboBox から様々なメニュー) のハンドルが改善されました。そういったポップアップのカスケードが focus や blur イベントも強化されました。

統合された スクロラー API

複数のタッチ端末により、スクロールを効率よく管理する特別なロジックが必要になります。こういった端末特定の動作を正規化するために、Ext JS 5.1 は、Ext.scroll.Scroller を追加しました。autoScroll、overflowX、overflowY コンフィグなどのコンフィグが使用された時に、このクラスのインスタンスがフレームワークにより作成されていましたが、今では新しいスクロールコンフィグを使えばこれらを完全に制御することができます。

もし Sencha Touch に慣れ親しんでいれば、このコンフィグは認識できるかもしれません。しかし Ext JS 5.1 では、スクローラのコンフィグオブジェクトにすることができます。スクローラを取得するには、getScrollable をコールします。このオブジェクトは scrollTo や scrollBy などの非常に使える APIを提供しているので、現在の端末でどのようにスクロールが管理されているかはもう心配はいりません。

もし、あなたのアプリケーションに以下のようなコンフィグが存在すれば、

autoScroll: true
 
// or perhaps just horizontal:
overflowX: true
 
// or maybe just vertical:
overflowY: true

それらは動きます。しかし、Ext JS 5.1 では、以下のものも同等とされますし、推奨されます。

scrollable: true  // equivalent to autoScroll: true
 
scrollable: 'x'   // equivalent to overflowX: true
 
scrollable: 'y'   // equivalent to overflowY: true

Sencha Cmd 5.1

最後ですが、Sencha Cmd 5.1 が使用できるようになりました。このリリースはパフォーマンスに集中したもので、最適化された新しいコンパイラを紹介します。“cssPrefix” と呼ばれるこの新しい最適化は、同じページ上に複数の Ext JS バージョンを使ったフレームワークコードを最適化します。“sandboxing” は、以下のようなコードを必要とします。

rowCls: Ext.baseCSSPrefix + 'grid-row',

新しい最適化は、以下が以上のものの代わりとなります：

rowCls: 'x-grid-row',

これは、普通のアプリ内に存在する (全体のフレームワークには何千と存在する) 何百もの連鎖を無くします。この最適化の利点を享受するには、app.json 内に以下のように記述します。

"output": {
    "js": {
        "optimize": true
    }
}

現在利用可能な全ての最適化を展開すると、次の様になります。

Sencha Cmd を使用しているのであれば、このバージョンがなければ Ext JS 5.1 と一緒には使えません。もちろんいつも通り、Sencha Cmd 5.1 は Ext JS 4.1.1a や Sencha Touch 2.1 など全ての過去のフレームワークに対応しています。

結論

いくつかのサンプルはこちら、そして Beta 版はこちらからダウンロードできます。もし Sencha Cmd を使用しているのであれば、Sencha Cmd 5.1.0 Betaが必要になります。

Ext JS 5.1 Beta を試してもらうことを願っております。上記で紹介した新しい機能に加え、複数のバグが直っていたり、その他に拡張されたものもあります。フォーラムへのコメントもお待ちしております。