HCI設計論 (2) 実世界のインタラクションデザイン 2016/10/19

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

masui@pitecan.com

2016年10月19日

Gyazz(Wiki)で作成

"Start presentation" で開始

本日の話題

実世界指向インタフェース

拡張現実

モバイルコンピューティング

ウェアラブルコンピューティング

ユビキタスコンピューティング

IoT

計算機利用場所の変化

計算機室

机の上

電車の中

歩きながら

いつでもどこでも

計算機の形態の変化

http://masui.org/c5d300edd3530b712f3394a5483df463.jpg

従来型計算機

CUI, GUI

実世界型計算機

実世界指向インタフェース

Invisible Computer

Ubiquitous Computing

IoT

実世界指向インタフェース

実世界の事物や状況を活用

机、紙、場所、時間、...

計算機がどこにあるかわからない

計算機データと実世界データの区別がない

e.g. 計算数内の数値と紙上の数字の区別がない

実世界GUI

https://www.youtube.com/watch?v=1di7_2J8X0Y

「情報処理」特集記事

http://www.pitecan.com/papers/IPSJ2010/IPSJ2010.pdf https://gyazo.com/72055773c75baf8b2dce570798aae8db.png

特集内容

特集内容 (Cont'd)

インタフェースが大きく変わる例

電車の切符

改札を通過した人を認識して直接課金すれば切符販売のインタフェースが消滅

スーパーのレジ

買ったものをカートが認識して課金すればレジが要らなくなる

実世界指向インタフェースのための技術

インフラ

無線通信

計算機小型化

入力装置 / 状況検出装置

センサ

カメラ

バーコード (1D, 2D) / RFIDタグ

位置認識 (GPS, WiFi)

出力装置

薄型ディスプレイ

プロジェクタ

研究動向

実世界指向インタフェースのアイデアと要素技術

計算機と実世界との融合テクニック

センサ技術 / センサ応用技術

モバイル環境の入出力技術

文字入力手法

小型画面利用技術

モバイル時代の暮らし方の提案

検索技術

コミュニケーション技術

ウェアラブルコンピューティング

広義のAugmented Realityの実例

ラジオの野球中継、歌舞伎解説

目に見える情景を音声で補強

カーナビ

場所に関する情報を提供

バーコード

スキャンすると詳細情報がわかる

実例

実世界指向インタフェースシステム例

Ubiquitous Computing

賢い家/部屋

(狭義の)Augmented Reality

机もの

Tangible Bits

電球

Ubiquitous Computing

実世界に沢山の計算機を埋め込んでおく

計算機は動かなくてよい

「第三の波」

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

PARCTab

携帯端末

Forget-me-Not

自分がどこで何をして誰に会ったか等を自動的に記録

http://masui.org/9050bc20d3b437a7297658a1d6fb3aed.gif

TRON電脳住宅

ホームオートメーション実験 (1989〜1993)

http://masui.org/5e95c9ac981bc1127d5c0db0659fa9cf.gif

http://masui.org/d9e9aeef3b9a4cfb484e93f9ac653088.gif

ものの広場(国立民族学博物館)

用途が不明な器具を机の上に持って行って置くと説明が聞ける

日製産業のRFタグ使用

どこにタグがあるのかよく見てもわからない!

http://masui.org/5679b58c78c8cbf6b530bca86b9732e1.gif

AwareHome

Georgia Techのプロジェクト

実際の家で各種の実世界インタフェースの実験

センサ200個

http://masui.org/536e40ee4b936695950c1f597dadbaa9.jpg

AwareHome

http://masui.org/33ca17acaa01903f76b14b1d59f24728.jpg

AwareHome

http://masui.org/bc4ca85acbd009fed125ead6f9b36e93.jpg

AwareHome

http://masui.org/77c8f387f48030e71c87286b6937131a.jpg

AwareHomeの成果 (Gregory Abowd談)

みんな真似した

Home Depotと共同研究した

センサはあまり役にたたなかった

長年使えるソフトプラットフォームを作れなかった

https://gyazo.com/67e06c7bcd39af9e536d0098235c2d78.png

https://gyazo.com/b3e7bc9ece60d5524372ddb2f318e2b0.png

キッチン

https://gyazo.com/6a3f6d4ab7f0372546be9571bf69d4c4.png

床

https://gyazo.com/0589d3d94fe0514fa5558a3fc1c4ff73.png

風呂

https://gyazo.com/88c9d8970127c3c40aebe763e4c029e2.png

京都産業大学のプロジェクト

https://gyazo.com/e2460f2a2401a70858deac084942fe0f.png

実際の家で各種の実世界インタフェースの実験

https://gyazo.com/c3eadc92f8e5945ff0076c9d3faa188d.png

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

未来のキッチン

https://i.gyazo.com/31144a22f923a8e74b518190fa2f3346.png

MakeupMirror

https://gyazo.com/918099c634a13ee7a3fe0e70a9542d65.png

SyncTrash

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

なめらカーテン

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

狭義のAugmented Reality

http://masui.org/f0d2598a87f913c2aa43b2d000e4d508.gif

実世界画像にCG画像を重ねる

画像を重ねる手法

実物や自分の位置の認識手法

画像のずれや時間遅れを最小にする技法

画像を重ねる技法

HMD(Head Mount Display)式

光学式

ビデオ式

モニタ式

光学式

http://masui.org/b01f8f8c7ddb9d9426f34eda788c6832.gif

ビデオ式

http://masui.org/f55f7c4f49121ad78b133406b6f85b43.gif

モニタ式

http://masui.org/a298cb4d776098abbf76398e5a2cfa0e.gif

ARによる飛行機内配線 (Boeing)

http://masui.org/39c05a4ae66f45092a1dd525215ef391.gif

手術/診断での使用

http://masui.org/157c254708adac895edb24c8462a8108.gif

Karma

透過表示型のHMDを装着してプリンタのヘルプを参照

HMDとプリンタの位置関係を計測してCG画像を重ねる

http://masui.org/0dfe66559ab4ea24246494f11a51adc0.gif

http://masui.org/786c3fa5edca5d3eb41016f2ebfdb05a.gif

電脳コイル

最近のブームの火付け役?

https://gyazo.com/cdbde78694cbedaa95b2a21469c128d0.png

加藤 博一氏, Mark Billinghurst氏 @ Washington Univ.

1999〜

http://hondana.org/%E5%A2%97%E4%BA%95/4048673610 https://i.gyazo.com/8565dd98143823ef91b3032ed02b38fa.png

Video: ARToolkitで初音ミク

https://i.gyazo.com/788ed6a2f3313d09ab84acb2894c5b3e.png

Video: 電脳フィギュアARis

Parallel Tracking and Mapping for Small AR Workspaces

George Klein氏の開発

ソース公開

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

Tangible Bits

石井裕 @ MIT

人間が触覚的感覚で計算機内のデータ(ビット)を操作

システム例

MetaDesk

PingPongPlus

Luminous Room

http://tangible.media.mit.edu/projects/ https://gyazo.com/aaaa760d6b048480f4863a2ff15db15f.png

MetaDesk

Phicon (= Physical Icon)を入力に使用

プロジェクタから背面投射された机

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

PingPongPlus

卓球台の上にプロジェクタで画像を投影

台の四隅のマイクで玉が当たった位置を検出

マイク, ピエゾ利用

http://masui.org/113c4dd7bbf21081fdfe6c62db19d96d.jpg

Luminous Room

プロジェクタとカメラの組みあわせ

レンズによる光線のシミュレーション

http://masui.org/9e4f546bc185e1bcc1a6bf8e3abee2ac.gif

inFORM

http://tangible.media.mit.edu/project/inform/ https://gyazo.com/f7c503717d02e1924bca4251826b8fd0.png

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

https://gyazo.com/36592413a293d1372519ed9db6fbeaca.png

Wearable Computer

計算機を「着て」使う

計算機は常に動いている (e.g. 腕時計)

Wearable Computerのアプローチ

携帯端末的アプローチ

小型計算機を持ち歩いて使う

Augmented Reality的アプローチ

人間の能力を増強

会った人を忘れない

目では見えない情報が見える

ファッションショー

http://masui.org/5838904fbdd724206a8eb8171831df97.gif

http://masui.org/58eee1fd90669e617a54f4c943d8d503.gif

MITのWearable6人衆

Thad Starner

Steve Mann

Alex Pentland

Brad Rhodes

トロント大学12人衆?

http://masui.org/d667a365bf66d0f0269aeb6698471b4b.gif

塚本氏 @ 神戸大

https://gyazo.com/6913ff3ae749f74631c0f96726b828ad.png

https://i.gyazo.com/6f292ee4983d3ee055fd071b25fe69de.png

Google Glass

http://www.youtube.com/watch?v=9c6W4CCU9M4 https://gyazo.com/72bc27b1ab8a51cc308edb241a8c2d58.png

Ring

http://vimeo.com/74626545 https://gyazo.com/bab37713af1ece2c658c239a1390d65a.png

今すぐできるUbicomp

Webと融合

安くて実用的なもの

Googleで捜せないもの

自宅の戸締まり

Googleで捜せないもの

自宅の戸締まり

人気の店

Googleで捜せないもの

自宅の戸締まり

人気の店

藤沢で会った人

Googleで捜せないもの

自宅の戸締まり

人気の店

藤沢で会った人

Ubicompなら捜せる!

Ubicompのチャレンジ

Webサービスとの融合

ハードの敷居

ソフトの敷居

Webサービスとの融合

https://gyazo.com/82174232cc357d0afb5b8e6b21afbc92.png

ハードの敷居

かなり低くなってきた

Phidgets, GAINER, Arduino, XBee, WiPort, LilyPad, ...

Phidgets

USB接続のセンサ

http://www.robotshop.ca/Images/phidgets-starter-kit-1-contents-big.jpg

USB + PIC

Processingでプログラミング可能

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

Arduino

USB/Serial + AVR

https://gyazo.com/ba0f1f2dd89edcd0b5d9d2630fec4e04.png

XBee

ZigBee無線モジュール

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

LilyPad

Arduinoをウェアラブルにしたもの

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

LilyPad

https://gyazo.com/54cd28dda035ebee0eff4efc33ee8d51.png

mbed

Web上でプログラミング可能なワンボードマイコン

https://gyazo.com/d21d725a11af5e9cd6cdba2de538b7e8.png

Raspberry Pi

ARM搭載ワンボードマイコン

Linuxパソコンとして使える

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

Arduino + Bluetooth

https://gyazo.com/52298c7657576812dc4117be888b5909.png

Intel Galileo

Linux + Arduino

https://gyazo.com/022769af99c411731730a31e3bec67d0.png

Intel Edison

https://gyazo.com/990178c9f83a96d1d2d779f40af7dbd0.png

BLE Nano

https://gyazo.com/aa3e55a62c1d227eb0dbc415b4e1f785.png

BlueNinja

https://gyazo.com/b5b78920a7eb889a554455d884af0aa9.png

ソフトの敷居

かなり低くなってきた

JavaScript

ActionScript

Processing

各種ハードやネットライブラリを利用可能

ユビキタス = ユニバーサルデザイン

いつでも/どこでも/誰でも

人間の能力の強化

e.g. 眼鏡

直感的な操作が可能に

目的と操作を一致させる

直感的なシステム実現の基礎技術

小型コンピュータ

ネットワーク

センサ

操作手法の工夫

直感的にする工夫

なめらかな操作性

可逆的 / 連続的

目的と操作のわかりやすい対応付け

e.g. 自動ドア

富豪的UbiComp

新しく家を建てる

特殊なセンサを沢山利用

ディスプレイを沢山利用

特殊な計算機環境を利用

家を建て直さない

特殊なセンサを沢山使わない

× カメラ、3次元位置センサ

特殊なディスプレイを使わない

× HMD

入手しやすいロバストな装置を少しだけ使う

◯ GPS携帯、USB傾きセンサ

PMUCの要件

インフラ

インターネット、無線LAN, etc.

情報検索技術

入出力デバイス

各種センサ/アクチュエータ

PMUCの要件

インフラ

インターネット、無線LAN, etc.

情報検索技術

入出力デバイス

各種センサ/アクチュエータ

全部ある!

明らかな問題点

ボタンが多くて機能がわからない

紛失しやすい

本質的な問題点

操作対象ややりたいことと関係ない方向を向けなければならない

(直感からほど遠い)

正しいアプローチ

具体的な装置のことを考えずにどこでも目的を達成

(例) 居間の壁で映画を観賞する

(例) 台所でも風呂でも音楽を聞く

DVDやネットワークのなどの実際のデバイスは気にしない

長屋コンピューティング

我慢して住めるか?

https://gyazo.com/498cf3e4b9c769d7aa35299b5c7cf213.png

これならどうか?

https://gyazo.com/498cf3e4b9c769d7aa35299b5c7cf213.png

Wifi完備

障子がスクリーン

神棚にサーバ

あちこちのセンサでKB入力

自動冷暖房

電子書籍

コンビニで冷蔵庫不要

良いレストランがいくらでも

近所にスーパー銭湯

http://engineer.typemag.jp/article/techlion18 https://gyazo.com/6551dc5108c09b9c26f858cace8ba726.png

直感的でない操作

電灯のon/off

スイッチが部屋の入口にある

DVD観賞

プレーヤ/プロジェクタ/アンプ/スクリーン/スピーカ

どれをどのように操作すればいいのか

ビデオ録画

番組を見たいだけなのだが...

ウィンドウの開閉

直感的なCDプレーヤ

CDを置くとその場所で音が鳴る

http://masui.org/d5f53cb13958a80096beb085d7a82806.asf http://masui.org/0ca28ccfba9ed39e4c8b1e907f65b2ac.jpg

http://masui.org/5a3e607da880440d50fefb77b1f17a38.jpg

直感的なデータ転送

CDを挿すとコピーされて別のCDに焼かれる

CD-ROMはセンサ/アクチュエータ!

http://masui.org/3982e892796a6c7b140b2601e751de50.jpg

障害者用レジ

数字⇔硬貨 の変換が不要

http://masui.org/e8b7b8735831648fa033cf7633ca5c38.gif

http://masui.org/326b8a7a35769f3f55510ed6296c4286.gif

謎の自動ドア

http://masui.org/2c591cc84eb7a1827df6bf4bc5f38365.jpg

http://masui.org/d68556ddbac9971d7809338ebbf611b5.jpg

理想のユビキタス環境

機械も制御装置も見えないのが本当のユビキタス

「Invisible Computer」

PMUC用入力デバイス

安くてロバスト

誰でも使える

なじみのある操作体系

装置の制約

単純な操作

過酷な環境への対応 (風呂、台所、etc.)

制限された入力手法 (片手、音声、etc.)

小さな画面

実世界GUI

グラフィカルインタフェース(GUI)操作を実世界で実行

ボタン、メニュー、スライダ、ドラッグ/ドロップ、... の操作を壁や机の上で実行

FieldMouse

ID認識装置 + 動き検出装置

壁や机の上でマウスのように使える

Active絵本

Active Hardcopy (Webページなど)

紙リモコン

Real-World GUI

http://masui.org/73bb7ceed3106ba563c784a232fbf107.jpg

http://masui.org/4f9a8573e720ba8c0f9b18c5d2e7ce45.jpg

アクティブ絵本

普通の紙や本をタブレットとして使える

http://masui.org/fa094f15e1e33761101f9933448622c6.jpg

紙リモコン

バーコードを印刷した紙をリモコンとして利用

http://masui.org/4598bb1047ffa112b3a4594536dd202e.gif

Real-World GUI

メニューやスライダのようなGUI要素を実世界で使う

バーコードを認識した後でデバイスを移動する操作 == マウスをクリックした後でドラッグする操作

http://masui.org/b628468ad1775361aee7ff346b89bfa4.gif

Video: FieldMouse

MouseField

手軽に誰もがどこでも使える実世界I/Fデバイス

風呂でネット音楽を聞く

台所でレシピを調べる

街角で情報を検索する

電車内で情報を共有する

...

MouseField

RFIDリーダと動き検出装置を一体化

http://masui.org/d94214a01ebbac15c5714e13893e3f22.png

MouseField実装

http://masui.org/c3b55410545b57980a3b85283f50153e.jpg

MouseFieldの使用方法

「置いて動かす」だけで情報検索/制御

http://masui.org/d8cd79ca279c4540b32c5ac25287f4ba.png

書斎のMouseField

http://masui.org/3080e50da8a8b4003b7cabaa8322b84d.jpg

テーブル型MouseField

http://masui.org/d5f0a9bb2f393f2431b02d61313b46ef.jpg

PlayStand

http://masui.org/61877d576aaa9751e4305da10f2db921.png

PlayStand++の操作

http://masui.org/b2854fed63270061d12d976481d673bc.png http://masui.org/5edd14b164d63455f3d3b5e8e7cf0f21.mp4

ITホワイトボックス (2011/6/19)

https://gyazo.com/d3e79a8b457bc1544f0f5dc399e7c10b.png

Video: 実世界GUI

https://gyazo.com/18b298f2b2a2851978504fcd46503938.png

GoldFishサーバ

TinyURL, Bit.ly的な動作

実行例1: マニュアルの表示

https://gyazo.com/a2dcd1bfa983b4c8b81e406085e59c47.png

https://gyazo.com/de0fe7498b3a1fe856e07002f9a7ae1b.png

実行例3: 回転インタフェース

https://gyazo.com/b06aee214b542952125f0d8a0ecb7abf.png

https://gyazo.com/f38d032e1c317e1bac30d52581b8317b.png

https://gyazo.com/ab301f469b9266c3f2d2ed07db3f7c22.png

https://gyazo.com/f00aef03e85ef6b1a838c527825a21fc.png

実世界コピペ

https://gyazo.com/96ed656fe1f1007c299ec3817f4fe8d1.png

https://gyazo.com/215a4ed94eddb3e7d4f4c483432ac779.png

メディアアートとAR

KAGE

https://i.gyazo.com/1738a0621424d74f36cfb262c8d1500e.png

Kobito

https://gyazo.com/e13275e04979dfd97b7f9467f6ad85f9.png

まとめ

計算機利用環境はパソコンの外側へ

様々なサービスとの融合が課題

インタフェースのアイデアが重要