目次

  1. Webとなめらかなインタフェース
  2. 講義資料
  3. なめらかなインタフェースとは
  4. 直接操作インタフェース
  5. Ben Shneiderman
  6. Shneiderman氏のUI教科書
  7. 直接操作の例
  8. 動的検索
  9. インクリメンタル検索
  10. Demo: Emacsのインクリメンタル検索
  11. Demo: タグクラウドのインクリメンタル検索
  12. Demo: ブラウザのインクリメンタル検索
  13. 直接操作でないもの
  14. 実世界のインタフェース
  15. 例: なめらかなインタフェース
  16. Demo: WING
  17. Demo: LensBar
  18. Webで多い操作
  19. ページ移動の何が駄目か
  20. ハイパーテキストの迷子問題
  21. ブラウザの基本動作
  22. 問題になるところ
  23. Webのインタフェース
  24. リッチインターネットアプリケーション (RIA)
  25. RIAの要件
  26. Web上でなめらかなインタフェースを実現する方法
  27. 似たページを利用して遷移する
  28. 似たページを利用して遷移する
  29. e.g. ディスク容量視覚化
  30. ページ内容の一部を動的に書き換える
  31. クリックで同じページ内に遷移
  32. ソース
  33. ページ内移動時のURL指定
  34. JSで内容書き換え
  35. ソース
  36. LensBarのJavaScriptでの実装
  37. Ajax
  38. AJAX
  39. 非同期通信とは
  40. 同期通信
  41. インタフェースと並列性
  42. 半二重通信 = 極端な同期通信
  43. 大型計算機のキーボード
  44. 現在の端末
  45. 全二重通信
  46. Ajaxの原理
  47. 簡単なAjaxの例
  48. 非同期的にサーバに画像位置を通知
  49. 複雑なAjaxの例
  50. Ajaxを簡単に扱う
  51. Ajaxの問題点
  52. プラグインを利用する
  53. プラグインによるなめらかなインタフェース
  54. Flashによるなめらかなインタフェース
  55. Demo: Flash版LensBar
  56. Demo: Canvas版LensBar
  57. サーバからの非同期データ受信
  58. 例: チャットシステム
  59. Comet
  60. サーバの実装
  61. AJAXとComet
  62. WebSocket
  63. Socket.io
  64. WebSocketの制限
  65. React.js
  66. まとめ
  67. End