東大講義2021

IoT時代のユーザインタフェースデザイン

2021/5/26

増井俊之

慶應義塾大学 環境情報学部

Helpfeel広告動画

自己紹介

シャープ、ソニー、産総研などに勤務

ケータイの予測変換(POBox)などを開発

2008まで米国Appleに勤務

フリック入力を開発

ユーザインタフェースの研究開発

各種Webサービス運用中

Gyazo, Scrapbox, Helpfeel, ...

仕事風景 @ Apple

http://gyazo.com/27357dbdc55a68142baee8c5d29ef075.png

スマホに満足してますか? - ユーザインタフェースの心理学

http://gyazo.com/64c56d9c3e67745e95bc038487d09c98.png http://www.pitecan.com/sumaho/

煽り

http://gyazo.com/bf3bc7510fdb74c8db4bb058fd3ed6d6.png

Software Design誌

http://gyazo.com/807873e8e41db04289c5a6e5bdae6262.jpg http://gihyo.jp/dev/serial/01/masui-columbus

ブログなど

https://gyazo.com/5b221e2f5c46c5f8afc244357ab71eb5

https://gyazo.com/0de9c65c33099c81a3c8c1d0ab68f775

概要

各種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サービス開発のオキテ

https://gyazo.com/3c4c514d780d3c35674cb460e34c4aa7 https://12factor.net/ja/

Webサービスの良いところ

流行れば大儲け!?

事例: Gyazo

https://gyazo.com/2aac78cd0762da3f291b0084ac16b07a

Gyazo (2010/7)

http://gyazo.com/765bc52757dc9b5ce5a613aee9a1c771.png

Gyazo (2012/1)

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

Gyazo (2014/1)

http://gyazo.com/0780f93a7992fdeca48cdda7a5ca6dcf.png

Gyazo (2015/1)

http://gyazo.com/bde4e61c85ebeeb357e1705b2a0a9fb3.png

http://gyazo.com/426f5616b89d741d5edca122e4f68b26.png

http://gyazo.com/73548f7c10a1148e4ac475945c66f947.png

http://gyazo.com/79ac11a0cb228c7f817109000906f4e1.png

http://gyazo.com/cecd0d5b1e47514518cd97f627b88d2e.png

http://gyazo.com/609db17ad3929ea27b0bf81edb899a06.png

http://gyazo.com/c49dfb0cb4926fd0365e4c590c04b562.png

https://gyazo.com/f72e7e8260c791fa7b481d167423322c.png

Alexa info (2017/5/8)

https://gyazo.com/2595e48e8346b423d6e6c1d23daf10f4

http://www.nikkei.com/article/DGXLASDZ10HNN_Q4A111C1TJ2000/ http://gyazo.com/eaaef923b1d2a9db2f3228186772a2a6.png

Scrapbox

インタラクティブに使えるWiki

https://gyazo.com/b740f44d6d5bfbeceafbe92f46450abb

Helpfeel

http://helpfeel.com/ https://gyazo.com/6dd23b78efc5dcca777cc000ea6fb479

タクシー広告動画

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

SFCHelp

https://scrapbox.io/SFCHelp/ https://gyazo.com/8cba7d42f4308ff0dcb7eaaa05accf1e

コロナ情報

https://gyazo.com/4d3cca9459590178b70ecac737f644b2 https://helpfeel.com/covid-19/

各方面で利用されてほしい

シリーズB調達 (2021/3)

https://gyazo.com/9bda0edc1c3bcc51ccab29b2f5fca6ca

ITスタートアップの真実

古い大会社

安定している

働いて楽しいか?

新しい会社

信用できるか?

起業した方がいいかも??

起業の要件

良いアイデア

良い人間

良い人間関係

金

資金

最近は簡単に資金ゲットできる??

Venture Capital (VC)

インキュベータ

Angel

クラウドファンディング

WebサービスとUbicomp

目標は似たようなもの

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

近々融合するはず

増井のサービスの特徴

ユーザ登録なし

パスワードなし

単純で有用なものを目指す

Web上で書籍情報共有

http://gyazo.com/4401b49e940bb988040ec683a225ef3e.png

簡単なデータマイニング

http://gyazo.com/62e317d89ba82ed207ebb0d4ec20f736.png

メーリングリストの自動作成

xxxx@quickml.com にメールを出すと自動的にMLを作成

http://gyazo.com/e71103f85b2dbf02762dfc91f56bbd29.png

画像を楽々アップロード

http://gyazo.com/0d662e3dc317ab725ab4f4265adabaf3.png

http://gyazo.com/509662adc4bde2ac0b3213b8a61f3691.png

http://gyazo.com/fc9b68905d52d55487f0ed519f689acf.png

IvySearch

https://www.youtube.com/watch?v=2ZK7yJQqato

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

Gyazoの超検索

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

http://EpisoPass.com http://gyazo.com/795316ca9f1305f4e41c5f095a0197e0.png

EpisoPass

https://gyazo.com/d703a1d7fa33182d850eb8a6ad5bd292.gif

増井のパスワード

ネット上のブックマーク (c.f. TinyURL, Bit.ly)

簡単なURLから長いURLに飛べる

https://gyazo.com/616cd964517fd429b60509dcde187dfc

https://gyazo.com/bef1b053e2fb81d253019a79bb4fd9dc

テレビのように眺める

「眺めるインタフェース」

https://gyazo.com/49d4b0f738cf6325e86807c978ab36d3 http://GyaTV.com

ブラウザ上での文字/絵文字入力

http://lexierra.com/gyazo.html http://gyazo.com/ac2ea7f1cf702c1e48fffc9c41aa54e2.png

ブラウザ上でのズーミングインタフェース

http://pitecan.com/ASLensBar.save/ http://gyazo.com/edd529a2c5c23e8934e497054b3553e9.png

JSで実装したズーミングシステム

Gyazoブラウザ

https://gyazo.com/f6726bbb971cd47605c1166e6080aefa

SmoothSnap

近傍の情報をたどって目的の情報に接近

日付、内容、置き場所の近いデータを近くに表示

http://gyazo.com/49ff2980552894951bb1a1e0e12368a7.png

近傍関係の例

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

https://gyazo.com/e66f01835439d4c985500b5708d93e70.png

Gear

2個のスイッチだけで階層情報を探索

http://gyazo.com/c86a94d67f14e578d08ffbd9efb0dba6.png

Demo: Serencast

ブラウザ上で楽々メモ書き

Gyazoとの連携

http://gyazz.com/UIPedia/Marti+Hearst http://gyazo.com/cef54537dac629d885ed26c0fffd921f.png

https://gyazo.com/793344fa2083c76a7bea255b54a5624c

各種IMEで利用

Slime: Android版IME

http://gyazo.com/87443a9b8a52f4d8770e2db1262e8a41.png

iPhone版

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

Gyaim

Mac用IME (Ruby)

https://gyazo.com/648245adc6252b716db7af9f7b2022ab.gif

Chaim

ChromeBook用IME (JavaScript)

Helpfeel

Generate+Filter

Helpfeel動画

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

メルカリヘルプ

https://helpfeel.notainc.com/MercariGuide/ https://gyazo.com/e718091a2590e82dd4daa57558366a17

Scrapboxで写真管理

https://gyazo.com/6da8416c87d7795b15ba2b764e29dfb5

メールをWebページとして保存

ブックマーク、リンクなどが利用できるようになる

簡単お絵描き

Gyazoと併用

WebサービスからUbicompへ

Ubicomp研究会

最近の計算機状況

世界中の人や物がネットワークで常時接続

革命的変化が進行中

Ubicompのチャレンジ

Webサービスとの融合

ハードの敷居

ソフトの敷居

富豪的UbiComp

特殊なセンサを沢山利用

ディスプレイを沢山利用

特殊な計算機環境を利用

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

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

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

× HMD

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

◯ スマホのセンサ

PMUCの要件

インフラ

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

情報検索技術

入出力デバイス

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

PMUCの要件

インフラ

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

情報検索技術

入出力デバイス

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

全部ある!

直感的でない操作

電灯のon/off

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

DVD観賞

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

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

ビデオ録画

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

ウィンドウの開閉

直感的なCDプレーヤ

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

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

直感的なデータ転送

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

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

http://gyazo.com/3982e892796a6c7b140b2601e751de50.jpg

http://gyazo.com/f3e59ee8d9285932cc8b9e43b5f0652f.jpg

理想のユビキタス環境

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

「Invisible Computer」

PMUC用入力デバイス

安くてロバスト

誰でも使える

なじみのある操作体系

装置の制約

単純な操作

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

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

小さな画面

実世界GUI

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

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

FieldMouse

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

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

http://gyazo.com/73bb7ceed3106ba563c784a232fbf107.jpg

http://gyazo.com/4f9a8573e720ba8c0f9b18c5d2e7ce45.jpg

FieldMouseを使った実世界GUI

http://gyazo.com/b628468ad1775361aee7ff346b89bfa4.gif

Video: FieldMouse

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

MouseField

手軽に誰もがどこでも使える実世界I/Fデバイス

風呂でネット音楽を聞く

台所でレシピを調べる

街角で情報を検索する

電車内で情報を共有する

...

MouseField

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

http://gyazo.com/d94214a01ebbac15c5714e13893e3f22.png

MouseFieldの使用方法

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

http://gyazo.com/d8cd79ca279c4540b32c5ac25287f4ba.png

書斎のMouseField

http://gyazo.com/3080e50da8a8b4003b7cabaa8322b84d.jpg

テーブル型MouseField

http://gyazo.com/d5f0a9bb2f393f2431b02d61313b46ef.jpg

PlayStand++

http://gyazo.com/61877d576aaa9751e4305da10f2db921.png

PlayStand++の操作

ビデオ: MouseField

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

NFCを使った実世界コピペ

AndroidのNFCリーダを利用

カード認識 + ひねり操作

ビデオ: 実世界コピペ

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

GoldFish

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

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

動作をJavaScriptのみで記述

プログラムはWeb上

簡単に修正可能

GoldFishのアーキテクチャ

GoldFishクライアント

センサ+表示

GoldFishサーバ

JavaScriptプログラム

URLリダイレクト

GoldFishクライアント

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

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

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

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

GoldFishサーバ

TinyURL, Bit.ly的な動作

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

http://gyazo.com/a2dcd1bfa983b4c8b81e406085e59c47.png

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 赤外線

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

ドア認証

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

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

柵に置いて時計

どこでも掲示板

サイネージ連携

全世界プログラミング

あちこちのセンサやアクチュエータを利用したプログラムを誰でも簡単に書ける!

全世界の情報を利用

江ノ島の波, 為替レート, ...

全世界の機械を制御

自宅の照明

全世界の人間が作成

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

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

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

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

ハードルが高い

値段が高い

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

安価なハードウェア

Arduino

ワンボードマイコン

Raspberry Pi

パソコン並の機能

http://gyazo.com/37af8ff921b77cd6ad461721304f7556.png

M5Stack

https://gyazo.com/0415cb6e70a9a398c6591db3776ca3b9

ジョブズに騙されてる?

スマホはそれほど良いものか?

スマホに満足してていいのか?

スマホの何が駄目?

アプリが複雑

操作が複雑

手が器用でなければだめ

細心の注意が必要

概念が難しい

同期って?

スマホの問題

キーボードが無いからテキスト入力が遅い

ペンが使えないから細かな絵が描けない

電話しながらメモとりできない

iPhoneの問題点

デフォルトアプリを消せない

自前IMEを使えない

戻るボタンが無い

NFCが使えない

地図アプリが腐ってる

プログラムを自由に作って配れない

特殊なコネクタが必要

ウィジェットが使えない

充電スタンドが無い

Macでしか開発できない

アプリ連携ができない

データ転送にiTunesが必要

内部データを自由にコピーできない

SIMロックフリー版が高い

SDカードが使えない

Objective-Cでしか開発できない

妙に複雑なものが珍重されることがある

TeX

git

かな漢字変換

vi

fml

fml

メーリングリスト管理システム

500ページの大著

http://gyazo.com/5b35facd2331acce6ebeba498322168d.png

実は簡単な解があることもある

予測入力

QuickML

Gyazo

Dynamic Macro

Dynamic Macro

http://pitecan.com/tmp/text.html http://gyazo.com/a952b3b861d4b802ed47a219db732ce8.png

コロンブス指数

= システムのインパクト ÷ システムの複雑さ

大きいほど良い

もしコロンブスが論文を書いたら

http://gyazo.com/ff4f7a4d3304d9d40c87d9a8b0de460c.png

泥酔指数

泥酔してても使えるかどうか

使いやすさの評価に使う

未来の常識を発明したい

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

現在の常識は昔の誰かが発明したもの

発明された常識の例

ジャズトリオ

バドパウエルとその周辺の発明

言文一致体の小説

二葉亭四迷らの工夫

スマホと知的生産活動

受動的活動専用?

スマホの用途

ゲーム

ニュース

SNS

メール

音楽

動画

読書

クリエイティブな活動

アイデア出し

デッサン

プログラミング

回路設計

著作

作曲

計算機界の現状

計算機の使われかたが大きく変化

計算機のユーザも変化

計算機システムは進化していない

将来方向

ユビキタス

ユニバーサル

ユーザ指向

ユーザの変化

「弱者」の割合が大きい

補助的な使われ方

現状の計算機

専門家向けシステムを無理して利用

30年以上前のGUIがまだ生きている

メニュー、スクロールバー、etc.

誰でも使えるようになっていない

どこでも使えるようになっていない

練習が必要

現状の計算機

絵を見たいだけの人に画材を買わせている

やりたいことと操作が一致しない

映画を見るには?

要らないファイルを消すには?

デジカメ写真を捜すには?

「リモコン」

リモートに機器を操作するもの

機器の意識が必要

やりたいことと操作が全然違う

やりたい場所機器の位置が違う

スマホ

知的生産活動に使えない

馬鹿のための時間つぶしツール

パチンコと同類

やりたいことがすぐできない

従来のGUIの延長

苦労してシンプルに見せている

実際はシンプルでない

e.g. 「ヒストリエ」を読みたい

どこで買ったか思い出す

Kindleアプリを捜す

データを捜す

e.g. 「スーパーカブ」を見たい

動画を見る方法を思い出す

動画アプリを起動

動画ファイルを捜す

e.g. PDA的利用

メモ書きできない

お絵書きできない

写真はとれるのだが

スマホは受動的な人向けになっている

知的生産に使えない

2極分離するとどうか?

受動的な人向け

知的活動向け

知的生産ツールになってない

計算機の進化

計算機やプログラミングの進化

20年進化してない?

小さく/速く/安くはなったが

全然違うものも考えるべきでは?

# 古い知恵も役にたつかも?

生物進化の系統樹

http://gyazo.com/a1063ca65e4f24d057832b8d81a6dc96.png

カンブリア爆発

様々な生物「門」が一気に発生

http://gyazo.com/2098757f3e17f02a03a9a20383cf3eb1.png

カンブリア爆発

http://gyazo.com/ed28680d22f568488dd85ee8f3dec405.png

機械の進化

多数の絶滅を経由して現在に到る

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

昔の計算機

http://gyazo.com/cd47753dddd9659436b8a27c14328fe3.png

最近の計算機

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

Cray-1 (1976)

スーパーコンピュータの草分け

最近のスマホより遅い

http://gyazo.com/666f2d954f788ae6c826bf0f96d93610.png

VAX11 (1976)

DECの「ミニコン」

http://gyazo.com/d49ece19780d3f294aed99e98217bcd7.png

1MIPS

ちなみにIntel Core i7は15万MIPS

Apple II (1977)

ビットマップ表示可能なパソコン

http://gyazo.com/19acdfe09dfaf34b2015ec4c926936e8.png

高校クラブで作った計算機 (1976)

インテル8008使用

http://gyazo.com/078e8c514fec7baf6388b3bc6246423c.png

8008マイコン

http://gyazo.com/08817cf560e0b559b67dd0f7e121ec3f.png

紙テープリーダ

http://gyazo.com/3e8612d7427e1e95b93d87c0c71ae5f1.png

NeXTstation (1990)

http://gyazo.com/c1c0ca5f8bbdf83eb72b579f22435f62.png

1990ごろのの増井の開発環境

NeXTStation

ビットマップディスプレイ+マウス

NeXTstep

BSD Unix + GUI

Interface Builder

Objective-C

PostScript描画

GUIの歴史

Altoが最初のもの (1973)

Xerox PARC (Palo Alto Research Center)で発明

XEROX PARC

http://maps.google.co.jp/maps?q=Xerox+Palo+Alto+Research+Center,+Coyote+Hill+Road,+Palo+Alto,+California,+Stati+Uniti&hl=ja&ll=37.414209,-122.157841&spn=0.080989,0.105572&sll=37.401596,-122.147503&sspn=0.002548,0.003299&oq=xerox+palo+alto+research&brcurrent=3,0x0:0x0,0&hq=Xerox+Palo+Alto+Research+Center,+Coyote+Hill+Road,+Palo+Alto,+California,+Stati+Uniti&t=m&z=13 http://gyazo.com/b93fb40af13436b714e1ac3d8f26ba8a.png

Alto (1973)

PARCで開発

GUIワークステーションのさきがけ

ビットマップディスプレイ

マウス/ウィンドウ/メニュー

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

Xerox Star

1981発売

http://gyazo.com/79d6aa012b0c679da9a11b02cb3f659e.png

Ethernet

TCP/IPではない

JStar

1982発売

日本語対応

http://gyazo.com/966466ccdf1c07654c2c9574c8a0b459.png

Sketchpad (1963)

Ivan Sutherlandのシステム

https://www.youtube.com/watch?v=6orsmFndx_o

http://gyazo.com/6714df8917927390f2175cf2a8bdd44b.png

Douglas Engelbart

マウスの発明者

http://gyazo.com/29afc1729a503e8d2bcfcdc2f3a62550.png

伝説のデモ (1968)

https://www.youtube.com/watch?v=yJDv-zdhzMY

Lisa (1983)

AppleのGUIパソコン

ジョブズがAltoを見て驚いて作ったもの

http://gyazo.com/c0596d8b63d9b9b790d3bb953c5291a7.png

Macintosh (1984)

もともとJef Raskinのプロジェクトだった

ジョブズがRaskinを追い出す

http://gyazo.com/5db2d3658020a8fd6712eb783a62b988.png

NeXT Computer

1985創業 by ジョブズ

1988 NeXT Cube発売

現在のMacの原型

http://gyazo.com/66d94e93c6a0d0153f171b88692e2445.png

Windows95

1995発売

頑張ってDOSをGUI対応

http://gyazo.com/c4395fd01b713415f5b283f3414a0153.png

AltoのSmalltalkのメニュー

http://gyazo.com/b8fda3611776f5377eb47d707af57a6d.png

Lisaのメニュー

http://gyazo.com/3ca39857447ef0c22e3decfbd4e568cb.png

パイメニュー

http://gyazo.com/7402c898b7a61772e9d79ec976bc47c4.png

T-Cube

http://gyazo.com/eedbbd982f2000f08ebb30ac66425e89.png

フリック入力

http://gyazo.com/1691febad27439d3bf44232c54dcb1e8.png

Smalltalkのスクロールバー

http://gyazo.com/98ad768b8492d0af7799086c78b22923.png

スクロールバーにマウス移動で矢印表示

スクロールの方向や操作を指示

スクロールバーの矢印

http://gyazo.com/fe9c87ee5ec6277d288bb9f721ceff0b.png

Lisaのスクロールバー

改良版スクロールバー

http://gyazo.com/ddce4448cce61b764bcd460610e1ad61.png

Lisaの画面

http://gyazo.com/03d3fe5a2f2464b9b2448fb83c556ed3.png

Macintosh System 4.2 (Finder version 6)

http://gyazo.com/371dadb8dfee860bef2a1ef88d3d5b83.png

NeXTStep

http://gyazo.com/37a3e1d28c4268112b42e760de38f2af.png

GUIの進化まとめ

メニューやスクロールバーの発明から30年

微妙に機能が異なるものが登場

微妙に使いやすく進化

バージョン管理システムの進化

SCCS (1972)

RCS (1980)

CVS (1986)

Subversion (2000)

git (2005)

ビルドシステムの進化

Make (1977)

Rake

ant

sbt

各種IDE

インタフェースビルダ (1986)

NeXTstep

GUIオブジェクトを対話的に編集

Xcode

http://gyazo.com/91768f4e2dd5e628bdbb9e09c26372cc.png

Eclipse

開発システムの進化まとめ

Makeの開発から35年

IDEの出現から25年

20年前から大きく変わっているとはいえない

何故進化が遅い?

慣れに支配されている

新しいものに適応できない

「直観的」とは

慣れているものを直感的と感じがち

e.g. ペン操作, プルダウンメニュー, ...

慣れによって上手く使えるようになった

セブンカフェ by 佐藤可士和

http://gyazo.com/182a24c8bc2b1322accaabcdfc0d8437.png

デザインの敗北

http://gyazo.com/92be5ee1a15f21b8c9b557e0215fe775.png

デザインの敗北

http://gyazo.com/b81ff77125b286c600bc609fd19b1421.png

新しいものの普及は難しい

現状への適応を変えたくない

ケータイ入力システムの成功理由

トップダウンで指示

エバンジェリストの存在

従来インタフェースとの差異を最小に

ジョブズの洗脳術

なんとなく新しいものが良いものだと思わせる

実際は悪くなっていても

オシャレな気分にさせる

計算機やプログラミングの進化のまとめ

20年進化してないorz

全然違うものも考えるべき?

古い知恵も役にたつかも!?

Web時代の研究

インタフェースの研究

Webでのおかげで便利になった

論文を書く意味が激しく減少中

Webでの研究成果発表

即時公開

フィードバックも即時

インストール不要

テストが可能

リアルユーザ

学会の問題点

発表に時間がかかる!

2019/8 何かを開発♪

2019-2020 評価実験 orz

2020/9 論文投稿

2020/12 論文採録♪

2021/5 発表

発表した頃にはどうでもよくなっている

学会の意義

権威授与機関

別の権威があれば不要になるかも

卒業したり学位を取ったらやめてしまう人も

企業の人間が続々退会している

査読の意義

評価がやたら重視されるようになってきた

面白い論文がどんどん落ちる

減点法

みんなの意見が反映されない

Web時代の学会のようなものが必要だと思う

システム発表の今後

面白いものをみつける

面白いものを実装する

問題があれば誰かがみつける

オープンソース開発的論文執筆がいいかも

SNS的論文発表

書籍情報共有

評価なども共有

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の歴史?

用途はじっくり考える

広く普及すれば思わぬ応用が出現

柔軟に対応すべき

そもそもの話

人は何をやりたいのか?

面白い話を聞きたい

美味しいものを食べたい

綺麗なものを見たい

いい気持ちになりたい

...

人は何をやりたいのか?

面白い話を聞きたい

美味しいものを食べたい

綺麗なものを見たい

いい気持ちになりたい

...

江戸時代から変わらないのでは??

人は何をやりたいのか?

面白い話を聞きたい

美味しいものを食べたい

綺麗なものを見たい

いい気持ちになりたい

...

縄文時代から変わらないのかも??

江戸の長屋

我慢して住めるか?

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

長屋コンピューティング

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

Wifi完備

障子がスクリーン

神棚にサーバ

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

自動冷暖房

電子書籍

コンビニで冷蔵庫不要

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

近所にスーパー銭湯

長屋コンピューティングに必要なもの

高速無線ネットワーク

小型計算機

センサ/アクチュエータ

長屋コンピューティングに足りないもの

インタフェースのアイデアだけが不足

ネットや計算機をどう使うか

センサや表示装置をどう組み合わせるか

技術屋の仕事

ニーズとシーズを考えた人間中心デザイン

本当にやりたいことをスマートに実現

ボトムアップ考察

センサいろいろ

システムいろいろ

ネットワーク整備

e.g. トイレのセンサ

タンク水量

健康状態

便の量

便の色

便の化学組成

電灯on/off

電灯がきれてないか

ペーパーの残量

ノブにタッチセンサ

石鹸の残量

人感センサ

便座状況

誰かいるか

どれだけ座っているか

体重

立っている人の体重

臭い

温度

湿度

便座温度

水量

水流の速度

窓の鍵の状況

窓の状況

窓の動き (泥棒検出)

窓の外の明るさ

降雨状況

床の汚れ

置いてある本

時計

虫がわいていないか

音量 (アクティブ消音)

傾き (地震を検出)

位置 (部屋ごと移動してもわかる?)

高度

非常用ボタン

電話

カメラ

自働水道

自働流し

トップダウン考察

本当にやりたいことを考える

機嫌よく暮らしたい

それを簡単に実現する方法を考える

常識とは

増井の目標

未来の常識を発明したい!!

Quote by Alan Kay

https://gyazo.com/c506c061d3bbce1195a3797f76245b09.png

新発明が常識になった例

ジャズトリオ

バドパウエルとその周辺の発明

新発明が常識になった例

ジャズトリオ

バドパウエルとその周辺の発明

言文一致体の小説

二葉亭四迷らの工夫

新発明が常識になった例

ジャズトリオ

バドパウエルとその周辺の発明

言文一致体の小説

二葉亭四迷らの工夫

誰かが昔発明したものが常識になっている

Steve JobsのiPhone発表

https://www.youtube.com/watch?v=9hUIxyE2Ns8 https://gyazo.com/c2bd379e4703285492b2495cebc8881f.png

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年/六本木

坂村健氏

ネットもなかった時代のもの

https://gyazo.com/7cadad163bb89f8a8125f5420df4c244.png

TRONハウス

https://gyazo.com/88bd61e9a4e3a98f09eac60b980030d3.png

TRONハウス

https://gyazo.com/9c9ce945fbe1feaf3e4e49d568688961.png

自動調味料装置

https://gyazo.com/c1e6505e7f5412831e32c4000d2ec910

地下に移動コンテナを沢山格納するストレージがあって呼び出すことができる!

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

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

AwareHome

Georgia Techのプロジェクト

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

http://gyazo.com/ded4c3f883c28a5783813b304e8a315b.png

AwareHome

https://www.youtube.com/watch?v=70HrRnGCNWc

AwareHome

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

AwareHome

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

AwareHome

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

AwareHomeの成果 (Gregory Abowd)

みんな真似した

Home Depotと共同研究した

センサはあまり役にたたなかった

長年使えるソフトプラットフォームを作れなかった

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

https://gyazo.com/b3e7bc9ece60d5524372ddb2f318e2b0.png

キッチン

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

床

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

風呂

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

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

https://gyazo.com/e2460f2a2401a70858deac084942fe0f.png

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

https://gyazo.com/c3eadc92f8e5945ff0076c9d3faa188d.png

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

未来のキッチン

https://gyazo.com/31144a22f923a8e74b518190fa2f3346.png

MakeupMirror

https://gyazo.com/918099c634a13ee7a3fe0e70a9542d65.png

SyncTrash

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

なめらカーテン

https://gyazo.com/2dddbe835a62b9774b2b581e9efadcdb.png

既存住宅をIoT的改造

https://gyazo.com/dc24d9f631b3dce6920b9ccf356ddc6c.png

マニアの研究会

https://gyazo.com/fbdc3dac2bd6a212abc57fc9c625f0af.png

手軽なハードウェア

Phidgets

Arduino

Raspberry Pi

Edison

Phidgets

USB sensors

https://gyazo.com/fef02a278bcd20cf8af4323fb2fbff8e.png

Arduino

USB/Serial + AVR

https://gyazo.com/ba0f1f2dd89edcd0b5d9d2630fec4e04.png

Arduino Micro

https://gyazo.com/a49ee2e6b0ecb16faeaf45b9ae5d5b1d.png

Arduino + Bluetooth

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

Raspberry Pi

ARM-based one-board Linux computer

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

Intel Galileo

Linux + Arduino

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

Intel Edison

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

M5Stack

https://gyazo.com/0415cb6e70a9a398c6591db3776ca3b9

家具コンピューティング

家具に既存技術を埋め込む

Goldfish

Gear

WebLinda

家具の良いところ

すでに家の中にある

追加スペース不要

家具は既にかなりのスペースを占めている

既存の家具にコンピュータを組み込み可能

テーブル

壁

天井のライト

家具調のものは受け入れられる?

ステレオ

ピアノ

昔のステレオ

https://gyazo.com/971b9434468cfe7430e6eb3f8f308a6b.png

ピアノ @ 手塚治虫

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

IoT家具の例

照明

電源がある

邪魔にならない

ベッド

健康管理

テレビ

情報端末

ポスト

物をやりとりする装置

台所、トイレ、風呂

IKEAとIoT

人感センサ

温度計

充電テーブル

人感センサ

https://gyazo.com/da6d794ec6621ff043a5f92a6554685e.png

温度計

https://gyazo.com/ec7c8b22a6d94d7409ecd8891eb60e34.png

Qi充電

スマート電球

トロードフリ

https://gyazo.com/cefe56f5b8a26cf9eae20cfba385833c