講演資料: IOT時代のユーザインタフェースデザイン @ Sony 2018.
(expanded from ソニー講演 2018/1/16 このページは編集しないでください)
IoT時代のユーザインタフェースデザイン
増井 俊之
慶應義塾大学 環境情報学部
masui@masui.org
「IoT時代のユーザインタフェースデザイン」（User interface design for IoT era）
パソコンやスマホなどの普及によって誰もがいつでもどこでもインターネット資源を利用できる世界が期待されているが、装置の利用がひどく難しかったり装置を使えない状況だったりすることが多く、理想にはほど遠いのが現状である。コンピュータの理想的な利用環境が存在しないのは、ハードウェアやソフトウェアの技術が未熟だからではなく、インタフェースデザインのアイデアが不充分だからである。
ネットワークに接続された多数のセンサやアクチュエータを活用したデザインを行なうことにより、現在とは次元が異なる使い勝手で誰もがいつでもどこでもネットワークやコンピュータ資源を活用することが可能になる。IoT技術の統合によって可能になる将来のユーザインタフェースデザイン技術について解説する。
概要
流行中のシステム
発想法
これから欲しいシステム
全世界コンピューティング
超らくらくブラウジング
家具コンピューティング
その他のシステム紹介
EpisoPass, LensBar, ...
計算機環境の進化について
自己紹介
シャープ、ソニー、産総研などに勤務
ケータイの予測変換(POBox)などを開発
2008秋まで米国Appleに勤務
フリック入力システムなどを開発
2009より慶應義塾大学
ユーザインタフェースの研究開発
IoT, 検索システム, 情報視覚化
各種Webサービス運用中
Gyazo, Scrapbox, 本棚.org, ...
研究開発方針
自分の欲しいものを作る
自分で使う
コロンブスの卵が好き
今すぐ使えて売れるものを作る
コロンブス指数
簡単で便利かどうか
コロンブス指数 = 有用さ / 複雑さ
コロンブス日和
「楽するためならどんな苦労でもする!」
技術評論社 Software Design 連載記事
GyaTV (2015/11)
Gyump (2015/12)
Gyamm (2016/1)
Gyazo (2016/2)
Gyaki (2016/3)
Dynamic Macro (2016/4)
Gyaim (2016/5)
EpisoPass (2016/6)
ExpandHelp (2016/7)
DragZoom (2016/8)
Gear (2016/9)
SmoothSnap (2016/10)
廃れるページ (2016/11)
HashInfo (2016/12)
フラット整理術 (2017/1)
Scrapbox(1) (2017/2)
Scrapbox(2) (2017/3)
発見プログラミング (2017/4) = 最終回
光文社 2015/2
煽り
何を騙されているのか?
現在のコンピュータは便利! (?)
スマホはサイコー! (?)
システム紹介
POBox
Gyazo
Scrapbox
プロトタイプを製品化
POBox
予測インタフェース+検索インタフェース+デザイン
「フリック」入力
仕事風景 @ Apple
認識POBox
Gyaim: Mac用IME
予測インタフェースの例
Dynamic Macro
Demo: Dynamic Macro
Gyazo
超簡単な画像アップロードサービス
Gyazoキー
デモ: Gyazo
Gyazo (2010/7)
Gyazo (2012/1)
Gyazo (2014/1)
Gyazo (2015/1)
Alexaデータ (2013/11/14)
Alexaデータ (2014/1/15)
Alexaデータ (2014/5/12)
Alexa info (2014/10/27)
Alexa info (2014/11/14)
Alexa info (2015/1/26)
Alexa info (2015/5/12)
Alexa info (2017/5/8)
IvySearch
Scrapbox
大変便利なWiki
Scrapboxの特徴
WYSIWYGなWiki
複数ユーザ同時編集
Gyazo画像の活用
ページ代表画像の利用
ページとタグの区別が無い
階層構造なし
双方向リンク
アウトライン編集
コード記法, コードブロック記法
柔軟で簡単なScrapbox記法
強力な文字装飾記法
Demo: Scrapbox
利用例
発想法
ずっとバックグラウンドで考え続けておく
寝てるときに思いつくことも
制約のある環境を考える
クギ13本問題
長めのクギを13本用意
1本を机に打ち込む
残りの12本をその上に乗せる
長屋コンピューティング
制約だらけ
我慢して住めるか?
これなら満足?
Wifi完備
障子がスクリーン
神棚にサーバ
あちこちのセンサでKB入力
自動冷暖房
電子書籍
コンビニで冷蔵庫不要
良いレストランがいくらでも
近所にスーパー銭湯
制約的状況
手が使えない状況
目が見えない状況
泥酔状況
泥酔対応音楽プレーヤ
これから欲しいシステム
計算機ユーザの変化
昔: 少数の専門家が利用
現在: 普通の人が利用
将来: あらゆる人間が使うようになる
「弱者」がほとんど
補助的な使われ方
メガネ、予測入力、etc.
現状の計算機
専門家向けシステムを延命して利用
30年以上前のGUI
メニュー、スクロールバー、etc.
誰でも使えるようになっていない
どこでも使えるようになっていない
練習が必要
現状の計算機
絵を見たい人に絵の具を買わせている
運転できないと電車に乗れない
要望と操作の不一致
映画を見るには?
写真を捜すには?
要らない情報を消すには?
「リモコン」
リモートに機器をコントロール
発想が根本的に間違い
機器の意識が必要
やりたいことと操作が違う
やりたい場所と機器の位置が違う
スマホを使う?
ジョブズに騙されているだけ
スマホは特に便利なものではない
リモコンの親玉のようなもの
堀江
そもそもからの発想
そもそもの要望を解決するべき
現状の機器などの制約を忘れる
何が問題?
無駄なモノ/不便なものが多すぎる
なのにそれに疑問を感じない
不便なもの
思考が必要
マッピングとか計算とか
e.g. リモコンの色キー, 駄目な自動ドア
計算
e.g. レジ
抽象的指向
e.g. ビデオ録画
類推ができない
全く新しいとか
可逆的でない
試行錯誤できないもの
e.g. 閉じるボタン
そもそも思考の成功例
自動ドア
Suica
それでも普及は大変だった
そもそもの問題発見 => 問題解決
RFIDがあるから考える、というのではない
要素技術からの発想は困難
やりたいことがずっとあって、新しいデバイスを見たら何か思いつくはず
不便に気付いても良いものを発明するのは難しいが
「UX」?
気分みたいなものは割とどうでも良い
アニメーション? バウンス?
もっとそもそもなものが必要
罰金
「デザイン思考」?
よくわからない
罰金になるかも
選択しないブラウジング
「チャンネルを回すだけ」のような操作
Gear
2個のスイッチだけで階層コンテンツナビゲーション
Demo: Gear
実世界に様々なセンサを埋め込んで利用
デモ: Serencast
KWICナビゲーション
KWIC: KeyWord In Context
dshelf: 書籍の芋蔓検索
デモ: dshelf
Pivotty: 映画の芋蔓検索
デモ: Pivotty
Demo: Wikipedia Navigator
全世界コンピューティング
WebサービスからUbicompへ
各種IoT技術を利用
実世界コピペ
最近の計算機状況
世界中の人や物がネットワークで常時接続
革命的変化が進行中
IoTは流行るのか?
規格が無い
なんとなく複雑
便利さが微妙
Ubicompのチャレンジ
Webサービスとの融合
ハードの敷居
ソフトの敷居
富豪的UbiComp
特殊なセンサを沢山利用
ディスプレイを沢山利用
特殊な計算機環境を利用
「Poor Man's UbiComp」 (PMUC)
特殊なセンサを沢山使わない
× カメラ、× 3次元位置センサ
特殊なディスプレイを使わない
× HMD
入手しやすいロバストな装置を少しだけ使う
◯ スマホのセンサ
PMUCの要件
インフラ
インターネット、無線LAN, etc.
情報検索技術
入出力デバイス
各種センサ/アクチュエータ
PMUCの要件
インフラ
インターネット、無線LAN, etc.
情報検索技術
入出力デバイス
各種センサ/アクチュエータ
全部ある!
直感的でない操作
電灯のon/off
スイッチが部屋の入口にある
DVD観賞
プレーヤ/プロジェクタ/アンプ/スクリーン/スピーカ
どれをどのように操作すればいいのか
ビデオ録画
番組を見たいだけなのだが...
ウィンドウの開閉
直感的なCDプレーヤ
「置くだけ主義」による情報家電制御
CDを置くとその場所で音が鳴る
直感的なデータ転送
CDを挿すとコピーされて別のCDに焼かれる
CD-ROMはセンサ/アクチュエータ!
理想のユビキタス環境
機械も制御装置も見えないのが本当のユビキタス
「Invisible Computer」
PMUC用入力デバイス
安くてロバスト
誰でも使える
なじみのある操作体系
装置の制約
単純な操作
過酷な環境への対応 (風呂、台所、etc.)
制限された入力手法 (片手、音声、etc.)
小さな画面
実世界GUI
グラフィカルインタフェース(GUI)操作を実世界で実行
ボタン、メニュー、スライダ、ドラッグ/ドロップ、... の操作を壁や机の上で実行
FieldMouse, MouseFieldを使用
FieldMouse
ID認識装置 + 動き検出装置
壁や机の上でマウスのように使える
FieldMouseを使った実世界GUI
Video: FieldMouse
MouseField
手軽に誰もがどこでも使える実世界I/Fデバイス
風呂でネット音楽を聞く
台所でレシピを調べる
街角で情報を検索する
電車内で情報を共有する
...
MouseField
RFIDリーダと動き検出装置を一体化
MouseFieldの使用方法
「置いて動かす」だけで情報検索/制御
書斎のMouseField
テーブル型MouseField
PlayStand++
PlayStand++の操作
ビデオ: MouseField
GoldFish
Android用実世界GUIフレームワーク
NFCを読む⇒ブラウザ開く⇒JSが走る⇒センサ利用
動作をJavaScriptのみで記述
プログラムはWeb上
簡単に修正可能
GoldFishのアーキテクチャ
GoldFishクライアント
センサ+表示
GoldFishサーバ
JavaScriptプログラム
URLリダイレクト
GoldFishクライアント
NFCインテントによる自動起動
サーバに登録したURLのページを表示
ダウンロードしたJavaScriptでセンサを利用
GoldFishサーバ
TinyURL, Bit.ly的な動作
実行例1: マニュアルの表示
実行例2: 時計の表示
実行例3: 回転インタフェース
デモ: 回転インタフェース
Lindaの利用
Web上の共有空間でデータを読み書き
LindaによるWeb上の通信
"say", "hello" というタプル
"door", "open" というタプル
Web-Linda
全世界プログラミング
全世界の情報を利用
辻堂の波, 楽天の株価, ...
全世界の機械を制御
情報家電, 自宅の照明, ...
全世界の人間が作成
ホビープログラマ, メディアアーティスト, ...
全世界プログラミングの例 (1)
目覚まし時計
炊飯の予約
風呂の水はり
全世界プログラミングの例 (2)
人がいない部屋のテレビを消す
人がいない部屋では目覚ましを鳴らさない
ビールがなくなると注文フォームを表示する
気合いを入れるとブックマークされる
寝ると照明が消える
夜になると静かになる空気清浄機
汚いと自動的に洗浄してくれるトイレ
全世界プログラミングの例 (3)
遠方の家族の様子を知る
水道が使われていないと通報する
泥棒を検出
波や風の様子を調べる
全世界プログラミングの例 (4)
ブログが炎上すると警報が鳴る
ニューヨークの天気でBGMを変化させる
全世界ピタゴラマシン
....
全世界プログラミングのすすめ
昔はBASICの日曜プログラミングが流行っていた
最近はプログラミングが流行っていない
敷居が高い
値段が高い
日曜プログラミングの復活!
e.g. Processingシステム
家具コンピューティング
家具に既存技術を埋め込む
Goldfish
Gear
WebLinda
家具の良いところ
すでに家の中にある
追加スペース不要
家具は既にかなりのスペースを占めている
既存の家具にコンピュータを組み込み可能
テーブル
壁
天井のライト
家具調のものは受け入れられる?
ステレオ
ピアノ
昔のステレオ
ピアノ @ 手塚治虫
IoT家具の例
照明
電源がある
邪魔にならない
ベッド
健康管理
テレビ
情報端末
ポスト
物をやりとりする装置
台所、トイレ、風呂
IKEAとIoT
人感センサ
温度計
充電テーブル
人感センサ
温度計
Qi充電
その他のシステム
EpisoPass
SmoothSnap
LensBar
本棚
GyaTV
エピソード記憶からパスワードを生成
ブラウザ上でのズーミングインタフェース
JSで実装したズーミングシステム
SmoothSnap
Web上で書籍情報共有
簡単なデータマイニング
メーリングリストの自動作成
xxxx@quickml.com にメールを出すと自動的にMLを作成
Wikiとメーリングリストの融合
会社の勢いについて
トップが大事
アップルもシャープもソニーも
技術者はそう違うものではない
ドッグフーディング
Steve JobsはiPhoneを使う
松下幸之助は松下製品を使う
計算機やプログラミングの進化
20年進化してない?
小さく/速く/安くはなったが
全然違うものも考えるべきでは?
# 古い知恵も役にたつかも?
生物進化の系統樹
カンブリア爆発
様々な生物「門」が一気に発生
カンブリア爆発
機械の進化
多数の絶滅を経由して現在に到る
昔の計算機
複雑なスイッチ, ランプ
専門家が使うもの
飛行機のコックピット
最近の計算機
Cray-1 (1976)
スーパーコンピュータの草分け
最近のスマホより遅い
VAX11 (1976)
DECの「ミニコン」
1MIPS
ちなみにIntel Core i7は15万MIPS
VT100 (1978)
Apple II (1977)
ビットマップ表示可能なパソコン
高校クラブで作った計算機 (1976)
インテル8008使用
8008マイコン
紙テープリーダ
1990ごろのの増井の開発環境
NeXTStation
ビットマップディスプレイ+マウス
NeXTstep
BSD Unix + GUI
Interface Builder
Objective-C
PostScript描画
NeXTstation (1990)
GUIの歴史
Altoが最初のもの (1973)
Xerox PARC (Palo Alto Research Center)で発明
XEROX PARC
Alto (1973)
PARCで開発
GUIワークステーションのさきがけ
ビットマップディスプレイ
マウス/ウィンドウ/メニュー
Altoハードウェア復活??
Xerox Star
1981発売
Ethernet
TCP/IPではない
JStar
1982発売
日本語対応
Sketchpad (1963)
Ivan Sutherlandのシステム
Douglas Engelbart
マウスの発明者
伝説のデモ (1968)
「Engelbart氏と話したその穏やかな夏の夜、パーソナルコンピュータの出現そのものが、彼のパーソナルコンピュータシステムについての研究を終わらせてしまい、彼がそれ以降何十年も資金を得られていないことを聞いた。」
「私はショックを受けた。その独創性に富んだ研究は偉大で重要なものであり、数時間前にはXeroxのパロアルト研究所で非常に高く評価されていたにも関わらず、その研究によって彼自身が追放されてしまい、何十年も資金のない状態だったなどと信じられるだろうか？ 」
「現在のコンピュータシステムは、基本的に1960年代、70年代にあったタイムシェアリング型のメインフレームと同じものだ。巨大な集中型のコンピュータシステム（サーバファーム）に個人用のワークステーションをつなぎ、互いに通信し、表計算ソフトやワープロやアプリを実行している。 」
その他のウィンドウシステム
Andrew
Sunview
Macintosh
NeXTstep
Windows95
X10
X11
Cocoa
Andrew (1982)
CMU
ウィンドウシステムその他いろいろ
MIMEの起源
X Window System (1984)
MIT
X11は1987年
ウィンドウサーバとマネージャを分離
何故か今でも現役
増井Window System (1985)
シャープのワークステーションで動作
イベントはウィンドウ階層の根から伝播
ウィンドウマネージャ記述言語
並列動作ツールキット
Lisa (1983)
AppleのGUIパソコン
ジョブズがAltoを見て驚いて作ったもの
Macintosh (1984)
もともとJef Raskinのプロジェクトだった
ジョブズがRaskinを追い出す
NeXT Computer
1985創業 by ジョブズ
1988 NeXT Cube発売
現在のMacの原型
Windows95
1995発売
頑張ってDOSをGUI対応
AltoのSmalltalkのメニュー
Lisaのメニュー
パイメニュー
T-Cube
フリック入力
Smalltalkのスクロールバー
スクロールバーにマウス移動で矢印表示
スクロールの方向や操作を指示
スクロールバーの矢印
Lisaのスクロールバー
改良版スクロールバー
Lisaの画面
Macintosh System 4.2 (Finder version 6)
NeXTStep
GUIの進化まとめ
メニューやスクロールバーの発明から30年
微妙に機能が異なるものが登場
微妙に使いやすく進化
バージョン管理システムの進化
SCCS (1972)
RCS (1980)
CVS (1986)
Subversion (2000)
git (2005)
ビルドシステムの進化
Make (1977)
Rake
ant
sbt
各種IDE
インタフェースビルダ (1986)
NeXTstep
GUIオブジェクトを対話的に編集
Xcode
Eclipse
開発システムの進化まとめ
Makeの開発から35年
IDEの出現から25年
20年前から大きく変わっているとはいえない
何故進化が遅い?
慣れに支配されている
新しいものに適応できない
「直観的」とは
慣れているものを直感的と感じがち
e.g. ペン操作, プルダウンメニュー, ...
慣れによって上手く使えるようになった
セブンカフェ by 佐藤可士和
デザインの敗北
デザインの敗北
新しいものの普及は難しい
ほとんどの人はすごく保守的
現状への適応を変えたくない
POBoxの成功理由
トップダウンで指示
エバンジェリストの存在
従来インタフェースとの差異を最小に
ジョブズの洗脳術
なんとなく新しいものが良いものだと思わせる
実際は悪くなっていても
オシャレな気分にさせる
計算機やプログラミングの進化のまとめ
20年進化してないorz
全然違うものも考えるべき?
古い知恵も役にたつかも!?
パーソナルコンピューティングの変化
マイコン時代 (1970年代)
パソコンCLI時代 (1980年代)
パソコンGUI時代 (1990年〜)
IoT時代 (2015〜?)
マイコン時代 (1970年代)
マイコン回路
スイッチ, センサ, LED
パソコンCLI時代 (1980年代)
CP-M
MS-DOS
Unix shell
パソコンGUI時代 (1990年〜)
MacOS
Windows
Unix+GUI
X11
NeXTStep
IoT時代 (2015〜)
マイコンボード
スイッチ, センサ, LED
(パソコンGUI, タブレット)
IoT時代 = Maker時代
コンピュータはインビジブル
マイコン/センサを使い放題
あらゆるものがネット接続
誰もがいろんなものを作る
IoT/Maker時代
必要なものは大体ある
ネット, サーバ, マイコン, センサ, ...
ユーザが何でも作れる
3Dプリンタ, レーザーカッター, ...
「ハルロック」
電子工作漫画 @ 週刊モーニング
メイカーズ進化論 by 小笠原
DMM.make @ 秋葉原
ビデオ: DMM.make
TechShop
各種の工作機器を備えた会員制オープンアクセス型DIY工房
富士通が2016春オープン
Maker機械の例
レーザーカッター
3Dプリンタ
切削マシン
光造形マシン
Phidgets
USB接続のセンサ
Arduino
USB/Serial + AVR
Processing環境でプログラミング可能
Arduino Micro
Arduino + Bluetooth
Raspberry Pi
ARM搭載ワンボードマイコン
Linuxパソコンとして使える
Intel Galileo
Linux + Arduino
Intel Edison
BLE Nano
BlueNinja
まとめ
そもそもから新しく発想しよう
IoTやWebをうまく活用しよう
ドッグフーディングで改良しよう