HTML5でゲーム配信とか

はまじしん一ろう

---

HTML5

次のHTML
HTMLと言いつつ
JSインターフェースとか
DOM/DOM eventなども定義

R.I.P.: XHTML

最近の仕事(らしい)

---

HTML5

すごいタグ: <video>, <audio>...
細かいタグ: <section>, <article>...
すごいform: <input type="date">, ...
絵をかく: Canvas2D, ...
WebStorage: すごいクッキー
WebSocket: ソケット
Worker: スレッド
AppCache

---

今回

絵をかく: Canvas2D, ...
WebSocket: ソケット

このふたつ

---

Canvas2D

普通の2D API

<canvas id="c">

c = document.getElementById("c")
ctx = c.getContext("2d");
ctx.fillStyle = "rgb(255,255,255)"
ctx.fillRect(0, 0, W, H)

---

Canvas2D実装

IE以外は大丈夫ぽい
IE用のcanvas実装はある(VML)

案外速い

---

WebSocket

TCPみたいな双方向通信路
最初はHTTPでhandshake

Upgrade: WebSocket
Connection: Upgrade

R.I.P.: Commet, JSONP

---

WebSocketの通信路

番犬

@socket.write("\\\\x00"+data+"\\\\xff")

文字列長を送るのもあったような

---

WebSocketの実装

わすれた
WebKitは開発中
Firefoxはpatchとかあったっけ…

今回はFlashでの実装を使ってみた

---

この2つでゲーム配信

---

クライアント

サーバから送られてくる
JSをevalするだけ

イベントは全部サーバに送る

---

ws.onmessage = function(e) {
  try {
    var canvasElem = $("canvas");
    var ctx = canvasElem.getContext("2d");
    eval(e.data);
  } catch (err) {
    output("exception: " + err);
  }
};

---

サーバ

全ロジックの処理
→チートしにくい

画像表示するJSを送りつける
→VNCとかよりは速い

---

デモ

このプレゼン自体

http://shinh.org/wsock/tc.html

---

ほげほげ

※これが回ってました

---

課題 - ネットワーク遅い

毎度コードを送りつけるのでなく
関数を送っておいてデータを
後で送る仕組みなどが必要？

明らかにWebSocket自体にも
なんらかの圧縮が欲しい

---

課題 - 認証

タブ閉じるだけでアウトなので
コネクションは結構切ってしまう

そのたびにログインは面倒

Cookieがどうなっているか
調べていないけどたぶん
Upgrade時に送られてきている?

---

課題 - 画像データ

画像データは大きいが
アイコンちゃんを動かす
必要があるので必須

画像をクライアントから
見えるところに置いて
JSで読ませて読み終わったら
使い始める?

---

課題 - live update

サーバを全く止めずに
アップデートできるとかっこいい

実際問題どうでもいいけど

---

(Generated by wsock/server/presen.rb)