目次
- Webとインタラクションデザイン
- Lecture Note
- Webの特徴
- Web2.0
- Webブラウザの特徴
- Web以前のインタフェース開発
- ブラウザでできなかったこと
- ブラウザでできなかったこと
- もう少しでできること
- 実世界とWeb
- ところでドメイン持ってますか?
- 自前サーバ持ってますか?
- 何故持たない??
- 自前ドメイン/サーバの嬉しさ
- 問題?
- お金
- Webサーバを持ちましょう!
- Webの原理とプログラミング
- Webのプログラミング
- Webを支える技術
- Webアクセスの基本
- ブラウザの基本動作
- Demo: サーバにtelnet
- 基本動作の場合
- CGIプログラムの利用
- CGIページ例 (get)
- サーバに送られる文字列
- Webの通信
- CGIページ例 (post)
- サーバに送られる文字列
- CGIプログラムへ渡される情報
- Webの通信
- CGIプログラム
- Webサーバが返す形式の例
- Webの通信
- Webサーバがやること
- CGIプログラムがやるべきこと
- CGIプログラムの作り方
- 自力で全部作る場合
- ライブラリを使う場合
- フレームワーク
- Webサーバプログラミングの面倒なところ
- WebObjectsの歴史
- フレームワークがやってくれること
- その他
- Demo: Railsを使ったサイト構築
- Railsサイトの例
- Sinatraを使ったサイト構築
- Sinatra+Passengerによる運用
- Sinatraサイトの例
- フレームワークの問題点?
- 楽々サイト作り
- ブラウザのプログラミング
- 何故ブラウザでのプログラミングが必要か
- クライアントのプログラミングシステム
- なめらかなインタフェース
- 直接操作インタフェース
- Ben Shneiderman
- Shneiderman氏のUI教科書
- 直接操作の例
- 動的検索
- インクリメンタル検索
- Webとなめらかなインタフェース
- JavaScript
- Flash / ActionScript
- Javaとは...
- 最近のブラウザの機能
- サーバとブラウザの役割分担
- サーバとクライアントの分担例
- 例1: かな漢字変換
- サーバでの実装?
- クライアントでの実装?
- サーバ + クライアント
- 例2: ズーミング検索
- サーバ側の処理
- クライアント側の処理
- 例3: ローカルなズーミング検索
- ブラウザの新機能
- HTML5
- HTML5の機能
- HTML5の機能
- Video/Audio
- Canvas
- SVG
- レイアウトタグ
- 新しい入力要素
- 色選択
- 色選択
- File API
- ドラッグ&ドロップ
- マイクロデータ
- Web Worker
- pushState
- WebSocket
- App Cache
- Web Storage
- Indexed Database API
- Geolocation API
- Geolocation API
- XMLHttpRequest Level 2
- WOFF
- WebRTC
- WebGL
- Three.js
- GLとは?
- GLプログラム例
- OpenGL
- デモ: WING
- デモ: LensBar
- WebGL
- EnchantPro
- WebCL
- OpenCL
- CUDA
- GPGPU
- ブラウザで音を扱う
- Googleシンセサイザ
- audioタグ
- Audioオブジェクトでドラム
- 自力で音を出す
- FirefoxのAudio Data API
- Audio Data APIで音を鳴らす
- Firefoxでソフトシンセ
- シーケンサ
- リアルタイムに音生成
- Web Audio API
- WebSynth
- WebModular
- WebMidiLink
- timbre.js
- Timbreデモ
- jsfx
- jsfxによるドラムシーケンサ
- まとめ
- Webプログラミングの難しいところ
- Webプログラミングの現状
- End