1. ガイダンス 2016/9/26

次世代Webプラットフォーム論

増井俊之

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

masui@pitecan.com

2016年9月26日

講義資料

自己紹介

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

2008秋まで米国AppleでiPhone関連の開発

2009からSFC

様々なインタフェースシステムを開発

様々なWebサービスを運営中

仕事風景 @ Apple

https://Gyazo.com/a5925e03688fbc2c337867c193d95945.png

ITホワイトボックス (2011/6/19)

https://Gyazo.com/d3e79a8b457bc1544f0f5dc399e7c10b.png

日経エレクトロニクス 2012/9/17

https://Gyazo.com/22387d37dac90c4c90a2c36544db13f7.png

日経エレクトロニクス 2012/9/17

https://Gyazo.com/11a5f72386033757b61cf015314d8f6c.png

EngineerType記事

「みんなジョブズに騙されている」

https://Gyazo.com/ff16f82df60a23b3d5407d73a7b2dae3.png

新書

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

光文社新書

2015/2/17発売

https://Gyazo.com/64c56d9c3e67745e95bc038487d09c98.png

煽り

https://Gyazo.com/bf3bc7510fdb74c8db4bb058fd3ed6d6.png

その他の著書

http://hondana.org/%E5%A2%97%E4%BA%95/4756102816 https://i.Gyazo.com/4f415439da4a838af43a73bf8325df55.png

http://hondana.org/%E5%A2%97%E4%BA%95/4756146627 https://Gyazo.com/d7e6378a56a03c4c183185b475feeacc.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873113784 https://i.Gyazo.com/b5d8dcb8b3161e03a4ba6bf83ab3bbd8.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873114616 https://Gyazo.com/e6137ea90f398f83394f44435eab97f0.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873114861 https://Gyazo.com/715cc3421c8b50897f8afa7efa38ee0f.png

http://hondana.org/%E5%A2%97%E4%BA%95/4873115043 https://Gyazo.com/027dca09083cb76869c874bcdcb01dd9.png

連載

「コロンブス日和」

技術評論社「Software Design」

https://gyazo.com/c2df1e93677b155229ea17bec0e7864d.png

研究テーマ

情報検索

情報視覚化

予測/例示インタフェース

テキスト入力

コミュニケーションシステム

ユビキタスインタフェース

認証手法

全部Webに関係ある!

授業の進め方

Webに関する様々な話題を紹介

試験なし

レポート、実習?

Webとは?

以前: 新しいネットワーク技術

Webとは?

以前: 新しいネットワーク技術

現在: 生活そのもの

WebとSFC

W3CがΔ館にある

Webの特徴

どこでも使える

情報読み書き

情報共有

全世界の情報

「Web2.0」

集合知

開発者の数が膨大

様々なサービスを融合可能

Webブラウザの特徴

どこにでもある

インストール不要

実運用でユーザテスト可能

Web以前のインタフェース開発

配布が大変

インストールが面倒

フィードバックが貰えない

ブラウザでできなかったこと

直接操作インタフェース

サーバからのプッシュ

動画再生

ワープロ, 表計算

グラフィクス描画

3次元CG

楽音生成

ソフトウェア開発

ブラウザでできるようになったこと

直接操作インタフェース

サーバからのプッシュ

動画再生

ワープロ, 表計算

グラフィクス描画

3次元CG

楽音生成

ソフトウェア開発

もう少しでできること

大規模プログラム開発など

課題: 実世界とWeb

どこでも/誰でも/いつでもWebを利用したい

近日中に実現するはず

融合するプロセスが興味深い

講義予定 (1)

Webとなめらかなインタフェース

Webとプログラミング

Webと認証

Webと検索

Webと情報視覚化

Webと実世界

講義予定 (2)

Webとユーザプログラミング

Webとナビゲーション

Wiki

Webと集合知

Webと情報登録

Webと社会

増井のWebサービス

様々なWebサービスを運用

実用性を最重視

研究に活用

アイデアを思いつくたびにドメイン取得

e.g. http://ubicomp.center

ドメイン失効で困ることあり

増井のWebサービス

コミュニケーション/情報共有

本棚.org, QuickML, Gyazz

認証

なぞなぞ認証, なぞなぞ伏字, なぞなぞ情報公開, EpisoPass

Webを便利ツールに活用

Gyazo, 3Memo, GyazTV, Gyamm, Gyaki

入力, 検索

Lexierra, LensBar, SnapScroll, Gear

Webサービスの良いところ

便利に使える

どこでも使える (ケータイ, etc.)

インストール不要

実運用でのユーザテスト

情報一元化

Webサービスの良いところ

集合知

情報共有

全世界の情報

実世界の情報

既存サービスとマッシュアップ

Webサービスの大変なところ

競争相手が多い

便利なだけでは論文にならない

SPAM/荒らし対策

メンテナンス

Webサービスの良いところ

流行れば大儲け!?

事例: Gyazo

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

デモ: Gyazo

Gyazo (2010/7)

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

Gyazo (2012/1)

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

Gyazo (2014/1)

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

Gyazo (2015/1)

https://Gyazo.com/bde4e61c85ebeeb357e1705b2a0a9fb3.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データ (2014/11/14)

https://Gyazo.com/609db17ad3929ea27b0bf81edb899a06.png

Alexaデータ (2015/1/26)

https://Gyazo.com/c49dfb0cb4926fd0365e4c590c04b562.png

Alexaデータ (2015/3/3)

https://Gyazo.com/59823b38bca6e8f59b38d01a391ed34c.png

Alexaデータ (2015/4/9)

https://Gyazo.com/c4a8b16e548b665f650eacb016659d7a.png

Alexaデータ (2016/9/25)

https://gyazo.com/097a51e78a361c04f2aec1b1ac990161.png

資金ゲット!

https://gyazo.com/a99458e321aa5be81557b3387150b464.png

増井のサービスの特徴

ユーザ登録なし

パスワードなし

単純で有用

本棚.org

Web上で書籍情報共有

http://hondana.org/ https://Gyazo.com/4401b49e940bb988040ec683a225ef3e.png

本棚演算

簡単なデータマイニング

http://hondana.org/enzan/ https://Gyazo.com/2a87fe8a311e98639b878dab2d955472.png

本棚演算による電子書籍検索

https://Gyazo.com/ea410e97cd7123dbdb2f993eefb536d2.png

電子書籍エクスプローラ

https://gyazo.com/8482b602e42278090c92c97297afb3f3.png

地図帳.org

http://chizucho.org/ https://Gyazo.com/c45569af74ed60dcf966b1f4ee6cc40b.png

位置情報共有

店、観光地、レストラン、...

QuickML

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

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

Wikiとメーリングリストの融合

http://quickml.com/ https://Gyazo.com/e71103f85b2dbf02762dfc91f56bbd29.png

SFCのメーリングリスト

xxx@qml.sfc.keio.ac.jp

QuickMLを利用している

Gyaki

楽々お絵書き

https://Gyazo.com/f540ae4a7da10a229ee0a75ea7dd7de8.png

SDraw

もうひとつお絵書き

https://Gyazo.com/86ffefec0609a34c852892f9e12b8230.png

単語帳.org

辞書の共有

直接編集Wiki

http://tangocho.org/inundate https://Gyazo.com/91cf879c6d7dfaa779d2ab89c1fa87b3.png

Gyazz

お手軽なWiki

https://gyazo.com/8217e18389736386cf8dd9bd8b59bc78.png

Gyazzページ

https://gyazo.com/437b09d46b0467b299871cf7e04d81e4.png

QAuth

画像なぞなぞ認証

本棚, mixi

http://iqauth.com/ https://i.Gyazo.com/02e706be9c6441b1bfadf3e17822ce8b.png

なぞなぞ伏字システム

融通のきくデータ隠蔽

サンプル

http://fuseji.com/ https://Gyazo.com/912e5e51431e33e32becf3d5c95744da.png

なぞなぞ情報公開

個人情報を知っていればその人の情報がわかる<br>

増井のケータイ番号?

EpisoPass

エピソード記憶からパスワードを生成

http://EpisoPass.com https://Gyazo.com/795316ca9f1305f4e41c5f095a0197e0.png

Androidアプリ

https://Gyazo.com/ab3311de2243602584f0c262692f6fb1.png

3Memo

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

あらゆるブラウザを自分のブラウザのように使える

http://3memo.com/index_j.html https://Gyazo.com/324bff0c34c2aba09db454b5c2932bb7.png

スライドショー

メールのアーカイブ

http://Gyamm.com/ https://Gyazo.com/d872fff594a9feaf1441d3be149fc7cc.png

Lexierra

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

GMailで利用

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

iPhone用入力システム

https://Gyazo.com/53445cd2aacd8f05d29269bc12944ee4.png

SlimeDict

Gyazz上で辞書編集

https://Gyazo.com/73e46f58850dd4f8b428123498a7f633.png

LensBar

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

http://pitecan.com/ASLensBar.save/ https://Gyazo.com/edd529a2c5c23e8934e497054b3553e9.png

RainbowZoomer

https://Gyazo.com/7a373805a8cc228674fe8b878c19191b.png

学会プログラムのズーミング表示

https://Gyazo.com/998cb500bc172e9cd5abec8a8e3d22b6.png http://masui.org/i/

SmoothSnap

https://gyazo.com/7707f1eca7173695a1a6e5286add1c22.png

SmoothSnap

大規模な文書を楽々ブラウジング

Gear

キーを2個だけ使うナビゲーション

https://gyazo.com/ef134692c6d34cb9984d2bc35ef2f27b.png

廃れるページ

https://gyazo.com/76dd7aad1c472fd32400ef87ed1f418b.png

GoldFish

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

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

動作をJavaScriptのみで記述

プログラムはWeb上

簡単に修正可能

Video: 実世界GUI

GoldFishクライアント

https://Gyazo.com/18b298f2b2a2851978504fcd46503938.png

GoldFishサーバ

http://ubif.org/(ID)からリダイレクト

TinyURL, Bit.ly的な動作

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

https://Gyazo.com/a2dcd1bfa983b4c8b81e406085e59c47.png

実行例2: 時計の表示

https://Gyazo.com/de0fe7498b3a1fe856e07002f9a7ae1b.png

実行例3: 回転インタフェース

https://Gyazo.com/b06aee214b542952125f0d8a0ecb7abf.png

https://Gyazo.com/f38d032e1c317e1bac30d52581b8317b.png

ドア開閉

https://Gyazo.com/ab301f469b9266c3f2d2ed07db3f7c22.png

https://Gyazo.com/f00aef03e85ef6b1a838c527825a21fc.png

実世界コピペ

https://Gyazo.com/96ed656fe1f1007c299ec3817f4fe8d1.png

デモ: 円板コントロール

https://Gyazo.com/b06aee214b542952125f0d8a0ecb7abf.png

増井研究会

「全世界インタフェース」

実世界のセンサとWebを融合するインタフェースを考える

IDP

「インタラクションデザインプロジェクト」(大学院)

様々な新しいインタフェースの提案

レポート課題(案)

これからの認証技術

これからの検索技術

次世代Webプラットフォーム論(1) ガイダンス 2016/9/26