HOME > 開発者向けBLOG > JavaScript >  Sencha Touch 2.1 は何が新しくなるのか?

Technology Note 開発者向けBLOG

JavaScript

Sencha Touch 2.1 は何が新しくなるのか?

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

この記事は、US Sencha社ブログ “What’s New in Sencha Touch 2.1?”を翻訳したものです。

何が新しくなったのか?

Sencha Touch 2.1は、Senchaモバイルフレームワークの次なるリリースです。 2.1版のリリースは以下の主要なアップグレードを含んでいます。 大幅なパフォーマンスの改善、チャート作成サポート、高度リストコンポーネント、さらにSencha Mobile Packager を通じた、より良いネイティブサポートを受けることができます。


パフォーマンスの改良

Sencha Touch 2.0では、ネストしたレイアウトのパフォーマンスに関する問題点を、数人の開発者が発見しました。 調査してわかったことは、パネルを隔離し、より多くのレイアウト情報をブラウザーに送ることにより、フレームワークやアプリケーションのパフォーマンスが向上するということです。 この実装はAPI を変えませんでしたが、DOM 構造や追加の CSSクラスネームが、現在この改善のために使われています。カスタムCSS を使うアプリケーションの開発者は、このアップデートにともなうセレクターを再検査してください。

もう1つの内部パフォーマンスの改善点は、‘painted’イベントへの変更です。 これは、CSSトランジション終了のイベントを使い、DOMにトラバースすることなく、エレメントとコンポーネントが見えているときに、それらを検出します。 この方法は‘erased’イベントに使うことはできず、パフォーマンスを落とすことがあるので、必要のない場合はこのイベントを使用しないことを推奨します。

最後に、TaskQueueメカニズムを追加しました。これは、リードとライトのオペレーションを合わせてバッチするのを助け、DOM内部のリフロー間のDOMリード・ライトオペレーションのインターリービングを防ぎます。


Sencha Touch Charts

また、今回のSencha Touch 2.1アップデートサイクルでは、Sencha Touch Chartsを改訂しました。Sencha Touch Chartsは、Sencha Touch GPLフレームワークの一部として利用できます。そして、Teamパーッケージである、Sencha CompleteもしくはSencha Completeの一部としても利用できます。改訂されたSencha Touch Chartsでは、重要な改善がドローとチャートパッケージの両方に施されました。これにより、パフォーマンスを高め、柔軟性を広げました。


Sencha Touch ChartsのDrawパッケージでは、何が新しくなったのか。
拡張可能スプライト

今回、各スプライトはそれぞれのクラスを持ちます。この変更は、パフォーマンス、柔軟性、保全性にとって多くの恩恵をもたらします。ドロー指示は、今回から、具体的なスプライトクラス内に定義されます。スプライトのサブクラス化は、既に完成したスプライトの機能を強化するのを可能にし、共通の機能性を共有することにより、効率化します。さらに、クラスのヒエラルキーを利用することで、ドローエンジンのコードをよりモジュール化し、保全性を高めます。


修飾子と属性の定義

修飾子と属性の定義は、今回のチャートリリースにおける、2つの最も革新的な考え方です。

属性の定義 (AD) は、カスタム属性をカスタムのスプライトクラス上に定義するのを可能にし、遅延更新を実行します。各スプライトは、「attr」と呼ばれるメンバーをもち、これは、スプライトの「attribute set (属性セット)」です。全てのステート (キャッシュと同様に) には、属性セットが保持される必要があります。ADの第一の目的は、属性のセットが呼び出されたとき、データが属性セットの内容を変えるのに、どのように使われるのかを定義することにあります。

ADは、Sencha Touchのコンフィグシステムと同様に、アプライアー (プロセッサーと呼ばれます) とアップデートするものを定義することができます。しかし、より高いパフォーマンスを得るために、アップデートのプロセスをバッチ処理します。例えば、四角形スプライトの幅と高さを変えたとき、両方のケースで、パス・キャッシュを更新する必要がありますが、アップデートをバッチしたので、パスは1度だけアップデートされます。

ADのアプライアーは、この状況では「プロセッサー」と呼ばれ、属性セットに数値を適用する前に、チェックと正常化が可能です。定義済みのプロセッサーを参照するために名前を使うことも可能です。これはとても便利で、保全性を大幅に高めます。また、ADは、属性アイテムにエイリアスを定義することもできます。

修飾子は、付加的な変更を属性セットに加えることができます。モディファイアーは、Decorator パターンの適応です。スプライトは、モディファイアーのリストを持つことができ、属性セットのコンテンツを処理するために繋き合わされています。このようにして、モディファイアーはフィルターのパイプラインのようになり、結果として生じる属性を徐々に作り上げます。例えば、ある属性セットの数値のクエリーを行うと、ハイライトのモディファイアーは、ある属性を、そのハイライトされた数値に変えます。同様に、アニメーション・モディファイアーは、各フレームの各アニメーション属性に最新の数値を生成します。

修飾子は、各モディフィケーションのモジュラーを作ることで、個別に動作し、保全性を高めます。以前は、スプライトをハイライトするには、ハイライトのコード内部でアニメーションと関連して動作する必要がありました。これには、エラーを起こしやすい60ラインのコードが関わっていました。モディファイアーを使うことで、ハイライトは2ラインで済みます (単にハイライトされた属性をセットするだけです)、そして、スプライトは、ただハイライトするだけです。


フライウェイト・インスタンス化・スプライト

新しいChart Packageでは、多くのチャートの視覚的要素を「マーカー」として表しました。マーカーは、フライウェイト・スプライトで、1つの属性セットJavaScriptプロトタイプから分かれたものです。これらのマーカーは同じスプライト・オブジェクトを共有します。このような方法で、スプライトはレンダリングの (データではなく) ロジックを定義します。スプライトを複製することは、ヘビーウェイトなオペレーションになり、計算コストが高くなります。代わりに、レンダリングのための漸増のデータのみが、少しだけ異なる1組のオブジェクトのために生成されます。これにより、大量のメモリーを節約します。このテクニックは、「インスタンス化レンダリング」と呼ばれます。新しいDrawパッケージでは、インスタンス化スプライトは、分岐したインスタンスのコンテナです。そして、インスタント化レンダリングを使って、それらをレンダリングします。


Retinaディスプレイサポート

Drawパッケージは今回、ピクセルが2倍になったRetinaディスプレイを、HTML5 API window.devicePixelRatioを使って感知し、ピクセル比を高め、高解像度機器の忠実性を高めます。ピクセル調節が必要なチャートは、この要素を考慮にいれます。機器のピクセルサイズが決められていなければ、ドローエンジンが引き続きベクターベースなので、開発者はピクセル比を見ることはできません。


Sencha Touch ChartsのChartパッケージでは、何が新しくなったのか。
集合チャート

膨大なデータを直接スクリーン上にプロットしようとした場合、1ピクセル以下のスペース内に、数百ものポイントをプロットしている可能性があります。これは、描線と塗りつぶしのためのアルゴリズムのコストを考慮すると、計算パワーの膨大な浪費です。したがって、1ピクセル (幅) 内の最小と最大の値だけを保持します。例えば、もし、とても大きなデータセットが、1ピクセル幅にレンダリングされる、1000データポイントを持っていたとすると (金融チャートなど)、そのチャートは、そのピクセル内の最小と最大値だけをレンダリングします。この要約を、「集合」と呼ばれる前処理テクニックによって達成しました。この集合によって、単純化された任意のデータを、ある特定のものに、瞬時にクエリーすることができます。

この問題を解決するために、Segment Tree (セグメントツリー) を利用しました。これは、敏速なデータ集合のためのデータ構造です。これは、集合を完成させるために線形の時間と空間を必要とし、クエリーするために対数時間を必要とします。また、セグメントツリーは、O(log(n)) 時間内での記録のアップデートを可能にします。これは、将来、部分的アップデートなどの機能が実装されるとき、とても役立ちます。


金融チャートの種類

Chartパッケージを使って、金融データを表示するために、2つの新しいチャートを導入しました。Candlestick (ローソク足) チャートとOpen-High-Low-Close (OHLC)チャートです。これらは、両方とも、新しいChartパッケージのローソク足シリーズとして、利用できます。また、Stock Appの例は、50日移動平均チャートを含みます。



無限スクロール付き高度リストコンポーネント


前回の実装

1. 1つの追加アイテムのみがロードされました。
2. コンポーネントは、更新されたコンテンツのリストを通じて再利用されます。

また、Sencha Touch 2.1は、新しいリストコンポーネントを含みます。新しい実装は、多数アイテムを含むリストを利用するとき、もはや劣化したパフォーマンスを持ってはいません。加えて、intemConfigとアイテムTplとともに特定すると、アイテムConfigに同時にコンバートされ、リストはコンポーネントを使うことができます。これは、リストがData StoreとDOMの要素の間の1対1の対応に縛られないことによります。これらの変更により、DOM構造は、リストのために変更されました。したがって、適切なスタイルをリストに追加するために、CSSセレクターを変える必要があるかもしれません。通常、パディングやマージンの追加のために、セレクターを’.x-list-item’ から ‘.x-list-item > .x-dock-horizontal > .x-dock-body’へと変える必要があります。Touch Tweetsの例を、新しい実装とともに変更しました。コンポーネントベースのDataViewを使う代わりに、いまでは、新しいリストを使います。これは、ダイナミックで大きなリストを含む、新しいリストのコンポーネントを使うのによい例です。また、この例は、アップデートされたPullToRefreshとListPagingプラグインを例示します。


Sencha Mobile Packegerを通しての、強化されたネイティブサポート

Sencha Mobile Packagerは、以前はSDKツールとして知られていた新しいSencha Cmdに含まれます。このリリースでは、ネイティブサポートが強化されました。今回から、あなたのディバイスで直接アプリケーションを動作させることができ、ネイティブパッケージャーを使って、シミュレーターを作動させることもできます。また、ディバイスへのリードオンリーのアクセスと、APIコンタクトをiOSとAndroidの両方に加えました。このパッケージャーのコンフィグにより、rawConfigキーを使って、iOS info.plistおよびAndroid AndroidManifest.xmlの「生の」データを見ることができます。また、ネイティブパッケージャーへの管理者ではないアクセスに関する意見を聞き、管理者としてアクセスしなくてもいいように、設定を更新しました。


入手について

Sencha Touch 2.1 GAは、11月に一般向けに公開されます。 リリースに関する発表は、私たちのブログをご覧ください。

PAGETOP