11. 実世界インタフェース(1)

http://gyazo.com/de8b1f08b7b7cdb65dda4cf3dd0bd71c.png

ヒューマンオーグメンテーション学

https://gyazo.com/423084ecae6c8a425097fce366d9b4b3

/humanaugmentation

「情報処理」特集 (2010)

http://gyazo.com/de8b1f08b7b7cdb65dda4cf3dd0bd71c.png

「情報処理」特集

編集にあたって by 増井俊之.icon

アーキテクチャとインタラクションデザイン by 中西

身体性に基づく実世界インタフェース by 飯塚他

集合知センシングによる実世界インタフェース by 味八木

ソーシャルメディアと実世界 by 垂水

テーブルトップインタフェース by 小池

家庭のユビキタスコンピューティング by 椎尾

日常生活のインタラクションデザイン by 安村

ウェアラブルインタフェース&センシング by 福本

エンタテインメントコンテンツと実世界インタフェース by 宮下

体験メディア: グループ活動の文脈に埋め込まれた実世界メディア by 角

計算機利用スタイルの変化

モバイル時代以前

机の上で端末に向かう

スタンドアロン

モバイル時代

どこでも/だれでも/いつでも

ネットワーク / 現実世界との融合

計算機の形態の変化

http://gyazo.com/47c7e8a93135af6fe602a77487a6f0a0.png

従来型計算機

CUI, GUI

実世界型計算機

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

Invisible Computer

Ubiquitous Computing

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

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

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

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

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

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

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

電車の切符

切符を売るインタフェースはむずかしい?

直接課金により切符関連インタフェースが消滅

スーパーのレジ

カートが課金すればレジは不要

自動ドア

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

インフラ

無線通信

計算機小型化

入力装置 / 状況検出装置

センサ

カメラ

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

位置認識 (GPS, WiFi)

出力装置

薄型ディスプレイ

プロジェクタ

研究動向

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

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

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

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

文字入力手法

小型画面利用技術

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

検索技術

コミュニケーション技術

関連概念/用語

Ubiquitous Computing (Ubicomp)

Pervasive Computing

Cyber Physical System (CPS)

Augmented Reality (AR)

Virtualized Reality ( = Augmented Virtuality )

Mixed Reality ( = AR + AV )

Wearable Computer

Tangible Bits

Ubiquitous Computing

Mark Weiserの造語

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

計算機は動かなくてよい

https://gyazo.com/25e19294a5d5882df7bbab0b50ab68dd

Mark Weiser

https://gyazo.com/bb0efafe130a31f6a66ad01e3b5e319c

The computer for the 21st century

https://gyazo.com/371440a5011fa05f176559d89440d3cd

Mark Weiserが「ユビキタスコンピューティング」を提唱

Scientific American記事

邦訳

"Calm" technology

書き慣れたペン、履き心地のよい靴、あるいは朝配達される新聞のような

ParcTab

http://masui.org.s3.amazonaws.com/9/0/9050bc20d3b437a7297658a1d6fb3aed.gif

論文

Active Badge

http://www.cl.cam.ac.uk/research/dtg/attarchive/ab.html http://gyazo.com/c025505f930e5e4c37eb656ce4c2014d.png

ユビキタスコンピューティングの草分けみたいなもの

超音波で位置を検出するBatというシステム

ケンブリッジ大学とAT&Tの研究所で開発

現在もAndy Hopperらがこれに似た研究をしている

Andy Hopper

https://gyazo.com/12fe17cf959a31b6740e5343d14b39a3

システム分類

http://gyazo.com/109d773c66c6e1b997befb7afd6775ad.png

システム分類

AR系

紙系

家系

机系

ウェアラブル系

人系

流通系

画像配信系

写真共有系

サイネージ系

時間系

地図系

天気系

交通系

Augmented Reality

「拡張現実感」

Virtual Reality(全て計算機で現実をシミュレート)に対抗

狭義 (Computer Vision, Computer Graphicsの研究者の理解?)

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

「電脳コイル」でポピュラーに

「AR Toolkit」で敷居が下がった

ARKit

広義 (インタフェース研究者の理解?)

現実世界を計算機の力で増強する各種の手法

CGに限らない

狭義のAugmented Reality

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

画像を重ねる手法

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

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

3次元位置認識

http://gyazo.com/773ae2462931560d4e3b4e93f0c672c5.png

画像を重ねる技法

HMD(Head Mount Display)式

光学式

ビデオ式

モニタ式

光学式

http://gyazo.com/ec080c958162c33b69cde0ae023a722b.png

ビデオ式

http://gyazo.com/8d372110dd7fc20f090d12941c2db7cc.png

モニタ式

http://gyazo.com/154d11ef7331f9ab587bc0123b1e2edd.png

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

http://gyazo.com/b8b941749e6bf7fe72355e2da1b42405.png

手術/診断での使用

http://gyazo.com/4780ba7625b1fe66f4bfc865df0d1015.png

http://gyazo.com/09ad4d27593bc6d7b784138fc583fa94.png

Karma

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

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

http://gyazo.com/4780ba7625b1fe66f4bfc865df0d1015.pnghttp://gyazo.com/964840c4301f7351b9860792ae27006b.png

NaviCam

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

2次元バーコード利用NaviCam

実画像に計算機内の情報を加えてモニタに表示

2次元バーコードを用いてIDの位置と方向を認識

http://gyazo.com/c1e08d234e0b3777cb515b429c2b67b8.png

http://gyazo.com/b8bb2b373fb8679ff0f0adbe4cd1032c.png

ビデオ: 2次元バーコードによるAR

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

電脳コイル

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

http://gyazo.com/cdbde78694cbedaa95b2a21469c128d0.png

ビデオ: 電脳コイル

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

AR Toolkit

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

1999〜

工学ナビ橋本直氏

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

電脳フィギュアARis

http://gyazo.com/788ed6a2f3313d09ab84acb2894c5b3e.png

ビデオ: 電脳フィギュアARis

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

PTAM

Parallel Tracking and Mapping for Small AR Workspaces

George Klein氏の開発

ソース公開

ビデオ: PTAM

https://www.youtube.com/watch?v=Y9HMn6bd-v8

ビデオ: 初音ミクが家の前を...

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

ARKit

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

ARKit

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

ARKit3

https://www.youtube.com/watch?v=vkS-VqAss4s

Soccer On Your Tabletop (HoloLens)

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

Oculus Quest (VR)

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

紙系

普通の紙/ノート/黒板などを計算機と融合

紙データと計算機データの相互変換

紙インタフェースの例

XAX

Paper WWW

PaperLink

PaperIcon

Ultra Magic Key

IconSticker

CrossPad

XAX

計算機内データと紙データの相互変換

「DataGlyph」(目だたないバーコード)利用

バーコード付きのカバーシート利用

http://gyazo.com/d0243f8f84a08319331ecb2595bcf7bd.png

DataGlyph

http://gyazo.com/ca3a55e9f9c318992e646aa509398540.png

Paper WWW

紙に印刷したWebページに2次元バーコードを埋め込む

QRコード利用

PaperLink

VideoPen(小型カメラと蛍光ラインマーカを組みあわせたもの)利用

紙文書をハイパーテキストのように利用

マーカーで紙をなぞって領域指定

領域パタンにアクションを定義可能

未定義領域を指定するとOCRで引数指定

http://gyazo.com/cfc6d873934c2c6cee86c5535801479e.png

PaperLink製品版「LinkStick」

http://gyazo.com/260b8917fc87cd493574ebf6a7a08206.png

Audio Notebook

ノートに書いた文字のその時の音声をリンク

タブレット上のペンの動きと音声を記録

文字を書いたときの音声を参照可能

http://gyazo.com/aed599c86abf855bcf0e944ca5fc7142.png

Pick and Drop

異なる計算機間のCut/Paste

ペン計算機の画面上から図形を「Pick up」して別の計算機の画面に「Drop」する

c.f. Drag and Drop

Paper Icon

Pick and Dropにより紙上のデータを計算機にコピー

http://gyazo.com/c4b3996190e594d3873edf118bf15e76.png

Ultra Magic Key

情報を印刷した紙を指で操作

カメラで指認識

http://gyazo.com/8aebe3e79bc8f85c2bb326745ee1a138.png

IconSticker

画面上のアイコンをバーコード付きアイコンとして印刷

任意の場所に貼りつけて実世界内アイコンとして使用

http://gyazo.com/4a53f0ab6cc40a4954ca83a1a4892d2b.png

PICO

セガの子供用ゲーム機

絵本の上をペンでなぞるとテレビ上の画面が変化

http://gyazo.com/49ae2f2daedd4b10a944316ccace33db.png

CrossPad

1997

Cross/IBMの製品

タブレット上の紙の上で字/絵をかくと書いたものがすべて記録され計算機に送出可能

http://gyazo.com/3da99a0dd3617337881b8e692678c44e.png

Decrio

PalmPilotとCrossPadを一体化

1999

http://gyazo.com/be188671940e6f954f343dd31c6b4f43.png

Bamboo Spark

2015

https://gyazo.com/bc077ee50c07400bbade56df314f9494

Bamboo Folio

https://gyazo.com/c3f7b25f56098ed2e321f7cf7bceb3de

家系

TRONハウス

PAPI

AwareHome

お茶ハウス

NICTハウス

TRONハウス

http://monotsukuri.net/mirai98/tron/tron.htm http://gyazo.com/7cadad163bb89f8a8125f5420df4c244.png

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

坂村健が1990年に六本木に作った実験住宅

坂村健

https://gyazo.com/7467a092ee5c0f35c896636b83d86b33

東洋大学 INIAD

TRONハウス

自動調味料装置

https://gyazo.com/c1e6505e7f5412831e32c4000d2ec910

TRONハウス

地下に移動コンテナ

https://www.youtube.com/watch?v=7jPKEyM44GU

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

AwareHome

Georgia Techのプロジェクト

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

http://gyazo.com/ded4c3f883c28a5783813b304e8a315b.png

AwareHome

https://www.youtube.com/watch?v=70HrRnGCNWc

AwareHome

http://gyazo.com/29c4274bb0bd26327bb1d997ff4f0519.png

AwareHome

http://gyazo.com/25d67ff021bf8b9256bb5b80737daed7.png

AwareHome

http://gyazo.com/448cddccc02d09445f51cf870a9d85b0.png

トヨタ夢の住宅 PAPI

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

外壁, 玄関, ホームシアター, キッチン, ガレージ, 寝室

ユビキタスホーム @ NICT

http://gyazo.com/b3e7bc9ece60d5524372ddb2f318e2b0.png

キッチン

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

床

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

風呂

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

ΞHome(くすぃーほーむ)

http://www.kyoto-su.ac.jp/liaison/kenkyu/images/message56_04_full.jpg

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

http://gyazo.com/e2460f2a2401a70858deac084942fe0f.png

ビデオ: 大画面ディスプレイ

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

お茶ハウス

Georgia Techのプロジェクト

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

http://gyazo.com/c3eadc92f8e5945ff0076c9d3faa188d.png

お茶ハウス

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

未来のキッチン

料理メディア研究会

http://gyazo.com/31144a22f923a8e74b518190fa2f3346.png

おうちハック

https://www.facebook.com/groups/ouch.hack/ https://gyazo.com/a241d1df775d252dcbdff6a0796ca512

MakeupMirror

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

SyncTrash

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

机系

机上に計算機画面を投影

机の上のデータ/操作と計算機内のデータ/操作を融合

システム例

DigitalDesk

InteractiveDESK

InfoBinder

DigitalDesk

机上にプロジェクタとカメラを設置

紙や指を認識しつつ画面を投影

http://gyazo.com/1fcaced1228e3d10eb0402e2a3e99d30.png

InteractiveDESK

机上に投射した計算機画面をペンで操作

キーボードを机上に置くと前面のモニタが使えるようになる

InfoBinder

紙ばさみやマウスのように動作するInfoBinderデバイスを指のかわりに使用

仮─データを移動

閉じて別の実物に格納

http://gyazo.com/4405fdc3481de5bea2091f2a3c3cad50.png

MetaDesk

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

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

http://gyazo.com/f341c5536bd26aad812719092003d870.png

http://gyazo.com/6e28f9a4e0dcb328727be90997ae2aff.png

PingPongPlus

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

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

http://gyazo.com/eb4b2106eb602f4e043c769fdbb725a1.png

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

Luimnous Room

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

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

http://gyazo.com/0c28614690d3b2d676e059bab0bc14e1.png

Piano

https://www.youtube.com/watch?v=4mM04UscQxc

inFORM

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

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

Wearable Computer系

計算機を「着て」使う

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

Wearable Computerのアプローチ

携帯端末的アプローチ

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

Augmented Reality的アプローチ

人間の能力を増強

会った人を忘れない

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

位置情報などを活用

ファッションショー

http://gyazo.com/a8fba3b1d037b1eb7fdf6dd92c8e0541.pnghttp://gyazo.com/52b5f2c42410102710f6dfd96734ae7d.pnghttp://gyazo.com/8f5ca7ac71eff7ee8787bf00e3747c59.pnghttp://gyazo.com/c1864e47991c6b24290dd3218ce99f35.pnghttp://gyazo.com/1f2247bea50eb079f044f28bc6b973f5.pnghttp://gyazo.com/095e857ad8afa41c6210ea5a1723e9db.pnghttp://gyazo.com/03eefaf3562aa0e37e8199c27d1e32cc.pnghttp://gyazo.com/91ffcf0778348859870b1322a6a1b0e7.pnghttp://gyazo.com/c5b0d1e917dba64c3445f0c95426ea8c.png

携帯端末的Wearable Computer

IBMの超小型PC

音声入力

http://gyazo.com/219fc44df1207e7b1c3ad0fdd97fcbdf.pnghttp://gyazo.com/b0482c6e6ac1a7b6da03fe619629ff56.png

MITのWearable6人衆

Thad, Steve, Sandy, Brad, Lenny, Rehmi

http://gyazo.com/7d5c6d01999c8e107624febfab5c25ba.pnghttp://gyazo.com/03180729851fede3ef6303344d56922b.pnghttp://gyazo.com/1db3c835de408679573bd9096260b9a7.pnghttp://gyazo.com/855fb2586f05df0c2d31591bff918d9b.pnghttp://gyazo.com/d99b03b451a26de964994b3e062fe29d.pnghttp://gyazo.com/20c01c6491baee9d39cdd53c37e59499.png

トロント大学12人衆?

http://gyazo.com/0036204ca26c10a9ad5f45035def0b0e.png

Google Glass

http://gyazo.com/72bc27b1ab8a51cc308edb241a8c2d58.png

ビデオ: Google Glass

http://www.youtube.com/watch?v=9c6W4CCU9M4

塚本氏 @ 神戸大

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

塚本氏

http://gyazo.com/6f292ee4983d3ee055fd071b25fe69de.png

塚本氏

http://gyazo.com/b20b6e73e5a20649f78bb41934b8ee09.png