目次
- Webとなめらかなインタフェース
- 講義資料
- なめらかなインタフェースとは
- 直接操作インタフェース
- Ben Shneiderman
- Shneiderman氏のUI教科書
- 直接操作の例
- 動的検索
- インクリメンタル検索
- Demo: Emacsのインクリメンタル検索
- Demo: タグクラウドのインクリメンタル検索
- Demo: ブラウザのインクリメンタル検索
- 直接操作でないもの
- 実世界のインタフェース
- 例: なめらかなインタフェース
- Demo: WING
- Demo: LensBar
- Webで多い操作
- ページ移動の何が駄目か
- ハイパーテキストの迷子問題
- ブラウザの基本動作
- 問題になるところ
- Webのインタフェース
- リッチインターネットアプリケーション (RIA)
- RIAの要件
- Web上でなめらかなインタフェースを実現する方法
- 似たページを利用して遷移する
- 似たページを利用して遷移する
- e.g. ディスク容量視覚化
- ページ内容の一部を動的に書き換える
- クリックで同じページ内に遷移
- ソース
- ページ内移動時のURL指定
- JSで内容書き換え
- ソース
- LensBarのJavaScriptでの実装
- Ajax
- AJAX
- 非同期通信とは
- 同期通信
- インタフェースと並列性
- 半二重通信 = 極端な同期通信
- 大型計算機のキーボード
- 現在の端末
- 全二重通信
- Ajaxの原理
- 簡単なAjaxの例
- 非同期的にサーバに画像位置を通知
- 複雑なAjaxの例
- Ajaxを簡単に扱う
- Ajaxの問題点
- プラグインを利用する
- プラグインによるなめらかなインタフェース
- Flashによるなめらかなインタフェース
- Demo: Flash版LensBar
- Demo: Canvas版LensBar
- サーバからの非同期データ受信
- 例: チャットシステム
- Comet
- サーバの実装
- AJAXとComet
- WebSocket
- Socket.io
- WebSocketの制限
- React.js
- まとめ
- End