講演: 産業技術大学院大学講演 2019/8/27
(expanded from 産業技術大学院大学講演 2019/8/27 このページは編集しないでください)
IoT時代のシンプルなインタフェース
増井 俊之
慶應義塾大学 環境情報学部
masui@masui.org
masui@pitecan.com
概要
いかにIoT時代のシンプルなインタフェースを作るか
自己紹介
システム紹介
そもそもからの発想
シンプルさをめざす
全世界コンピューティング
計算機環境の進化について
(その他のシステム紹介)
実世界コピペ
長屋生活
制約だらけだがシンプル
昔の計算機?
現在の計算機
自己紹介
シャープ、ソニー、産総研などに勤務
ケータイの予測変換(POBox)などを開発
2008まで米国Appleに勤務
フリック入力システムを開発
2009より慶應義塾大学 環境情報学部 (SFC)
ユーザインタフェースの研究開発
IoT, 検索システム, 情報視覚化
各種Webサービス運用中
Gyazo, Scrapbox, Helpfeel, EpisoPass, 本棚.org, ...
慶應SFC
藤沢市遠藤 (湘南台)
設立30年
研究開発方針
自分の欲しいものを作る
自分で使う
コロンブスの卵が好き
今すぐ使えて売れるものを作る
シンプルさを追求する
コロンブス指数
簡単で便利かどうか
コロンブス指数 = 有用さ / 複雑さ
コロンブス日和
「楽するためならどんな苦労でもする!」
技術評論社 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
Chaim: ChromeOS用IME
予測インタフェースの例
Dynamic Macro
Demo: Dynamic Macro
超簡単な画像アップロードサービス
デモ: 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
Scrapbox
Gyazoとともに進化中
Scrapboxの特徴
WYSIWYGなWiki
複数ユーザ同時編集
Gyazo画像の活用
ページ代表画像の利用
ページとタグの区別が無い
階層構造なし
双方向リンク
アウトライン編集
コード記法, コードブロック記法
柔軟で簡単なScrapbox記法
強力な文字装飾記法
Notaでの使い方
増井研
読書
写真
音楽
DB
Scrapboxの歴史
Wikiをずっと使いながら改良していた
長年のドッグフーディングの成果
PalmWiki
勉強Wiki
2-hop linkの重要性を認識
Wiki掲示板
Gyazz
Scrapbox
ドッグフーディングによる知見を集めて商品化
ドッグフーディング
Steve JobsはiPhoneを使う
松下幸之助は松下製品を使う
ドッグフーディングによるScrapboxの改善
Ken Kocienda本
iPhoneの英語キーボード開発秘話が面白い
Helpfeel
Scrapboxのデータをもとに作るヘルプシステム
Demo: Helpfeel
/SFCHelp
Gear
2個のスイッチだけで階層コンテンツナビゲーション
Demo: Gear
実世界に様々なセンサを埋め込んで利用
デモ: Serencast
dshelf: 書籍の芋蔓検索
デモ: dshelf
Pivotty: 映画の芋蔓検索
デモ: Pivotty
そもそもからの発想
そもそもの要望を解決するべき
現状の機器などの制約を忘れる
何が問題か?
無駄なモノ/不便なものが多すぎる
なのにそれに疑問を感じない
不便なもの
思考が必要
マッピングとか計算とか
e.g. リモコンの色キー, 駄目な自動ドア
計算
e.g. レジ
抽象的指向
e.g. ビデオ録画
連文節変換
可逆的でない
試行錯誤できないもの
e.g. 閉じるボタン
そもそも思考の成功例
自動ドア
Suica
それでも普及は大変だった
予測変換
あたりまえすぎて気付かないものがあるかも
そもそもの問題発見-解決
要素技術からの発想は困難
メモリ、RFID、etc.
やりたいことがあれば、新しいデバイスを見たとき何か思いつくはず
不便に気付いても良いものを発明するのは難しいが
あるものを減らすのは難しい
ゼロから考える
無いものに気づくのは難しい
わざと引算計算してみる
友達の持ってる本 - 自分が持ってる本 = 自分が欲しいかもしれない本
発想技術
ずっとバックグラウンドで考え続けておく
寝てるときに思いつくことも
制約のある環境を考える
クギ13本問題
長めのクギを13本用意
1本を机に打ち込む
残りの12本をその上に乗せる
長屋コンピューティング
制約だらけ
我慢して住めるか?
これなら満足?
Wifi完備
障子がスクリーン
神棚にサーバ
あちこちのセンサでKB入力
自動冷暖房
電子書籍
コンビニで冷蔵庫不要
良いレストランがいくらでも
近所にスーパー銭湯
制約的状況
手が使えない状況
目が見えない状況
泥酔状況
泥酔対応音楽プレーヤ
計算機ユーザの変化
昔: 少数の専門家が利用
現在: 普通の人が利用
将来: あらゆる人間が使うようになる
「弱者」がほとんど
補助的な使われ方
メガネ、予測入力、etc.
現状の計算機
専門家向けシステムを延命して利用
30年以上前のGUI
メニュー、スクロールバー、etc.
誰でも使えるようになっていない
どこでも使えるようになっていない
練習が必要
現状の計算機
絵を見たい人に絵の具を買わせている
運転できないと電車に乗れない
要望と操作の不一致
映画を見るには?
写真を捜すには?
要らない情報を消すには?
リモコン問題
リモコンの問題点
ボタンが多くて機能がわからない
紛失しやすい
邪魔
リモコンの本質的な問題点
操作対象ややりたいことと関係ない方向を向けなければならない
直感からほど遠い
FireStick TV
最近の改善されたリモコン
TVのHTMIに接続する小型マシン
このリモコンでTV電源や音量も制御できる
HDMI CEC規格
テレビに向ける必要がない
Bluetoothなので
検索ができないといった点は昔と同じ
そもそも何が問題?
リモートに機器をコントロール
発想が根本的に間違い
機器の意識が必要
やりたいことと操作が違う
やりたい場所と機器の位置が違う
リモコンのボタンを減らす
絶対減らない
ゼロから考え直す必要がある
スマホを使う?
ジョブズに騙されているだけ
スマホは特に便利なものではない
リモコンの親玉のようなもの
堀江
例: 日本語入力
かな漢字変換が主流だった
現在は予測変換が主流
連文節変換の問題点 (1)
正確な入力が必要
間違いが許されない
正確に打てない人には使えない
IoT時代に向いていない
連文節変換の問題点 (2)
読みが長くても全部入力必要
「品川駅まで」の入力に「shinagawaekimade」とか
予測式なら「shinag」「mad」で充分
高速に正確に入力できる環境や人は稀
手指が器用な熟練者が座っているときだけ
モバイル/ユビキタス環境ではほぼ無理
連文節変換の問題点 (3)
本質的に誤り訂正が必要
「きょうはいしゃにいった」は正しく変換することは不可能
歯医者? 医者?
訂正用の余計なキー操作
文節選択, etc.
曖昧入力をやりにくい
連文節変換の問題点 (4)
単語登録などカスタマイズが面倒
他のシステムと辞書を共有しにくい
連文節変換の問題点 (5)
他国語と併用できない
大阪弁辞書は使えるか?
連文節変換の問題点のまとめ
間違いが許されない
必要な操作が多い
訂正が必須
カスタマイズが難しい
日本語の標準語でしか使えない
⇒ 良い点がほとんど存在しない!!??
単純な予測変換/検索アルゴリズム
Chaimの変換アルゴリズム
20行しかない!
Chaimデモ
例: フリック入力
Slime
アルゴリズムはChaimと同じもの
全世界コンピューティング
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充電
計算機やプログラミングの進化
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ワークステーションのさきがけ
ビットマップディスプレイ
マウス/ウィンドウ/メニュー
Xerox Star
1981発売
Sketchpad (1963)
Ivan Sutherlandのシステム
Douglas Engelbart
マウスの発明者
伝説のデモ (1968)
「Engelbart氏と話したその穏やかな夏の夜、パーソナルコンピュータの出現そのものが、彼のパーソナルコンピュータシステムについての研究を終わらせてしまい、彼がそれ以降何十年も資金を得られていないことを聞いた。」
「私はショックを受けた。その独創性に富んだ研究は偉大で重要なものであり、数時間前にはXeroxのパロアルト研究所で非常に高く評価されていたにも関わらず、その研究によって彼自身が追放されてしまい、何十年も資金のない状態だったなどと信じられるだろうか？ 」
「現在のコンピュータシステムは、基本的に1960年代、70年代にあったタイムシェアリング型のメインフレームと同じものだ。巨大な集中型のコンピュータシステム（サーバファーム）に個人用のワークステーションをつなぎ、互いに通信し、表計算ソフトやワープロやアプリを実行している。 」
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
M5Stack
320 x 240 TFTカラーディスプレイ
microSDカードスロット
スピーカ
WiFi
Bluetooth
バッテリ
USB-C
M5Stack
M5Stack
M5Stick
小型のM5Stack
その他のシステム
EpisoPass
SmoothSnap
LensBar
本棚
GyaTV
エピソード記憶からパスワード生成
ブラウザ上でのズーミングインタフェース
JSで実装したズーミングシステム
SmoothSnap
Web上で書籍情報共有
簡単なデータマイニング
メーリングリストの自動作成
xxxx@quickml.com にメールを出すと自動的にMLを作成
Wikiとメーリングリストの融合
まとめ
そもそもから新しく発想しよう
IoTやWebをうまく活用しよう
ドッグフーディングで改良しよう