ビジュアライゼーション(5) 情報視覚化とGUI 2016/10/27

増井俊之

慶應義塾大学環境情報学部

masui@pitecan.com

2016年10月27日

GUIと視覚化

馴染みあるGUI(Graphical User Interface)は情報視覚化ツール

継続的に改良案は出ているが根本的なものは少ない

皆が満足している

標準化

イディオムとして定着ずみ

インタフェースの「イディオム」

一度使えば忘れない操作

スクロールバーやメニューの操作

自動ドアの通りかた

c.f. 「アフォーダンス」

物体の属性が、その取扱い方についてのメッセージを発しているとする考え

自然と〜してしまうようなもの

机の上には物を置きたくなる

取っ手があると引っ張りたくなる

例: フォルダのウィンドウ表示

階層構造の視覚化手法

https://gyazo.com/20ca777c5599ec6e88b870d320d8dd9d.png

例: 階層メニュー

階層情報を表示するズーミングインタフェース

https://gyazo.com/bc9cac54e0862b35c76a648538d76dd1.png

GUIとは

「計算機でやりたい仕事」という巨大な検索空間の情報視覚

ズーミングやフィルタリングとかが応用されている(はず)

c.f. POBox

「入力したい文章」という検索空間の視覚化システム

Generate and Test

候補を生成しながらフィルタリングする

GUIの基本 = 「WIMP」

Window

Icon

Pointing Device

新しいGUI

様々なツールが提案されては消えてきた

様々な拡張スライダ、スクロールバー

生き残るものは少ない

スクロールバー

最近消えかかってる?

XEROX PARC

https://gyazo.com/b93fb40af13436b714e1ac3d8f26ba8a.png

Alto (1973)

PARCで開発

GUIワークステーションのさきがけ

ビットマップディスプレイ

マウス/ウィンドウ/メニュー

Alto

https://gyazo.com/ffe13676111e106b8c819b870cce4601.png

Altoソース公開?

https://gyazo.com/ffe13676111e106b8c819b870cce4601.png

Altoハードウェア復活??

https://www.youtube.com/watch?v=YupOC_6bfMI

Xerox Star

1981発売

https://gyazo.com/79d6aa012b0c679da9a11b02cb3f659e.png

Ethernet

TCP/IPではない

JStar

1982発売

日本語対応

https://gyazo.com/966466ccdf1c07654c2c9574c8a0b459.png

Andrew (1982)

CMU

ウィンドウシステムその他いろいろ

MIMEの起源

X Window System (1984)

MIT

X11は1987年

ウィンドウサーバとマネージャを分離

何故か今でも現役

Lisa (1983)

AppleのGUIパソコン

ジョブズがAltoを見て驚いて作ったもの

https://gyazo.com/c0596d8b63d9b9b790d3bb953c5291a7.png

Lisaの画面

https://gyazo.com/03d3fe5a2f2464b9b2448fb83c556ed3.png

Macintosh (1984)

もともとJef Raskinのプロジェクトだった

ジョブズがRaskinを追い出す

https://gyazo.com/5db2d3658020a8fd6712eb783a62b988.png

Macintosh System 4.2 (Finder version 6)

https://gyazo.com/371dadb8dfee860bef2a1ef88d3d5b83.png

NeXT Computer

1985創業 by Steve Jobs

1988 NeXT Cube発売

現在のMacOSの原型

https://gyazo.com/66d94e93c6a0d0153f171b88692e2445.png

NeXTStep

https://gyazo.com/37a3e1d28c4268112b42e760de38f2af.png

Windows95

1995発売

頑張ってDOSをGUI対応

https://gyazo.com/c4395fd01b713415f5b283f3414a0153.png

インタフェースビルダ

グラフィック部品を対話的に配置

プログラムの骨格の自動生成

コンパイルせずに操作を実験

統合的GUIプログラミング環境として普及

NeXTのインタフェースビルダ

https://gyazo.com/26628fafb9d8cddd83ada076705b68fe.png

Xcodeのインタフェースビルダ

https://i.gyazo.com/fc72e526450de45e308ef0e211a8525b.png

様々なスクロールバー

細かな挙動や見栄えの違い

矢印ボタンの有無と位置

ノブの表示

ノブ以外をクリックした場合の挙動

...

スクロールバーの歴史

Macのスクロールバーの歴史

ALTOのSmalltalk

⇒ Lisa

⇒ Macintosh

⇒ Windows, etc.

OpenWindowsのスクロールバー

https://gyazo.com/62bca0ab396035cbfa66dc5cfbc259d9.png

Motifのスクロールバー

https://gyazo.com/5cc506795970aa707c1486853095fae6.png

X11のスクロールバー

https://gyazo.com/0ad8731d98d486609a46e874bff74ed0.png

Macのスクロールバー

https://gyazo.com/f5d37a70aed1ee82756fede76a85d72e.png

Windowsのスクロールバー

https://gyazo.com/90a138227e4be5999fe045a6e565f6d4.png

NeXTstepのスクロールバー

https://gyazo.com/37a3e1d28c4268112b42e760de38f2af.png

NeXTSTEPのスクロールバー

https://gyazo.com/715ad6bc4fffb01c71e012976bfc8c32.png

様々なスライダ

https://gyazo.com/157c3330135cd06cfcd77b4973fdb7c4.png

スクロールバーの拡張

微調整/粗調整

追加情報の表示

表示の調整

フィルタリングなど

iPhoneのスライダ

場所が離れると微調整になる

https://gyazo.com/37e4e3bdb61ecd63cd766c2b38d06412.png

AlphaSlider

位置による微調整

https://gyazo.com/12900362d657308e1163a8c998edba98.png

ビデオ: AlphaSlider

FineSlider

引っ張る操作による微調整

クリック場所とノブの間にゴムをひっぱってノブの動く速さを調整

https://gyazo.com/2931288cd1eef1ccf101a4ea5f62b7b2.png

索引ナビゲータ

FineSlider式微調整

https://gyazo.com/a786a5ff4ea959dd1b8091ac29045f54.png

デモ: 索引ナビゲータ

Popup Vernier

スクロールバーのノブ付近に「バーニヤダイヤル」を表示

スクロールバーの微調整が可能

https://gyazo.com/8c8cb7abc81c12e3b43095a1dcdf0f4e.png

SmoothSnap

スクロールバーの拡張

少し動かすと微調整/大きく動かすと粗調整

https://gyazo.com/28cd5ea0a8cbdf382e7cc0da274f0305.png

デモ: SmoothSnap

LensBar

ズーミング+スクロールバー

背景情報の利用

FineSlider式微調整

http://masui.org/6efd73c401b3a01e941f18c7e7697c9a.gif

デモ: LensBar

Web版LensBar

https://gyazo.com/69d0a257e3653b5482aed29905f05ddb.png

Data Visualization Slider

スクロールバーの背景に関連情報を表示する

https://gyazo.com/8b836503cfb08855e2e1b4d0a1e16d2c.png

Value Bars

背景にファイルサイズ、更新日時などを視覚化

https://gyazo.com/7b271e637111d3d3a0592a976b89636b.png

ビデオ: Value Bars

様々なメニュー

ポップアップメニュー

最近はあまり見ない

プルダウンメニュー

Smalltalkのメニュー

https://gyazo.com/3dfac96f6ddc039c46b0dd7c3865f7c2.png

Smalltalkのスクロールバー

https://gyazo.com/a24033cc2455583c462439eecbbdff05.png

スクロールの矢印

https://gyazo.com/fe9c87ee5ec6277d288bb9f721ceff0b.png

Lisaのスクロールバー

https://gyazo.com/275a1e9569ce11061ab7006d8bf3a5be.png

プルダウンメニュー

Apple Lisaで導入された

https://gyazo.com/3ca39857447ef0c22e3decfbd4e568cb.png

パイメニュー

方向でメニュー選択

多段化可能

https://gyazo.com/7402c898b7a61772e9d79ec976bc47c4.png

マーキングメニュー

メニューを表示しないパイメニュー

https://gyazo.com/4eb3dddf2c0a403500b0071405a152f2.png

FaST Slider

マーキングメニューでスライダ表示

https://gyazo.com/2f8ebf72512f89e8ccaac2be792425f6.png

T-Cube

ペンタッチ位置+動かす方向で文字入力

http://masui.org/31e82879bb85f639fcf6e1054e66fecb.gif

フリック入力

T-Cubeを日本語に適用したもの

https://gyazo.com/4aace6ebfd64f0d35a39c31f6e14a147.png

Fisheye Menu

MacOS XのDockなど

https://gyazo.com/1fb43053a453f6252bf2a86f7288fd56.png

FlowMenu

一筆書きでメニュー選択/数値指定など

https://gyazo.com/bb68c997775ddd88dca9e04688f443b5.png

新しいGUI部品の可能性

新しいGUI部品の研究は超下火

可能性はまだある