7. Web

本日の話題

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

Webの新しいナビゲーション

Webサービスの良いところ

便利に使える

どこでも使える

スマホ, タブレット, ...

インストール不要

実運用でのユーザテスト

情報一元化

Webサービスの良いところ

集合知

情報共有

全世界の情報

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

インタフェースの実験に最適

WebサービスとUbicomp

目標は似たようなもの

どこでも / 誰でも / いつでも

近々融合するはず

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

直接的

可逆的

連続的

直観的

Ben Shneiderman氏

Ben Shneiderman

University of Maryland

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

http://masui.org/23a7bab8adfcf991a4df9bf69d0b1711.png

Shneiderman氏のUI教科書

網羅的な教科書

何故か邦訳が出てない

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

直接操作の例

スライダ

スクロールバー

ウィンドウのドラッグ

動的検索

(Drag & Drop)

動的検索

Dynamic Query

これもBen Shneidermanの造語

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

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

インクリメンタル検索

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

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

直接操作でないもの

ウィンドウの開閉

突然ウィンドウが消える

ブラウザのリンククリック

突然違うページが出る

メニューによるコマンド選択

ジャンプする方法と戻る方法が異なる

実世界のインタフェース

大抵の操作はなめらかである

水道の蛇口

車のハンドル

ネジ

スイッチ

...

昔のブラウザ

常にページ移動が発生

サーバから通信を開始できない

ブラウザからの要求のみ

チャットすら作れない

パソコンアプリのような柔軟さが無い

ページ移動の問題点

時間がかかる

突然状態が変化する

何が起こったのかわからない

ブラウザの基本動作

code:brouserloop.txt

while true do

1. ユーザが何らかの操作を行なう

2. サーバに要求を送る

3. サーバからの返事を受け取る

4. 受け取ったデータを新しいページとして表示

end

問題になるところ

サーバの返事でページ表示が更新される

ユーザが操作しない限り何も起こらない

直接操作がほとんど不可能

Webのインタフェース

ページ移動はなめらかではない

クリックによるページ移動

検索実行によるページ移動

メニュー選択によるページ移動

Backボタンによりなんとか可逆性を確保

ブラウザで最も多用されるボタン

最近のWebアプリ

「リッチインターネットアプリケーション 」(RIA)

アプリをすべてJavaScriptで記述

DOM操作または画面描画

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

例

Scrapbox

ネイティブアプリとWebアプリ

ネイティブアプリ

パソコンの上で直接

Webアプリ

ブラウザのJavaScriptで動かす

RIAの要件

ユーザの入力は常に受け付ける

画面を適宜更新する

サーバとの通信時に画面更新を行なわない

バックグラウンドでサーバと通信

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

ブラウザでのなめらかなインタフェース

DOMを動的に書き換える

DOM: Document Object Model

HTMLの階層構造のこと

JavaScriptでページのHTMLを書き換える

すべて自力で描画する

Canvas or SVG

DOMの書き換え

木構造を自力で操作

jQueryなどを利用

記述が多少楽になる

Virtual DOMを利用

React.js

HTMLを出力するコードを書くと差分がうまく書き換えられる

自力での描画

Canvas, SVGを利用

D3アプリはこの方式

Ajax

GoogleMapsなどで脚光をあびる

サーバと非同期通信

非同期通信とは

何かの完了を待たずに通信を行なう

ユーザ操作を待たない

サーバの計算終了を待たない

ユーザの待ち時間を最小化

同期通信

ユーザとシステムが交互に情報をやりとり

コマンドシェル

電卓

テレビ

自動販売機

HTTPは同期通信

インタフェースと並列性

インタフェースに並列性は必須

システムの反応とユーザ操作

音声とキーボード

突然発生するエラー

複数ユーザ

非同期通信により並列性が生じる

Ajaxの原理

JavaScriptの非同期呼び出し機能を利用

XMLHttpRequest()

サーバに要求を送った後すぐに終了する

データが得られるとコールバック関数が呼ばれる

返ってきたデータを利用して画面書き換えなどを行なう

Ajaxの例

Google系サービス

GoogleMaps

GMail

Scrapbox

その他最近のWebアプリすべて

Ajaxの問題点

非同期通信プログラミングはわかりにくい

並列プログラミングは難しい

異常動作が起こりやすい

ネット上では例外が発生しやすい

ブラウザによってJavaScriptの仕様がかなり違う

サーバからの非同期データ受信

ユーザが何かを行なわないとサーバはデータを返さない

サーバから突然送られてきたデータは処理できない

非同期的にデータを受け取る方法が必要

例: チャットシステム

いつ相手からデータが送られてくるかわからない

ブラウザが常にデータ待ち状態になっている必要がある

受け取ったデータはJavaScriptで処理

昔のブラウザはこれができなかった

Cometのような苦しい手法

Comet

ブラウザをサーバのデータ待ち状態にしておく

サーバはデータを返さない

ブラウザとサーバが接続中の状態が続く

準備できたらデータを返す

サーバの実装

普通のWebサーバは使えない

同時接続できるクライアント数の制限

解決法

特殊プロキシを利用

Comet専用サーバを利用

Nginxのような新しいサーバを利用

AJAXとComet

http://gyazo.com/fdf8ce76ac0be4b1b75d7e88fbe4c9da.png

http://gyazo.com/8ec3aa8e75a2916dd28fd1a1765060a1.png

WebSocket

HTTPを利用せずに自由に通信

自由にサーバからPushなどが可能

2011年12月 RFC6455 proposed standard

Node.jsを使う実装が人気

Webナビゲーション

一般的なWebナビゲーション

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

自分が能動的に情報発信

リンクを能動的に指定

それ以外の可能性

受動的なナビゲーション

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

ナビゲーションの種類が変化

流れる情報と留まる情報

情報整理ナビゲーション

ブックマーキング

受動的なナビゲーション

テレビとネットの違い

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

ネット

http://gyazo.com/bc341d03c27dc625aea7c943f06dc27c.png

テレビ

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

計算機ユーザの能動度

CUI = 非常に能動的

全てをユーザが入力

GUI = やや受動的

ユーザは選択を繰り返す

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

ユーザは何もしない

ページの再訪率

閲覧の2/3は以前に訪れたページ

新しいページを見に行くことは稀

自動ナビゲーションで充分かも

回転寿司

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

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

ユーザは選ぶだけ

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

眺めるインタフェース

GyaTV

Wikipedia Saver

眺めるインタフェース

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

http://gyazo.com/0a5dacb8b06b58b804944a9c3e12cd03.png

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

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

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

RSSフィードのページを自動表示

テレビのように眺める

https://gyazo.com/1c22b7a4015f18d5ba0183416c366629

Wikipedia記事をランダム表示

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

連想的ナビゲーション

近傍検索

位置情報ナビゲーション

Wikiキーワードナビゲーション

IndexJapan

日付、内容、置き場所の近いデータを近くに表示

http://gyazo.com/49ff2980552894951bb1a1e0e12368a7.png

近傍関係の例

http://gyazo.com/9ff211e2c2f30b87fe047ecff7bd0f49.png

写真管理システム

日付、タグ、位置情報で写真を管理

関連写真をたどれる

索引ナビゲータ

関連キーワードをたどって情報フィルタリング/検索

http://gyazo.com/8f3fb87bc285391340f8cbef97e04eea.png

キーワードナビゲーション

https://gyazo.com/60d2cf8a3068f9e092b76c17e86af0a0

Scrapbox

タグやキーワードでコンテンツが自動生成

情報間に無方向リンクを張る

巨大な無向グラフ

リンクのリンクを全部表示

孫情報, 兄弟情報が表示される

e.g. 「増井」⇒「人物」⇒「小池」

書籍の連想検索

https://gyazo.com/5e8c8ba2e824732d0fd3a8552a8ef4bf

https://gyazo.com/ba81162f57180fb6530877c06417ffc0

情報整理ナビゲーション

新しいナビゲーション / 権威

ブックマーク

リブログ

ブックマークの活用

ソーシャルブックマーク

公開ブックマーク

履歴情報

ソーシャルブックマーク

もともとは情報管理に利用

用途が変化

自慢に利用

情報感度

気のきいたコメント

コメントに利用

ネット上のブックマーク

URLや文字列に短いURLを割り当て

c.f. TinyURL

ショートカット的に利用