7. Web
Gear
Today's topics
Web and interaction design
Web and "Smooth" interface
New navibation on the Web
Advantages of the Web
Ubiquitous
Read/write any information
Available everywhere
Information sharing everywhere
Information from all over the world
Single info source
Simple user testing
Installation not required
Advantages of the Web
Collective intelligence
Information sharing
Mush-ups
Easy visualization
Easy programming
Best for interaction design experiments
Before the Web
Distribution difficult
Installation difficult
No feedback from users
What we could not do on a browser
Direct manipulation I/F
Server push
Large data streaming
Text editing
Drawing graphics
Handling sounds
Handling 3D graphics
What we do not do on the Web
Large software development
Desktop GUI
WebサービスとUbicomp
目標は似たようなもの
どこでも / 誰でも / いつでも
将来融合するはず
なめらかなインタフェース
直接的
可逆的
連続的
直観的
直接操作インタフェース
Direct Manipulation の訳
Ben Shneiderman氏
Ben Shneiderman
University of Maryland
高名なユーザインタフェース研究者/啓蒙家
http://gyazo.com/23a7bab8adfcf991a4df9bf69d0b1711.png
Shneiderman氏のUI教科書
網羅的な教科書
何故か邦訳が出てない
https://www.amazon.co.jp/dp/013438038X https://gyazo.com/b03ecbbb108b911464ed53d3fda78396.png
直接操作の例
スライダ
スクロールバー
ウィンドウのドラッグ
動的検索
(Drag & Drop)
動的検索
Dynamic Query
これもBen Shneidermanの造語
検索条件を変化させるとすぐに検索結果も変化
e.g. インクリメンタル検索
インクリメンタル検索
文字を入力するたびに検索を行ない結果を表示
文字を削除すると前の位置に戻る
直接操作でないもの
ウィンドウの開閉
突然ウィンドウが消える
ブラウザのリンククリック
突然違うページが出る
メニューによるコマンド選択
ジャンプする方法と戻る方法が異なる
実世界のインタフェース
大抵の操作はなめらかである
水道の蛇口
車のハンドル
ネジ
スイッチ
...
Webアクセスの基本
http://gyazo.com/4fe5e73511ea1909e61e437e06a50056.png
昔のブラウザ
常にページ移動が発生
サーバから通信を開始できない
ブラウザからの要求のみ
チャットすら作れない
パソコンアプリのような柔軟さが無い
全くなめらかでない
ページ移動の問題点
時間がかかる
突然状態が変化する
何が起こったのかわからない
ブラウザの基本動作
code:brouserloop.txt
while true do
1. ユーザが何らかの操作を行なう
2. サーバに要求を送る
3. サーバからの返事を受け取る
4. 受け取ったデータを新しいページとして表示
end
問題になるところ
サーバの返事でページ表示が更新される
ユーザが操作しない限り何も起こらない
直接操作がほとんど不可能
Webのインタフェース
ページ移動はなめらかではない
クリックによるページ移動
検索実行によるページ移動
メニュー選択によるページ移動
Backボタンによりなんとか可逆性を確保
ブラウザで最も多用されるボタン
最近のWebアプリ
リッチインターネットアプリケーション (RIA)
シングルページアプリケーション (SPA)
URLが変化しない
アプリをすべてJavaScriptで記述
DOM操作または画面描画
なめらかなインタフェースを実現
例
Scrapbox
ズーミング
ネイティブアプリとWebアプリ
ネイティブアプリ
パソコンの上で直接動作
Webアプリ
ブラウザのJavaScriptで動かす
Webアプリのネイティブ化
Electronなどを使う
RIAの要件
ユーザの入力は常に受け付ける
画面を適宜更新する
サーバとの通信時に画面更新を行なわない
バックグラウンドでサーバと通信
なめらかなインタフェース
ブラウザでのなめらかなインタフェース
DOMを動的に書き換える
DOM: Document Object Model
HTMLの階層構造のこと
JavaScriptでページのHTMLを書き換える
すべて自力で描画する
Canvas
SVG
WebGL
DOMの書き換え
木構造を自力で操作
document.getElementById('abc') ...
jQueryなどを利用
記述が多少楽になる
$('#abc') ...
Virtual DOMを利用
React.js
HTMLを出力するコードを書くと差分がうまく書き換えられる
自力での描画
Canvas
Processing.jsで利用
SVGを利用
D3.jsで利用
Ajax
Asynchronous JAvaScript + XML
GoogleMapsなどで脚光をあびる
サーバと非同期通信
非同期通信とは
何かの完了を待たずに通信を行なう
ユーザ操作を待たない
サーバの計算終了を待たない
ユーザの待ち時間を最小化
同期通信
ユーザとシステムが交互に情報をやりとり
コマンドシェル
電卓
テレビ
自動販売機
HTTPは同期通信 (TCP)
インタフェースと並列性
インタフェースに並列性は必須
システムの反応とユーザ操作
音声とキーボード
突然発生するエラー
複数ユーザ
非同期通信により並列性が生じる
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
計算機ユーザの能動度
CLI = 非常に能動的
全てをユーザが入力
GUI = やや受動的
ユーザは選択を繰り返す
スクリーンセーバ = 完全受動的
ユーザは何もしない
ページの再訪率
閲覧の2/3は以前に訪れたページ
新しいページを見に行くことは稀
自動ナビゲーションで充分かも
回転寿司
http://gyazo.com/07f577c2336165513eba49d3c008e241.png
情報は自動的に提示される
ユーザは選ぶだけ
自動的に情報提示されるナビゲーション
眺めるインタフェース
GyaTV
Wikipedia Saver
眺めるインタフェース
渡邊恵太氏@安村研 が提案
http://gyazo.com/0a5dacb8b06b58b804944a9c3e12cd03.png
「眺めるインタフェース」の実装
複数のキーワードウィンドウが浮遊
衝突するとGoogle検索 ⇒ 新しいキーワード出現
Webページや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. 「増井」⇒「人物」⇒「小池」
Scrapboxで配信したコンテンツを購読/表示
https://gyazo.com/caef339fd0be8e088e21ef9c411fc852
書籍の連想検索
https://gyazo.com/5e8c8ba2e824732d0fd3a8552a8ef4bf
https://gyazo.com/ba81162f57180fb6530877c06417ffc0
情報整理ナビゲーション
新しいナビゲーション / 権威
ブックマーク
リブログ
ブックマークの活用
ソーシャルブックマーク
公開ブックマーク
履歴情報
ソーシャルブックマーク
もともとは情報管理に利用
用途が変化
自慢に利用
情報感度
気のきいたコメント
コメントに利用
ネット上のブックマーク
URLや文字列に短いURLを割り当て
c.f. TinyURL
ショートカット的に利用
写真管理
Scrapboxだけで完璧な写真管理