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

B122015/3/6

Web-DB における視覚的操作支援ツールの構築
斎藤 進也†	  	 概要：インターネット時代の昨今，さまざまな Web ベースの CMS（Contents Management System）が存在している．
本報告では，「データビジュアライゼーション」と「知識マネジメント」の融合的観点から，CMS を視覚的に支援することのできるユーザーインターフェースを提案する．具体的には，独自に開発を進めている３Ｄ-ＣＧを活用したデータビュアー「KACHINA CUBE システム ver.3」を取り上げ，１）データセット全体の俯瞰 ２）変量の表現，３）データとの対話デザインといった点を中心にデモンストレーションをおこなう．

Development of a Visual Supportive Tool for Web-Database Control
SHINYA SAITO†1	  	 Abstract: This presentation focuses on the graphical user interface of Web-based Contents Management System. In particular,
KACHINA CUBE version.3 that is original Web-based visualization tool will be brought up. Moreover, the topics of 1) overhead
view ability 2) expression of variables 3) interaction with data will be discussed at the demonstration.

1. 背 景備えた CMS（Contents Management System）でもある．	  	 	  多量のデータを視覚的にわかりやすく表現するための手法である「データ視覚化（Data Visualization）」，あるいは，

3. 視 覚 的 操 作 支 援 ツ ー ル の 概 要

イラストレーションやグラフィックスの観点から親しみや

3.1 視 覚 化 フ レ ー ム ワ ー ク

すく情報をデザインする「Infographics」に関する研究/実践	  視覚化の基本フレームとして，キューブ（立方体）の持の社会的インパクトが増している．古くは Edward Tufte

つ３軸のうち２軸を地図もしくは概念マップとして設定し，（1983）に代表される統計グラフィックス研究が多数行わ

残る１軸を時間軸もしくはユーザー定義の任意設定軸としれ，昨今では，Riccardo Mazza（2007）の研究にみられるて割り当てる．これら 3 軸の設定は，Web 上のフォームをような双方向性を備えた手法も盛んに提案されている．
「ビ通じ誰でも行うことができる．こうして設定された「立方ッグデータ」関連領域とともに今，最も注目されている情体フレーム」の中に特定のデータセットにおける全レコー報学の一分野だといえる．	 	 

ドがプロットされる．各プロットデータは，「フラグメント」という小さな立方体型オブジェクトとして可視的に表現さ

2. 目 的 	 

れ，それをクリックすることで，対応する詳細情報が別ウインドウに表示される（図１）．また，中央の立方体フレー	  本研究では，視覚化研究として新規性を持つ独自表現のムは，フレキシブルに回転することが可能で，自由な角度

開 発 を 目 指 す と と も に ， 知 識 マ ネ ジ メ ン ト お よ び MIS

から閲覧できる（立方体フレームの回転機能）．その他，検（Management Information System）の観点を取り入れ，（単索やコメント追記，フラグメント間での線の描画（関連性なる視覚化に止まるのではなく）人とデータの関係性をよの視覚化）などの機能を持つ．データの入力は専用フォー

り包括的にデザインすることで，新たな「視覚的データ管ムから１件１件レコードを入力する方法と CSV 形式のデ理手法」を確立することを目的とする．この目的に対し，ータセットを一度に読み込む方法がある．

独自視覚化システム「KACHINA CUBE Ver.3」（以下：KC v3と表記）を軸にアプローチする． KC は，Web ベースの３次元視覚化支援ツールであり，また，データベース機能を† 立命館大学
Ritsumeikan University© 2015 Information Processing Society of Japan

480

ス（MySQL）に格納される．データベースへのデータ入力
方式は，下記の２パタンが用意されている．
3.3.1 専用の UI を用いたデータ追記	  ユーザーは，KC v3 に標準で用意されている入力フォー
ムを用いて，各種データをデータベースに格納することができる．立方体内に情報をプロットするためには，マップ上の座標値とタイムライン上の時間値が必要となるが，それらについてもこの入力フォームを用いることで，容易に指定可能である．
3.3.2 CSV ファイルの読み込み
図 1 KACHINA CUBE Ver.3 の基本画面	  さらに，あらかじめ Microsoft 社の Excel 等を用いて作成

Figure 1 Overview of KACHINA CUBE Ver.3

した CSV ファイルを専用の読み込みフォームを用いてデータベースにインポートすることも可能である．ただし，3.2 新 規 登 録

ユーザーは，指定のカラム定義にしたがって CSV ファイル	  	  KC v3 を活用して，何らかの知識管理を行いたい場合を作成する必要がある．

は，専用サイトにアクセスして，キューブの新規登録を行う必要がある．この際，ユーザーは，キューブ名や時間軸3.3.3 視覚変数と階層性表現などの設定に加え，マップの画像データをアップロードす(1)多変量視覚化	 る必要がある．この作業は Web 上に用意された UI（図２）	  KC v3 では立方体フレーム自体が持つ①x 軸②y 軸③z 軸を用いて誰でも容易に行うことが可能である．登録されたに加え，④フラグメントの色を変量として設定することでキューブは，「キューブリスト」に追加され，Web 上で他最大４次元の視覚表現が可能だが，今回ここに，⑤フラグのユーザーと共有することも可能となる．

メントの大きさ，⑥フラグメントの回転速度を加えた．これにより，最大６次元の同時表現が可能となった（図３）．

図３	  多次元的視覚表現
Figure 3 Multi-dimensional visualization(2)データダイビング	 	  データダイビング機能は，恰も「データの海」にダイブ
図２	  新規キューブの登録画面し遊泳するかのような閲覧操作を実現するものである．当

Figure 2 Web form of new CUBE registration

該機能を ON にした状態で，親キューブ内にある任意の子

3.3 デ ー タ 入 力

キューブをクリックすると，親キューブの中に“ダイブ”	  ユーザーは，上記のマップとタイムラインからなる３次するかのようにビューがズームインしていく．さらに，そ元フレームに自由にデータを追記することができる．ユーの状態から別の子キューブをクリックすると，そこに向かザーによって追記されたデータは，内部的にはデータベーってビューが移動する．KC v3 では，時間軸とマップから© 2015 Information Processing Society of Japan481

構成される３次元空間（親キューブ）内にフラグメント（子におけるフォルダのようにデータ間の階層性を効果的に表キューブ）が配置されるため，子キューブ相互は時間的，すことが可能になる．

地理的（概念マップの場合は意味的）な距離を持っており，データダイビング機能を用いることによって，データ相互

3.4 基 本 機 能の距離感を視覚的に把握しながら，情報閲覧をおこなえる

3.4.1 レスポンス機能（図４）．また，一歩ひいたビューで親キューブを鳥瞰し，	  フラグメントへのコメント付与閲覧ウインドウには，レデータ（子キューブ）の分布を分析する行為と，親キュースポンス機能が備わっており，特定のフラグメントに対しブ内にダイブし，子キューブに格納されている詳細情報をてコメントをつけることができる．

閲覧する行為を柔軟に切り替えることができる．一般に資	  具体的な使用法として，簡単なメモの追記のほか，電子料やデータの分析を行う際に「木（要素）を見て森（全体）掲示板のように複数ユーザーで議論する場としても機能すを見ず」「森を見て木を見ず」といった視点の偏りが生じがる．

ちであるが，この機能は「森と木を自由かつ柔軟に行き来できる」画期性があると考えられる．

3.4.2 検索	  KC v3 の検索機能では，立方体型情報ビュアーの特性を活かした結果表示がなされる．ユーザーによって入力された検索用語を含むフラグメントは相互に線で結ばれる（検索結果が１件のみの場合は，点滅する）． 複数の検索用語が入力された場合には，複数の線が描画されることとなり，１つのフラグメントが複数の検索用語を含む場合には，そのフラグメント上で複数の線が交差することになる．つまり，OR 検索の結果は，複数の線として示され，AND 検索の結果は，複数の線の交差点として視覚的に表現される．
3.4.3 フラグメントライン	  ユーザーが複数のフラグメント（データ）間に何らかの関連性を見いだした場合に，その複数のフラグメントを一つの「フラグメントライン」として定義し，データベースに格納することができる．そして，保存された「フラグメントライン」は，リストに追加され，ユーザーはリスト内の任意の項目を選択することによって，内容を確認することが出来る．
「フラグメントライン」の内容確認の際，当該ナラティブに登録されているフラグメントは相互に線で結ばれる．この機能によって，断片的な情報を何らかの文脈

図４	  データダイビング機能に即したかたちで整理し，一段階，抽象度の高い概念を生Figure 4 Data-Diving function

成することが可能となる．

(3)階層的表現	 	  KC では，「立方体フレーム」とその中にプロットされる

4. 知 識 マ ネ ジ メ ン ト ツ ー ル と し て の 実 践「フラグメント」の組み合わせにより視覚化がなされるが，4.1 地 域 ア ー カ イ ブ ツ ー ル と し て の 実 践

今回ここに「入れ子構造」を組み込んだ．
「入れ子構造」を	  地域地図と時間軸をベースとする立方体フレームを設定持つことにより，フラグメントもまた立方体フレームとしすることで，地域の歴史情報をひとつのキューブに入れてて機能する．例えば，「立方体フレーム」の中に，戦国武将見ることが出来るからである．加えて，Web を通じ誰でものデータがプロットされているとする．その中の一つに織利用可能でき，「住民参加型」というコンセプトにも適して田信長のフラグメントがある場合，それをクリックすると，いる．こうしたことから，KC Ver.3 を「地域の情報を，誰そのフラグメントの中にズームインしていくアニメーショもが楽しく入力し，閲覧できる情報ツール」としての運用/ン効果の後，「立方体フレーム」の中には織田信長に関わる提案を行っている．また，人文系の研究者が共時的な資料各種史実がプロットされているという具合になる．この入分析を地理情報をあわせておこなう際のデータ整理にも役れ子構造は幾重にも定義でき，オペレーティングシステム立つと思われる．こうした観点から，現在，「幕末京都アー© 2015 Information Processing Society of Japan

482

カイブ」「水滸伝アーカイブ」を構築している．
4.2 組 織 マ ネ ジ メ ン ト ツ ー ル と し て の 実 践	  部署と等級をもとに概念マップを作成し，年齢もしくは基本給を残る１軸として設定する（図５）．そこに，特定企業における全社員をフラグメントとしてプロットする．これにより，人的資源の分布を一目瞭然のもと把握でき，同時に，フラグメントをクリックすることで個別社員についての詳細情報を確認することができる．このモデルは，上述のキューブの入れ子構造が実現するとより効果的な視覚

図 6	  裁判過程の視覚化化が可能となる．
「企業のキューブ（特定企業の全社員をプ

Figure 6

Visualization of a trial processロット）」内に含まれるフラグメントと「個別社員のキューブ（特定社員の業務関連情報をプロット）」が紐付けられ，両キューブ間をフレキシブルに行き来できるようになる．

5. お わ り に

これにより，組織全体の分析支援と個人の業務の分析支援	  Web-DB のクライアントプログラムとしての３次元 UIを視覚的に統合することができ，強力な人材マネジメント「KACHINA CUBE Ver.3」のあらましと実践的な運用事例支援ツールになると考える．

について論じた．運用を通じ，一定の有用性が示唆されているが，今後，科学的な検証を行うことが課題となる．検証については，次の３点について実験をおこなう予定である．
（１）データセット全体の把握支援効果	 	  （表やリストといった）既存の表現と比較して，データセット全体の特徴に関する把握しやすさを検証する．
（２）情報の階層性の把握支援効果	 	  既存の表現と比較して，レコード間の関係性および階層性に関する把握しやすさを検証する．
（３）プレゼンテーション支援効果	 	  既存の表現と比較して，他者に対し特定のデータに関する説明を行う場合に，聞き手に能動的なコミットメントを促す効果の程度を検証する．	  さらに，より多様なのフィールドを重ね，そこからフィードバックを得ることで，システムの汎用性を高めていきたい．

図５	  組織の視覚化と分析
Figure 5

Visual analysis of an organization

4.3 行 政 ・ 司 法 で の 実 践	  裁判員制度の導入にともない，検察や弁護士といった専門家だけでなく，一般の市民も被告人の供述などの裁判過程で発生する大量の資料を解釈しなくてはならない状況が生じている．本研究では，市民が多量の裁判資料を解釈する際の支援ツールとして KC を発展させるために必要な機能や条件について弁護士らとの議論を進めていく．基本デ参考文献
1) Edward Tufte.（1983）The Visual Display of Quantitative
Information. Graphics Press, Cheshire, CT, 1983.
http://office.microsoft.com/ja-jp/word-help/CH010097020.aspx
2) Riccardo Mazza and Alessandra Berre. (2007) Focus groupmethodology for evaluating information visualization techniques andtools. In proceedings of the 11th IEEE International Conference on
Information Visualisation pp74-80. IEEE Computer Society.
3) 斎藤進也. (2012). Web 技術と視覚表現：ｅ-リサーチの視点から. In 稲葉光行 (Ed.), デジタル・ヒューマニティーズ研究と Web
技術 (pp. 25-44). 京都: ナカニシヤ出版.

ザインとしては，特定事件の顛末と争点を図にまとめた概念マップを KC にインポートし，残る１軸を取り調べ/裁判の時間軸として，供述などの関連情報をひとつのキューブにプロットすることで，事件と裁判に関する一連のデータを把握しやすくする（図６）．

© 2015 Information Processing Society of Japan483