1. ガイダンス - sfc-web2019

1. ガイダンス

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

増井俊之

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

masui@pitecan.com

2019年9月23日

Scrapbox

クラウド上の情報整理 / 共有システム

講義でフルに利用予定

https://i.gyazo.com/7057219f5b20ca8afd122945b72453d3.png

Scrapboxとは

Web上で情報整理

Web上で情報共有

Wikiを便利にしたもの

Scrapbox情報

/help-jp

/nota-press/Scrapbox紹介記事

/InterestingProjects

「コロンブス日和」記事1 (2017/2)

「コロンブス日和」記事2 (2017/3)

Scrapboxの利用登録

Googleアカウントが必要

GMailなどで利用されているもの

keio.jpのアカウント (G suiteのアカウント) も利用可能

Googleアカウントで https://Scrapbox.io/ でユーザ登録

sfc-web2019-CNSログインアカウントプロジェクトを作成

e.g. https://scrapbox.io/sfc-web2019-s00000tm

出席登録/レポート提出/質問などあらゆることに利用

これが無いと受講できないので注意

自己紹介

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

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

2009からSFC

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

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

有力Webサービス運営者はだいたい友達?

Mercari会長、Smartnews社長、DeNA創業者、etc.

野望

https://gyazo.com/ca961a08ff23784e0741beec19a67da7

出版物の支配!

テレビの支配!

POBox (ガラケーの予測入力)

https://gyazo.com/ac2b347a7042f920edd576ee07c4b7f4.png

「フリック」入力

https://i.gyazo.com/1691febad27439d3bf44232c54dcb1e8.png

仕事風景 @ 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」

2005ごろ流行した言葉

送り手と受け手が流動化

集合知

様々なサービスが融合

Webブラウザの特徴

どこにでもある

インストール不要

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

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

配布が大変

インストールが面倒

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

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

直接操作インタフェース

サーバからのプッシュ

動画再生

ワープロ, 表計算

グラフィクス描画

3次元CG

楽音生成

ソフトウェア開発

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

直接操作インタフェース

サーバからのプッシュ

動画再生

ワープロ, 表計算

グラフィクス描画

3次元CG

楽音生成

ソフトウェア開発

もう少しでできること

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

課題: 実世界とWeb

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

近日中に実現するはず

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

講義予定 (1)

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

Webとプログラミング

Webと認証

Webと検索

Webと情報視覚化

Webと実世界

講義予定 (2)

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

Webとナビゲーション

Wiki

Webと集合知

Webと情報登録

Webと社会

SaaS

Software As A Service

ネットで使えるソフトウェア

使ったぶんだけ金を払う

Salesforce

https://gyazo.com/7e91b4a3e0caa6fed557ec882d2bfcde

SaaSの先駆者

営業支援ツールのプラットフォームを展開

顧客管理ツールなど

あらゆるアプリがSaaS化なう

メール

ブラウザで読むのが普通に

テキスト編集

レポート作成

表計算

地図

百科事典

増井のWebサービス

様々なWebサービスを運用

実用性を最重視

研究に活用

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

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

増井のWebサービス

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

本棚.org, QuickML, Scrapbox

認証

なぞなぞ認証, なぞなぞ伏字, なぞなぞ情報公開, 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

Alexaデータ (2017/9/25)

https://gyazo.com/d01f9f57afb7dd413faed2edc0a1d6b8

資金ゲット!

https://gyazo.com/a99458e321aa5be81557b3387150b464.png

増井のサービスの特徴

ユーザ登録なし

パスワードなし

単純で有用

本棚.org

Web上で書籍情報共有

2004ごろから運営

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

Scrapbox

お手軽なWiki

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

Scrapboxページ

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

Scrapbox書籍

https://gyazo.com/f4ef54fefee75f9cf03fe70510b6df04

IQAuth

画像なぞなぞ認証

本棚, 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

EpisoDAS

Draw-a-Secretでパスワード生成

https://gyazo.com/98469a496a306eced38983f93c54e44e

増井のパスワード

「増井のパスワード」でググると出る

https://gyazo.com/9f39cc4993bf724f19d4fe157700fe83

GoQuick

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

https://gyazo.com/878b4c63a6572eeb1ac8fcc514b40fa3

短い文字で長いURLに飛べる

スライドショー

メールのアーカイブ

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

Gictionary

Scrapbox上で辞書編集

https://gyazo.com/a9e4aa81c3aed04cbdfe7507b7976703

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

動画の微調整

http://www.pitecan.com/SmoothSnap/clock11.html https://gyazo.com/d15113960a85d2d4a9fa08b14071ecc1

Serencast

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

https://gyazo.com/ef134692c6d34cb9984d2bc35ef2f27b.png

廃れるページ

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

Helpfeel

Scrapboxデータを用いたヘルプ作成システム

https://helpfeelapp.com/SFCHelp/?q=食堂 https://gyazo.com/3b314d11ddb19b73c2bf72ff4c690a62

ヘルプデータ

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

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

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

レポート課題(案)

これからの認証技術

これからの検索技術

野望

https://gyazo.com/ca961a08ff23784e0741beec19a67da7http://hondana.org/

出版物の支配!

テレビの支配!