7. Webと実世界 2016/12/19

講義資料

将来のインタフェースのトレンド

実世界インタフェース

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

IoT

Web活用

VR

AI

Webの問題点

使えない場所が多い

風呂でググれない

レシピを台所でググれない

実世界情報が検索できない

家が火事になってもわからない

人気店を捜せない

パーソナル情報が検索できない

下北沢で会った人を捜せない

Webの実世界対応

実世界で使う

誰でもどこでも使える

実世界情報を利用する

渋滞情報、レストラン情報、自宅情報

あらゆるものがネットワークにつながる

IoT (Internet of Things)

実世界でWebを利用する例

新しいデバイスを利用

スライダでWebページをザッピング

気合いブックマーク

風呂でググる

新しい場所で使う

サイネージでパーソナル情報をチェックする

実世界情報を利用する例

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

http://www.water.go.jp/yoshino/ikeda/sameura/same_top.html https://gyazo.com/b94bcb2f2efcbcc06250d2704bb7dcd0.png

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

パソコン入出力機器以外を使うインタフェース

Webに限らない

直観的なインタフェースの可能性

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

自動ドア

Suica

Tangible Bits

AR

あらゆる実世界指向IFはWebと関連づけられる?

実世界+Webのキーワード

新しい入出力デバイス

ユビキタス環境の認証技術

キーボードを利用しない

誰でもどこでも使える

情報共有技術

共有レベルの制御

IoT

新しいデバイス例: FieldMouse

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

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

FieldMouseを使った実世界GUI

https://gyazo.com/2593d8fafcf5b4074439079cca1f9d66.png

新しいデバイス例: MouseField

手軽な実世界I/Fデバイス

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

https://gyazo.com/dcb16fd6194a15b459d2502ca627d2d1.png

MouseFieldの使用方法

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

https://gyazo.com/e98258a8a47de176282e2ed148e7db18.png

書斎のMouseField

https://gyazo.com/f475336f971c564980a6368947e15180.png

テーブル型MouseField

https://gyazo.com/c42e22616d9c306acab92c742416a886.png

PlayStand++

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

PlayStand++の操作

https://gyazo.com/024b85c0aed15a9308436eaf2fd448fc.png

ビデオ: MouseField

新しいシステム: GoldFish

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

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

https://gyazo.com/d3e79a8b457bc1544f0f5dc399e7c10b.png

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

センサ/組込みマイコン

Phidgets

USB接続のセンサ

https://gyazo.com/fef02a278bcd20cf8af4323fb2fbff8e.png

USB + PIC

Processingでプログラミング可能

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

Arduino

USB/Serial + AVR

https://gyazo.com/ba0f1f2dd89edcd0b5d9d2630fec4e04.png

Arduino Micro

https://gyazo.com/a49ee2e6b0ecb16faeaf45b9ae5d5b1d.png

Arduino + Bluetooth

https://gyazo.com/52298c7657576812dc4117be888b5909.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

Intel Galileo

Linux + Arduino

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

Intel Edison

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

TESSEL

JSが動く

https://tessel.io https://gyazo.com/8111116f4cd4a405f26c946597fbece6.png

TWE-Lite

http://tocos-wireless.com/jp/products/TWE-Lite-DIP/index.html http://gyazo.com/d91c8bb18096f173081fbaa5aa1170f0.png

「とわいらいと」

iBeacon

Bluetooth Low Energy利用

低電力でIDを飛ばすことができる

https://gyazo.com/0848c9a63fc580b748d9db6f89e6e065.png

https://gyazo.com/8921282d50d982e7e42f8d91301a4267.png

BLE本

BLE + IoT

BLEで「最後の1メートル」が埋まる

http://www.amazon.co.jp/dp/4334038522 https://gyazo.com/ccf55d025ae941720ce068e51fccd0da.png

実世界システム分類

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

システム分類

AR系

紙系

家系

机系

ウェアラブル系

人系

流通系

画像配信系

写真共有系

サイネージ系

時間系

地図系

天気系

交通系

AR系

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

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

「セカイカメラ」で有名に

Webとの連携はまだ多くない

狭義のAugmented Reality

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

画像を重ねる手法

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

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

3次元位置認識

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

画像を重ねる技法

HMD(Head Mount Display)式

光学式

ビデオ式

モニタ式

光学式

https://gyazo.com/ec080c958162c33b69cde0ae023a722b.png

ビデオ式

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

モニタ式

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

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

https://gyazo.com/b8b941749e6bf7fe72355e2da1b42405.png

手術/診断での使用

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

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

Karma

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

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

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

https://gyazo.com/964840c4301f7351b9860792ae27006b.png

2次元バーコード利用NaviCam

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

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

https://gyazo.com/c1e08d234e0b3777cb515b429c2b67b8.png

https://gyazo.com/b8bb2b373fb8679ff0f0adbe4cd1032c.png

電脳コイル

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

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

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

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

Parallel Tracking and Mapping for Small AR Workspaces

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

初音ミクが家の前を...

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

紙系

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

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

紙インタフェースの例

XAX

Paper WWW

PaperLink

Audio Notebook

Pick-and-Drop

PaperIcon

Ultra Magic Key

IconSticker

CrossPad

PICO

AbsoluteMouse

XAX

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

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

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

https://gyazo.com/d0243f8f84a08319331ecb2595bcf7bd.png

DataGlyph

https://gyazo.com/ca3a55e9f9c318992e646aa509398540.png

Paper WWW

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

QRコード利用

PaperLink

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

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

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

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

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

https://gyazo.com/cfc6d873934c2c6cee86c5535801479e.png

PaperLink製品版「LinkStick」

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

Audio Notebook

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

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

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

https://gyazo.com/aed599c86abf855bcf0e944ca5fc7142.png

Pick and Drop

異なる計算機間のCut/Paste

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

c.f. Drag and Drop

Paper Icon

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

https://gyazo.com/c4b3996190e594d3873edf118bf15e76.png

Ultra Magic Key

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

カメラで指認識

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

IconSticker

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

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

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

PICO

セガの子供用ゲーム機

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

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

CrossPad

Cross/IBMの製品

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

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

Decrio

PalmPilotとCrossPadを一体化

https://gyazo.com/be188671940e6f954f343dd31c6b4f43.png

家系

TRONハウス

PAPI

AwareHome

お茶ハウス

NICTハウス

TRON電脳住宅

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

AwareHome

Georgia Techのプロジェクト

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

https://gyazo.com/ded4c3f883c28a5783813b304e8a315b.png

AwareHome

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

AwareHome

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

AwareHome

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

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

https://gyazo.com/b3e7bc9ece60d5524372ddb2f318e2b0.png

キッチン

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

床

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

風呂

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

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

https://gyazo.com/e2460f2a2401a70858deac084942fe0f.png

Georgia Techのプロジェクト

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

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

机系

机上に計算機画面を投影

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

システム例

DigitalDesk

InteractiveDESK

InfoBinder

DigitalDesk

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

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

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

InteractiveDESK

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

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

InfoBinder

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

仮─データを移動

閉じて別の実物に格納

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

MetaDesk

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

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

https://gyazo.com/f341c5536bd26aad812719092003d870.png

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

PingPongPlus

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

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

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

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

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

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

inFORM

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

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

ビデオ: TRANSFORM

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

ビデオ: Radical Atoms

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

Pattie Maes

https://gyazo.com/ca690c2e0f39352c0f26457bed4decba.png

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

MicrosoftのAR

半透明HMD

Video: HoloLens

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

Video: HoloLens

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

Video: HoloLens

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

謎の "wearable AR" 会社

Googleが出資

超軽量HMD?

Magic Leap

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

Magic Leap

https://www.youtube.com/watch?v=kw0-JRa9n94

Magic Leap

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

Wearable Computer系

計算機を「着て」使う

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

Wearable Computerのアプローチ

携帯端末的アプローチ

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

Augmented Reality的アプローチ

人間の能力を増強

会った人を忘れない

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

位置情報などを活用

ファッションショー

携帯端末的Wearable Computer

IBMの超小型PC

音声入力

MITのWearable6人衆

Thad, Steve, Sandy, Brad, Lenny, Rehmi

トロント大学12人衆?

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

Google Glass

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

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

塚本氏 @ 神戸大

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

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

https://gyazo.com/b20b6e73e5a20649f78bb41934b8ee09.png

その他のWearable Computer

人系

ソーシャルネットワーク

実世界集合知

流通系

配送追跡

配達状況をWebでチェック

画像配信系

動画配信

ustreamなど

Webカメラ

写真系

写真共有

地図との連携

サイネージ系

公共ディスプレイ利用

時間系

宴会サポート

予定表サポート

地図系

各種地図サービス

Google Maps, Yahoo Maps

Google Street View

リモートセンシング

位置情報サービス

現在地を知る

GPS応用

Geocoding

位置情報と認証

どこに行ったかを認証に利用

実世界的情報(写真とか)を認証に利用

天気系

天気予報

天気情報

交通系

自動車

電車

運行状況の確認など

実世界と計算機世界の融合がテーマ

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

2013年春終了

家具コンピューティング

増井研究会のテーマ

生活の邪魔にならない家具でUbiComp

GoldFishなどを利用

https://gyazo.com/352cfed8851e4e3d17be3f39693c8a15.png

長屋コンピューティング

我慢して住めるか?

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

これなら満足?

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

Wifi完備

障子がスクリーン

神棚にサーバ

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

自動冷暖房

電子書籍

コンビニで冷蔵庫不要

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

近所にスーパー銭湯

Gear

2個のスイッチだけで階層コンテンツナビゲーション

https://gyazo.com/ab4ff7c2d44f4af2bb94fae76589f495.png

Demo: Gear

実世界に様々なセンサを埋め込んで利用

Magicknock

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

将来展望

あらゆる可能性がある

新しいインタラクションが必要

実世界プログラミングも必要

真剣な研究が必要!

実用は近い!