WISS 2016

高解像度壁面ディスプレイを用いた大規模情報可視化のためのズーミングユーザインタフェースフレームワーク Chip とその応用
豊田 正史 ∗
概要. 高解像度壁面ディスプレイを用いた大規模情報可視化に対応可能なズーミングユーザインタフェー
スフレームワーク Chip を提案し，その応用事例を紹介する．大規模なデータ分析においては，分析結果も大規模となるためその表示には高精細ディスプレイ装置が必要となる．Chip は軽量なグラフィカルオブジェ
クトのズーミングユーザインタフェース及びリモートサーバからの効率的なデータ取得機構を持つフレームワークであり，メインメモリに収まらない大規模データをインタラクティブに閲覧可能としている．

1

はじめにビジネスインテリジェンスツールに代表される従来の情報可視化フレームワークは，表示を行う端末に必要データをダウンロードしてディスプレイに表示するものが大半を占めている．しかし，計測機器の高度化，ストレージ容量の増加に伴いデータ蓄積と利活用が推進されることで分析可能なデータの量は増大を続けており，データを全てメインメモリに配置して可視化することは不可能なケースが増加している．分析対象のデータはデータセンター上のストレージに蓄積されており，分析結果のうち必要な部分をメインメモリにロードして可視化するケースが多い．Lins らの nanocube システム [2] は、サーバに空間効率の良いインデックスを作成しクライアン
トからのクエリに応じて分析結果をインタラクティブに表示可能としているが，サーバ側にデータおよびインデックスがメインメモリ上に展開されている必要がある．
端末側の表示装置においても 4,000 ピクセル級のディスプレイが既に普及し，8,000 ピクセル級のディスプレイも商品化が進んでおり，可視化可能な情報量が増加している．特にデータセンターがリモー
トにある場合，画面に表示可能なデータをメモリにロードする時間は無視できないほど長くなる傾向にある．例えば，Google Maps 等の画像タイルを用いた地図表示アプリケーションを考えると 8,000 ピクセル級のディスプレイにおいては，256 ピクセル四方の画像タイルを 512 枚リモートサーバから取得する必要があり，パン・ズーム等のインタラクティブな操作により多数のタイル取得リクエストを発行する必要がある．
本稿では，高解像度壁面ディスプレイを用いた大規模情報可視化に対応可能なズーミングユーザインタフェースフレームワーク Chip を提案し，その応∗Copyright is held by the author(s).
東京大学生産技術研究所

用事例を紹介する．Chip は軽量なグラフィカルオ
ブジェクトのズーミングユーザインタフェースおよびリモートサーバから効率的なデータ取得機構を持つフレームワークであり，メインメモリに収まらない様々な大規模データをインタラクティブに閲覧可能としている．

2ズーミングユーザインタフェースフレー
ムワーク Chip
Chip は広大な 2 次元空間上に軽量なグラフィカ

ルオブジェクトを大量に配置し，その上をパン・ズー
ム操作により閲覧可能とするズーミングユーザイン
タフェースフレームワークである．Java プログラ
ミング言語の Swing ツールキット上に実装されており，Swing のコンポーネントよりさらに軽量なコンポーネントを数十万から百万個の規模で配置し閲覧することが可能である．ズーミングユーザインタ
フェースとしては Bederson らの Pad++ [1] に類似しているが，Pad++がオブジェクトに奥行方向の座標を持たせて 2.5 次元空間にオブジェクトを配置するのに対し，Chip ではオブジェクト間に入れ子的な階層関係を明示的に持たせ階層間をナビゲートできるようにしている点が異なる．Chip はオブジェクトの配置に制約を課していることになるが，大規模なデータ構造によく現れるオブジェクトの概要と詳細データの関係を明示的に表現可能な点で優れている．
大規模データの表示のための機構として Chip は，各オブジェクトを表示するのに必要なデータをリモー
トサーバから必要に応じてダウンロードすることを可能としている．各オブジェクトはリモートサーバからのデータ取得用の URL を持つことができ，オブジェクトが表示画面内に現れ十分なサイズにズームされたタイミングでダウンロードを開始するよう指定することができる．データを保持するサーバ側
ではデータ取得用のウェブサーバを用意し RESTWISS 2016

図 2. 大規模ドライブレコーダビューア

図 1. 大規模写真ビューア

API 等で適切なサイズのデータ取得を可能とすることが必要となる．Google Maps のような地図表示アプリケーションはこの機構を用いて実現可能である．画像のタイルに相当するコンポーネントを作成し，タイルサーバにタイル画像を要求する URL を設定すれば良い．
高精細な大規模ディスプレイ装置を用いた場合，上述したように表示に必要な情報を取得するために大量の URL 取得リクエストがデータ保持サーバに送られることになる．一般的なウェブサーバでは大量のリクエストを効率的に捌くことは難しいことから，Chip ではアプリケーション側で同時に発行するデータ取得リクエストの数を制限する機構を提供している．さらに，表示オブジェクトの画面上での位置を考慮し，ユーザが着目する画面中央を優先的に処理し，徐々に周辺に向かってデータ取得を行う優先度付きリクエスト制御機構を提供している．優
先度はユーザのパン・ズーム操作によって動的に変更され，常にユーザの注目場所のデータが優先的に取得されるようにしている．この機構により，ウェブサーバ側で特別なロードバランシング機構などを導入しなくてもある程度データ取得のパフォーマンスを制御可能となっている．本機構により，Chip は16,000 ピクセル級の壁面ディスプレイにおいても問題なく動作している．

3

応用例

ここでは，Chip の応用例として大規模写真ビュー
ア，および，大規模ドライブレコーダデータビュー
アを紹介する．図 1 は，Chip を大規模な写真閲覧に応用した事例である．デジタルカメラは高精細化が進んでおり 1 枚の写真が数 MB 程度の容量を持ち 1日で千枚規模の撮影を行うこともまれではない．こうした大規模な写真ライブラリの全容を閲覧しズー
ム操作に応じて詳細な画像データを取得して表示することが可能である．また，上記のデータ取得機構
により，画像データの取得，サムネイル作成，メモ

図 3. 車載カメラ画像のズーム表示

リ容量が不足した際の不要な画像データのガーベッジコレクションなどを適切なタイミングで制御することが可能となっている．
図 2，3 は，業務用ドライブレコーダから取得した大規模なドライブレコーダデータ及び車載カメラでの撮影写真を閲覧可能としたビューアである．図 2
では Google Maps のような地図表示上に，走行実績データをヒートマップ表示しており，ズームインしていくとその場所で撮影された車載カメラ画像を見ることが可能となっている．走行データからの道路リスク抽出等の分析を実施し，異常個所を本ブラウザで閲覧することでリスク原因を調査するというユースケースを想定して実装されている．

参考文献[1] B. B. Bederson and J. D. Hollan. Pad++: A
Zooming Graphical Interface for Exploring Alternate Interface Physics. In Proceedings of the 7th
Annual ACM Symposium on User Interface Software and Technology, UIST ’94, pp. 17–26, New
York, NY, USA, 1994. ACM.
[2] L. Lins, J. T. Klosowski, and C. Scheidegger.
Nanocubes for Real-Time Exploration of Spatiotemporal Datasets. IEEE Transactions on Visualization and Computer Graphics, 19(12):2456–2465, Dec. 2013.