HCI設計論 (4) 各種の話題 2016/11/2

各種の話題

増井俊之

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

masui@pitecan.com

2016年11月2日

本日の話題

計算機の進化

No Interface

起業関連

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

資料

計算機界の現状

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

計算機のユーザも変化

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

将来方向

ユビキタス

ユニバーサル

ユーザ適応

ユーザの変化

昔: 少数の専門家が使っていた

現在: 普通の人が使っている

将来: あらゆる人間が使うようになる

「弱者」の割合が大きい

補助的な使われ方

メガネ、予測入力、etc.

現状の計算機

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

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

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

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

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

練習が必要

現状の計算機

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

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

映画を見るには?

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

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

「リモコン」

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

機器の意識が必要

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

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

スマホ?

ジョブズに騙されているだけ

スマホ

知的生産活動に使えない

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

パチンコと同類

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

従来のGUIの延長

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

実際はシンプルでない

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

どこで買ったか思い出す

Kindleアプリを捜す

データを捜す

e.g. 「アルドノア・ゼロ」を見たい

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

動画アプリを起動

動画ファイルを捜す

e.g. PDA的利用

メモ書きできない

お絵書きできない

写真はとれるのだが

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

知的生産に使えない

2極分離するとどうか?

受動的な人向け

知的活動向け

「スマホ使ってる奴は年収低い」

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

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

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

Altoソース公開?

https://gyazo.com/ffe13676111e106b8c819b870cce4601.png

Altoハードウェア復活??

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

Xerox Star

1981発売

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

Ethernet

TCP/IPではない

JStar

1982発売

日本語対応

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

Sketchpad (1963)

Ivan Sutherlandのシステム

../gyazo/800f0536f882fe5f769e636048b2eaaa.png

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

Douglas Engelbart

マウスの発明者

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

伝説のデモ (1968)

http://www.youtube.com/watch?v=JfIgzSoTMOs

Engelbartの不幸

「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を見て驚いて作ったもの

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

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

ほとんどの人はすごく保守的

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

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

トップダウンで指示

エバンジェリストの存在

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

ジョブズの洗脳術

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

実際は悪くなっていても

オシャレな気分にさせる

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

20年進化してないorz

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

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

Web商売

課金モデルと広告モデル

課金は難いことが多い

成功例はニコニコ動画ぐらい?

ベンチャーキャピタル (VC)

スタートアップ会社に金と口を出す

エグジットして大金をせしめる

失敗すれば丸損

常に投資案件を捜している

最近はアベノミクスでバブル気味

謎の政策

評価

頭おかしい説が有力

Courseraのスタートアップ授業

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

Stanfordのスタートアップ授業 @ 2014

"How to Start a Startup"

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

起業アドバイス

成功した奴が勝手なことを言っている

誰かひとりを信用してはいけない

優秀な人材が起業するのは本当か?

米国では本当らしい

周囲では優秀な学生はベンチャーに行っている

起業している奴もいる

事例: Gyazo

https://gyazo.com/12f732583b5ea7e5b440baa3f2ddd5b4.png

Gyazo (2010/7)

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

Gyazo (2012/1)

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

Gyazo (2014/1)

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

Alexaデータ (2013/11/14)

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

Alexaデータ (2014/1/15)

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

Alexaデータ (2014/10/27)

https://gyazo.com/cecd0d5b1e47514518cd97f627b88d2e.png

Alexaデータ (2015/11/4)

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

Alexaデータ (2016/11/2)

https://gyazo.com/ae2b65279c5ee7b7c3f42aca5d1e49f4.png

資金ゲット!

https://gyazo.com/a99458e321aa5be81557b3387150b464.png

IvySearch

https://gyazo.com/72e43e1b762e5b846553ab62a475532a.png

芋蔓検索で記憶をたどる

画像ブックマークになる

スマホでも便利

会社の栄枯盛衰

Apple, Sony, Sharpなどの印象

トップと上層部が大事っぽい

下々の技術者はあまり関係ない

元気な会社の社長は自社製品を使う

Google社長はググる

JobsはMacとiPhoneを使う

松下幸之助は松下製品しか使わなかった

元気な会社の社長は自社製品を使う

au社長はLISMOを使ってたか?

Docomo社長はdstickを使っているか?

富士通社長はScanSnapを使ってるか?

ソニー社長はWalkmanを使ってなかった

元気な会社の社長は自社製品を使う

増井は増井のWebサービスしか使わない

昔のソニー

オシャレなイメージ

社内展示会が面白かった

こっそり勝手に面白い開発

研究所も頑張ってた

ソニーの勘違い

金持ち向けの会社だと誤解した

社長が旅行したりオペラを見たりワインを飲んだり

ソニーのユーザはテレビやWalkmanを使うのに

アップル

トップ次第で右往左往

ジョブズのおかげであっという間に回復

将来は大丈夫か?

NeXT人材の流出

アップルの問題

名物の内部抗争

社員間の格差

NeXT人材の流出

Scott Forstallらの放逐

人材の劣化

有望人材が逃げる/追い出される

自分も偉いと社員が勘違い

取捨選択の判断ができない

有望新人が来ない

株価上昇が期待できない

ジョブズがいないと行く気にならない

Apple社風

秘密主義

部門間の交流なし

階層が深い

ジョブズが神

Google社風

かなりオープン

部門間で人的交流あり

面白い会社とは

優秀なトップがいる会社

元気の良いベンチャー

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

「ユビキタスコンピューティング」 ⇒ 「IoT」

あらゆる場所のセンサやコンピュータがネット接続

増井のIoT記事 @ エンジニアType

パーソナルコンピューティングの変化

マイコン時代 (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

Blend Micro

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

知っておきたい技術

ソフトウェア技術

工作技術

デジタル回路技術

アナログ回路技術

総合デザイン技術

=デザインエンジニア

アナログ回路参考書

https://www.amazon.co.jp/dp/4061546643/ https://images-na.ssl-images-amazon.com/images/I/21XY20S72RL.jpg

https://www.amazon.co.jp/dp/406156563X https://gyazo.com/ce549c7893ec988b86cfcced365cf7f8.png