東大講義2021
IoT時代のユーザインタフェースデザイン
2021/5/26
増井俊之
慶應義塾大学 環境情報学部
Helpfeel広告動画
自己紹介
シャープ、ソニー、産総研などに勤務
ケータイの予測変換(POBox)などを開発
2008まで米国Appleに勤務
フリック入力を開発
ユーザインタフェースの研究開発
各種Webサービス運用中
Gyazo, Scrapbox, Helpfeel, ...
仕事風景 @ Apple
スマホに満足してますか? - ユーザインタフェースの心理学
煽り
Software Design誌
ブログなど
概要
各種Webサービス紹介
PoorMan's Ubicomp
ジョブズに騙されてる??
日米ユビキタス研究事情
増井のWebサービス
様々なサービスを個人的に運用
実用性を最重視
研究に活用
アイデアを思いつくたびにドメイン取得
沢山とると安くなるらしい
増井のWebサービス
コミュニケーション/情報共有
本棚.org, QuickML, Scrapbox, Gyamm
認証
EpisoPass, なぞなぞ認証, なぞなぞ伏字, なぞなぞ情報公開
Webを便利ツールに活用
Gyazo, GoQuick, GyaTV, Gyaki
入力, 検索
Gyaim, Chaim, Slime, AkimboFinder, PhotoBrowser, Lexierra, LensBar, SnapScroll, Gear, Helpfeel
Webサービスの良いところ
便利に使える
どこでも使える
インストール不要
実運用でのユーザテスト
情報一元化
Webサービスの良いところ
集合知
情報共有
全世界の情報
既存サービスとマッシュアップ
Webサービスの大変なところ
競争相手が多い
論文にしにくい
SPAM/荒らし対策
メンテナンス
最近のWebサービス開発
✖ 自前サーバ
✖ レンタルサーバ
GitHub + heroku
Twelve-factor App
最近のWebサービス開発のオキテ
Webサービスの良いところ
流行れば大儲け!?
事例: 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)
資金ゲット! (2014/11)
Scrapbox
インタラクティブに使えるWiki
Helpfeel
タクシー広告動画
SFCHelp
コロナ情報
各方面で利用されてほしい
シリーズB調達 (2021/3)
ITスタートアップの真実
古い大会社
安定している
働いて楽しいか?
新しい会社
信用できるか?
起業した方がいいかも??
起業の要件
良いアイデア
良い人間
良い人間関係
金
資金
最近は簡単に資金ゲットできる??
Venture Capital (VC)
インキュベータ
Angel
クラウドファンディング
WebサービスとUbicomp
目標は似たようなもの
どこでも / 誰でも / いつでも
近々融合するはず
増井のサービスの特徴
ユーザ登録なし
パスワードなし
単純で有用なものを目指す
Web上で書籍情報共有
簡単なデータマイニング
メーリングリストの自動作成
xxxx@quickml.com にメールを出すと自動的にMLを作成
Wikiとメーリングリストの融合
画像を楽々アップロード
IvySearch
Gyazoの超検索
EpisoPass
増井のパスワード
ネット上のブックマーク (c.f. TinyURL, Bit.ly)
簡単なURLから長いURLに飛べる
テレビのように眺める
「眺めるインタフェース」
ブラウザ上での文字/絵文字入力
GMailで利用
ブラウザ上でのズーミングインタフェース
JSで実装したズーミングシステム
Gyazoブラウザ
SmoothSnap
近傍の情報をたどって目的の情報に接近
日付、内容、置き場所の近いデータを近くに表示
近傍関係の例
Gear
2個のスイッチだけで階層情報を探索
Demo: Serencast
ブラウザ上で楽々メモ書き
Gyazoとの連携
各種IMEで利用
Slime: Android版IME
iPhone版
Gyaim
Mac用IME (Ruby)
Chaim
ChromeBook用IME (JavaScript)
Helpfeel
Generate+Filter
Helpfeel動画
メルカリヘルプ
ヘルプデータ on Scrapbox
Scrapboxで写真管理
/masui-photos
メールをWebページとして保存
ブックマーク、リンクなどが利用できるようになる
簡単お絵描き
Gyazoと併用
WebサービスからUbicompへ
Ubicomp研究会
最近の計算機状況
世界中の人や物がネットワークで常時接続
革命的変化が進行中
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
NFCを使った実世界コピペ
AndroidのNFCリーダを利用
カード認識 + ひねり操作
ビデオ: 実世界コピペ
GoldFish
Android用実世界GUIフレームワーク
NFCを読む⇒ブラウザ開く⇒JSが走る⇒センサ利用
動作をJavaScriptのみで記述
プログラムはWeb上
簡単に修正可能
GoldFishのアーキテクチャ
GoldFishクライアント
センサ+表示
GoldFishサーバ
JavaScriptプログラム
URLリダイレクト
GoldFishクライアント
NFCインテントによる自動起動
サーバに登録したURLのページを表示
ダウンロードしたJavaScriptでセンサを利用
GoldFishサーバ
TinyURL, Bit.ly的な動作
実行例1: マニュアルの表示
実行例2: 時計の表示
実行例3: 回転インタフェース
デモ: 回転インタフェース
実世界コピペ
Goldfish応用例
汎用に利用可能
家電の制御
机の上から音量調節
Wifi or 赤外線
家電のコントロールパネル
ドア認証
文書の上に置いて文書編集
柵に置いてフォトフレーム
柵に置いて時計
どこでも掲示板
サイネージ連携
全世界プログラミング
あちこちのセンサやアクチュエータを利用したプログラムを誰でも簡単に書ける!
全世界の情報を利用
江ノ島の波, 為替レート, ...
全世界の機械を制御
自宅の照明
全世界の人間が作成
ホビープログラマ, メディアアーティスト, ...
全世界プログラミングのすすめ
昔はBASICの日曜プログラミングが流行っていた
最近はプログラミングが流行っていない
ハードルが高い
値段が高い
日曜プログラミングの復活!
e.g. Processingシステム
安価なハードウェア
Arduino
ワンボードマイコン
Raspberry Pi
パソコン並の機能
M5Stack
ジョブズに騙されてる?
スマホはそれほど良いものか?
スマホに満足してていいのか?
スマホの何が駄目?
アプリが複雑
操作が複雑
手が器用でなければだめ
細心の注意が必要
概念が難しい
同期って?
スマホの問題
キーボードが無いからテキスト入力が遅い
ペンが使えないから細かな絵が描けない
電話しながらメモとりできない
iPhoneの問題点
デフォルトアプリを消せない
自前IMEを使えない
戻るボタンが無い
NFCが使えない
地図アプリが腐ってる
プログラムを自由に作って配れない
特殊なコネクタが必要
ウィジェットが使えない
充電スタンドが無い
Macでしか開発できない
アプリ連携ができない
データ転送にiTunesが必要
内部データを自由にコピーできない
SIMロックフリー版が高い
SDカードが使えない
Objective-Cでしか開発できない
妙に複雑なものが珍重されることがある
TeX
git
かな漢字変換
vi
fml
fml
メーリングリスト管理システム
500ページの大著
実は簡単な解があることもある
予測入力
QuickML
Gyazo
Dynamic Macro
Dynamic Macro
コロンブス指数
= システムのインパクト ÷ システムの複雑さ
大きいほど良い
もしコロンブスが論文を書いたら
泥酔指数
泥酔してても使えるかどうか
使いやすさの評価に使う
未来の常識を発明したい
現在の常識は昔の誰かが発明したもの
発明された常識の例
ジャズトリオ
バドパウエルとその周辺の発明
言文一致体の小説
二葉亭四迷らの工夫
スマホと知的生産活動
受動的活動専用?
スマホの用途
ゲーム
ニュース
SNS
メール
音楽
動画
読書
クリエイティブな活動
アイデア出し
デッサン
プログラミング
回路設計
著作
作曲
計算機界の現状
計算機の使われかたが大きく変化
計算機のユーザも変化
計算機システムは進化していない
将来方向
ユビキタス
ユニバーサル
ユーザ指向
ユーザの変化
昔: 少数の専門家が使っていた
現在: 普通の人が使っている
将来: あらゆる人間が使うようになる
「弱者」の割合が大きい
補助的な使われ方
メガネ、予測入力、etc.
現状の計算機
専門家向けシステムを無理して利用
30年以上前のGUIがまだ生きている
メニュー、スクロールバー、etc.
誰でも使えるようになっていない
どこでも使えるようになっていない
練習が必要
現状の計算機
絵を見たいだけの人に画材を買わせている
やりたいことと操作が一致しない
映画を見るには?
要らないファイルを消すには?
デジカメ写真を捜すには?
「リモコン」
リモートに機器を操作するもの
機器の意識が必要
やりたいことと操作が全然違う
やりたい場所機器の位置が違う
スマホ
知的生産活動に使えない
馬鹿のための時間つぶしツール
パチンコと同類
やりたいことがすぐできない
従来のGUIの延長
苦労してシンプルに見せている
実際はシンプルでない
e.g. 「ヒストリエ」を読みたい
どこで買ったか思い出す
Kindleアプリを捜す
データを捜す
e.g. 「スーパーカブ」を見たい
動画を見る方法を思い出す
動画アプリを起動
動画ファイルを捜す
e.g. PDA的利用
メモ書きできない
お絵書きできない
写真はとれるのだが
スマホは受動的な人向けになっている
知的生産に使えない
2極分離するとどうか?
受動的な人向け
知的活動向け
知的生産ツールになってない
計算機の進化
計算機やプログラミングの進化
20年進化してない?
小さく/速く/安くはなったが
全然違うものも考えるべきでは?
# 古い知恵も役にたつかも?
生物進化の系統樹
カンブリア爆発
様々な生物「門」が一気に発生
カンブリア爆発
機械の進化
多数の絶滅を経由して現在に到る
昔の計算機
最近の計算機
Cray-1 (1976)
スーパーコンピュータの草分け
最近のスマホより遅い
VAX11 (1976)
DECの「ミニコン」
1MIPS
ちなみにIntel Core i7は15万MIPS
Apple II (1977)
ビットマップ表示可能なパソコン
高校クラブで作った計算機 (1976)
インテル8008使用
8008マイコン
紙テープリーダ
NeXTstation (1990)
1990ごろのの増井の開発環境
NeXTStation
ビットマップディスプレイ+マウス
NeXTstep
BSD Unix + GUI
Interface Builder
Objective-C
PostScript描画
GUIの歴史
Altoが最初のもの (1973)
Xerox PARC (Palo Alto Research Center)で発明
XEROX PARC
Alto (1973)
PARCで開発
GUIワークステーションのさきがけ
ビットマップディスプレイ
マウス/ウィンドウ/メニュー
Xerox Star
1981発売
Ethernet
TCP/IPではない
JStar
1982発売
日本語対応
Sketchpad (1963)
Ivan Sutherlandのシステム
Douglas Engelbart
マウスの発明者
伝説のデモ (1968)
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 佐藤可士和
デザインの敗北
デザインの敗北
新しいものの普及は難しい
ほとんどの人はすごく保守的
現状への適応を変えたくない
ケータイ入力システムの成功理由
トップダウンで指示
エバンジェリストの存在
従来インタフェースとの差異を最小に
ジョブズの洗脳術
なんとなく新しいものが良いものだと思わせる
実際は悪くなっていても
オシャレな気分にさせる
計算機やプログラミングの進化のまとめ
20年進化してないorz
全然違うものも考えるべき?
古い知恵も役にたつかも!?
Web時代の研究
インタフェースの研究
Webでのおかげで便利になった
論文を書く意味が激しく減少中
Webでの研究成果発表
即時公開
フィードバックも即時
インストール不要
テストが可能
リアルユーザ
学会の問題点
発表に時間がかかる!
2019/8 何かを開発♪
2019-2020 評価実験 orz
2020/9 論文投稿
2020/12 論文採録♪
2021/5 発表
発表した頃にはどうでもよくなっている
学会の意義
権威授与機関
別の権威があれば不要になるかも
卒業したり学位を取ったらやめてしまう人も
企業の人間が続々退会している
査読の意義
評価がやたら重視されるようになってきた
面白い論文がどんどん落ちる
減点法
みんなの意見が反映されない
Web時代の学会のようなものが必要だと思う
システム発表の今後
面白いものをみつける
面白いものを実装する
問題があれば誰かがみつける
オープンソース開発的論文執筆がいいかも
SNS的論文発表
例: 本棚.org
書籍情報共有
評価なども共有
IoTの時代
ユーザや環境の変化
大昔
専門家の計算
昔
オタクのオモチャ = 昔のパソコン
現在
一般人の生活支援 = パソコン/スマホ
将来
IoTの時代!
IoTとは?
1999年に提唱
by Kevin Ashton (P&G)
2010ごろから日本でも話題に
初期の定義
物流用語
物と物の通信
現在の定義
ユビキタスコンピューティング
実世界コンピューティング
全世界コンピューティング
インターネット無しも可?
e.g. Bluetoothによるローカル通信
実世界コンピューティング
あらゆるものを計算機やネットに接続
計算機と実世界が融合
Tangible Bits
Augmented Reality
全世界コンピューティング
世界中のものが相互接続
センサ/アクチュエータ/計算機
人類史上初!
IoTは流行るのか?
YES!!
70年台後半、マイコンなんて好き者のお遊びでしょ。
80年台前半、UNIXなんて好き者のお遊びでしょ。
80年台後半、インターネット(JUNET)なんて好き者のお遊びでしょ。
90年台前半、オブジェクト指向なんて好き者のお遊びでしょ。
90年台後半、セキュリティなんて好き者のお遊びでしょ。
00年台前半、LINUXなんて好き者のお遊びでしょ。
00年台後半、GPGPUなんて好き者のお遊びでしょ。
10年台前半、AndroidやRasPiなんて好き者のお遊びでしょ。
10年台後半、IoTなんて好き者のお遊びでしょ。
IoTのキラーアプリ
現状では不明
存在するか不明
cf. 1995年のインターネット状況
Google?
Facebook?
インターネットの歴史
最初は混沌
一部の人間が熱狂
徐々に人類全体に普及
誰もが使うようになって本当に面白くなった
IoTの歴史?
用途はじっくり考える
広く普及すれば思わぬ応用が出現
柔軟に対応すべき
そもそもの話
そもそも何のために技術を使うのか?
人は何をやりたいのか?
面白い話を聞きたい
美味しいものを食べたい
綺麗なものを見たい
いい気持ちになりたい
...
人は何をやりたいのか?
面白い話を聞きたい
美味しいものを食べたい
綺麗なものを見たい
いい気持ちになりたい
...
江戸時代から変わらないのでは??
人は何をやりたいのか?
面白い話を聞きたい
美味しいものを食べたい
綺麗なものを見たい
いい気持ちになりたい
...
縄文時代から変わらないのかも??
江戸の長屋
我慢して住めるか?
長屋コンピューティング
Wifi完備
障子がスクリーン
神棚にサーバ
あちこちのセンサでKB入力
自動冷暖房
電子書籍
コンビニで冷蔵庫不要
良いレストランがいくらでも
近所にスーパー銭湯
長屋コンピューティングに必要なもの
高速無線ネットワーク
小型計算機
センサ/アクチュエータ
長屋コンピューティングに足りないもの
インタフェースのアイデアだけが不足
ネットや計算機をどう使うか
センサや表示装置をどう組み合わせるか
技術屋の仕事
ニーズとシーズを考えた人間中心デザイン
本当にやりたいことをスマートに実現
ボトムアップ考察
センサいろいろ
システムいろいろ
ネットワーク整備
e.g. トイレのセンサ
タンク水量
健康状態
便の量
便の色
便の化学組成
電灯on/off
電灯がきれてないか
ペーパーの残量
ノブにタッチセンサ
石鹸の残量
人感センサ
便座状況
誰かいるか
どれだけ座っているか
体重
立っている人の体重
臭い
温度
湿度
便座温度
水量
水流の速度
窓の鍵の状況
窓の状況
窓の動き (泥棒検出)
窓の外の明るさ
降雨状況
床の汚れ
置いてある本
時計
虫がわいていないか
音量 (アクティブ消音)
傾き (地震を検出)
位置 (部屋ごと移動してもわかる?)
高度
非常用ボタン
電話
カメラ
自働水道
自働流し
トップダウン考察
本当にやりたいことを考える
機嫌よく暮らしたい
それを簡単に実現する方法を考える
常識とは
増井の目標
未来の常識を発明したい!!
Quote by Alan Kay
新発明が常識になった例
ジャズトリオ
バドパウエルとその周辺の発明
新発明が常識になった例
ジャズトリオ
バドパウエルとその周辺の発明
言文一致体の小説
二葉亭四迷らの工夫
新発明が常識になった例
ジャズトリオ
バドパウエルとその周辺の発明
言文一致体の小説
二葉亭四迷らの工夫
誰かが昔発明したものが常識になっている
Steve JobsのiPhone発表
UIの常識
GUI
Alan Kayらの発明
予測入力
ケータイでの普及
謎の常識
切符
電灯のスイッチ
リモコン
鍵
手紙
ユーザインタフェースの歴史
CLI (Command Line Interface)
GUI (Graphical User Interface)
モバイル/ユビキタス = IoT
CLIの常識
1行でコマンドを記述
% ls -l
最初に命令を書く
改行キーを押すと実行
半二重 - 全二重
GUIの常識
WIMP
Window, Icon, Menu, Pointing device
コピペ
並列動作するアプリケーション
スマホの常識
スワイプ
フリック
通知
1画面
IoT時代の常識
まだよくわからない!
リモコン的常識を払拭したい
リモコンの非常識
やりたいことと操作の対応が意味不明
機器をコントロールしたいわけではない
黄色ボタンて何?
リモコンの5重苦
腕で持ち上げ
手首で操作対象に向ける
指先で操作/目視確認
起きた姿勢
メニューの目視確認
世の中の非常識をIoTで解決
住宅
街角
社会インフラ
住宅のIoT研究
住宅コンピューティング研究
TRONハウス
AwareHome
PAPI
ΞHome (くすぃーほーむ)
お茶ハウス
Lixil U²-Home
おうちハック
1990年/六本木
坂村健氏
ネットもなかった時代のもの
TRONハウス
TRONハウス
自動調味料装置
地下に移動コンテナを沢山格納するストレージがあって呼び出すことができる!
AwareHome
Georgia Techのプロジェクト
実際の家で各種の実世界インタフェースの実験
AwareHome
AwareHome
AwareHome
AwareHome
AwareHomeの成果 (Gregory Abowd)
みんな真似した
Home Depotと共同研究した
センサはあまり役にたたなかった
長年使えるソフトプラットフォームを作れなかった
キッチン
床
風呂
京都産業大学のプロジェクト
実際の家で各種の実世界インタフェースの実験
未来のキッチン
MakeupMirror
SyncTrash
なめらカーテン
既存住宅をIoT的改造
マニアの研究会
手軽なハードウェア
Phidgets
Arduino
Raspberry Pi
Edison
Phidgets
USB sensors
Arduino
USB/Serial + AVR
Arduino Micro
Arduino + Bluetooth
Raspberry Pi
ARM-based one-board Linux computer
Intel Galileo
Linux + Arduino
Intel Edison
M5Stack
家具コンピューティング
家具に既存技術を埋め込む
Goldfish
Gear
WebLinda
家具の良いところ
すでに家の中にある
追加スペース不要
家具は既にかなりのスペースを占めている
既存の家具にコンピュータを組み込み可能
テーブル
壁
天井のライト
家具調のものは受け入れられる?
ステレオ
ピアノ
昔のステレオ
ピアノ @ 手塚治虫
IoT家具の例
照明
電源がある
邪魔にならない
ベッド
健康管理
テレビ
情報端末
ポスト
物をやりとりする装置
台所、トイレ、風呂
IKEAとIoT
人感センサ
温度計
充電テーブル
人感センサ
温度計
Qi充電
スマート電球
トロードフリ
