html5 Archive

昨日社内でHTML(一応5)のプチ勉強会をやったので、資料を一応公開。

当日作った資料＆超入門ということでかなり省略している部分や不正確なところもありますのでご了承下さい。

いやー社内勉強会の資料をブログで公開できるとか超幸せ！

HTML5 超入門

おまけ

今回HTMLのプレゼンツールを使ってみようと思い、一番良さげだった、deck.jsを使って見ました。
勉強会中ローカルのサーバにアップして、資料からソースをコピペしてもらうようにしたので、間違いがあった時、リアルタイムで直して更新とかできたのが便利でした。
ただ、資料作成という観点ではやはりkeynoteとかの方が断然早いっす。
（HTMLで書くのは時間かかる…）

適材適所ですね。

うちのOS X10.6でも無事動いたmod_websocketですが、
証明書の設定が面倒でwss(SSL)を試してみませんでした。

実際始めてしまえばそんなに面倒じゃないんですが、
やるまでがね…。

ってわけで、手順を残しておきますので、ご自由にどうぞ。

なお、参考にしたのは以下のサイトです。
Webサーバ「lighttpd」でSSLを使うには − ＠IT
今日も明日もググったー: lighttpd ssl
Rails + lighttpd + SSL - プログラマ 福重 伸太朗 〜基本へ帰ろう〜

作業ディレクトリへ
cd lighty/lighttpd-1.4.26


lighttpdをSSL ONでコンパイルし直し
./configure --prefix=/Users/t/lighty/ --with-openssl
(network-opensslがenableの方に表示されればOK)
make
make install
cd ..


lighttpdの設定
vi etc/lighttpd/lighttpd.conf
 $SERVER["socket"] == ":8443" {
       ssl.engine                  = "enable"
       ssl.pemfile                 = "/Users/t/lighty/etc/lighttpd/ssl/server.pem"
}
:wq
※ ここではサボってますが、広く公開する場合等（っていうか原則）は、
　ドキュメントルートを分けましょう。

オレオレ証明書の作成
mkdir etc/lighttpd/ssl/
openssl req -new -x509 -keyout server.pem -out server.pem 
Generating a 1024 bit RSA private key
.........++++++
.............................++++++
writing new private key to 'server.pem'
Enter PEM pass phrase:
Verifying - Enter PEM pass phrase:
Verify failure
Enter PEM pass phrase:****
Verifying - Enter PEM pass phrase:****
-----
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:JP
State or Province Name (full name) [Some-State]:Tokyo
Locality Name (eg, city) []:Koto
Organization Name (eg, company) [Internet Widgits Pty Ltd]:Born Neet
Organizational Unit Name (eg, section) []:    
Common Name (eg, YOUR name) []:localhost
Email Address []:

ls
server.pem
cd ~/lighty


起動
lighttpd -f etc/lighttpd/lighttpd.conf
Enter PEM pass phrase: ****


HTTPSのテスト（ブラウザから）
https://localhost:8443/
test
（証明書の警告は無視）


チャットサンプル(wss版）の準備
cp -p srv/www/htdocs/ws_chat.html srv/www/htdocs/wss_chat.html 
vi srv/www/htdocs/wss_chat.html 
var ws = new WebSocket("wss://127.0.0.1:8443/chat");
:wq


chatサーバの起動
mod_websocket/src/sample/ws_chat 9001
ポップアップが出るので許可する


Chatのテスト（Chromeから）
http://localhost:8080/wss_chat.html
https://localhost:8443/wss_chat.html
（wss通信だけじゃなくwss_chat.html取得の通信も暗号化すべき）
動いた！！

ん…wssってこれでいいんだっけ？

何か間違ってる気がするので突っ込みに期待…
…じゃなく後で勉強しとこう。

nori2048さんに早速突っ込みをいただきました。（2010/2/20 00:10）
コメント欄も合わせてご覧下さい。
（記事にも追記しています。）

先日失敗したmod_websocket on snow leopardですが、
作者のnori0428さんが早くも修正版をリリースしてくださいました。

動かないと文句を付けた手前、早く試してみないと…と思ってたんですが、
今週は忙しくて週末になってしまいました。
というわけで、リベンジです。
（僕は何もしてませんが）

結果は…
…無事、動きました！！

Mac OS 10.6の人は以下の手順で使えると思いますよー。
（wssはスルーしてますが）

作業ディレクトリ
mdkir lighty
cd lighty

mod_websocketのダウンロード
git clone git://github.com/nori0428/mod_websocket.git

lighttpdのダウンロード
curl -O http://download.lighttpd.net/lighttpd/releases-1.4.x/lighttpd-1.4.26.tar.gz

とりあえず、makeに必須のライブラリをインストール
sudo port install autoconf
sudo port install Automake
sudo port install pcre
zlibとbzip2はデフォルトで入ってるっぽい。

そしてmod_websocketへ
tar xf lighttpd-1.4.26.tar.gz
cd lighttpd-1.4.26

パッチ当て
patch -p1 < ../mod_websocket/src/mod_websocket.patch

cp ../mod_websocket/src/mod_websocket.c src/


ホームディレクトリ内にインストール
./autogen.sh
./configure --prefix=/Users/t/lighty/
make
make install

確認（ファイルがあればOK）
ls -l ../lib/mod_websocket.*
-rwxr-xr-x  1 t  staff   1022  2 19 01:58 ../lib/mod_websocket.la
-rwxr-xr-x  1 t  staff  26016  2 19 01:58 ../lib/mod_websocket.so

パス追加
vi ~/.profile
export PATH=/Users/t/lighty/sbin:$PATH
:wq
source ~/.profile

lighttpdの設定
mkdir -p ../etc/lighttpd
cp -p doc/lighttpd.conf ../etc/lighttpd/
cd ..
vi etc/lighttpd/lighttpd.conf
server.modules              = ( "mod_websocket", 
server.port                = 8080
server.document-root        = "/Users/t/lighty/srv/www/htdocs/"
server.errorlog             = "/Users/t/lighty/var/log/lighttpd/error.log"
accesslog.filename          = "/Users/t/lighty/var/log/lighttpd/access.log"
websocket.server = (
      "/echo" => ( "host" => "127.0.0.1", "port" => 9000 ),
      "/chat" => ( "host" => "127.0.0.1", "port" => 9001 )
)
:wq

ディスクトリとテストコンテンツの作成
mkdir -p srv/www/htdocs
mkdir -p var/log/lighttpd
mkdir -p var/run/lighttpd
echo test > srv/www/htdocs/index.html

起動（confファイルを指定しないと何かエラーになる）
lighttpd -t -f etc/lighttpd/lighttpd.conf
Syntax OK
lighttpd -f etc/lighttpd/lighttpd.conf

Webサーバのテスト（ブラウザから）
http://localhost:8080/
test

チャットサンプルの準備
cp mod_websocket/html/ws_chat.html srv/www/htdocs/
vi srv/www/htdocs/ws_chat.html 
var ws = new WebSocket("ws://127.0.0.1:8080/chat");
:wq

libevent（ソースからインストールし直さないとダメっぽい）
sudo port uninstall libevent
curl -O http://www.monkey.org/~provos/libevent-1.4.13-stable.tar.gz
tar xf libevent-1.4.13-stable.tar.gz 
cd libevent-1.4.13-stable
make
sudo make install

サンプルのmake
cd ..
cd mod_websocket/src/sample
make

chatサーバの起動
cd ~/lighty
mod_websocket/src/sample/ws_chat 9001
ポップアップが出るので 「許可」

Chatのテスト（Chromeから）
http://localhost:8080/ws_chat.html
動いた！！

wss(ssl)を有効化するのと、自分でサンプル作ってみるのが宿題。
あと、ソースも読んでみないと。

よーし、弄り倒すぞー。

今日昼間、ふとメールチェックしていると、
html5-developers-jpに素敵な投稿がありました。

「lighttpdでwebsocketできるモジュール作ったよ！」

これは試してみるしかないでしょう、と今日はこのことしか考えてませんでした。
が、残業やらなんやらで気づけばこの時間です。
まぁ仕事なんで仕方ない。

愚痴はこのぐらいにして、早速やってみます。

基本的にはINSTALL at master from nori0428's mod_websocket - GitHubの通りのことをやっただけです。
なんかうまく行きませんでしたが、誰かの役に立つかもしれないので、一応ログを残しておきます。

インストール

準備
mdkir lighty
cd lighty

mod_websocketのダウンロード
git clone git://github.com/nori0428/mod_websocket.git

lighttpdのダウンロード
curl -O http://download.lighttpd.net/lighttpd/releases-1.4.x/lighttpd-1.4.26.tar.gz
tar xf lighttpd-1.4.26.tar.gz

cd lighttpd-1.4.26

パッチ当て（実は初！）
patch -p1 < ../mod_websocket/src/mod_websocket.patch

cp ../mod_websocket/src/mod_websocket.c src/

./autogen.sh
configure.ac:1: error: possibly undefined macro: dnl
      If this token and others are legitimate, please use m4_pattern_allow.
      See the Autoconf documentation.
configure.ac:71: error: possibly undefined macro: AC_DEFINE
→エラー…

sudo port install autoconf

aclocal.m4:14: error: this file was generated for autoconf 2.61.
You have another version of autoconf.  If you want to use that,
you should regenerate the build system entirely.
→まだエラー

sudo port install Automake
→行けた

./configure --prefix=/Users/t/lighty/
checking for pcre-config... no
configure: error: pcre-config not found, install the pcre-devel package or build with --without-pcre
→またエラー

sudo port install pcre
→ようやく行けた

make
Undefined symbols:
  "_network_write_chunkqueue", referenced from:
      _websocket_write_request in mod_websocket.o
→もうやになってきた…

sudo port install gcc45
※ gccいっぱいありすぎ→MacPortsからインストールしたgccについて混乱中 - hnwの日記
※ 4時間かかるらしいので中断

んーわからん。
lighty単体をインストールしてみる
cd ..
rm -rf lighttpd-1.4.26
tar -xf lighttpd-1.4.26.tar.gz
cd lighttpd-1.4.26
./configure --prefix=/Users/t/lighty/
make
make install
→普通にできた。

もっかい1から
cd lighttpd-1.4.26
　：
　：
駄目だこりゃ。　

うーん、今日のところは寝るとしよう。
（gccのせいかもしれないので、アップデートだけ流しておこう）
→gccのアップデートは意味なかったです。[2010/2/17 8:00]

もっとじっくり触りたいのに、時間が足りないなー。
とりあえず、今週末の遊び道具はこいつで決まりかな。
（Cの勉強も兼ねてソースも読もうっと）

今週は仕事とドラクエVIが忙しくて全然勉強の時間がとれませんでした。
（モンスターが仲間に入らないのと難易度が下がってるのにはがっかりしましたが、やっぱり6はいいですね。）
というわけで週末、しかも2日目に慌ててやってみます。

触るのは、引き続きWeb Socket(s)。
前回のでAPI（クライアントサイド。つまりJS。sがつく方）は何となくイメージできたかなぁという感じ。
しかし、プロトコル（Web Socket protocol。こっちはsがつかない）はイマイチ理解できてません。

こういう時はやっぱり手を動かすのが一番ということでとりあえず何か作ってみます。
※ ほんとはパケットキャプチャ取りたかったんですがうまくいかなかったので断念

それでは始めましょう。

まずは参考記事探しから。

Web Socket ProtocolのRFC和訳 - YAMAGUCHI::weblog
ないと思ってたプロトコルの日本語訳がありました。感謝です。
ただこの仕様短いのはいいんだけど、細かい説明が全然ない・・・。
websoket-protcol:ヘッダって何の意味があるんだー。
（node.websokcet.jsではまだ未実装って書いてあるし）

InfoQ: HTML 5 Web Sockets vs. Comet and Ajax
仕様のこととかは詳しく書いてませんがおもしろかったです。

PubSubHubbubとWebSocketsとクライアントサイドのjavascript « ku
こちらも他の実現方法との比較。読みやすいです。

Html5 Web Applications
Html5, Web Applications 2
HTML5のWebアプリ関連仕様をサクっとまとめた素晴らしいプレゼンです。

[追記（2010/1/31 14:15）]
おっと、忘れてた。
HTTP/1.1 から TLS へのアップグレード
Upgrade
HTTPのUpgradeについて。さっぱりわからん。
[/追記]

やっぱまだ日本語のソースは少ないですねぇ。

ネットサーフィンはこれぐらいにして、
うーん・・・Cometアプリの代表例ホワイトボードでも作ってみますか。

というわけで、できたのがこちら。

ソースはいつも通りご自由に。
説明はコメントで。そんな難しいことはやってません。
（セキュリティ0なので間違っても公開しないで下さいね）



うーん、一応思った通りに動いたけど、サーバ側でsetIntervalやるのは綺麗じゃないなー。
このコード量、しかもJSだけでこういうアプリが作れるのはちょっとした衝撃でした。

サーバ（node.websocket.js/modules/wb.js）

var Module = this.Module = function(){
	// グローバルにしとくと楽
	sys = require('sys');
};

Module.prototype.onData = function(data, connection) {
	// 初期化
	if (data == 'start'){
	
		// 定期的にファイルをcatして変わってたらクライアントに送る
		this.interval = setInterval(function(){
			var self = this;
			sys.exec('cat temp').addCallback(function(stdout, stderr) {
				if (self.temp != stdout) {
					connection.send(stdout);
				}
				self.temp = stdout;
			});
		}, 100);
		
	} 
	// データを受信したらtempファイルに書き込む（超脆弱！！）
	else {
		sys.exec('echo "' + data +'" > temp');
	}
};

// 後始末
Module.prototype.onDisconnect = function(connection){
	clearInterval(this.interval);
};

クライアント（apache/htdocls/wb.html）

<!doctype html>
<html>
<head>
	<title>whiteboard demo</title>
	<style>
canvas {
	border: 1px solid black;
	position: relative;
}
	</style>
</head>
<body>

<h1>whiteboard demo</h1>

<canvas width="300" height="200"></canvas><br />
<input type="button" value="clear" />

<script>

// node.websocket.js/modules/wb.jsに繋ぐ
var webSocket = new WebSocket('ws://localhost:8000/wb');

/* お絵かき処理ここから */

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');

var isDraw = false;
var x, y;

canvas.addEventListener('mousedown', function(e) {
	ctx.moveTo(x, y);
	isDraw = true;
}, 'false');

canvas.addEventListener('mousemove', function(e) {
	x = e.layerX;
	y = e.layerY;
	if (isDraw) {
		ctx.lineTo(x, y);	
		ctx.stroke();
	}
}, 'false');

canvas.addEventListener('mouseup', function(e) {
	isDraw = false;
	webSocket.send(canvas.toDataURL());
}, 'false');

/* お絵かき処理ここまで */

// サーバ側に初期化を知らせる
webSocket.onopen = function(event){
	webSocket.send('start');
};

// データ受信時は問答無用でcanvasを更新
webSocket.onmessage = function(event){
	var img = new Image();
	img.onload = function() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		ctx.drawImage(img, 0, 0);
	};
	img.src = event.data;
};

// 白紙に戻す
document.querySelector('input[value=clear]').addEventListener('click', function() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	webSocket.send(canvas.toDataURL());
}, 'false');

</script>
</body>
</html>