12. 実世界インタフェース(2)

今すぐ使うUbicomp

aka IoT

Webと融合

安くて実用的なもの

IoTの現状

by 坂村健

http://dol.ismcdn.jp/mwimgs/8/8/670m/img_881643ea16a0670f95774a6457dc6ee06718695.jpg http://diamond.jp/articles/-/130230

Googleで捜せないもの

自宅の戸締まり

人気の店

新宿で会った人

失くしたスマホ

Ubicompなら捜せる!

Ubicompのチャレンジ

Webサービスとの融合

ハードの敷居 ⇒ 消滅

ソフトの敷居 ⇒ 消滅

Webサービスとの融合

サーバブログ

美釧萌香たん

記事

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

ikisaki_kun

ハルロック

週刊モーニングで連載 (2014)

電子工作ブームがキタ!?

https://gyazo.com/214e2fcc8510efad29b9a4c1f7753cc4

http://cdn.moae.jp/lineup_top/0001/30/thumb_29490_lineup_top_large.jpeg

ナッちゃん

旋盤、溶接、...

https://www.amazon.co.jp/dp/B01KXQQG30 https://gyazo.com/f84eadcb457154543340bf25df736c07

ホームセンターてんこ

https://www.amazon.co.jp/dp/B00XBG717K https://gyazo.com/133ecddb94d9db8629990c2b9e162c77

ハードの敷居の消滅

Phidgets, Arduino, mbed...

XBee, WiPort, ...

Phidgets

USB接続のセンサ

http://gyazo.com/fef02a278bcd20cf8af4323fb2fbff8e.png

Arduino

USB/Serial + AVR

Processing環境でプログラミング可能

http://gyazo.com/ba0f1f2dd89edcd0b5d9d2630fec4e04.png

Arduino Micro

http://gyazo.com/a49ee2e6b0ecb16faeaf45b9ae5d5b1d.png

Blend Micro

Arduino + Bluetooth

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

LilyPad

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

http://gyazo.com/d69ad7cad9a36bcd1e9cd4e315b7dd1a.png

LilyPad

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

mbed

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

http://gyazo.com/d21d725a11af5e9cd6cdba2de538b7e8.png

XBee

ZigBee無線モジュール

http://gyazo.com/a71ddd6ded18a47281748008ec9b5006.png

WiPort

無線LAN+CPU+サーバ

http://gyazo.com/a4ed7e2872f8ebfea6d01d6be65c2bab.png

Sun SPOT

無線センサネットワークデバイス

Java

加速度、温度、照度センサーと8個の3色LED

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

IOIO

Android ADKキット

Android側でボードの操作を行う (c.f. Phidgets)

http://gyazo.com/7bc7c3597eb2da67d0d93a22f7e7bed7.png

Harpy

Android ADK+Arduino

http://gyazo.com/9c8d4389e07adbea93ced74f290417d7.png

Raspberry Pi

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

Linuxパソコンとして使える

https://gyazo.com/de22bebac62ffc048f3146ed5a55ff60

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

Intel Galileo

Linux + Arduino

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

Intel Edison

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

M5Stack

https://gyazo.com/21da7030b9f452cfacd9229be6773e38

320 x 240 TFTカラーディスプレイ

microSDカードスロット

スピーカ

WiFi

Bluetooth

バッテリ

USB-C

M5Stack

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

M5Stack

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

M5Stick

https://www.switch-science.com/catalog/5517/ https://gyazo.com/8d728b596ea3ed08f64fa572c6a1ef7e

小型のM5Stack

ソフトのハードル

かなり低くなってきた

JavaScript

Processing

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

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

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

人間の能力の強化

e.g. 眼鏡

Human enhancement

Human augmentation

直感的な操作が可能に

目的と操作を一致させる

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

小型コンピュータ

ネットワーク

センサ

操作手法の工夫

直感的にする工夫

なめらかな操作性

可逆的 / 連続的

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

e.g. 自動ドア

iPhoneXのなめらかさ

https://developer.apple.com/videos/play/wwdc2018/803/ https://gyazo.com/870d02ca9c66130edf8318329e520776

富豪的UbiComp

特殊なセンサを沢山利用

ディスプレイを沢山利用

特殊な計算機環境を利用

「Poor Man's UbiComp」 (PMUC)

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

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

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

× HMD

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

◯ GPS携帯、USB傾きセンサ

PMUCの要件

インフラ

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

情報検索技術

入出力デバイス

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

PMUCの要件

インフラ

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

情報検索技術

入出力デバイス

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

全部ある!

リモコン?

http://gyazo.com/2b51c7542fbc81b94d3d4a5719e1c1a4.png

明らかな問題点

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

紛失しやすい

リモコン?

明らかな問題点

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

紛失しやすい

本質的な問題点

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

(直感からほど遠い)

正しいアプローチ

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

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

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

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

長屋コンピューティング

我慢して住めるか?

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

これならどうか?

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

Wifi完備

障子がスクリーン

神棚にサーバ

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

自動冷暖房

電子書籍

コンビニで冷蔵庫不要

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

近所にスーパー銭湯

直感的でない操作

電灯のon/off

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

DVD観賞

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

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

ビデオ録画

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

ウィンドウの開閉

直感的なCDプレーヤ

「置くだけ」で情報家電制御

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

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

http://masui.org.s3.amazonaws.com/5/a/5a3e607da880440d50fefb77b1f17a38.jpg

直感的なデータ転送

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

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

http://masui.org.s3.amazonaws.com/3/9/3982e892796a6c7b140b2601e751de50.jpg

http://masui.org.s3.amazonaws.com/f/3/f3e59ee8d9285932cc8b9e43b5f0652f.jpg

「障害者用レジ」

数字⇔硬貨の変換が不要

http://masui.org.s3.amazonaws.com/e/8/e8b7b8735831648fa033cf7633ca5c38.gif

http://masui.org.s3.amazonaws.com/3/2/326b8a7a35769f3f55510ed6296c4286.gif

謎の自動ドア

http://masui.org.s3.amazonaws.com/2/c/2c591cc84eb7a1827df6bf4bc5f38365.jpg

http://masui.org.s3.amazonaws.com/d/6/d68556ddbac9971d7809338ebbf611b5.jpg

装置の必要性

機械の使用は絶対条件ではない

機械を使わないにこしたことはない

自動ドアは機械として認識されていない

期待通りの効果があれば何でもよい

理想のユビキタス環境

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

「Invisible Computer」

PMUC用入力デバイス

安くてロバスト

誰でも使える

なじみのある操作体系

装置の制約

単純な操作

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

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

小さな画面

実世界GUI

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

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

FieldMouse, MouseFieldを使用

実世界コピペ

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

FieldMouse

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

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

Active絵本

Active Hardcopy (Webページなど)

紙リモコン

Real-World GUI

http://masui.org.s3.amazonaws.com/7/3/73bb7ceed3106ba563c784a232fbf107.jpg

http://masui.org.s3.amazonaws.com/4/f/4f9a8573e720ba8c0f9b18c5d2e7ce45.jpg

アクティブ絵本

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

https://www.youtube.com/watch?v=kuZW-znOGIA

http://masui.org.s3.amazonaws.com/f/a/fa094f15e1e33761101f9933448622c6.jpg

紙リモコン

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

http://masui.org.s3.amazonaws.com/4/5/4598bb1047ffa112b3a4594536dd202e.gif

FieldMouseを使った実世界GUI

http://masui.org.s3.amazonaws.com/b/6/b628468ad1775361aee7ff346b89bfa4.gif

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

バーコードを認識した後でデバイスを移動する操作 ==

マウスをクリックした後でドラッグする操作

ビデオ: FieldMouse

https://www.youtube.com/watch?v=ACj-TN2Upn0

MouseField

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

http://masui.org.s3.amazonaws.com/d/9/d94214a01ebbac15c5714e13893e3f22.png

MouseFieldの使用方法

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

http://masui.org.s3.amazonaws.com/d/8/d8cd79ca279c4540b32c5ac25287f4ba.png

書斎のMouseField

http://masui.org.s3.amazonaws.com/3/0/3080e50da8a8b4003b7cabaa8322b84d.jpg

テーブル型MouseField

http://masui.org.s3.amazonaws.com/d/5/d5f0a9bb2f393f2431b02d61313b46ef.jpg

PlayStand++

http://masui.org.s3.amazonaws.com/6/1/61877d576aaa9751e4305da10f2db921.png

PlayStand++の操作

http://masui.org.s3.amazonaws.com/b/2/b2854fed63270061d12d976481d673bc.png

ビデオ: PlayStand

https://www.youtube.com/watch?v=w-nEPbptLO8

GoldFish

Android用実世界GUIフレームワーク

NFCを読む⇒ブラウザ開く⇒JSが走る⇒センサ利用

動作をJavaScriptのみで記述

プログラムはWeb上

簡単に修正可能

ビデオ: GoldFish

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

GoldFishのアーキテクチャ

GoldFishクライアント

センサ+表示

GoldFishサーバ

JavaScriptプログラム

URLリダイレクト

GoldFishクライアント

NFCインテントによる自動起動

サーバに登録したURLのページを表示

ダウンロードしたJavaScriptでセンサを利用

GoldFishクライアント

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

GoldFishサーバ

からリダイレクト

TinyURL, Bit.ly的な動作

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

http://gyazo.com/a2dcd1bfa983b4c8b81e406085e59c47.png

実行例2: 時計の表示

http://gyazo.com/de0fe7498b3a1fe856e07002f9a7ae1b.png

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

http://gyazo.com/b06aee214b542952125f0d8a0ecb7abf.png

http://gyazo.com/f38d032e1c317e1bac30d52581b8317b.png

デモ: 回転インタフェース

ドア開閉

http://gyazo.com/ab301f469b9266c3f2d2ed07db3f7c22.png

http://gyazo.com/f00aef03e85ef6b1a838c527825a21fc.png

実世界コピペ

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

Goldfish応用例

汎用に利用可能

家電の制御

机の上から音量調節

Wifi or 赤外線

家電のコントロールパネル

ドア認証

文書の上に置いて文書編集

柵に置いてフォトフレーム

柵に置いて時計

どこでも掲示板

サイネージ連携

家具コンピューティング

普通の家具にGoldfishを埋め込み

家電や証明、エアコンなどを制御

実世界指向プログミング

実世界の事物をプログラム要素として使う

実世界指向インタフェースを作成するには

実世界の事物を使うのが最適

c.f. ビジュアルインタフェースにはビジュアルプログラミングが最適

プログラミングが具体的、例示的

実世界的状況を説明しやすい

「品川駅近辺」

「3時ごろ」

実世界指向プログミングの例

7時になったらベルが鳴る

電話をとるとTVが消える

アメリカに行くと時計のタイムゾーンが切りかわる

夜に駅に行くと終電時刻が表示される

印刷された文書を机に置くとファイルがあらわれる

4時までに宅急便が来れば隣の家に持って行くよう伝える

ビデオの予約

時計を進めて将来の録画実行時間にあわせる

(将来の実行モード = 予約モードに入る)

通常のチャンネル選択ボタンでチャンネルをあわせる

録画ボタンを押して録画開始を指示する

時計を進めて将来の録画終了時間にあわせる

停止ボタンを押して録画停止を指示する

時計を現在時刻に戻す

(通常モードに復帰する)

Phidgets体重計

http://masui.org.s3.amazonaws.com/6/c/6c3e200cc1b7ea1d332ac9a4680fe0c9.png

Phidgetsのプログラミング例

code:phidgets.java

import Phidgets.*;

public class IFKex1 extends _IPhidgetInterfaceKitEventsAdapter

{

public void OnSensorChange(_IPhidgetInterfaceKitEvents_OnSensorChangeEvent ke) {

System.out.println("SensorChange: " + ke.get_SensorValue());

}

public void OnInputChange(_IPhidgetInterfaceKitEvents_OnInputChangeEvent ke) {

System.out.println("InputChange: " + ke.get_Index() + " " + ke.get_NewState());

}

public void OnDetach(_IPhidgetInterfaceKitEvents_OnDetachEvent ke) {

System.out.println("FINISHED!");

}

public static void main(String[] args) {

new IFKex1();

}

public IFKex1()

{

PhidgetInterfaceKit phid = new PhidgetInterfaceKit();

phid.add_IPhidgetInterfaceKitEventsListener(this);

if (phid.Open(false) == false)

{

System.out.println("Could not find a PhidgetInterfaceKit");

return;

}

System.out.println(phid.GetDeviceType());

System.out.println("Serial Number " + phid.GetSerialNumber());

System.out.println("Device Version " + phid.GetDeviceVersion());

phid.SetSensorChangeTrigger(7, 1);

phid.start();

System.out.println("Looping...\n");

for(int i = 0; i < 1000; ++i)

{

phid.SetOutputState(0,true);

}

// Turn the output on, and rudely leave it turned on!

phid.Close();

System.out.println("Closed and exitting...");

}

Phidgetsプログラミングの問題点

C, Javaなどの開発環境が必要

言語ごとに異なるライブラリが必要

マイナーな言語から使えない

リモートのPhidgetsを制御できない

Phidgets Server

Phidgetsの入出力をTCP/IPで制御

任意の言語/環境を利用可能

by 塚田浩二@お茶の水女子大

MobiServer

Phidgets, X10, KURO-RS, XBeeを制御

by 塚田浩二@お茶の水女子大

http://gyazo.com/094eb1ca6d685cc52c624ccaf664e00f.png

気合いブックマークプログラム in Ruby

code:kiai.rb

require "socket"

require "delicious"

PORT = 4321

HOST = "phidget.server.host"

USER = "masui"

server = TCPSocket.open(HOST,PORT)

while true

s = server.gets

break if s.nil?

a = s.split(/,/)

if a1 == 'Weight' then

weight = a2.to_f

if weight > 4.0 then

end

プレゼンプログラム in Ruby

code:presentation.rb

#!/usr/bin/env ruby

require "socket"

require "dl/import"

module Win32

extend DL::Importable

typealias "DWORD", "unsigned long"

typealias "BYTE", "unsigned char"

typealias "ULONG", "unsigned long"

KEYEVENTF_KEYUP = 0x02

VK_SHIFT = 0x10

VK_A = 0x41

VK_SPACE = 0x20

VK_BACKSPACE = 0x08

dlload "user32.dll"

extern "void keybd_event(BYTE, BYTE, DWORD, ULONG)"

def send_keybd_event(bVk, dwFlags = 0)

keybd_event(bVk, 0, dwFlags,0)

end

module_function :send_keybd_event

end

serverhost = 'localhost'

port = 4321

socket = TCPSocket.new(serverhost, port)

prevval0 = 0

prevval2 = 0

while line = socket.gets

(io,device,ad,portno,val) = line.chomp.split(/,/)

if io == 'In' && device == 'InterfaceKit' &&

ad = 'Analog' && portno.to_i == 0 then

if val.to_i > 100 && prevval0 < 100 then

Win32.send_keybd_event(Win32::VK_SPACE)

Win32.send_keybd_event(Win32::VK_SPACE,

Win32::KEYEVENTF_KEYUP)

end

prevval0 = val.to_i

end

...

Phidgets Serverプログラミングの問題

サーバのアドレスやポートを意識する必要がある

並列処理が面倒

複数のサーバを同時に扱いにくい

Linda

http://masui.org.s3.amazonaws.com/5/c/5c79a78e3de1dcec20999cedfc5ddfad.png

Linda利用の利点

サーバのアドレスを意識しない

ひとつの共有空間を利用して通信

手軽な並列処理

Phidgets以外のセンサも利用可能

居場所通知

ネット風速計

X10

赤外線リモコン

指紋センサ

パソコン内蔵傾きセンサ

Lindaプログラミングの特徴

非常に簡単にセンサプログラミング

必要なのはPCとネットワークとPhidgetsだけ

日曜プログラミングの復活?

簡単なイベントベースプログラミングを誰でも楽しめるようになる

気合いブックマーク

夜になると電気を消す

7時になるとベルを鳴らす

Rinda

RubyによるLindaの実装

by 関氏

Rubyで簡単にLindaを利用できる

× Ruby以外の言語が使えない

Rindaによるプログラミング

code:rinda.rb

require 'rinda/rinda'

require 'delicious'

TS_URI = 'druby://localhost:12345'

USER = 'masui'

ts = DRbObject.new(nil,TS_URI) # タプル空間に接続

while true

ts.write('weight',$$,"") # 体重値タプル取得

val = ts.take('weight',$$,Float)2

end

Web-Linda

https://www.slideshare.net/shokai/prosym-node-linda https://gyazo.com/716da53b338a9c47e40bf79176fb78a2

全世界プログラミング

全世界の情報を利用

辻堂の波, 楽天の株価, ...

全世界の機械を制御

情報家電, 自宅の照明, ...

全世界の人間が作成

ホビープログラマ, メディアアーティスト, ...

全世界プログラミングの例 (1)

目覚まし時計

炊飯の予約

風呂の水はり

全世界プログラミングの例 (2)

人がいない部屋のテレビを消す

人がいない部屋では目覚ましを鳴らさない

ビールがなくなると注文フォームを表示する

気合いを入れるとブックマークされる

寝ると照明が消える

夜になると静かになる空気清浄機

汚いと自動的に洗浄してくれるトイレ

全世界プログラミングの例 (3)

遠方の家族の様子を知る

水道が使われていないと通報する

泥棒を検出

波や風の様子を調べる

全世界プログラミングの例 (4)

ブログが炎上すると警報が鳴る

ニューヨークの天気でBGMを変化させる

全世界ピタゴラマシン

....

全世界プログラミングのすすめ

昔はBASICの日曜プログラミングが流行っていた

最近はプログラミングが流行っていない

敷居が高い

値段が高い

日曜プログラミングの復活!

e.g. Processingシステム

実世界指向I/Fの課題

新しいデバイス

IDの管理

状況認識

プライバシ

認証技術

新しいデバイス

ID認識

位置認識

Wearable Computerの入出力装置

ID管理

誰がIDを管理するのか?

足りなくなったらどうするか?

プライバシ問題

現在はあまり誰も気にしていないが...

法的規制

ビジネスの可能性

例示/予測I/Fとの関連

実世界での予測

夜の品川付近で...

Programming by Exampleが可能

メディアアートとAR

KAGE

Kobito

KAGE

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

http://gyazo.com/1738a0621424d74f36cfb262c8d1500e.png

Kobito

http://gyazo.com/e13275e04979dfd97b7f9467f6ad85f9.png

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

まとめ

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

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

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