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

第10回DragZoom

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

世の中にはさまざまな大規模データが存在しますが、きちんとした管理者が存在するデータは階層的な構造で管理されているのが普通です。地名や電話番号やドメイン名などは厳格に階層的に管理されていますし、図書館の蔵書は分類番号を使って階層的に管理されています。個人的なデータであっても、現在の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 マウスドラッグでスクロール表示できる

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

フィルタリングとズーミングの組み合わせ

テキスト入力枠に「ruby」と入力すると、図6のように「ruby」を含むファイルやディレクトリだけが表示されます。ファイル名の左側にはフォルダ名も縦に表示されているので、どのフォルダのファイル名がマッチしたのかがすぐわかります。

図6 ⁠ruby」を検索
図6 「ruby」を検索

この状態では「ruby」を含まないファイル名はまったく表示されていませんが、⁠/usr/bin/ruby」の部分をズーミングすると図7のように「usr」⁠include」なども見えるようになります。DragZoomでは、リストの各エントリに「重要度」を設定しており、マウスや指を移動したときは閾値(いきち)を変化させて閾値より大きな重要度を持つ行を表示するようになっています。⁠usr」「include」のように階層のrootに近いファイルには大きな重要度を与えているため、キーワードにマッチされていなくても表示されるというわけです。

図7 ズーミングしながらファイルを探す
図7 ズーミングしながらファイルを探す

階層がない場合

辞書データのように階層構造が存在しないデータでもズーミング検索できるようにするため、Drag Zoomでは仮想的な階層を利用しています。たとえばa,b,c,d,e,f,gというフラットなデータがあるときは、それぞれに対して1,2,1,3,1,2,1のような重み(重要度)を与えておきます、ユーザが操作する閾値を超えたものだけ表示されますから、ユーザのズーミング操作で閾値を変えることによってd,b/d/f,a/b/c/d/e/fのように表示が変化することになります。

DragZoomでフラットな英語辞書をブラウズすると初期画面は図8のようになります。

図8 フラットな英語辞書をブラウズしてみる
図8 フラットな英語辞書をブラウズしてみる

ここでドラッグ操作でズームレベルを変化させると表示は図9のようになります。

図9 ドラッグ操作
図9 ドラッグ操作

さらにズームすると単語の意味が表示されます図10⁠。

図10 単語の意味が表示される
図10 単語の意味が表示される

キーワードマッチングにあいまい検索機能を利用すると、多少間違ったキーワードを指定しても最も近いエントリが表示されます図11⁠。

図11 あいまい検索
図11 あいまい検索

音楽ファイルの検索

図12は私の手持ちの音楽ファイルで「day」を検索してみたところです。このように、ファイルでも辞書でも音楽ファイルでもDragZoomで簡単に検索できることがわかります。

図12 ⁠day」で検索
図12 「day」で検索

ズーミングシステムの課題

スクロールバーを使わずズーミングとフィルタリングだけで簡単に大規模データの閲覧や検索ができることはたいへんメリットがあるはずです。多くの大規模データは階層的に構造化されていますからDragZoomは広範囲なデータの検索に利用できるのですが、残念ながら私はまだこの手法を普及させることに成功していません。

有用性は十分なのに普及がうまくいかないのは、左右ドラッグでズーミングを行うというインターフェースに慣れるのが難しいことと、従来の方法でもとくにひどく困ることがないという理由によると思われます。DragZoomを使わなくても普通のテキスト検索や階層メニューなどで階層データをとりあえず眺めることができるのであれば、わざわざ新しい手法に乗り換えようとする人は少ないでしょう。

しかしDragZoomの方法は慣れればかなり便利なのはたしかです。いろいろなサービスで地味に使えるようにしたうえで、今後これをはじめとするさまざまなズーミングインターフェースが普及してほしいものだと願っています。

DragZoomのデモおよびソースコードは、http://DragZoom.com/およびhttp://GitHub.com/masui/DragZoomで公開しているのでご利用ください。

Software Design

本誌最新号をチェック!
Software Design 2022年9月号

2022年8月18日発売
B5判/192ページ
定価1,342円
(本体1,220円+税10%)

  • 第1特集
    MySQL アプリ開発者の必修5科目
    不意なトラブルに困らないためのRDB基礎知識
  • 第2特集
    「知りたい」⁠使いたい」⁠発信したい」をかなえる
    OSSソースコードリーディングのススメ
  • 特別企画
    企業のシステムを支えるOSとエコシステムの全貌
    [特別企画]Red Hat Enterprise Linux 9最新ガイド
  • 短期連載
    今さら聞けないSSH
    [前編]リモートログインとコマンドの実行
  • 短期連載
    MySQLで学ぶ文字コード
    [最終回]文字コードのハマりどころTips集
  • 短期連載
    新生「Ansible」徹底解説
    [4]Playbookの実行環境(基礎編)

おすすめ記事

記事・ニュース一覧