情報技術演習 第10回「情報可視化/体験メディア」

情報技術演習 第10回「情報可視化／体験メディア」 2007/12/11 久保田秀和 文学部／情報学研究科 [email protected] http://www.ii.ist.i.kyoto-u.ac.jp/~kubota/

本日の講義・演習 • • • • 情報可視化 （講義シリーズのまとめ） 体験メディア 最終報告会発表資料の準備

情報可視化 • 情報を視覚的にはっきりと判るように表現し， 共有すること (a) アイコン (b) 美的に訴えかける表現 (c) 「見える化」 • 思考の道具として図を用いること (d) 複雑な問題の見通しを良くする手法 (e) 情報をインタラクティブに吟味する手法

(a) アイコン • 読み手の合意や通念に基づいて共有される表現 – 時代の変化の影響を受ける可能性のある具体的な絵 – 読み手の合意に基づいて利用されるアイコン • 信号・交通標識 – 「壊れ物」と「禁煙」といった抽象的な概念を表すアイコン （分類，図版は安西祐一郎ら 「情報の創出とデザイン」 より）

(b) 美的に訴えかけるもの • クリップアート，装飾 情報爆発 • 情報可視化が人間へ向けた表現である以上，美しい見た目で あることは一般に重要

(c) 「見える化」 • リアルタイムな，現場的な情報可視化 • 遠藤功 「見える化」 東洋経済新報社，2005． – 企業活動の現場における問題解決のための情 報共有 ≒ グループウェアにおけるアウェアネス（前回講義） – 共有すべき情報の一つとして 「信号情報」 • 異常や問題が発生した／解決された という事実 • 即時性や臨場感が求められる • トヨタ自動車の「アンドン」 – 製造ラインの状態を現場全体で見え るようにする – 例えば，停止の原因： 非常停止， ワークなし，満量，ライン異常 (図版は同書より)

情報可視化 • 情報を視覚的にはっきりと判るように表現し， 共有すること (a) アイコン (b) 美的に訴えかける表現 (c) 「見える化」 • 思考の道具として図を用いること (d) 複雑な問題の見通しを良くする手法 (e) 情報をインタラクティブに吟味する手法

(d) 複雑な問題の見通しを良くする手法 • 棒グラフ，円グラフ，ベン図，表 • ブロック図，ステートチャート PositLogのシステム構成と情報の流れの 概要が表現されている PositLogのステートチャート（一部）．閲覧 画面，ログイン画面，編集画面など画面間 の遷移順序やルールが表現されている

図言語の分類 • 図のなかでも意味単位（図素）や構文法（図素の配置 規則）がはっきりしたもの – 行列系 • 行列の空間的表現 – 座標系 • 座標の空間的表現 – 連結系 • グラフの空間的表現 – 領域系 • 集合の空間的表現

練習：行列系・座標系 • Excelを用いて行列と棒グラフを作成する （MKさんの第4回課題レポートのデータより作成）

練習：連結系・領域系 • PowerPointを用いて連結系表現，領域系表現を作 図する PowerPointの オートシェイプを 利用

(e) 情報をインタラクティブに吟味する手法 • 模造紙を用いたブレインストーミング 模造紙と付箋紙を利 用した例．

ブレインストーミング • 発散思考によって事実を明らかにしたりアイデアを生 成する方法．広く用いられる． • 四原則 – – – – 批判厳禁 自由奔放 質より量 結合発展

(e) 情報をインタラクティブに吟味する手法(続き) • ＫＪ法 – 川喜田二郎 「発想法」 中公新書，1967． – 図解（俯瞰する）と文章化（ストーリーを作る）の反復による 問題の探索・解決スパイラル 図解 文章化 1. アイデアの紙片を集積 2. グループ化 3. 空間配置 （図版は川喜田二郎「続・発想法」より） まとまった文章を種として， 発展的に問題を探索

(e) 情報をインタラクティブに吟味する手法(続き) • マインドマップ（トニー・ブザン，1970年代～） – 放射型の図解・作図法 – 作図の気軽さ，美的な側面を（他の諸手法よりも）重視する 本演習シリーズの準備に用 いたマインドマップ． 話題の全体像を作図後，番 号を振って講義スライドのプ ロットを計画している．

ズーミング • 情報を複数の視点から吟味可能とするために，着目 点（フォーカス）を自由に操作可能とするための計算 機科学的な手法 • 詳細化手法による分類 – 物理的ズーミング – 論理的ズーミング • 再配置手法による分類 – 線形ズーミング – 非線形ズーミング

物理的ズーミング • 要素の形状を，注目部分のみ拡大，他は極小化 – 元の形状的特徴が維持されやすい • Fisheye Views [Furnas 1986] （オリジナル文献の図版が直感的でないので，安西 祐一郎ら 「情報の創出とデザイン」 より引用．）

論理的ズーミング • 要素の内容を，注目部分のみ具体化，他は抽象化 – 図形↔文字のような質的な変換が行われる • KLIEGエディタ [豊田ら 1986] 画像は豊田正史氏のページ http://www.tkl.iis.u-tokyo.ac.jp/~toyoda/ より

線形ズーミング • 一次式で表される直線的な（地図のような）拡大縮小 • 要素間の上下左右の位置関係は保存 • Pad [Perlin ら 1993]， Pad++ [Bederson ら 1994] – Padを用いたWebナビゲーション http://mrl.nyu.edu/~perlin/zoom/SiteTour.html – 写真整理への応用 http://www.cs.umd.edu/hcil/photomesa/ Pad++を用いたディレクトリ表現 （図版は論文より）

非線形ズーミング • 大量の情報を効率よく並べるため，歪み配置を行う – 三角関数，双曲線関数などが用いられる • Focus + Context アプローチ – 歪み配置によって効率よくフォーカスを作り出すと同時に， コンテキスト（要素間の結合や全体的な位置関係）も維持 する – 前述のFisheye Views – Hyperbolic Tree [Lampingら 1995] • Inxight社によるデモ http://www.inxight.com/VizServerDemos/demo/nasa/index.html

ズーミングの適用 • 対象領域にあわせて，物理的-論理的，線形非線形を組み合わせ • PositLogは物理的-線形ズーミング – 図や絵のレイアウトを重視するため

その他，応用例 tafiti • 美的な訴えかけ – 元は単なるリスト • 論理的ズーミング – スライダで枝刈り – タイトルにマウスを合わせると内 容概要を表示 • 受動的視聴 – ゆるやかに回転する Microsoftのサーチエンジンフロントエンド実験 http://www.tafiti.com/

講義シリーズのまとめ Webインタラクションの技術と思想 Web上での知的活動は，人と計算機が互いに歩み寄りながら加速度的 に発展している • 人と計算機にとって取り扱いやすい情報の表現形式 – HTML, CSS, XML, Semantic Web – タグ • 計算機がことばを取り扱う方法 – JavaScript, 正規表現，形態素解析，tf-idf • 計算機が人の意図や言葉をとらえる方法 – タグ，Page Rank, コミュニケーションモデル，日常活動のモデル • グループで作業するための枠組み（CSCW） – 基盤となる情報ネットワーク（TCP/IP） – Wiki, グループウェア • 計算機に支援された情報可視化

実世界の情報とWebの情報 • 実世界の知識のうち，Webで手に入るものはごくわずかであ る • 個人が見て，聞いて，操作した経験，没入した体験，体得され たノウハウをWebに載せるには？ – あるいはWebを超えるような人工システムが必要？ ↓ 体験メディア／ライフログ

日常記憶 • 我々は体験のなかに生きる – あまり意識はしていないくとも，日常生活において記憶されるエピ ソードは，量的にも質的にも多大 • 記憶障害と認知症への対処 – 安田清（千葉労災病院/ATR） – http://homepage3.nifty.com/yasudakiyoshi/stage001/stage_001.htm

体験を記録する（１） • Forget-me-not [Lamming 1994] – 日常記憶支援 • （オフィスを主な対象として）誰とどこで会って何をしたか？ • ハンドヘルドデバイスにログを記録．閲覧，検索可能． – http://lamming.com/mik/ – ムービーも参照

体験を記録する（２） • 加速度センサや生理的データ（皮膚電位の変化）な どの低次のデータから人の意図や行動の高次のパ ターンを発見，映像などと共に記録 – 前回のアウェアネスの話も参照 マイクと加速度センサを用い た会議の状況認識 [Nicky Kern 2002]

体験を記録する（３） • AT（Attentive Townvehicle） [長尾 2004] – – – – 個人用移動体と体験記録・行動支援システムを一体化 http://www.nagao.nuie.nagoya-u.ac.jp/projects/at.xml 個人化，記録，追従，ナビゲーション ムービーも参照 AT9号機．写真は http://blog.nagao.nuie.nagoyau.ac.jp/nagao/archives/2007/09/atwii.html より

体験を記録する（４） • もの探し支援インタフェースにおける機能とデ ザインの両立 [河野 2006] – 腰部装着カメラによる把持物撮影 – http://www.hcilab.jp/~kono/Research/AugmentedMemo ry/index.html – ビデオも参照

体験を記録する（５） • PhotoChat [伊藤，角 2006] – 写真と手描きをリアルタイムでやりとりすることによる，現場的な体験 の共有 • 博物館，展示会，野外活動など利用 – http://www.ii.ist.i.kyoto-u.ac.jp/~ito/photochat/photochat.html – ムービーも参照

体験を記録する（６） • 会話量子化器 [久保田，齊藤 2007] – 会話をその場で記録するためのボタンデバイス • 意図した範囲を記録するにはどうすればよいか？ • 過去へ遡及して記録開始・終了可能 – http://www.interactionipsj.org/archives/paper2007/aural/0037/index.html – ムービーも参照

体験を再生，想起する • 思い出ビデオ[桑原ら 2005] 「思い出ビデオ」 ATRロボティクス研究所

体験を再生，想起する（２） • 情報可視化とも深く関わる 漫画技法を用いた体験映像要約 [小関, 角 2005] カレンダーを用いた写真・テキスト 管理 [中村 2006] http://calendar2.org/

課題：情報の可視化 • 最終報告会のための発表資料をPowerPointで作成 する – – – – 中間報告会での発表を最後までまとめてください PositLogでの議論の内容を反映させてください 図表も積極的に活用してください 〆切は1/7（月）17：00 • 最終報告会 – 1月8日（火） – 持ち時間は一人最大20分で，うち15分を発表，5分をディ スカッションの時間とします

参考文献 • 杉山公造 「グラフ自動描画法とその応用」 コロナ社， 1993． • 安西祐一郎ら 「情報の創出とデザイン」 岩波講座マ ルチメディア情報学，岩波書店，2000． • 遠藤功 「見える化」 東洋経済新報社，2005． • 川喜田二郎 「発想法」 中公新書，1967． – KJ法の教科書 • トニー・ブザン 「ザ・マインドマップ」 ダイヤモンド社， 2005．