HCI設計論 (3) Webのインタラクションデザイン 2016/10/26

Webのインタラクションデザイン

増井俊之

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

masui@pitecan.com

2016年10月26日

本日の話題

Web時代のコミュニケーション

Web時代のナビゲーション

Web時代の認証技術

新しいWeb技術

講義資料

コミュニケーション

ネット上の最重要アプリのひとつ

従来のコミュニケーション

音声, 会話

文字, 手紙

身振り

技術によるコミュニケーションサポート

のろし

手旗

郵便

電話

Fax

旧世代ネットコミュニケーションツール

メール

掲示板

メーリングリスト

新しいネットコミュニケーションツール

チャット

blog

Skype

Wiki

SNS

mixi

Facebook

Google+

twitter

Tumblr

LINE

最近のコミュニケーション

全世界コミュニケーション

集合知

メール

インターネット以前から存在

サーバ間をバケツリレー転送

一日に何度か、隣の組織まで電話で送る

e.g. 9600bpsとか

届くのに1日以上かかるのはあたりまえ

スプールがあふれて届かないことは日常茶飯事

現在のメール

自分のマシンから先方のサーバに直接送る

90年代初頭以降

SMTPプロトコル

ガラケーのメール

電話会社から直接ガラケーに送られる

この部分はインターネットの規格と関係ない

厳密にはガラケー ≠ インターネット

メールの問題点

届くかどうかわからない

届いたかどうかわからない

読んでもらえたかどうかわからない

一度送ると訂正できない

発信者を詐称できる

誰にでも送れてしまう

メールの問題点

送られてきたものはすべて受け取らなければならない

相手を知っていてもアドレスを知らなければ送れない

テキストしか送れない

アドレスを間違えやすい

複数の人間で情報を共有しにくい

メールの将来?

問題点が多すぎる!

将来は異なるシステムに切り換わると思われる

メールの時代は終わりました?

http://www.chatwork.com/ja/ https://gyazo.com/8fa304bab23717599fdae26e451d4a2d.png

メーリングリスト

複数の相手にメールを届ける仕組み

複数の人間で情報共有

ML管理システムに届いたメールをメンバに配送する

メールサーバで設定するのが普通

管理者権限が必要

QuickML

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

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

SFCのメーリングリストもQuickMLベース

xxxx@qml.sfc.keio.ac.jp

Wikiとは

サーバ上の文書をブラウザで編集できるシステム

Web上の情報共有に利用

Webページをユーザが自由に編集

他ページへのリンクを簡単に設置可能

簡易マークアップ

Wikiの例

qwikWeb

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

Wikipedia

MediaWikiで作った百科事典

https://i.gyazo.com/924f69753ef1f552dde27618eb860207.png

Wiki ≠ Wikipedia

WikipediaはMediaWikiで作った百科事典

Wikipediaのことをウィキと呼んではいけない

Wikiの利点

手軽な情報共有

手軽な情報編集

どこでも使える

HTMLを知らなくても良い

Wikiの歴史

1991 WWW誕生

1995 c2.comでWiki Wiki Web公開

https://i.gyazo.com/d02b8155727323050020b4507e3962dc.png

Wiki Wiki Web@c2.com

Ward Cunninghamが作成

Perlで331行

文芸的プログラミング

「キャメルケース」

「WikiName」のような記法

自動的にリンクになる

Ward Cunningham

Wiki, デザインパターン, Extreme Programming (XP)

https://gyazo.com/66ac3a41c791ac9c86d764d4ade780ff.png

Wiki Wiki Web

https://gyazo.com/b52bd6f398a42e0257c5afcf4ca706a6.png

Wiki Wiki Web

https://gyazo.com/864ecb3f07b703fd519d402e1dd08cc0.png

Wikiの問題点

編集モードの切換えが面倒

Wiki用のタグを覚えるのが面倒

古い記述と新しい記述の区別がつかない

ページタイトルを変えるのが難しい

リンクも全部変更の必要あり

Wikiの問題点

小さなデータを管理し辛い

大きなページになりがち

ページ構造やタイトルを最初から真面目に考える必要がある

孤立ページができる可能性がある

Wiki的システム

本棚.org

ユーザ登録せずにページを編集

本棚.org

Web上で書籍情報共有

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

デモ: 本棚.org

Gyazz

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

https://gyazo.com/a8358bd179139cd6da65e6fd12e7ea1a.png

Gyazzの特徴

直接編集

自動リンク

桁揃え

ブロック移動

デモ: Gyazz

https://gyazo.com/bad65acbf8a67b6d278952965d4cc575.png

Web2.0のキーワード

「人力」「共有」

人力作業や叡智を共有する

人力作業の例

Google

CAPTCHA

推薦システム

Wikipedia

Google

実は人力検索

人力で貼られたリンクを利用

ページランク

Google創設者の発明

ページの内容でなくリンクで重要度を判定

高い評価のページからリンクされるとランクが上がる

人力の勝利

推薦システム

Amazonなどで広く使われている

https://i.gyazo.com/6e8eea881cb6429baa78eb3f2abe875e.png

Wikipedia

すべて人力の百科事典

項目作成

項目編集

リンク作成

例: 10万語の辞書を作る?

ユーザが1000人ならひとり100語

ユーザが10000人ならひとり10語

かな漢字辞書などすぐできてもよいはずだが?

SKK辞書

Wikiで編集可能

あまりうまくいっていない

ユーザが少ない

オタクが多い

自慢にならない?

SocialIME

Web上のかな漢字変換システム

変換すると辞書が育つ

徐々に利用が広がりつつある

辞書自体は(今のところ)公開されていない

人力で計算

ユーザが知らないうちに計算させることができるかも

顔をクリックするとか

パズルを解くとか

Lang-8: 相互添削SNS

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

共有情報の活用

三人よれば文殊の知恵

みんなの意見は案外正しい

https://gyazo.com/b59b20fb29f55f9b674ee98dec4d760e.png

質の良い情報を集める方法

沢山のユーザ参加が必要

ジマンパワーが重要

ジマンパワー

人力システム成功のコツ

自己満足 or 自慢

趣味における自慢

生け花して出来映えを自慢

山登りして写真を自慢

ピアノ発表会 = 自慢大会

ひとりで弾くだけではジマン不足

ネット上のジマンパワー

オープンソース

ブログ

SNS

情報共有

オープンソース

プログラミング力の自慢

広く使われると自己満足

ブログ

頭のよさを自慢

普段の行動のカッコ良さを自慢

SNS

友達の数を自慢

行動を自慢

本棚.org

賢い本を読んでることを自慢

書籍の管理に便利

ネット上の情報ナビゲーション

ナビゲーションの分類

静的/動的

能動的/受動的

静的/動的

動的 = 検索など計算処理を含む

静的 = リンクをたどる

普通のWebナビゲーション

他人が能動的に作ったコンテンツを能動的に見て回る

自分が能動的に情報発信

リンクを能動的に指定

階層ナビゲーション

木構造をたどる

cd xxx, cd ..

Gear

単純なデバイスを利用した階層ナビゲーション

デモ: Gear

KWICナビゲーション

KWIC: KeyWord In Context

dshelf

https://gyazo.com/89ee61fb32464fe5027a6376d26defb6.png

デモ: dshelf

その他のナビゲーション

受動的なナビゲーション

自分コンテンツのナビゲーション

情報整理ナビゲーション

ブックマーキング

受動的なナビゲーション

テレビとネットの違い

前傾して見るのがネット

後傾して見るのがテレビ

勝手にコンテンツが提示されるとネットはテレビ風になる

ネット

https://gyazo.com/bc341d03c27dc625aea7c943f06dc27c.png

テレビ

https://gyazo.com/32087b1dce342dd540c7277b4b11a431.png

計算機ユーザの能動度

CLI = 非常に能動的

全てをユーザが入力

GUI = やや受動的

ユーザは選択を繰り返す

スクリーンセーバ = 完全受動的

ユーザは何もしない

回転寿司

https://gyazo.com/07f577c2336165513eba49d3c008e241.png

情報は自動的に提示される

ユーザは選ぶだけ

自動的に情報提示されるナビゲーション

眺めるインタフェース

GyaTV

Wikipedia Saver

眺めるインタフェース

渡邊恵太氏@安村研が提案

https://i.gyazo.com/0a5dacb8b06b58b804944a9c3e12cd03.png

Memorium

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

複数のキーワードウィンドウが浮遊

衝突するとGoogle検索 ⇒ 新しいキーワード出現

デモ: Memorium

デモ: GyaTV

Wikipediaスクリーンセーバ

Wikipedia記事をランダム表示

知らないことばかりで勉強になる

デモ: Wikipediaセーバ

認証のインタラクションデザイン

認証の必要性

ユビキタス社会

→ 誰もがどこでも計算機を使う

→ 計算機資源の共有がすすむ

→ どこでも認証が必要になる

認証のいろいろ

持っているものを利用

鍵、USB

自分自身の特徴を利用

生体認証

知っているものを利用

パスワード, チャレンジ質問

能力を利用

CAPTCHA

Webページの認証

現在はパスワードベースがほとんど

画像認証も台頭中

パスワード認証

実装が割と簡単

認識技術が不要

パソコンでは利用しやすい

キーボードがあるから

正しく運用すれば安全

パスワードの問題点

適切なパスワードを選ぶのが困難

覚えるのに苦労する

すぐ忘れる

容易に解読される

安全な運用が難しい

簡単にコピー可能

文字入力装置が必要

認証ハードウェアの問題点

持ち歩くのが邪魔

持ち歩くのを忘れる

紛失/盗難の危険

生体認証の問題点

怪我や病気で使えなくなる

コピーされる可能性がある

変更が不可能

理想の認証を考える

誰でも

どこでも

簡単に

安全に

認証デバイスを使わない

安心感がある

実現要件

脳内情報だけを利用

知識、能力、etc.

自分だけが実行できる技術を利用

⇒ エピソード記憶を利用

エピソード記憶の特徴

誰もが独自のエピソード記憶を持っている

忘れることがない

他人にはわからない

コピーできない

c.f. 意味記憶

画像認証

記憶した画像を認証に利用

DéjàVu

自動生成した画像から認証画像を選択

https://i.gyazo.com/38a52f9d4f2c67eaf6f6cc7acdf3e13e.png

PassFace

顔を選択

https://gyazo.com/918210f59d3892b2acdeb7aa276e9863.png

PassPoints

https://gyazo.com/eb52cc445b41c141dae0c2425b962d19.png

覚えていられない

誰でも同じような点を選びが

VisKey

特定の点を選択

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

Vidoop

画像のカテゴリを選択

OpenIDに対応

https://gyazo.com/a5e94fe05d651e09b942566eba50684b.png

Recall-A-Story

https://gyazo.com/80cf70536ce29eb3e8afcde8e93f30f6.png

物語を思いうかべながら画像を選ぶ

物語を考えるのが大変

しかもたぶん忘れる

西垣式

https://gyazo.com/fe506a9fca9f94f2553897cd9767c988.png

見辛い画像から根性で選ぶ

後で見てわからなくなるか、誰でもわかるかどちらかのような...

Wiedenbeck式

https://gyazo.com/351a3b2722a7f524c2271812f07308c5.png

直接選ばず、多角形内から選ぶ

難しすぐる

MARASIM

最初にこういう画像を覚える

オレンジの傘/リンゴの樹/シルエット/夜景

https://gyazo.com/24208777edefc754cca11945fa3ee578.png

これらのキーワードに対応する画像を4個ググって選ぶ

関係ない画像も21個ググって選ぶ

25個から4個選ぶことにより認証する

https://gyazo.com/b13acc24cb6fb396bfa8ad780d13674f.png

なぞなぞ画像認証

個人的記憶と結び付いた画像から問題を生成

正答を選ぶと認証成功

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

デモ: なぞなぞ画像認証

本棚.org

問題作成

なぞなぞ画像認証の利点

忘れない

入力が簡単

認証レベルを設定できる

グループで利用できる

なぞなぞ画像認証の問題点

問題作成が面倒

安心感が欠如

EpisoPass

論理的帰結?

パスワード利用は避けられない

パスワードは必ず忘れる

忘れないものからパスワードを生成するしかない

解決法

すでに覚えているものからパスワードを生成する

EpisoPass

忘れないエピソード記憶からパスワードを生成

シード文字列を換字してパスワードとする

デモ: EpisoPass

EpisoPassアルゴリズム

問題と回答からMD5ハッシュを生成

ハッシュにもとづいてシード文字列を換字

EpisoPassの利点

何も覚える必要がない

問題と選択枝を全部公開可能

公開しなくてもいい

EpisoPassの問題点

脆弱な問題を作れる

攻撃が簡単

問題作成が面倒

回答に時間がかかる

覗き見耐性なし

脆弱な問題を作成可能

ググれば答がわかる質問

答を知ってる人がいる質問もの

攻撃が簡単

オフライン攻撃は簡単

オンライン攻撃は困難?

問題作成が面倒

作成が面白い場合もある

簡単に作れる良問もある

昔の怪我した場所とか

選択枝を増やすのは簡単

回答に時間がかかる

ブラウザに記憶させる場合は問題ない

実際それほど時間はかからない

質問と答による認証と同じでは?

同じです

パスワードを生成する点が異なる

ヒューマンクリプト by 今井

システム/人間を総合的にセキュリティを考える

重要概念だが流行っていない

必要技術

人が安心できる方式

安全性を評価する技術

最近のWebとインタラクションデザイン

Webの特徴

どこでも使える

情報読み書き

情報共有

全世界の情報

「Web2.0」

集合知

開発者の数が膨大

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

Webブラウザの特徴

どこにでもある

インストール不要

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

簡単なプログラミング

奇麗な視覚化

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

配布が大変

インストールが面倒

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

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

直接操作インタフェース

サーバからのプッシュ

大量データのストリーミング

文書作成/編集

グラフィクス描画

音の処理

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

直接操作インタフェース

サーバからのプッシュ

大量データのストリーミング

文書作成/編集

グラフィクス描画

音の処理

もう少しでできること

手軽なメモ書き

大規模プログラム開発

デスクトップインタフェース

実世界とWeb

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

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

ところでドメイン持ってますか?

自前サーバ持ってますか?

何故持たない??

絶対持つべき

自前ドメイン/サーバの嬉しさ

好きなWebサイトを作れる

好きなメールアドレスを持てる

制約なくいろんな実験ができる

バックアップ先に使える

家が燃えても大丈夫

クラウドより制約が少ない

MP3置き放題とか

外部サービスに頼らなくてよい

問題?

金がかかる

めんどくさい

管理

登録

セットアップ

危険かもしれない

侵入されるとか

火事の危険

電気代

Raspberry Piなんてのもある

費用

ドメイン

1000円/年ぐらい

サーバ

1000円/月ぐらい

年間1万円ぐらい!

ひとつのサーバで複数ドメインを持てる

Webサーバを持ちましょう!

ブラウザのプログラミング

何故ブラウザでのプログラミングが必要か

見栄えを奇麗に

反応をよくする = なめらかなインタフェースを実現する

高速動作

ページ遷移をなくす

普通のアプリケーションのようなものをブラウザ上で動かす

反応をよくするにはローカルにプログラムを動かすしか方法はない

クライアントのプログラミングシステム

ブラウザ表示データを操作するもの

JavaScript

ブラウザと無関係にプログラムを動かすもの

プラグイン

Flash

Java

サーバと通信する機能がある

なめらかなインタフェースを実現可能

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

直接的

可逆的

連続的

直観的

直接操作インタフェース

“Direct Manipulation”の訳

Ben Shneiderman氏

Ben Shneiderman

University of Maryland

高名なユーザインタフェース研究者/啓蒙家

https://gyazo.com/23a7bab8adfcf991a4df9bf69d0b1711.png

Shneiderman氏のUI教科書

解説

https://www.amazon.co.jp/dp/013438038X/ https://gyazo.com/e2cef0caf85fb123a7657dc9a151e436.png

直接操作の例

スライダ

スクロールバー

ウィンドウのドラッグ

動的検索

(Drag & Drop)

動的検索

“Dynamic Query”

これもBen Shneidermanの造語

検索条件を変化させるとすぐに検索結果も変化

e.g. インクリメンタル検索

インクリメンタル検索

文字を入力するたびに検索を行ない結果を表示

文字を削除すると前の位置に戻る

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

JS, HTML5で可能になった

JavaScript

1995 Netscapek2.0で導入

1996 IEで採用

1997 EcmaScriptとして標準化

2005 Ajax

最近 CoffeeScript, TypeScriptなど出現

Flash / ActionScript

MacroMediaが開発

1999 Flash4

2000 ActionScript1 ECMAScriptベース

2003 ActionScript2

2005 Adobeが買収

2006 ActionScript3

最近絶滅に向かってる?

Javaとは...

1992 OAK by James Gosling

1994 Sunから公開 Gosling, Joy, etc.

1998 Java2

2004 J2SE 5.0

2006 Java SE 6

2010 OracleがSunを買収

2010/4 GoslingがOracle退社

最近 Scalaで復活するか?

最近のブラウザの機能

画面描画

マルチメディア

ローカルファイル

どんなアプリでも作れるようになった

ブラウザの新機能

HTML5

WebGL

WebCL

Web Audio API

HTML5

https://gyazo.com/1042666f281f44e8b223f445e47babd2.png

HTML5の機能

セマンティックス

新タグ, RDFa, マイクロデータ, マイクロフォーマット

オフラインとストレージ

App Cache, Web Storage, Indexed Database API, File API

デバイスアクセス

Geolocation API, マイク, カメラ, アドレス帳, カレンダー, 端末の向き

接続性

WebSocket, Server-Sent Events

マルチメディア

audio/video要素

3D、グラフィックス、エフェクト

SVG, canvas要素, WebGL, CSS3 3D

パフォーマンスと統合

Web Workers, XMLHttpRequest Level 2

CSS3

WOFF

HTML5の機能

Video/Audio

Canvas, SVG

レイアウト/構造化タグ

新しいInput

File API

ドラッグ&ドロップ

マイクロデータ

Web Worker

App Cache

Web Storage

WebSocket

Geolocation API

XMLHttpRequest Level 2

WebRTC

Video/Audio

<audio>タグ

<video>タグ

CanvasとSVG

https://gyazo.com/622066eb8dbcdbe57aae904182981bfa.png

Canvasの例

ズーミングシステム

https://gyazo.com/d8e1099d4bacfbb00a1e2e25ee9edae8.png

SVGの例

D3.js

https://gyazo.com/365e08f7a80fcdf574afe3843a1f2ced.png

レイアウトタグ

<nav>

新しい入力要素

スライダ

色選択

時刻入力

...

color.html 色選択

code:html

<!DOCTYPE html>

<html>

<body>

Select your favorite color: <input type="color" name="favcolor" /><br />

</form>

</body>

</html>

色選択

https://gyazo.com/292fa5d2ebe9312b07ef8a148c37597c.png

File API

ファイルの読み書き

ドラッグ&ドロップ

ブラウザ内のドラッグ&ドロップ

ブラウザ外からのドラッグ&ドロップ

File APIを利用

マイクロデータ

独自の語彙から構成される名前と値のペアによって、あるスコープ内のDOMを意味付けする仕組み

HTML内で話題にしている人名/作品/商品などと言ったメタデータを、コンピュータが容易に認識出来るようにマークアップしたもの

Web Worker

JSをバックグラウンドで走らせる

マルチスレッドで動作可能

マルチコアCPUだとJSでも高速計算可能になる

pushState

操作履歴をセーブ

Ajaxで「戻るボタン」を実装できる

WebSocket

サーバとの自由な通信

Cometなどを利用しなくてすむ

Node.jsで簡単に利用可能

socket.ioライブラリを利用

サーバからのイベントとブラウザからのイベントが対称

App Cache

HTML/CSS /JavaScriptをローカルにキャッシュ

manifestファイルを使う

Web Storage

ブラウザにデータをKVSで保存

ローカルストレージ

ウィンドウが開いている間だけ有効

セッションストレージ

永続的に保存

Indexed Database API

NoSQLなデータベース

Geolocation API

ユーザの位置情報を扱う

サンプル

無線LAN・WiFi・携帯電話基地局・GPS・IPアドレスなどから位置情報を取得

Geolocation API

getCurrentPosition()

ユーザーの現在の位置情報を一回だけ取得する

watchPosition()

ユーザーの位置情報を定期的に監視する

clearWatch()

watchPosition()による位置情報の監視をクリアする

XMLHttpRequest Level 2

クロスドメイン対応

WOFF

Web用のフォント

WebRTC

ブラウザでWebカメラを使う

https://gyazo.com/40acad6ef966289f059bbc54a693edfa.png

https://gyazo.com/6268457a183fc00cc587ec4151e9c835.png

WebGL

ブラウザ上でOpenGLで3Dグラフィクス描画

Three.js

Three.js入門

Three.jsサンプル集

GLとは?

SGI(Silicon Graphics)が作成した3次元ライブラリ

SGIのワークステーション(IRIX)で動作

GLプログラム例

https://gyazo.com/c6f572c70aca7068c3078bbd36996f46.png

OpenGL

GLを様々なマシンで使えるようにしたもの

Linux

Windows

Mac

ウィンドウ処理、マウス処理などは含まない

システム依存するため

デモ: WING

デモ: LensBar

WebGL

OpenGLをブラウザ上で動かす

GPUのOpenGLを直接アクセス

デモ集

Google本棚

EnchantPROでも使える

EnchantPro

JavaScriptのライブラリ

3Dゲームなどを簡単に作れる

WebCL

GPUをブラウザから利用

OpenCLのブラウザ版

OpenCL

マルチコア、GPUなどの異種混合並列計算フレームワーク

NVIDIAのCUDAに対してAppleが提案

CUDA

NVIDIAのGPUを利用するCライブラリ

GPGPUのためのもの

GPGPU

General-purpose computing on graphics processing units

= GPUによる汎目的計算

GPGPUで劇安スーパーコンピュータ

ブラウザで音を扱う

Googleシンセサイザ

http://www.google.com/doodles/robert-moogs-78th-birthday?doodle=6201726XDBA74MzMMlMzN0pmZthmZn8AAAMRmZnyAAANQAAB6pmZs3__-3-2E8aZmbTPP__9lPUzMz2n7___YzzpmZhzlphik5hglphhFphkEFhhFoRmFJhhFphmklhnFphhFphkFkhlEkhlE4hlFphkklBmV0hjFphmFJhhFIhkFIhjEYhlFphh-A.. https://gyazo.com/d9a312912bf3f85cf26cfd870f39c5ba.png

audioタグ

code:html

このWebブラウザーは音声の再生に対応していません。

</audio>

Audioオブジェクトでドラム

http://www11.plala.or.jp/sothicblue/html5drum/ https://gyazo.com/fa6af9ea506b095cc091169795099574.png

自力で音を出す

Firefox Audio API

Web Audio API

Chrome, Safari

FirefoxのAudio Data API

紹介ビデオ