増井ラボノート コロンブス日和

第10回 DragZoom

この記事を読むのに必要な時間:およそ 2.5 分

大規模データの検索と閲覧

世の中にはさまざまな大規模データが存在しますが,きちんとした管理者が存在するデータは階層的な構造で管理されているのが普通です。地名や電話番号やドメイン名などは厳格に階層的に管理されていますし,図書館の蔵書は分類番号を使って階層的に管理されています。個人的なデータであっても,現在のPCのファイルシステムでは,フォルダを使って階層的に管理しなければなりません。

一方,世界最大のデータベースであるWebは階層的に管理されていませんし,手持ちの書籍のような小規模データは手間をかけて階層的に管理するほどでもないので,適当に管理している人がほとんどだと思われます。しかし,管理された大規模階層データは数も種類も圧倒的に多いので,現在も将来もこれらを簡単に検索したり閲覧したりする方法が重要であることは間違いないでしょう。

明示的な階層が存在しないリストのようなものでも,あたかも階層が存在するかのように扱うことができる場合があります。たとえば辞書の場合,「aで始まる単語」「bで始まる単語」のように分類を行い,その下に「aaで始まる単語」「abで始まる単語」のような階層を考えれば階層データと同じように扱うことができます。つまり,ソートが可能なあらゆるデータは階層的なデータとして扱うことができると言えるでしょう。

階層データの閲覧

Webのようにリンクで自由に結合された構造のデータと比べると,階層的に管理された情報は対話的に閲覧/検索するのが比較的簡単です。図書館で分類に基づいて本を捜したり辞書で単語を捜したりといった作業は日常的なものですし,計算機で階層メニューやフォルダ階層などを操作することは一般的になっています。

階層的な構造を持つ大規模データを閲覧するためにさまざまなインターフェース手法が利用されています。小さな計算機画面に大量データを全部表示することは不可能ですから,なんらかの方法でデータの一部だけを表示する工夫が必要です。対話的に表示部分を変更しながら大規模データを閲覧するために次のような方法が広く使われています。

  • 少しずつ順番に見る(e.g. スクロール,辞書や書籍をパラパラめくる)
  • キーワードなどでフィルタリングして表示量を減らす
  • 階層的に選択を繰り返してだんだん細部を表示する(e.g. ファインダー,階層メニュー)
  • 注目点を部分的に拡大する
  • なめらかに直線的にズーミングする(e.g. GoogleMaps)

フィルタリングにより絞り込んだデータをスクロールして閲覧するなど,これらを組み合わせた手法もよく用いられています。

ZUI

階層メニューを使ったりフォルダ選択を繰り返したりして大規模データを絞りこむ方法は,データの一部分の選択を繰り返すことによる非線型なズーミングの一種といえます。これに対し,CGでよく使われる「Perlin Noise」で有名なKen Perlinは,2次元画面上に表現したデータ全体をなめらかに直線的に拡大したり縮小したりすることによって大規模データの閲覧をできるようにする「Pad」というZUI(Zooming User Interface)システムを1993年に提案し,研究者の間でかなり話題になりました図1)。Padのような単純な方法を使えば拡大/縮小操作と移動操作だけであらゆる大規模な階層データを楽に閲覧できるわけですから,CLI,GUIのつぎに来るのがZUIだと期待され,さまざまなシステムや製品プロトタイプが作成されました。

図1 ZUI(Zooming User Interface)システム

図1 ZUI(Zooming User Interface)システム

ところが結果的にPadやその後継システムは世の中で流行ることがなく,ZUIの試みはほとんど忘れ去られてしまいました。流行らなかった理由はいろいろあるのでしょうが,2次元画面を自由に拡大縮小して目的の情報を得ることは普通のユーザには難し過ぎたということが大きな理由の1つでしょう。また当時はマウスホイールはまったく普及しておらず,ズーミングのための標準的な操作が存在しなかったことも関係しているかもしれません。

現在はGoogle Mapsなどでズーミング操作はお馴染みになっています。地図の場合は操作対象が具体的で誰にでも比較的わかりやすいためズーミング操作が問題なく利用されているようですが,地図以外への応用は進んでいませんし,スクロール操作とズーミング操作が衝突したり操作を間違えることはよくあります。2次元画面のズーミングを利用したインターフェースが今後流行する可能性は低そうです。

DragZoom

Padのような純粋なZUIは残念ながら普及に成功しませんでしたが,スマホのような小さな画面で大規模データを閲覧/検索するためにズーミングとフィルタリングが有効なことは間違いありませんから,これらを組み合わせて誰でも使える簡単なインターフェースを工夫すればズーミングインターフェースが日の目を見ることがあると思います。

私はスクロールバーを拡張してズーミングやフィルタリングを可能にした「LensBar」というシステムを長年提案しているのですが,これを簡単にした「DragZoom」というシステムを紹介します。

階層データのズーミング

図2は,フィルタリングとズーミング操作によってファイルを検索しようとしているところです。最初はUNIXのファイル構造のうちrootに近い部分だけが表示されています。灰色の横線は,エントリが隠れていることを示しています。

図2 DragZoom(灰色部分にはエントリが隠れている)

図2 DragZoom(灰色部分にはエントリが隠れている)

libexecをクリックして右にドラッグするか,スマホなどの場合は指でタッチしてから右にドラッグすると図3のようにリストがズーミングされます。

図3 リストがズーミングされる

図3 リストがズーミングされる

さらに右にドラッグを行うと,図4のようにすべてのファイルが見えるようになります。

図4 すべてのファイルが見られるようになる

図4 すべてのファイルが見られるようになる

階層構造の要素を選択して拡大してブラウジングする方法はTreeViewや階層メニューなどでもお馴染みですが,DragZoomでは左右ドラッグでなめらかにズーミングのレベルを調整していることになります。

複数の指を利用できるスマホやタブレットではピンチ操作でもズームレベルを変えることができます。

ドラッギングによるスクロール

上下にマウスドラッグを行うと,スマホのスクロール操作と同じように画面をスクロールできます図5)。

図5 マウスドラッグでスクロール表示できる

図5 マウスドラッグでスクロール表示できる

スクロール操作とズーミング操作は完全に可逆的なので,スクロールしたりズーミングしたりしたあとでカーソルや指をもとの位置まで戻すと画面は最初の状態に戻ります。

著者プロフィール

増井俊之(ますいとしゆき)

1959年生まれ。慶應義塾大学環境情報学部教授。ユーザーインターフェースの研究者。東京大学大学院を修了後,富士通半導体事業部に入社。以後,シャープ,米カーネギーメロン大学,ソニーコンピュータサイエンス研究所,産業技術総合研究所,Appleなどで働く。2009年より現職。携帯電話に搭載される日本語予測変換システム『POBox』や,iPhoneの日本語入力システムの開発者として知られる。近著に『スマホに満足してますか? ユーザインターフェースの心理学』。

コメント

コメントの記入