Sencha Ext JS 5 の登場です

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

この記事は、US Sencha社ブログ Announcing Sencha Ext JS 5 を翻訳したものです。

はじめに

Sencha 社とExt JS のチームの代表として、Sencha Ext JS 5 を本日 (6/2) 公開したことを発表します。Ext JS 5 で大きな一歩を進むことができました。Senchaの開発者コミュニティのフィードバックと応援に対してお礼を申し上げます。10 万以上のベータ版ダウンロードがありました。これは Sencha 社の歴史上で最も沢山ベータ版が採用されたリリースとなります。皆様と協力できて、世界で最も進化したマルチデバイスの JavaScript フレームワークを生成できました。今までで最高な Ext JS フレームワークを構築する上で、皆様の協力はとても重要でした。

新しい点

タッチサポート

Ext JS 5 はフレームワークに関して、Ext JS 始まって以来最も総合的なアップデートとなります。このリリースで、単一のコードベースでデスクトップのアプリケーションをタッチ対応デバイスにも提供できる能力を導入します。

アーキテクチャの改善

簡単にMVVMのアーキテクチャと双方向データバインディング機能を利用してアプリケーションを作成できます。サーバーとのやりとりを減らすために、クライアントサイドのデータセッション管理を組み込みました。ルーティングの導入のお陰で、アプリケーション内でディープリンクが可能となりました。このアップデートにより、より効率的にアプリケーション開発を行うことができます。

レスポンシブレイアウト

今日からは、Ext JS 5は、レスポンシブなコンフィグシステムを利用して、デスクトップでもタブレットでも、その向きが変更されたとしても最適に表示する機能を、あなたのアプリに提供します。

コンポーネントのアップグレード

コンポーネントの必要性が増える度に、Sencha も同時にコンポーネントライブラリを改善しています。Ext JS 5 では、データの視覚化とビッグデータの分析のために、グリッドセル内にウィジェットを追加することが可能となりました。Ext JS 5 はタッチデバイスに最適化されている、ファイナンシャルチャート機能がついたチャートパッケージも追加しました。

実際にご覧ください！

Ext JS 5 を掘り下げる

デスクトップとタッチパネルデバイスに渡るユニファイドイベント

Ext JS 5 は、同じコードがデスクトップとタッチデバイスの両方で実行される初めてのバージョンとなります。Sencha Touch が導入したジェスチャーシステムを利用し、ピンチ、ズーム、スワイプ、タップ、長押しなどのジェスチャーをサポートするのに必要なコードを全て組み込みました。そのため、ほとんど何もせずに、既存のデスクトップアプリケーションをタブレットに移行することができます。自動的に翻訳される委譲イベントシステム (delegated event system) を利用して、マウスクリックイベントをタッチジェスチャーにマッピングしました。

MVVMアーキテクチャと双方向データバインディング

Ext JS 4で MVC アーキテクチャを導入しました。Ext JS 5 には、双方向データバインディングを可能としながら、ビジネスと表示のロジックをよりよく区別する MVVM (Model-View-View-Model) アーキテクチャがあります。MVVM があると、ビューで行った変更が自動的にモデルに書き込むことが (またはその逆も) 可能となります。このライブで自動的なビューとモデルの間の同期 (双方向データバインディング) があると、時間も大きく節約しますし、開発時のエラーも削減します。その上、演算値や演算フィールドもあり、そのためビューにバインドされているオブジェクトは同期される前に演算されて変化させます。MVVM アーキテクチャが皆さんのお役に立てば嬉しいです。

MVVM に加えて、Ext JS 5 では ViewController の導入で、MVC の対応を改善しました。ViewController は関連しているビューに直接スコープされていて、そのため、通常の MVC でオブジェクトの参照やアプリケーションの状態を引き戻す操作に必要だった大きなオーバーヘッドをほとんど無くすことが出来ました。アプリケーションは、View のイベントをグローバルでリッスンするジェネリックな Controller を避けて、メモリーと処理時間を節約できます。

レスポンシブレイアウト

Ext JS 5 ではデスクトップとタブレットの両方で、最適な視覚的な体験とナビゲーションの需要に応えるためのレスポンシブコンフィグプラグインを導入しました。デバイスの向きが変化すると (端末が回転された場合) ナビゲーションのエレメントの位置やレイアウトを変更する必要があるアプリケーションにとって、我々の新しいレスポンシブコンフィグシステムで自動的に対応することができます。

responsiveConfig: {
    landscape: {
        region: 'west'
    },
    portrait: {
        region: 'north'
    }
}

または

responsiveConfig: {
    'width &gt; 800': {
        region: 'west'
    },
    'width &lt;= 800': {
        region: ‘north'
    }
}

このサンプル実際に試して、デスクトップブラウザでブラウザウィンドウのサイズを変更したり、タブレットを回転してみてください。

Neptune Touch と Crisp Touch

我々の豊富な UI コンポーネントのセットがデスクトップとタッチパネルデバイス上で同じルック＆フィールを提供するために、二つの新しいマルチデバイスのテーマがあります。既存の Neptune テーマのタッチバージョンと、新しい Crisp テーマは、タッチデバイスで指を使う時に必要な、幅広いコンタクトエリアを提供するために、エレメントの大きさを大きくしています。

これらのテーマのタッチバージョンをデスクトップとタブレット両方で利用できますが、デスクトップ用には Crisp と Neptune テーマ、タブレット用には Crisp Touch と Neptune Touch を利用するのをおすすめします。

グリッドの改善

おそらく、グリッドは Ext JS の最も人気のあるコンポーネントですが、バージョン5では、このグリッドをよりパワフルにしました。Grid Widgets の導入で、(また、これは他の新しい機能 Buffered Updates と合わせることもできます) リッチデータの視覚化の能力とビッグデータの分析をサポートするリアルタイムなデータアップデートを可能にしました。

Grid Widgets はグリッドセル内にチャート、プログレスバー、ラジオボタン、スライダーなどのコンポーネントを埋め込むとても便利で軽量なコンポーネントです。

Session Management

Ext JS 5のとても素晴らしい機能の一つはSession Managementです。データパッケージにトランザクションを追加しました。Ext JS 4 でレコードをサーバーに保存するときに、保存する順番に注意する必要がありました。その上、変更されたレコードとストア全てで save を呼び出すことを確保する必要がありました。この作業のため、データ変更の照合はとても難しいことになっていました。

Ext JS 5 では、[Ext.data.Session] という新しいクラスがこの活動を管理します。セッションはサーバー上で、更新、追加、削除する必要があるレコードを追跡します。新しく生成されたレコードがトランザクションの他のレコードを正確に参照することを確保するために、この操作の順番を決めることもできます。セッションを利用して、レコードとそのアソシエーションを編集し、アップデートを集めて簡単にサーバーにコミットできます。セッションが編集を全て記録しているため、完了したトランザクションが成功したか失敗したかによって、全ての変更を一括で取得したり、取得しないということができます。

ルーティング

Ext JS 5 では、アプリケーションの URL をコントローラーのアクションとメソッドに翻訳する URL ルーティングメソッドを利用し、アプリケーション内でのディープリンクを可能とします。ルーティングがあると、サーバー上で実存するファイルにマップしない時でも、リクエスト URL を受入れるようにアプリケーションを構成できます。URLの (記述子の一部として使用される) # の部分は、ページを再びロードせずに、アプリケーションがブラウザのヒストリースタックを管理する方法を提供しています。ハッシュが変更する度に、ブラウザは ‘hashchange’ イベントを発火し、これはクライアント側のアプリケーション自身で使うことができます。

タッチに最適化されたチャート

Ext JS 4 では、SVG と VML 上に作成されたチャートパッケージを利用して、プラグイン無しのチャートを提供しました。しかし、Canvas は速いがSVG の速度は遅く、メモリーも限られているモバイルデバイスには、このチャートパッケージはあまり合ってなかった事に気づきました。 Ext JS 5 では、チャートをタッチ対応で低メモリーなデバイス用に最適化されている Sencha Touch のチャートパッケージの上に作成しました。新しいタッチ操作に最適化されたチャートパッケージには、ファイナンシャルチャート、複数軸のチャート、3D チャート、ズームやパンなどの、多くの機能が揃っています。パフォーマンスはより高速で、拡張できますし、タッチパネルではより素晴らしいユーザー体験を提供します。

Kitchen Sink のように、様々なチャートを整理するサンプルアプリケーションまで作成しました。注：Ext JS 4 の既存のチャートは別のパッケージとして、まだ両可能となっていますので、使うことはできます。ただ、タブレットをターゲットにしている場合には、新しいチャートのパッケージにアップグレードするべきです。ドキュメントに詳しくExt JS 5 への移行が説明されています。

Sencha Core Package

Ext JS 5 の主な目的の一つは、Ext JS と Sencha Touch のフレームワークのコアをできるだけ一致させることでした。Ext JS と Sencha Touch の間で共有できるように、クラスシステム、データパッケージ、機能／環境の検出のコードを共通のコアに組織化しました。この共通のプラットフォームがあるために、デスクトップ、タブレット、他のタッチデバイスに渡って、フレームワークに関わらず、リソースを共有するアプリケーションを生成できるようになります。現在は Sencha Touch もこの共通コア上に構築し、公開する準備中です。

ガイドとドキュメント

Ext JS 5 の、新しい機能と改善について 12 以上の新しいガイドを含めただけではなく、より簡単に使えるようになるために、ガイドシステムもアップデートしました。このガイドはフレームワークアップグレード、新しいSencha Cmd、チャートアップグレード、アプリケーションアーキテクチャなどを説明します。

ここまで Ext JS 5 の重要な新しい機能をいくつか紹介しましたが、もっと紹介することがあります。他の新しい機能、改善、変更の紹介に対して、我々の What’s New in Ext JS 5 ガイドをご覧ください。

サポートするブラウザとプラットフォーム

Ext JS 5 で変わらなかった重要な点は、まだ IE8 を重要なブラウザとしてサポートを続けることです。Ext JS 5 は Safari 6+, Firefox, IE8+, Chrome, Opera 12+をサポートしています。モバイルでは、iOS 6 と 7 では Safari, Android 4.1+ では Chrome, IE10+ が動作する Windows 8 タッチパネルの端末（例えばSurfaceとタッチパネルのノートパソコン）をサポートしています。

Ext JS 5 トレーニング

Sencha トレーニングプログラムもアップデートしました。Ext JS 5 のトレーニングは6月の頭から提供します。これは Ext JS 5 Update, Ext JS 5 へのアップグレード, Ext JS 5 のファストトラックのクラスも含まれています。

Ext JS 5 の価格

公開時点で、Ext JS 5 のライセンスは、2014年6月30日まで、現在のExt JS 4.x の価格で提供します。この値段で Ext JS 5 を購入するに、最も良いチャンスです。2014年7月1日以降は新しい価格になります。詳しくは、 Ext JS 5 の製品ページをご覧になるか、または連絡して下さい。

謝辞

Sencha のユーザーコミュニティにお礼を申し上げます。皆様の機能リクエスト、提案、フィードバック、バグ報告があったからこそ、このリリースで目標を達成することができました。弊社で、Ext JS 4 から Ext JS 5 のアップグレードにコードの変更がなるべく少なくするように、とても努力しました。このバージョンの作成はとても楽しかったので、皆様も既存の Ext JS 4 のアプリケーションのアップグレードと Ext JS 5 で生成する新しいアプリケーションに関して、楽しんで下さい。

Sencha Blog