Ext JS は、最先端のデスクトップ Web アプリケーションフレームワークとして、認識されてきました。世界中にタブレットデバイスがパソコンの売上に挑むようになってから、個人や企業でのパソコンの利用環境は大きく変化してきました。Sencha はこの変化に気づいて、Ext JS 5 で新しい機能と最適化を導入しました。

Ext JS 5 は、Sencha Touch 2 から新しい技術をいくつか学びました。最高のモバイル Web アプリケーションのフレームワークから得た、何年もの経験に基づいて、デスクトップの Ext JS が現代のタブレットデバイス上で、申し分ない表示をする準備ができました。クラスシステム、イベント管理、ウィジェット、新しいデプロイのオプションまで、その改善はフレームワーク上で輝いています。

タブレットでリッチな Web アプリケーションを表示するだけでなく、Ext JS 5 は、タッチパネルデバイスに作成されたインタラクションのパターンを完全にサポートしています。

クラスシステム

タブレット向きの新しい機能性の重要な部分は Class System のアップデートで導入されています。Ext JS 4 でコンフィグシステムを導入しましたが、Sencha Touch 2 ほどは厳格に遵守されませんでした。Ext JS 5では、開発者は、config オブジェクト、ゲッター、セッター、アップデーター、アプライヤー、そして強力な Ext.factory まで活用できます。

ただ、Ext JS の新しい config システムは、Ext JS 4 の要件に従って、config オブジェクトの利用は必要条件にはなっていません。しかし、自動的に config オブジェクトのプロパティをルートのものに移動する能力があります。

この概念をよりよく説明するために、次のExt JS コードをご覧ください：

通常は、少なくとも Ext JS の場合には、 html プロパティは config ブロックの外側になるはずです。 Ext.Component は、 setHtml メンバー関数があるため、クラスシステムはセッターに値を渡します。

この重要な手段のおかげで、 Ext JS 5 が Sencha Touch 2 のために作成されたコードを再利用すること とその逆も可能となりました。開発者が二つのフレームワークで作成されたアプリケーションのコードを共有できるだけではなく、Sencha が Sencha Touch の重要な機能をたくさん Ext JS 5 に含む事もできました。

イベント

タッチパネルの中央の入力方法はタッチなので、Sencha が Ext JS 5 にタッチイベントとジェスチャーサポートを組み込みました。このアップグレードの重要な部分は、共用イベントをプラットフォームに合う形に変換する正規化パターンとなります。

このサンプルでは、ほとんどのデスクトップクライアントで mousedown イベントが利用されます。しかし、イベント管理システムは、タッチパネルデバイスを自動的に認識し、ブラウザの対応状況に応じて、 touchstart または pointerdown に切り替えます。イベントの変換は、タブレット上での適切な操作のためにとても重要です。

イベントのアップデートは双方向で、モバイルとデスクトップアプリケーション両方に新しい機能を追加します。Ext JS ウィジェットは swipe, longpress と他にモバイルアプリケーションのために設計されたジェスチャーに対して、デスクトップブラウザで実行されても反応します。もちろん、複数のタッチが必要なイベント（例えば pinch, rotate）は、マウス操作のデスクトップ環境にポートする事はできません。開発者がデスクトップにモバイルの体験を移す目的ではなく、表示の一貫性を保証する事でした。

タッチイベントが有効になるとともに、フレームワークにモーメンタムスクロールも登場しました。Touch Scroller は Ext JS 5 のとても重要な部分となり、タッチパネルデバイスでは、自動的に有効に設定されます。構成する必要はありません。

クラスシステムとイベント管理の両方のアップデートで、タブレット端末のサポートを大きく向上しました。エンドユーザーは、ビューとウィジェットを操作する時に、この機能を体験します。さて、最適なタブレットサポートのために、ウィジェットはどう組み合わせられているか確認しましょう。

ウィジェット

最適なタッチパネルの表示の目的は、タッチイベントを有効にするだけではありません。いくつかのマウスの操作パターン（例えば mouseover/hover, 右クリック）はタブレットでは動作しません。デスクトップブラウザでそのイベントをサポートするウィジェットは、別のインターフェースの操作方法を利用しています。

グリッドパネルは、このようなウィジェットの完璧な例となります。もしヘッダーメニューを見ると、それをオンの状態にするためには、いくつかの操作が必要となります。

拡張されたグリッドヘッダーメニュー

まず、メニューを起動するために、カラムヘッダーの上に mouse over します。そうすると、右揃えの矢印のボタンを表示します。最後に、ボタンを押してメニューをプルダウンします。

このワークフローは、そのままでは、タッチパネルで実現するのは無理です。しかし、グリッドパネルはタッチパネルを認識しますので、ネイティブのデスクトップパターンをタッチパネルの代わりのやり方に切り替える事ができます。タブレットデバイスで表示すると、グリッドは、longpress イベントが起きた際にヘッダーメニューを表示しますので、ユーザーは通常よりもう少し長くカラムヘッダーをタップするだけで済みます。

もう一つの面白い例は行のハイライトです。面白い理由は、タブレットでは、代替がいくつかあります。ハイライトの主な意味は、マウスポインターの位置をもっと簡単に認識するためです。タッチパネルはその問題が無いため、行のハイライトは使用されなくなりました。

Ext JS 5 のウィジェットはタブレットデバイスの表示のために最適化されているだけではなく、Sencha Touch 2 の新しい機能も含まれています。例えば、アイコン付きのボタンがあると、インターフェースがもっと美しくなります。

iconClsプロパティは、Ext JS 5 でも動作します。ボタンはタブパネルのような別のウィジェットにも使われているため、全体がアップデートされて見えます。

アイコン対応の新しいタブパネル

さらに、新しい Sencha Charts パッケージも、二つのフレームワークがお互いに美しく対話する例となります。チャートは、新しいクラスシステムとイベント管理のアップデートによって、真にデバイスを問わないユーザーインターフェースを得るだけでなく、しっかりしたAPI とパフォーマンスを保つ事ができます。Ext JS 5 あるいは Sencha Touch 2 で是非チャートをお試し下さい。

Sencha Charts は、Ext JS 5 と Sencha Touch 2 (complete) で初めて共有されるパッケージです。

これらのはっきりしたアップデート以外に、responsive プラグインの導入によって、どのウィジェットもモバイル専用のデザインルールを持つ事ができます。セッターがあるコンフィグプロパティでれば、デバイスの向きやより注意深く設計されたビューポートの寸法のルールに基づいて更新する事ができます。これについては、フィル・ゲラント氏が 「Ext JS でレスポンシブ アプリケーションをデザインする」 のブログ記事で細かく説明しましたし、この サンプル アプリケーション でも、機能を確認できます。

もしこの記事から覚える事があるとしたら、開発者がデバイスを問わずウィジェットを作成するツールが、Ext JS 5 で十分提供されています。mouseover または、右クリックのイベントに開発している時、タッチパネルを考えて、代替のイベントリスナーを準備して下さい。フレームワークは、組み込まれたウィジェットで、いくつかの解決策を提供しています。最高なアプリケーションを作成するために、それを監視して、学んで、再利用して下さい。

最後に、完璧に作成されたタブレット アプリケーションを、ユーザーのデバイスに届けなくてはいけません。

デプロイ

完璧なデスクトップとタブレットのアプリケーション作成の作業を頑張った後には、デプロイの段階に参ります。幸いな事に、複数のオプションがあります：

1. ブラウザ – 最もシンプルで直接的な方法は、HTTP(S) プロトコルを通して、 Web アプリケーションをクライアントのブラウザへ納品します。ソースコードの最小化、圧縮、最適化をするには、忘れずに Sencha Cmd の “sencha app build production” を利用します。
2. Sencha Space – エンタプライズのアプリケーションには、エンタプライズのソリューションが必要です。Sencha Spaceは、BYOD 環境内で保護された Web アプリケーションの提供と管理が可能となり、Ext JS 5 のアプリケーションとスムーズに動作します。
3. Cordova – ハイブリッドアプリケーションの開発者は、Ext JS 5 と Sencha Cmd 5 の間のインテグレーションの改善について喜ぶと思います。新しい構築機能により、開発者が “sencha app build native” コマンドを実行するだけでで、Cordova (または PhoneGap) 用に、アプリケーションを簡単にラップする事ができます。

まとめ

Ext JS 5 は、単にタブレットでアプリケーションを表示できるようにする物ではありません。完全に最初の手順から公開までのワークフローを可能とし、強力な操作機能を組み込み、アプリケーションのデプロイまで援助します。より重要なことには、とてもシンプルです。このため、初心者の習得の手間も大きく減少します。次のExt JS 5 のアプリケーションの作成を始める時に、誰かがそのアプリケーションをタブレットで楽しむ事を忘れないで下さい。