インターフェイスの街角 (26)– LensBar
増井 俊之

大量のデータを計算機の小さな画面で扱うためには、表示すべきデータを選択する手法（フィルタリング）と、データを効果的に視覚化して眺める手法（ブラウジング）が重要です。今回は、この 2 つの手法を効果的に統合した

GUI ツール ``LensBar´´を紹介します。

大きなデータを扱う手法

分が表示されているかがノブの位置で直感的に分かるという利点があります。
いずれの場合も、ユーザーの操作によって表示位置を変化させて大きなデータを扱う点は共通しています。
データ構造を利用する方法
特殊なデータ構造を利用し、同時に扱うべきデータの量を制限する手法もよく使われています。最近は、UNIX を計算機の画面サイズは限られているので、膨大なデータはじめとするさまざまな OS で膨大な数のファイルが扱わを扱わなければならない場合であっても画面にはごく一部れるようになりました。これについても、階層的なファイしか表示できません。したがって、なんらかの方法で表ル構造を適用すれば各ディレクトリ内のファイルの数を制示量を制限したり、あるいは表示部分を移動させることに限できるので、ファイルを一覧しやすくなっています。

よって、小さな画面で大きなデータを扱えるようにする必

ただし、この方法では、全体のファイル構造と自分の位要があります。そのために、文字端末インターフェイスや置をつねに把握しておかないと迷子になるおそれがありま

近年のグラフィカル・インターフェイスではさまざまな工す。そのため、たとえば UNIX では pwd や ls などのコ夫がおこなわれています。

マンドがよく使われます。

計算機で大量のデータを扱う手法としては、従来から以下のような方法が利用されています。

表示すべき Web ページのデータが膨大でスクロールでは対応しきれない場合、Web ページを複数のページに分割して相互にリンクを張るといった手法もよくみかけま

データの一部を見る方法
文字端末では表示可能な文字数が限られていますから、テキストエデ ィタなどでは文章の一部だけを画面に表示して編集するのが普通です。たとえば Emacs では画面を複数に分割し、複数のファイルを同時に眺めたり、同じファす。これも、データ構造を応用した表示手法の一種と考えてよいでしょう。
フィルタリングによってデータを絞り込む方法
均質なデータが大量に格納されている電話帳やデータのイルの異なる部分を眺めたりできるようになっています。

相互関係が複雑に入り組んでいる Web のリンクなどにつ表示するだけで編集しない場合には、more や less などのいては、これらを扱うための適当なデータ構造がありませツールを用いて表示位置を変更しながら順次内容を眺めてん。そこで、キーワードなどの検索条件にもとづくフィルいきます。

タリングを用いて表示するデータの量を制限することがよグラフィカル・インターフェイスでは、表示位置をキーくおこなわれています。データベースや Web のサーチエ操作で変えるのではなく、マウスとスクロールバーを使っンジンによる検索は、フィルタリング手法の一種といえまて変更するのが一般的です。この方法には、全体のどの部す。

1

初校 （ 1999 年 12 月 24 日）

UNIX MAGAZINE 2000.2

図 1 Focus+Context

図 2 Windows95 の TreeView と ComboBox

必要です。

• 表示部分を滑らかに移動させる機能• 表示したい部分を位置で指定する機能• 表示したい部分を名前で検索する機能
全体と部分を同時に表示する方法
スクロールバーを利用している場合、現在表示されて• 重要な部分だけを選択的に表示する機能• 可視部分とデータ全体との関係を明示する機能いる部分が全体のどのあたりかを知ることはできますが、表示されていない部分に何があるかは分かりません。しかし、全体の構造を把握しつつ部分データを操作したいこともあります。そのために、表示されている情報だけでなく、全体も見えるようにする方法が考案されています。

1 つは ``Overview + Detail´´と呼ばれる手法で、全体構造をたとえば目次のように別ウィンドウに表示します。
もう 1 つは ``Focus + Context´´で、場所によって表示の粒度を変える方式です。詳しく見たい部分は細かく表示し、概要だけ見えればよい部分は不要なものを間引いて表示します。
図 1 は、Focus + Context の手法で米国の地図を表現したものです [1]。ここでは地図の見たい部分（セントルイス付近）だけを拡大し、周囲を小さく歪ませて表示しています。
全体表示と部分表示とを簡単に切り替えられるのならば、これらを同時に表示するのと同様な効果が得られます。1998 年 7 月号で紹介したズーミングインターフェイ
ス・システムでは、ユーザーがズーミング操作によって詳細表示と全体表示を滑らかに変化させ、データの全体構造と部分の詳細を同時に把握できます。

検索システムや grep コマンドなど、データを検索したりフィルタリングしたりする手法は文字ベースのインターフェイスでもひろく使われています。一方、スクロール
バーやズーミング・インターフェイスによって表示領域を滑らかに変化させる各種のブラウジング技術は、最近のGUI では一般的になっています。しかし、両者をうまく融合した GUI 手法には、まだこれといったものがありません。

Windows 9x で階層的ファイルシステムをブラウズするためには、デ ィレクトリごとにウィンドウを開いたり、TreeView というコントロールを用いたツールを使うのが。大きなファイルシステムを眺める場一般的です（図 2 左）合、ディレクトリごとにウィンドウを開いていくと、ウィンドウの数が多くなって扱いにくくなります。TreeView
では、階層的データもある程度は扱いやすくなります。しかし、ディレクトリ内に多くのファイルがあるときなどは、全体を眺めるためにスクロールバーを多用しなければならず、階層を上下する操作もそれほどスムーズではありません。
リスト内の項目をメニューで選択する場合は、階層メニューや ComboBox コントロールが使われます（図 2

ブラウジングとフィルタリングの融合右）。数個ならともかく、数百個の項目のなかから目指すものを選びだすのは容易ではありません。

大規模なデータの一部だけを操作したり眺めたりするに一般的なスクロールバーや階層メニュー、TreeView 、は、必要な部分をうまく選択して表示・操作できるように

ComboBox は、データの一覧のなかから必要なものを選する技術が重要です。そのためには、以下のような機能がぶという目的はほぼ共通していますが、機能が低いためUNIX MAGAZINE 2000.2

2■ TreeView やComboBox はコントロールであり、ツールとはいえないのではないでしょうか?

に、場面に応じて異なるツールを使い分けなければなりません。

LensBar
LensBar[2, 3] は、さきほど挙げた必要な機能をすべてブラウジングできます。

LensBar の使用例
英和辞書

LensBar を英和辞書に適用した例を図 3 に示します。

備え、フィルタリングとブラウジングをうまく融合させた画面上のテキスト・ウィンドウで検索パターンを指定する

GUI 部品です。比較的単純なツールであるにもかかわらと、パターンマッチの結果がスライダの背景に表示されまず、スクロールバーや階層メニュー、TreeView 、Com-す。初期状態（図 3-a ）では検索パターンを指定していなboBox などの特徴をすべて兼ね備えています。

いため、すべての単語がマッチし、スライダの背景には矩LensBar は、普通のスクロールバーにフィルタリング形が表示されています。すべての単語のうち、スライダノ用のテキスト入力領域を追加し、以下の機能を統合したもブの中心の横線部分に対応した単語が右側に表示されていのです。

ます。この状態で左側のスクロールバーを動かしたり、スリストのズーミング
スクロールする画面上で表示される項目の数は限られています。そこで、項目の重要度 (DOI：Degree OfInterests)[4] に応じてズーミング操作をおこない、表示する項目を制御して大きなリストを扱うようにしています。
マウスを左右にドラッグしてズーミングレベルを変化させていくと、現在のズーミングレベルよりも大きい DOI 値をもつ項目だけが表示されます。

、すべてのクロールバー領域をドラッグすれば（図 3-b ）単語をブラウズすることができます。
動的曖昧検索をおこなうと、図 3-c〜d のように特定の文字列を含む単語だけを表示したり、マッチする単語がない場合に綴りがもっとも近い単語を探して表示することができます。曖昧検索が実行されているときは曖昧度に応じてパターンの背景が暗くなります。
この例では、検索にマッチした項目に対して DOI 値を
図 3-e のように割り当てています。このように、選択項目パターンマッチによる表示の間引き（この図では ``graphics´´ ）の位置と各項目の位置の差を 2LensBar では、ズーミングによる表示の間引きに加え、進数で表現したときの LSB (Least Significant Bit) のフィルタリング用のテキスト入力領域で指定された検索パ``0´´の数を DOI 値とすれば、ズーミングレベルを連続的ターンにマッチする項目のみを表示する動的なフィルタリに変えたときに単語を半分ずつ間引いて表示していくことングもおこないます。これによって、表示される項目の数ができます。

を減らします。つまり、grep のようなフィルタリング機能がつねに働いており、パターンにマッチしたデータだけが表示され、操作できるようになっているわけです。

メールブラウザ
図 4 は、LensBar をメールブラウザに適用した例です。上側の LensBar でメールのタイトルのリストが表動的曖昧検索示され、選択されたメールの本体が下側に表示されていま検索パターンにマッチする項目がない場合には、曖昧検す。下側の LensBar では検索パターンは指定されないの

索 (approximate pattern matching) が自動的におこで、通常のスクロール・ウィンドウとして動作していまなわれ、パターンにもっとも近い項目が表示されます [5]。

す。検索パターンとして ``uist´´を指定すると、本文に文パターンマッチの結果の視覚化とブラウジング

字列 ``uist´´を含むメールだけが選択されます（図 4-b ）。

パターンマッチの成功/失敗に応じて対応するスクロー

メールは時間順に並んでいるため、検索結果のパターンかルバー上の位置の表示色を変更し、全データのなかでどのらこの件がアクティブだったおおよその時期を思い出すこ程度マッチする部分があるかを示します。さらに、スクとができます。さらに、Lifestreams システム [6]1 のよ

ロールバーでは、パターンマッチが成功した項目に対応する位置の上にノブが表示されるため、検索結果が効率的に

3

1 Lifestreams とは、ファイル操作などのアクティビティを時間軸だけで管理する ``超整理法´´的なアプローチです。

UNIX MAGAZINE 2000.2

図 3 辞書への応用(a) 初期状態(b) ノブの微調整(c) “q” でフィルタリング(d) 難単語の検索(e) DOI 値(f ) 256 個ごとに表示

DOI 値

エントリ

......

......

0102010∞01......

granulegrape
grapefruit
grapevine
graph
graphic
graphicallygraphics
graphitegraph paper......

図 4 メールブラウザ(a) メールブラウザ

UNIX MAGAZINE 2000.2(b) ``uist´´でフィルタリング

4

図 5 プログラム・ブラウザ(a) 初期状態(c) 重要行も表示(b) ``mousex´´を検索

図 6 プログラムブラウザの DOI 値
DOI 値

エントリ

0005−1}lbmouse(LensBar *lb){
long mousex,mousey;
long origx,origy;......

55mousex = getvaluator(MOUSEX);
startx = x = mousex - origx;......

32−4−10mousex = getvaluator(MOUSEX);......
mousex = getvaluator(MOUSEX);
display();}}

うに、時間的に関連のあるメールをブラウズすることがでントの小さい行が重要であることが多いため、インデントきます。の小さな行ほど DOI 値が大きくなるようにしています。

プログラム・ブラウザ
図 5 は、LensBar をプログラムのブラウジングに適用した例です。プログラムリストの初期状態（図 5-a ）から、``mousex´´をキーとして検索すると図 5-b のようになります。マッチングの結果とその分布から、これは局所的にマウスを右にドラッグしてズーミングレベルを小さくすると、マッチしていない行も順に表示されるようになります。この状態では、マッチした行だけでなく、プ（図 5-c ）ログラムの重要な行（関数宣言など）も表示されています。
このように DOI 値を割り当てることによって、Focus +Context 機能を実現しています。

使われている変数であることが分かります。
この例では、DOI 値は図 6 のように割り当てていま階層メニューす。マッチした行には正の DOI 値、失敗した行には負UNIX の /usr ディレクトリを、階層メニューとしての DOI 値を割り当てますが、C のプログラムではインデLensBar で表示した例を図 7 に示します。ズーミングレ

5UNIX MAGAZINE 2000.2

図 7 階層メニュー(a) 階層メニュー(b) サブディレクトリを拡大

図 8 全体表示

図 9 関東地方にズームイン

図 10 茨城県にズームイン

図 11 ``no´´を含む地名をフィルタリング

図 12 ``noh´´を含む地名のリスト

図 13 ``noh´´を含む地名の周辺情報表示

ベルを大きくすると上位階層のみが表示され（図 7-a ）、小においてとくに大きな効果を発揮します。

さくすると深い階層まで表示することができます（図 7-

図 8 は、PalmPilot 上の LensBar で日本の地名を表。通常の階層メニューとは異なり、a と b の状態は連b）示しているところです。 ``関東´´をタップしてペンを右に続的/可逆的に遷移可能なのが特徴です。

動かすと県がリストされ（図 9 ）、さらに右に動かすと市や。
郡が表示されます（図 10 ）PalmPilot 上の LensBar

検索パターンを入力すると、それにマッチする地名だけがリストされます。たとえば ``no´´と入力すると、 ``の´´LensBar はもちろんパーソナル・コンピュータの GUI画面でも有効ですが、PDA のような ``Baby Face´´端末UNIX MAGAZINE 2000.2という読みを含む地名だけがリストされ（図 11 ）、さらに ``h´´を加えて指定すると ``noh´´を含む ``八戸´´などの

6

図 14 予定表の初期画面

図 15``uis´´でフィルタリング（ますい・としゆき ソニー CSL ）地名だけが表示されます（図 12 ）。
ここで、ペンで ``八戸´´を選択して右に動かすと、読み■ 表現をすこし変更しました。に ``noh´´が含まれる八戸市などがある ``岩手´´や ``青森´´といった県名が表示されます（図 13 ）。
図 14 は、LensBar でスケジュール・データをブラウジングしているところです。まず、パターンとして ``uis´´を指定してフィルタリングをおこないます（図 15 ）
。続けて、その周囲のデータを表示することにより、UIST カン
ファレンス関連の仕事をいつごろおこなっていたかをブラウズすることができます（図 16 ）。
ここで扱っているデータは、1,000 行を超えています。
したがって、通常のスクロールバーなどでは、全体を効率よくブラウジングすることは困難です。このような場合にも、LensBar でズーミングやフィルタリングを併用すれば、小さな画面でも検索やブラウジングが効果的におこなえるようになります。

おわりに今回は、大量の情報のブラウジングとフィルタリングの両方をサポートする GUI 部品として ``LensBar´´を紹介

図 16 ズームイン表示[参考文献][1] Manojit Sarkar and Marc H. Brown, “Graphical fisheye views”, Communications of the ACM, Vol. 37,
No. 12, pp. 73–83, December 1994
[2] Toshiyuki Masui, “LensBar–visualization for browsing and filtering large lists of data”, In Proceedingsof IEEE Symposium on Information Visualization(InfoVis’98), pp. 113–120, October 1998
[3] 増井俊之「ブラウジングとキーワード検索を統合した GUI 部
品 LensBar 」、安村通晃（編）『インタラクティブシステムとソフトウェア VI：日本ソフトウェア科学会 WISS’98 』、
pp.153–158 、近代科学社、1998 年 12 月
[4] George. W. Furnas, “Generalized fisheye views”, In
Proceedings of the CHI’86 Conference on Human
Factors in Computing Systems and Graphic Interfaces, pp.16–23, Addison-Wesley, May 1986
[5] 増井俊之、水口 充、George Borden 、柏木宏一「なめらかなユーザインタフェース」、第 37 回冬のプログラミングシン
ポジウム予稿集、pp. 13–23 、情報処理学会、1996 年 1 月[6] Eric Freeman and Scott Fertig, “Lifestreams: Organizing your electronic life”, In AAAI Fall Symposium: AI Applications in Knowledge Navigation andRetrieval, November 1995

しました。膨大な情報が流通している現代社会では、多種多様な情報をフィルタリングしたのちに眺めたり、編集したりといった手法がますます重要になってくるでしょう。

LensBar は、メニューやスクロールバーなどの基本的なインターフェイスの上位互換ツールと捉えることができ■ プログラムの入手先は ?

ます。したがって、 比較的単純なデータを扱う場合には有用ですが、今後はさらに複雑で大規模なデータにも対応できるブラウジングやフィルタリングのための基本ツールが必要になってくるでしょう。

7

UNIX MAGAZINE 2000.2