SenchaはSencha Touch Chartsを発表した。これは、HTML5を使ったリッチでインタラクティブなチャートコンポーネントのベータバージョンでモバイル端末向けに最適化されている。Sencha Touchの一部として提供されるこのライブラリを使うことで、開発者はApple iOS、Android、BlackBerry端末に最適化されたインタラクティブなレーダーチャートや棒グラフ、折れ線グラフ、積み上げグラフ、円グラフを構築できる。
Sencha Touch Chartsはデバイスの性能を最大限に利用するためにハードウエアアクセラレーションを利用する。また、複雑なデータの視覚化を簡単にする自然なジェスチャ操作をサポートする。例えば、ピンチ操作による拡大やスワイプ操作による切り替え、タップ操作による詳細表示などだ。
このライブラリはHTML5を使う。例えば、描画には<canvas>要素を使い、スタイルにはCSS3を使うことで、モバイルブラウザにリッチな経験を提供する。このライブラリはSencha Touch上で利用される。Sencha Touchはモバイルウェブアプリ向けのフレームワークで、Sencha Touch Chartsの評価版はSencha Touchのアドオンとして無償で提供されている。
Sencha Touch Chartsでは、コンポーネントとそのコンポーネントに対する操作はJavaScriptで定義する。
var chartPanel = new Ext.chart.Panel({
title: 'Pie Chart',
fullscreen: true,
dockedItems: [...],
items: {
cls: 'pie1',
theme: 'Demo',
store: store1,
shadow: false,
animate: true,
insetPadding: 20,
legend: {
position: {
portrait: 'bottom',
landscape: 'left'
}
},
interactions: [
{
type: 'reset',
confirm: true
},
{
type: 'rotate'
},
{
type: 'iteminfo',
gesture: 'taphold',
listeners: {...}
},
{
type: 'piegrouping',
//snapWhileDragging: true,
onSelectionChange: function(me, items) {
...
}
}
],
series: [...]
}
});
スタイルにはCSS3にコンパイルされるSASS/SCSSを使う。
...
chart[cls=piecombo1] {
padding: 20;
series {
label {
display: rotate;
contrast: true;
font: 14px Arial;
}
}
}
...
このベータの段階には修正するべき問題、変更する可能性がある点がある。
- BlackBerryでレーダーの軸が正しく表示されない
- iPadでズームしすぎると表示に問題が発生する
- インタラクションの既定のジェスチャ操作は現在レビュー中で、リリース前に変更があるかもしれない
- SASSの構文は現在レビュー中でリリース前に変更があるかもしれない
- その他
InfoQはSenchaに、この新しい製品について詳しく話を聞いた。
InfoQ: 性能を改善するためにHTML5のCanvasを描画のコアに利用しましたね。この点についてもう少し[技術的な]詳細を教えてください。
Sencha: HTML5で使える描画技術はいくつかあります。具体的に言うとSVGとCanvasです。私たちはCanvasを選びました。理由はふたつあります。ひとつは、Honeycomb以前のAndroidがSVGをサポートしていないことです。市場に出回っている膨大な数のAndroid 2.xをサポートするにはSVGは使えません。そして、ふたつ目の理由は性能です。すべてのモバイルデバイス(電話とタブレット)で描画のテストをしたところ、性能面で最も優れていたのはCanvasでした。
InfoQ: Sencha Touch Chartsと貴社の他の資産、例えばSencha TouchやExt JS 4はどのような関係にありますか。
Sencha: Sencha Touchは無償で使えます。Sencha Touch ChartsはこのSencha Touchの有償のアドオンです。Sencha Touchはモバイル向けHTML5フレームワークであり、Ext JSはディスクトップ向けのフレームワークです。まだ、価格は発表していません。もう少しお待ちください。
InfoQ: 少し前では、ディスクトップ環境で、シンプルなクロスブラウザのチャートを使うことすら困難でした。この製品を作るにあたりHTML5の最も便利な点は何だと思いましたか。
Sencha: 一般的な話ですが、チャートの表示やデータの視覚化の点で一番大きいのはブラウザに組み込まれている描画システムの改善です。従来はブラウザはテキストとドキュメントのレイアウトに優れていました。しかし、Canvas、SVG (そしてもう少しすればWebGL)が登場したことで、今までFlashやSilverlightに頼らなければならなかった機能を手に入れました。ブラウザがこのような機能を持ったことでプラグインに頼る必要がなくなったのです。
InfoQ:モバイルWebKitなどのモバイルブラウザをターゲットにした製品を作る上で、ディスクトップブラウザと比べて、どのような点が難しかったですか。
Sencha: 他のモバイル開発者の方々と同様、性能が最大の課題でした。私たちhは性能をふたつの軸に分けて考えました。ひとつは生の計算/CPUの性能です。チャートが操作に対して可能な限りすぐに反応するようにするため、多くの時間を割いてCPUに過大な負荷をかけない設計、実装をしています。そしてふたつ目はメモリです。モバイルデバイスのRAMは限られています。なので、デバイスが持っているメモリ量をしっかりと考慮しました。
InfoQ: SCSSやCSS3をそのまま使うのではなく、SASSをスタイリングに選んだのはなぜですか。
Sencha: SASSとSCSSは同じです。SASSバージョン3の新しい構文をSCSSと呼びます。普通のCSS3ではなくSASSを使うのは、メタプログラミングのような機能を提供してくれるからです。例えば、背景色よりもボタンの色を20%明るくしたい場合、変数や関数を使えば手動で直さなくても、アプリケーション全体にこの変更を適用できます。
InfoQ: クロスブラウザのインタラクティブなチャートコンポーネントはどうですか。
Sencha: Touch Chartsは様々なモバイルブラウザプラットフォームでインタラクティブに使えます。多くの異なるモバイルOSでデータを見るときに、ピッチ操作でのズーム、パン、スワイプなどができます。
InfoQ: 現時点ではまだベータ版ですが、実際のリリースはいつですか。
Sencha: 最初のリリース(バージョン1)は今月中の予定です。
Sencha Touchや モバイルExtJSの情報はここInfoQでも詳しい情報が得られる。