情報処理学会 インタラクション 2018
IPSJ Interaction 2018

1B46
2018/3/5

デジタル画像群とそのメタ情報の複数次元可視化黄 鑫†1

高嶋 和毅†1 北村 喜文†1

概要：我々の身の周りのデジタル画像には多くのメタ情報が含まれており，正確な画像群の情報把握のためには，その両方を理解することが重要である．しかしながら，これまでの静的な画像群ヴューワでは，ユーザは画像とメタ情報を同時に把握することは難しい．本インタラクティブ発表では，創発のアルゴリズムを用いて画像群とそれらが持つ複数次元のメタ情報を柔軟に可視化するインタフェースについて紹介する．本インタフェースでは，画面の X 軸とY 軸を利用するだけではなく，Z 軸や他の Bertin らが提唱する視覚変数を応用することで 4 次元までのメタ情報を扱うことができる．画像同士は創発に基づき動いており，常に最適な配置に保たれるため，次元の入れ替えなどユーザの多様な要求を瞬時に満たすことができる．本デモでは，提案するインタフェースの様々な機能を，代表的な応用例である画像群の検索や探索場面を中心に紹介する．

Multi-dimensional Visualization of Digital Images
and Their Meta-DataXin Huang†1 Kazuki Takashima†1 and Yoshifumi Kitamura†1
Abstract: We propose a new interactive visualization of a large set of digital image content using their embedded multidimensional meta-information. A prototype is designed and implemented based on the algorithm of D-FLIP, our previous work forflexibly displaying large image collection. We design various dynamic image visualizations with up to 4 dimensional metainformation by using Bertin’s visual on a 2D screen. The prototype offers many functionalities allowing users to dynamically andeffectively manage the visualizations of the photos and their meta information, responding to user’s current needs and interest. We
show its effectiveness and potential through the demonstration using representative applications scenarios such as content
observation and search.

1. はじめにPhotoCube[7]等が提案されている．しかし，扱うメタ情報が低次元 (1 から 2 次元) に限られたり，高次元では画像群の大量の画像を扱う機会が多くなってきたが，多くの画像一覧性が低下したりするという課題があり，画像群とそのには，撮影した時間や場所等のメタ情報が埋め込まれてお複数次元のメタ情報を効果的に可視化するインタフェース

り，これらは探索等の画像の全般的な管理に利用されていはこれまで提案されてこなかった．

る．その他にも，例えば，映画のアイコンとなる代表的画

そこで我々は，創発アルゴリズムを用いて画像群をイン

像には，発行年，役者名，評価スコア等，その画像 (映画)タラクティブに動的表示できる D-FLIP[4,5]をベースにし，を説明するための多くのメタ情報が付与されている．これ

画像群を複数次元のメタ情報を用いて柔軟に可視化できるらのメタ情報は，ユーザが所望のコンテンツを検索したり，インタフェースを開発した．多次元のメタ情報の可視化に見やすいように並べ替えたりするときに利用される．このあたり，Bertin[8]の挙げた視覚変数のアイデアを導入する

ように，我々は普段から様々な場面で，閲覧の対象となることで，同時に 4 次元までの情報を効果的に可視化する．

画像だけではなく，それを説明する各種メタ情報も同時に

また，D-FLIP と同様に，画像群に対するグルーピング等，扱っている．しかし，我々が扱う情報や画像は増える一方多様な操作やアニメーション等による印象操作も可能であであり，また，それぞれの画像が持つメタ情報も多次元化る．本提案においてインタフェースの設計に関する詳細はする傾向にあるため，従来の単純な画像ビューワ等では画[9]を参照されたい．本インタラクティブ発表では，提案す像とそのメタ情報の両方を効果的に扱うことは難しい．

る可視化手法とインタフェースをデモンストレーションし，これまで，画像群をメタ情報に応じて効果的に見せる手法として，木構造に従ってインタラクティブに表示する
PhotoMesa[1]，画像をグリット状に配置する方法[2, 3]，2 次
元ディスプレイ上にアニメーションとともに再配置する
D-FLIP[4,5]，画像群とそれらのメタ情報を同時に可視化す
る MIAOW[6]，そして 3 次元空間上に画像群を配置する________________________________†1 東北大学 電気通信研究所
Research Institute of Electrical Communication, Tohoku University© 2018 Information Processing Society of Japan

その効果や画像とメタ情報の両方を理解する方法について聴衆とともに議論したい．

2. デジタル画像群とそのメタ情報の複数次元可視化手法
2.1 可視化の方針
PhotoCube[7]や一般的な 3 次元グラフ等に示されている
ように，3 次元空間の各軸にメタ情報の 1 次元を割り当て

359

情報処理学会 インタラクション 2018
IPSJ Interaction 2018(a) ウィンドウ構成(b) 正射投影視点

1B46
2018/3/5(c)明度へのメタ情報の割り当て(d) 透視投影視点

図 1 提案インタフェースのウィンドウ構成と視覚変数による可視化
Fig.1 Window configuration and visualizations using visual variables
ることで，3 次元のメタ情報を用いた画像群の可視化は可想的な視点を移動させることができる操作機能を実装した．

能である．しかし，この方法では，視点により画像同士がここで，ある画像の Z 軸位置が，この仮想的な視点よりも重なる場合があるため，一覧性に欠けるという課題がある．

後方にある（仮想的な視点の Z 軸上の値よりも画像が持つ本研究においても，2 次元ディスプレイの横と縦の軸（X とメタ情報の値が小さい）場合，図 1(c)に示すようにその画Y 軸）に加えてディスプレイの奥行き方向を 3 次元目とし像の明度は下がって表示される（小さく表示するなど目立て利用するが，同時に視覚変数を活用することで，画像同たなくすることも出来る）．これより，ユーザはそのスライ士の遮蔽による一覧性の問題を回避し，さらに４次元のデダを操作することによって簡単に当該メタ情報に関する画ータ可視化を試みる．本研究では，Bertin が挙げた視覚変像間の関係を知ることができる．

数[8]から，サイズや明度など，人がより正確に知覚しやす

4 次元目の可視化には，視覚変数として画像のサイズをいものを優先的に利用する．

用いた． D-FLIP のアルゴリズムでは重なりを回避するた

2.2 画像群と複数次元メタ情報の可視化

めに画像のサイズが時間的に変化するため，この変数の利

本インタフェースでは同時に 4 次元までのメタ情報の可用には注意が必要である．しかし，後述する応用例で示す視化が可能である．1，2 次元目についてはそれぞれ画面横ように，画面全体を埋めるような条件ではない場合にはデ軸を X 軸，縦軸を Y 軸とし，各軸に関する画像の位置（2ータの大小を表す有効な手段である．

次元平面上の座標値）でそのメタ情報を可視化した(図 1(a))．

2.3 実装とインタラクション

3 次元目の可視化では，視覚変数のうち位置と明度を利

本 イ ン タ フ ェ ー ス は ， Unity. ver5.5 ， Microsoft .Net用した．まず，画面奥行を Z 軸として用い，Z 軸上におけ

Framework 2.0，C#により実装した．画像群の表示アルゴリる画像の位置により可視化したいメタ情報を表現する．こズムは我々の先行研究である D-Flip [4,5]を元にした．のとき，画面の奥に向かう方向 (Y 軸から X 軸へ右ねじを本インタフェースでは 4 次元までの同時可視化が可能で回す方向) を正とした．本インタフェースでは，画像群をあり，現在可視化している次元に応じて，黄枠で示した画重なりなく閲覧するための正射投影視点 (図 1(b)) と，Z 軸面の上下左右端の領域にバーが表示される．各バー上には上の画像位置も同時に閲覧することができる透視投影視点

現在割り当てられているメタ情報の名称とその最大・最小(図 1(d))の 2 つをユーザは任意に切り替えることができる．

値が表示される．ユーザの多様な可視化要求に対応するた

次に明度について，画像同士の遮蔽の問題を回避するため，め，柔軟に軸を入れ替えることができる 2 つのインタラク

Z 軸位置に割り当てたものと同じメタ情報を，同時に画像ションを用意した．ユーザは，メニューバー上に配置され枠線の明度にも割り当てた．枠線の明度が大きいほどそのたボタンを用いて可視化するメタ情報を取捨選択すること画像のメタ情報の値が大きいことを表す．加えて，Z 軸バができる．それに加えて，メタ情報が割り当てられた軸のーに付属するスライダを用いて，Z 軸に沿ってユーザの仮バーから別のバーへのドラッグアンドドロップによって，© 2018 Information Processing Society of Japan360

情報処理学会 インタラクション 2018
IPSJ Interaction 2018(a) X 軸に体長を割り当てた様子

1B46
2018/3/5(b) Y 軸に出産数を割り当てた様子(c) Z 軸に寿命を割り当てた様子

図 2 デジタル動物図鑑の利用例
Fig.2 Examples of digital visual dictionary of animals.

(a) 健康志向のユーザの利用例(b) 男子学生ユーザの利用例(c) 初めて店に訪れたユーザの利用例

図３ デジタルメニューの利用例
Figure 3 Examples of digital menu
メタ情報を割り当てる次元を柔軟に入れ替えることが可能
である．

うこと等が見て取れる．
以上の例のように，ユーザは画像群の複数次元のメタ情3. 応用例

報を柔軟に変更しながら，画像コンテンツ群に対する理解応用例として，画像群の「鑑賞」と画像群の中から特定の3.2 画像コンテンツ群の探索

画像を探す「探索」の 2 つについて述べる．
3.1 画像コンテンツ群の鑑賞を深めたり，興味を見出したりできると考えられる．
画像コンテンツ群の探索への本インタフェースの応用
例として，図 3 に示すような飲食店における「デジタルメ画像群の鑑賞とは，美術鑑賞教育に代表されるようなニュー」を実装した．既にデジタルメニューを導入してい画像コンテンツ群の閲覧行為そのものを目的とするシナリる店は少なくないが，単に印刷メニューのデジタル版であオである．画像とそれに関連するメタ情報は動物写真のホったり，Web インタフェースに類似したものが多かったりームページ[11]のものを用いた. 我々の研究でも，D-FLIPするため，大量のメニューを一覧した上で所望のモノを探を絵画鑑賞に応用する試みもある[10]．ここで一つの例とすための工夫等はみられない．この例での画像群はして，図 2 に示すような「デジタル動物図鑑」を実装した．

Flickr[12]よりパブリックドメインのものを用いた. インタ

動物につきそれぞれ解説を設ける従来の動物図鑑と異なり，フェースでは，画像に埋め込まれているメタ情報を様々に本インタフェースでは多くの動物の画像を一覧することが利用できるが，ここでは例として，多くのメニューが持つできる．また，様々なメタ情報を用いて画像の鑑賞を助け定量的な情報をもとにした探索行動について考えてみる．

る．例えば，図 2(a) では X 軸に「体長」のメタ情報を割り健康志向の客の場合は，図 3(a) に示すように食べもののカ当て，動物の大小関係を可視化している．図 2(b) はさらにロリー（X 軸）や塩分（Y 軸），脂質（サイズ）等のメタ情Y 軸に「出産数」を割り当てたものである．このときの画報を重要視することが考えられるが，そうではない趣向の像群の様子から，身体の小さい動物のほうがより多くの子客（例えば男子学生客）の場合は，図 3(b) に示す通り，価を産む傾向等が見て取れる．さらに図 2(c) は Z 軸に「寿命」を割り当てたものである．Z 軸のスライダを動かすことで各画像の Z 軸位置を確かめることができ，同図で示す格（Z 軸），重量（X 軸）等がより注目されるかもしれない．
またその店舗に初めて訪れた客の場合は，図 3(c) のように月間の注文数（X 軸）や価格（Z 軸），料理の登録年月（Y例では，寿命が 13 年以下の動物の画像が暗く表示されて軸）等に注目するかもしれない．このように，ユーザは目いる．例えば，このような可視化では，画面右下に明度が的やその時置かれている状況に沿って様々な要求事項を持高い動物画像が多いため，図 2(a) で示した体長だけではなっていると考えられるため，複数の要求事項を同時に複数く，寿命が短い動物がより多くの子を産む傾向にあるとい© 2018 Information Processing Society of Japan361

情報処理学会 インタラクション 2018
IPSJ Interaction 2018

1B46
2018/3/5の次元に割り当てることができる本インタフェースは探索行動を支援することができると考えられる．

4. おわりに本インタラクティブ発表では，創発アルゴリズムを用いて 画 像 群 を イ ン タ ラ ク テ ィ ブ に 動 的 表 示 で き る DFLIP[4,5]をベースにし，画像群とその複数次元のメタ情報を同時に柔軟に可視化できるインタフェースについて紹介する．本インタフェースでは画像の位置，明度，およびサイズの視覚変数を利用して 4 次元の情報を可視化することができ，また，ユーザは任意に複数次元メタ情報の中から注目したいメタ情報を取捨選択することができる．デモでは，本インタフェースを用いた画像群の鑑賞と探索の応用例を中心に，多様な機能を紹介する．今後は，インタフェースの有用性についての定量的な評価や実データの利用などを検討したい．

参考文献[1] Bederson Benjamin B: PhotoMesa: a zoomable image browser
using quantum treemaps and bubblemaps; In Proc. Symposium on
User Interface Software and Technology, pp.71-80 (2001).
[2] 五味愛, 宮崎麗子, 伊藤貴之, リジア: CAT: 大量画像の一覧可視化と詳細制御のための GUI; 画像電子学会誌, Vol. 37, No.
4, pp. 436-443 (2008).
[3] Gerald Schaefer: A next generation browsing environment for large
image repositories; In Proceedings of Multimedia Tools andApplications, Vol. 47, No. 1, pp. 105–120 (2010).
[4] 北村 喜文, 高本 恵介, 高嶋 和毅, 伊藤 雄一, 横山 ひとみ,Liu Gengdai, Subramanian Sriram: インタラクティブで柔軟なデジタル写真群動的表示法; インタラクション 2013 論文集,pp. 40-47 (2013).
[5] Chi Thanh Vi, Kazuki Takashima, Hitomi Yokoyama, Gengdai Liu,Yuichi Itoh, Sriram Subramanian, and Yoshifumi Kitamura: Adynamic flexible and interactive display method of digital
photographs, Entertainment Computing, Volume 5, Issue 4, pp.
451-462, (2014).
[6] 五味愛, 伊藤貴之:「何時,何処で,誰と」３つのメタ情報を用いた大量個人画像の一覧可視化手法; 情報処理学会グラフィ
クスと CAD 研究報告学生合宿表彰者セッション, CG-138-2(2010).
[7] Hlynur Sigurþórsson, Grímur Tómasson, Björn Þór Jónsson &Laurent Amsaleg: PhotoCube: Towards Multi-Dimensional ImageBrowsing; Reykjavik University Technical Report Computer
Science, RUTR-CS 12001 (2012).
[8] Jacques Bertin: Semiology of graphics: diagrams, networks, maps;
University of Wisconsin Press (1983).
[9] 田村 晃一, 萩原 拓真, 高嶋 和毅, 北村喜文，デジタル画像群の複数次元を用いたインタラクティブな可視化に関する研究，ヒューマンインタフェース学会研究報告集，Vol.19, No.
3, SIG-DeMO-03, 123-128, (2017).
[10] Shoko Usui, Katsumi Sato & Yoshifumi Kitamura: A dynamic,flexible & interactive display method of paintings forcommunicative art appreciation among students; In Proc.
SIGGRAPH Asia Symposium on Education, Article No. 3 (2015).
[11] 動物写真のホームページ(http://www.ax.sakura.ne.jp/~hy4477/)[12] Flickr (https://www.flickr.com/)© 2018 Information Processing Society of Japan362