産業技術大学院大学講演 2019/8/27
https://gyazo.com/11d08b5061ed82bcc057e658f245c864
IoT時代のシンプルなインタフェース
増井 俊之
慶應義塾大学 環境情報学部
masui@masui.org
masui@pitecan.com
概要
いかにIoT時代のシンプルなインタフェースを作るか
自己紹介
システム紹介
そもそもからの発想
シンプルさをめざす
全世界コンピューティング
計算機環境の進化について
(その他のシステム紹介)
実世界コピペ
https://www.youtube.com/watch?v=1di7_2J8X0Y
長屋生活
制約だらけだがシンプル
https://gyazo.com/498cf3e4b9c769d7aa35299b5c7cf213.png
昔の計算機?
https://gyazo.com/cd47753dddd9659436b8a27c14328fe3.png
現在の計算機
https://gyazo.com/2d27265cf23812737a1a619fd7278779.png
http://gyazo.com/2b51c7542fbc81b94d3d4a5719e1c1a4.png
https://gyazo.com/13cfbf7bc05b9b0bbd0895680df981ab
自己紹介
シャープ、ソニー、産総研などに勤務
ケータイの予測変換(POBox)などを開発
2008まで米国Appleに勤務
フリック入力システムを開発
2009より慶應義塾大学 環境情報学部 (SFC)
ユーザインタフェースの研究開発
IoT, 検索システム, 情報視覚化
各種Webサービス運用中
Gyazo, Scrapbox, Helpfeel, EpisoPass, 本棚.org, ...
慶應SFC
https://gyazo.com/b293a16e7c02a318177f9a9b76ef9fa2
藤沢市遠藤 (湘南台)
設立30年
研究開発方針
自分の欲しいものを作る
自分で使う
コロンブスの卵が好き
今すぐ使えて売れるものを作る
シンプルさを追求する
コロンブス指数
簡単で便利かどうか
コロンブス指数 = 有用さ / 複雑さ
コロンブス日和
http://gyazo.com/807873e8e41db04289c5a6e5bdae6262.jpg
「楽するためならどんな苦労でもする!」
技術評論社 Software Design 連載記事
光文社 2015/2
https://Gyazo.com/64c56d9c3e67745e95bc038487d09c98.png
煽り
https://i.Gyazo.com/bf3bc7510fdb74c8db4bb058fd3ed6d6.png
https://gyazo.com/78e3ad58d27cfc7cfd64342b145bb64f
ジョブズに何を騙されているのか?
現在のコンピュータは便利! (?)
スマホはサイコー! (?)
システム紹介
POBox
Gyazo
Scrapbox
プロトタイプ⇒製品化
POBox
https://gyazo.com/ac2b347a7042f920edd576ee07c4b7f4.png
予測インタフェース+検索インタフェース+デザイン
「フリック」入力
https://i.gyazo.com/1691febad27439d3bf44232c54dcb1e8.png
仕事風景 @ Apple
http://gyazo.com/27357dbdc55a68142baee8c5d29ef075.png
http://gyazo.com/8a3ad1679518a0e75f441e5af10dbffd.png
https://www.youtube.com/watch?v=Ldyl5UbbSA8
認識POBox
https://www.youtube.com/watch?v=VNYCLOQQxXs
Gyaim: Mac用IME
https://gyazo.com/648245adc6252b716db7af9f7b2022ab.gif
Chaim: ChromeOS用IME
予測インタフェースの例
Dynamic Macro
Demo: Dynamic Macro
超簡単な画像アップロードサービス
https://gyazo.com/fa944eb0e0b5527fcd82c8b844a2156d
デモ: Gyazo
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
IvySearch
https://www.youtube.com/watch?v=2ZK7yJQqato
https://www.youtube.com/watch?v=jFNfoIWdyZI
Scrapbox
使いやすいデータ共有WIki!!!!!!
https://gyazo.com/512ba8487554d34ae2b699caa3512592.png
Scrapbox
https://gyazo.com/26b72859760ec89df1cdf670ce21a6a4
Scrapbox
Gyazoとともに進化中
https://gyazo.com/83a195ebd65dd90a84856013dd6178b1
https://gyazo.com/8fad51ea88e5141c9722c74c2d4338c2
Scrapboxの特徴
WYSIWYGなWiki
複数ユーザ同時編集
Gyazo画像の活用
ページ代表画像の利用
ページとタグの区別が無い
階層構造なし
双方向リンク
アウトライン編集
コード記法, コードブロック記法
柔軟で簡単なScrapbox記法
強力な文字装飾記法
Notaでの使い方
https://gyazo.com/3640eef64b73018ab761b911c5c3f7c0
増井研
https://gyazo.com/d8f998b6ba24e817153059760cb763f0
読書
https://scrapbox.io/IFPsychology/ https://gyazo.com/c9b396b1e07aba622df58ed0623d9d7d
https://scrapbox.io/book-kumaarashi/ https://gyazo.com/d5517fc79e544fb82fe89ab4aaba87b3
写真
https://scrapbox.io/masui-photos/ https://gyazo.com/ff15946d8919158e3e4b405973f073cb
音楽
https://scrapbox.io/masuilab/%E5%B0%8F%E5%AE%A4%E8%BB%A2%E8%AA%BF https://gyazo.com/b4bcb65cc477f72b2ea6a12207559426
DB
https://scrapbox.io/Gictionary/ https://gyazo.com/067ac646c5b35051e03cb1f6a4119f72
https://scrapbox.io/SFCHelp/ https://gyazo.com/1a08febd6c584d5133bc3f44c8e5767c
Scrapboxの歴史
Wikiをずっと使いながら改良していた
長年のドッグフーディングの成果
PalmWiki
http://www.pitecan.com/PalmWiki/ https://gyazo.com/029aca06532cf0ea8781004b07582e69
勉強Wiki
2-hop linkの重要性を認識
https://i.gyazo.com/1a3eb768b0ff56dd726573bc6c0aacbe.png
Wiki掲示板
https://i.gyazo.com/a8396b53cdf643f58203e81c1257fa4c.png
Gyazz
https://gyazo.com/17209ab826aa973a14529ab2db8893fb
https://gyazo.com/865090feb81ba92d5de58b6e77c4d25f
Scrapbox
ドッグフーディングによる知見を集めて商品化
ドッグフーディング
https://gyazo.com/ee8675349ac9f81ce3be8fdbc2b1c582.png
Steve JobsはiPhoneを使う
松下幸之助は松下製品を使う
ドッグフーディングによるScrapboxの改善
https://gyazo.com/2c759653bcb3c27cc3fc152c7ca33b06 http://masui.org.s3.amazonaws.com/b/c/bcdb769debfea3c09bb41296e4ab122d.pdf
Ken Kocienda本
https://scrapbox.io/book-creativeselection/ https://gyazo.com/fd9f7045e167399ae2cc19cb47c0f25d
iPhoneの英語キーボード開発秘話が面白い
Helpfeel
Scrapboxのデータをもとに作るヘルプシステム
Demo: Helpfeel
https://helpfeelapp.com/SFCHelp/ https://gyazo.com/f690d04f830596f28d6fd956cd569765
Gear
2個のスイッチだけで階層コンテンツナビゲーション
https://gyazo.com/ab4ff7c2d44f4af2bb94fae76589f495.png
Demo: Gear
実世界に様々なセンサを埋め込んで利用
デモ: Serencast
http://dshelf.nikezono.net/ https://gyazo.com/d8479a44d2934b48731e022eb71e6dc1
https://gyazo.com/d83ba4d9765298c3b27ca54f9da003e1 http://www.pitecan.com/tmp/Pivotty/
そもそもからの発想
そもそもの要望を解決するべき
現状の機器などの制約を忘れる
何が問題か?
無駄なモノ/不便なものが多すぎる
なのにそれに疑問を感じない
不便なもの
思考が必要
マッピングとか計算とか
e.g. リモコンの色キー, 駄目な自動ドア
計算
e.g. レジ
抽象的指向
e.g. ビデオ録画
連文節変換
可逆的でない
試行錯誤できないもの
e.g. 閉じるボタン
そもそも思考の成功例
自動ドア
Suica
それでも普及は大変だった
予測変換
あたりまえすぎて気付かないものがあるかも
そもそもの問題発見-解決
要素技術からの発想は困難
メモリ、RFID、etc.
やりたいことがあれば、新しいデバイスを見たとき何か思いつくはず
不便に気付いても良いものを発明するのは難しいが
あるものを減らすのは難しい
ゼロから考える
無いものに気づくのは難しい
わざと引算計算してみる
友達の持ってる本 - 自分が持ってる本 = 自分が欲しいかもしれない本
発想技術
https://images-fe.ssl-images-amazon.com/images/I/51X3yeXv8OL.jpg
ずっとバックグラウンドで考え続けておく
寝てるときに思いつくことも
制約のある環境を考える
クギ13本問題
https://gyazo.com/8d9edc45779a3b230f4ce263c6ddc265
長めのクギを13本用意
1本を机に打ち込む
残りの12本をその上に乗せる
長屋コンピューティング
制約だらけ
我慢して住めるか?
https://gyazo.com/498cf3e4b9c769d7aa35299b5c7cf213.png
これなら満足?
https://gyazo.com/498cf3e4b9c769d7aa35299b5c7cf213.png
Wifi完備
障子がスクリーン
神棚にサーバ
あちこちのセンサでKB入力
自動冷暖房
電子書籍
コンビニで冷蔵庫不要
良いレストランがいくらでも
近所にスーパー銭湯
制約的状況
手が使えない状況
目が見えない状況
泥酔状況
泥酔対応音楽プレーヤ
https://www.youtube.com/watch?v=av7j9Juj6To
計算機ユーザの変化
昔: 少数の専門家が利用
現在: 普通の人が利用
将来: あらゆる人間が使うようになる
「弱者」がほとんど
補助的な使われ方
メガネ、予測入力、etc.
現状の計算機
専門家向けシステムを延命して利用
30年以上前のGUI
メニュー、スクロールバー、etc.
誰でも使えるようになっていない
どこでも使えるようになっていない
練習が必要
現状の計算機
絵を見たい人に絵の具を買わせている
運転できないと電車に乗れない
要望と操作の不一致
映画を見るには?
写真を捜すには?
要らない情報を消すには?
リモコン問題
http://gyazo.com/2b51c7542fbc81b94d3d4a5719e1c1a4.png
リモコンの問題点
ボタンが多くて機能がわからない
紛失しやすい
邪魔
リモコンの本質的な問題点
操作対象ややりたいことと関係ない方向を向けなければならない
直感からほど遠い
FireStick TV
最近の改善されたリモコン
https://gyazo.com/07ead32e4e25c114d4d2cd7bea45591e
TVのHTMIに接続する小型マシン
このリモコンでTV電源や音量も制御できる
テレビに向ける必要がない
Bluetoothなので
検索ができないといった点は昔と同じ
そもそも何が問題?
リモートに機器をコントロール
発想が根本的に間違い
機器の意識が必要
やりたいことと操作が違う
やりたい場所と機器の位置が違う
リモコンのボタンを減らす
絶対減らない
ゼロから考え直す必要がある
スマホを使う?
ジョブズに騙されているだけ
スマホは特に便利なものではない
リモコンの親玉のようなもの
堀江
http://engineer.typemag.jp/article/horie-mcea http://gyazo.com/eb648106bd293eea20ed68e3e106df84.png
例: 日本語入力
かな漢字変換が主流だった
現在は予測変換が主流
連文節変換の問題点 (1)
正確な入力が必要
間違いが許されない
正確に打てない人には使えない
IoT時代に向いていない
連文節変換の問題点 (2)
読みが長くても全部入力必要
「品川駅まで」の入力に「shinagawaekimade」とか
予測式なら「shinag」「mad」で充分
高速に正確に入力できる環境や人は稀
手指が器用な熟練者が座っているときだけ
モバイル/ユビキタス環境ではほぼ無理
連文節変換の問題点 (3)
本質的に誤り訂正が必要
「きょうはいしゃにいった」は正しく変換することは不可能
歯医者? 医者?
訂正用の余計なキー操作
文節選択, etc.
曖昧入力をやりにくい
連文節変換の問題点 (4)
単語登録などカスタマイズが面倒
他のシステムと辞書を共有しにくい
連文節変換の問題点 (5)
他国語と併用できない
大阪弁辞書は使えるか?
連文節変換の問題点のまとめ
間違いが許されない
必要な操作が多い
訂正が必須
カスタマイズが難しい
日本語の標準語でしか使えない
⇒ 良い点がほとんど存在しない!!??
単純な予測変換/検索アルゴリズム
20行しかない!
https://gyazo.com/9c59ae47f6d532df010c968a9ece822d
Chaimデモ
例: フリック入力
https://gyazo.com/ef904572a8a4385cef15981afa10117c
Slime
https://gyazo.com/bdff2ca64fe3f974bf45f1d113d5e7fa
https://www.youtube.com/watch?v=Ldyl5UbbSA8
アルゴリズムはChaimと同じもの
全世界コンピューティング
WebサービスからUbicompへ
各種IoT技術を利用
実世界コピペ
https://www.youtube.com/watch?v=1di7_2J8X0Y
最近の計算機状況
世界中の人や物がネットワークで常時接続
革命的変化が進行中
IoTは流行るのか?
規格が無い
なんとなく複雑
便利さが微妙
Ubicompのチャレンジ
Webサービスとの融合
ハードの敷居
ソフトの敷居
富豪的UbiComp
特殊なセンサを沢山利用
ディスプレイを沢山利用
特殊な計算機環境を利用
「Poor Man's UbiComp」 (PMUC)
特殊なセンサを沢山使わない
× カメラ、× 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, MouseFieldを使用
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++の操作
http://gyazo.com/b2854fed63270061d12d976481d673bc.png
ビデオ: MouseField
https://www.youtube.com/watch?v=w-nEPbptLO8
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
Lindaの利用
Web上の共有空間でデータを読み書き
http://gyazo.com/5c79a78e3de1dcec20999cedfc5ddfad.png
LindaによるWeb上の通信
"say", "hello" というタプル
"door", "open" というタプル
Web-Linda
https://www.slideshare.net/shokai/prosym-node-linda https://gyazo.com/716da53b338a9c47e40bf79176fb78a2
全世界プログラミング
全世界の情報を利用
辻堂の波, 楽天の株価, ...
全世界の機械を制御
情報家電, 自宅の照明, ...
全世界の人間が作成
ホビープログラマ, メディアアーティスト, ...
全世界プログラミングの例 (1)
目覚まし時計
炊飯の予約
風呂の水はり
全世界プログラミングの例 (2)
人がいない部屋のテレビを消す
人がいない部屋では目覚ましを鳴らさない
ビールがなくなると注文フォームを表示する
気合いを入れるとブックマークされる
寝ると照明が消える
夜になると静かになる空気清浄機
汚いと自動的に洗浄してくれるトイレ
全世界プログラミングの例 (3)
遠方の家族の様子を知る
水道が使われていないと通報する
泥棒を検出
波や風の様子を調べる
全世界プログラミングの例 (4)
ブログが炎上すると警報が鳴る
ニューヨークの天気でBGMを変化させる
全世界ピタゴラマシン
....
全世界プログラミングのすすめ
昔はBASICの日曜プログラミングが流行っていた
最近はプログラミングが流行っていない
敷居が高い
値段が高い
日曜プログラミングの復活!
家具コンピューティング
家具に既存技術を埋め込む
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/b0127ab5cf8cae0bb1b9ba1e9b8a1961.png
計算機やプログラミングの進化
20年進化してない?
小さく/速く/安くはなったが
全然違うものも考えるべきでは?
# 古い知恵も役にたつかも?
生物進化の系統樹
https://gyazo.com/a1063ca65e4f24d057832b8d81a6dc96.png
カンブリア爆発
様々な生物「門」が一気に発生
https://gyazo.com/2098757f3e17f02a03a9a20383cf3eb1.png
カンブリア爆発
https://gyazo.com/ed28680d22f568488dd85ee8f3dec405.png
機械の進化
多数の絶滅を経由して現在に到る
https://gyazo.com/8f0b5028e45a9055e0b84220ab91ffc4.png
昔の計算機
複雑なスイッチ, ランプ
専門家が使うもの
https://gyazo.com/cd47753dddd9659436b8a27c14328fe3.png
飛行機のコックピット
https://gyazo.com/58eadfb59b0e235916897080ff92946d.png]
最近の計算機
https://gyazo.com/2d27265cf23812737a1a619fd7278779.png
Cray-1 (1976)
スーパーコンピュータの草分け
最近のスマホより遅い
https://gyazo.com/666f2d954f788ae6c826bf0f96d93610.png
VAX11 (1976)
DECの「ミニコン」
https://gyazo.com/d49ece19780d3f294aed99e98217bcd7.png
1MIPS
ちなみにIntel Core i7は15万MIPS
VT100 (1978)
https://gyazo.com/ab7ab81befe7f5a4a3a9e2fef1207760.png
Apple II (1977)
ビットマップ表示可能なパソコン
https://gyazo.com/19acdfe09dfaf34b2015ec4c926936e8.png
高校クラブで作った計算機 (1976)
インテル8008使用
https://gyazo.com/078e8c514fec7baf6388b3bc6246423c.png
8008マイコン
https://gyazo.com/08817cf560e0b559b67dd0f7e121ec3f.png
紙テープリーダ
https://gyazo.com/3e8612d7427e1e95b93d87c0c71ae5f1.png
1990ごろのの増井の開発環境
NeXTStation
ビットマップディスプレイ+マウス
NeXTstep
BSD Unix + GUI
Interface Builder
Objective-C
PostScript描画
NeXTstation (1990)
https://gyazo.com/c1c0ca5f8bbdf83eb72b579f22435f62.png
GUIの歴史
Altoが最初のもの (1973)
Xerox PARC (Palo Alto Research Center)で発明
XEROX PARC
https://gyazo.com/b93fb40af13436b714e1ac3d8f26ba8a.png
Alto (1973)
PARCで開発
GUIワークステーションのさきがけ
ビットマップディスプレイ
マウス/ウィンドウ/メニュー
https://gyazo.com/96bf4fda6bf46b0f862f9d3c68905016.png
Xerox Star
1981発売
https://gyazo.com/79d6aa012b0c679da9a11b02cb3f659e.png
https://gyazo.com/966466ccdf1c07654c2c9574c8a0b459.png
Sketchpad (1963)
Ivan Sutherlandのシステム
http://www.youtube.com/watch?v=mOZqRJzE8xg http://gyazo.com/800f0536f882fe5f769e636048b2eaaa.png
https://gyazo.com/6714df8917927390f2175cf2a8bdd44b.png
Douglas Engelbart
マウスの発明者
https://gyazo.com/29afc1729a503e8d2bcfcdc2f3a62550.png
伝説のデモ (1968)
https://www.youtube.com/watch?v=yJDv-zdhzMY&t=111s
「Engelbart氏と話したその穏やかな夏の夜、パーソナルコンピュータの出現そのものが、彼のパーソナルコンピュータシステムについての研究を終わらせてしまい、彼がそれ以降何十年も資金を得られていないことを聞いた。」
「私はショックを受けた。その独創性に富んだ研究は偉大で重要なものであり、数時間前にはXeroxのパロアルト研究所で非常に高く評価されていたにも関わらず、その研究によって彼自身が追放されてしまい、何十年も資金のない状態だったなどと信じられるだろうか? 」
「現在のコンピュータシステムは、基本的に1960年代、70年代にあったタイムシェアリング型のメインフレームと同じものだ。巨大な集中型のコンピュータシステム(サーバファーム)に個人用のワークステーションをつなぎ、互いに通信し、表計算ソフトやワープロやアプリを実行している。 」
Lisa (1983)
AppleのGUIパソコン
ジョブズがAltoを見て驚いて作ったもの
https://gyazo.com/c0596d8b63d9b9b790d3bb953c5291a7.png]
Macintosh (1984)
もともとJef Raskinのプロジェクトだった
ジョブズがRaskinを追い出す
https://gyazo.com/5db2d3658020a8fd6712eb783a62b988.png
NeXT Computer
1985創業 by ジョブズ
1988 NeXT Cube発売
現在のMacの原型
https://gyazo.com/66d94e93c6a0d0153f171b88692e2445.png]
Windows95
1995発売
頑張ってDOSをGUI対応
https://gyazo.com/c4395fd01b713415f5b283f3414a0153.png
AltoのSmalltalkのメニュー
https://gyazo.com/b8fda3611776f5377eb47d707af57a6d.png
Lisaのメニュー
https://gyazo.com/3ca39857447ef0c22e3decfbd4e568cb.png
パイメニュー
https://gyazo.com/7402c898b7a61772e9d79ec976bc47c4.png
T-Cube
https://gyazo.com/eedbbd982f2000f08ebb30ac66425e89.png
フリック入力
https://gyazo.com/1691febad27439d3bf44232c54dcb1e8.png
Smalltalkのスクロールバー
https://gyazo.com/98ad768b8492d0af7799086c78b22923.png
スクロールバーにマウス移動で矢印表示
スクロールの方向や操作を指示
スクロールバーの矢印
https://gyazo.com/fe9c87ee5ec6277d288bb9f721ceff0b.png
Lisaのスクロールバー
改良版スクロールバー
https://gyazo.com/ddce4448cce61b764bcd460610e1ad61.png
Lisaの画面
https://gyazo.com/03d3fe5a2f2464b9b2448fb83c556ed3.png
Macintosh System 4.2 (Finder version 6)
https://gyazo.com/371dadb8dfee860bef2a1ef88d3d5b83.png
NeXTStep
https://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オブジェクトを対話的に編集
https://gyazo.com/26628fafb9d8cddd83ada076705b68fe.png
Xcode
https://gyazo.com/91768f4e2dd5e628bdbb9e09c26372cc.png
Eclipse
https://gyazo.com/6a4ba95d8e00c59eae210573099702d3.png
開発システムの進化まとめ
Makeの開発から35年
IDEの出現から25年
20年前から大きく変わっているとはいえない
何故進化が遅い?
慣れに支配されている
新しいものに適応できない
「直観的」とは
慣れているものを直感的と感じがち
e.g. ペン操作, プルダウンメニュー, ...
慣れによって上手く使えるようになった
セブンカフェ by 佐藤可士和
https://gyazo.com/182a24c8bc2b1322accaabcdfc0d8437.png
デザインの敗北
https://gyazo.com/92be5ee1a15f21b8c9b557e0215fe775.png
デザインの敗北
https://gyazo.com/b81ff77125b286c600bc609fd19b1421.png
新しいものの普及は難しい
ほとんどの人はすごく保守的
現状への適応を変えたくない
POBoxの成功理由
トップダウンで指示
エバンジェリストの存在
従来インタフェースとの差異を最小に
ジョブズの洗脳術
なんとなく新しいものが良いものだと思わせる
実際は悪くなっていても
オシャレな気分にさせる
計算機やプログラミングの進化のまとめ
20年進化してないorz
全然違うものも考えるべき?
古い知恵も役にたつかも!?
パーソナルコンピューティングの変化
マイコン時代 (1970年代)
パソコンCLI時代 (1980年代)
パソコンGUI時代 (1990年〜)
IoT時代 (2015〜?)
マイコン時代 (1970年代)
マイコン回路
スイッチ, センサ, LED
https://gyazo.com/08817cf560e0b559b67dd0f7e121ec3f.png]
パソコン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プリンタ, レーザーカッター, ...
電子工作漫画 @ 週刊モーニング
https://gyazo.com/7ecec7cf7e6831cc4b01e77678caaeff.png
メイカーズ進化論 by 小笠原
http://www.amazon.co.jp/dp/4140884711 https://gyazo.com/c12b2462db8a12c0c946b29df7d88351.png
DMM.make @ 秋葉原
http://make.dmm.com/ https://gyazo.com/e2daa143106c5f95f235cbd61de7bc21.png
ビデオ: DMM.make
https://www.youtube.com/watch?v=CmKA99moE0A
https://www.youtube.com/watch?v=slIgRUOEJlM
https://www.youtube.com/watch?v=59bKZUmFi2Y
TechShop
各種の工作機器を備えた会員制オープンアクセス型DIY工房
富士通が2016春オープン
https://gyazo.com/313c41e5a58c2a27e034058e37279c21.png
https://www.youtube.com/watch?v=cY4xLvAAFo4
Maker機械の例
レーザーカッター
3Dプリンタ
切削マシン
光造形マシン
Phidgets
USB接続のセンサ
https://gyazo.com/fef02a278bcd20cf8af4323fb2fbff8e.png
Arduino
USB/Serial + AVR
Processing環境でプログラミング可能
https://gyazo.com/ba0f1f2dd89edcd0b5d9d2630fec4e04.png
Arduino Micro
https://gyazo.com/a49ee2e6b0ecb16faeaf45b9ae5d5b1d.png
Arduino + Bluetooth
https://gyazo.com/52298c7657576812dc4117be888b5909.png
Raspberry Pi
ARM搭載ワンボードマイコン
Linuxパソコンとして使える
https://gyazo.com/8eec26e91d9b97c806de1e32c6cabbcf.png]
Intel Galileo
Linux + Arduino
https://gyazo.com/022769af99c411731730a31e3bec67d0.png
Intel Edison
https://gyazo.com/990178c9f83a96d1d2d779f40af7dbd0.png
BLE Nano
https://gyazo.com/aa3e55a62c1d227eb0dbc415b4e1f785.png
BlueNinja
https://gyazo.com/b5b78920a7eb889a554455d884af0aa9.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
その他のシステム
EpisoPass
SmoothSnap
LensBar
本棚
GyaTV
エピソード記憶からパスワード生成
https://gyazo.com/b3540bafe805acadefb5accd3c9b5b4c
http://www.pitecan.com/p/Google_tmasui@gmail.com.html https://gyazo.com/16ae8b9d1d6f7cc8f87013ef2f325718
ブラウザ上でのズーミングインタフェース
http://pitecan.com/ASLensBar.save/ http://gyazo.com/edd529a2c5c23e8934e497054b3553e9.png
JSで実装したズーミングシステム
SmoothSnap
Web上で書籍情報共有
http://gyazo.com/4401b49e940bb988040ec683a225ef3e.png
簡単なデータマイニング
http://gyazo.com/62e317d89ba82ed207ebb0d4ec20f736.png
メーリングリストの自動作成
xxxx@quickml.com にメールを出すと自動的にMLを作成
http://gyazo.com/e71103f85b2dbf02762dfc91f56bbd29.png
まとめ
そもそもから新しく発想しよう
IoTやWebをうまく活用しよう
ドッグフーディングで改良しよう