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

第10回 DragZoom

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

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

テキスト入力枠に「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 2020年6月号

2020年5月18日発売
B5判/176ページ
定価(本体1,220円+税)

  • 第1特集
    入門! Rust
    メモリ安全とパフォーマンスを両立するしくみとは?
  • 第2特集
    プロフェッショナルに訊く
    テストコードの流儀
  • 第3特集
    低レイヤソフトウェア開発入門(後編)
    Linuxカーネルを読み解く,OS・ベアメタルアプリを創る
  • 短期連載
    はじめよう,高速E2Eテスト
    【1】Seleniumで体験するE2Eテスト――速度の課題と並列化による対策
  • 短期連載
    スタートアップのためのAWSテクノロジー講座
    【2】コンテナ導入に向けた現実的な方法を知る

著者プロフィール

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

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