Born Neet

今日昼間、ふとメールチェックしていると、
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の勉強も兼ねてソースも読もうっと）

なんと2月初投稿…。
最近はわりとコンスタントにポストできてたのになぁ。

今日はiPhoneの話題です。

iPhoneで辞書を使いたい、で、やっぱ英辞郎のデータがいいよね、
ってこと探して2つぐらいアプリを見つけたんだけど、どっちも1000円して手を出しづらい。

どうしようかなぁと思ってたら、PDIC形式の辞書データを使えるpdicoなるアプリを発見。
既にPC版の英辞郎を持ってる僕としては「これは！」って感じだったので、
早速使ってみました。

辞書データの使い回しがどこまで許されるのかよくわからんけど、
PCの方をアンインストールしちゃえばなんの問題もないでしょう。
※ どうせ最近macしか使ってないからPC版の英辞郎起動すらしてないし。

というわけで以下手順。

辞書ファイルの準備

まずは、英辞郎をインストール。
CDを入れて自動再生に任せるだけですね。
ちなみに使ったのは大学時代に買った第3版です。

Personal Dictionary for EIJIRO IIIを起動。
Tool→辞書の変換。
C:\Program Files\PDIC_for_EIJIRO_III内のDICファイルを全て選択。
デスクトップにeijiro.dicとかの名前で保存。
（途中なんかダイアログが出てくるけどよくわからんので「以降自動処理」で。）

※ pdicoは複数の辞書ファイルを同時に使えるので、上記手順は必須じゃないです。
　また、その場合インストールしなくても、D:\EIJIROとかのデータが使えます。

pdicoへの転送

まず、PCとiPhoneを同じ無線LANにつなぎましょう。

pdicoを起動して設定を開きます。

辞書を追加から、 ファイル名は上で作った「eijiro.dic」を指定して次へ。

ブラウザからiPhoneのIPアドレス:8080にアクセス。
（アクセス先はpdico上に表示されています。）

辞書ファイルを選んで送信。
※ Windows Defenderが邪魔してきたら止めちゃいましょう。
※ 途中で電源に接続すると失敗するかもしれません。

まとめ

はい、これだけでiPhone上で英辞郎をインクリメンタル検索できる環境が整っちゃいます。
素晴らしいアプリですね！
検索もかなりサクサク動いてストレスはありません。

あとは検索履歴と部分一致（今は前方一致）、大/小文字無視とかが
できれば言う事なしですね。

PCの英辞郎を既に持ってる人は是非使ってみて下さい。

今週は仕事とドラクエ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>

HTML5の仕様も、コミュニティの皆さんも動きが速すぎてすっかり置いてかれています。
とはいえ、HTML5は勉強しておいて絶対損はないはずなので、
マイペースで頑張りたいと思います。。

そんな中、今日、
噂のnode.websocket.jsでサーバサイドJSとHTML5 WebSocketを体験してみたの巻 - ダウンロードたけし（寅年）の日記
Real time online activity monitor example with node.js and WebSocket @ Bamboo Blog
なんていう素敵な記事を見つけました。
Apacheは好きだけどPythonはちょっと・・・な僕でもこれならできるはず！と
初めてのWeb Socketsに挑戦してみました。

というわけで、改めてお勉強。

まずはAPI仕様。（プロトコルは長いし英語なのでまた今度）
W3C - 『The Web Sockets API』日本語訳 - HTML5.JP
うん、これだけじゃわからんですね^^

デモとか見て勉強しよう。

こてさきAjax:apache+mod_pywebsocetを用いたliteなwebsocketsチャットサンプル - livedoor Blog（ブログ）
pywebsocketの例。サーバサイドの処理の説明がわかりやすいです。

こてさきAjax:apache + web sockets (pywebsocket) tips #0 - livedoor Blog（ブログ）
こてさきAjax:lite websocket チャットサンプルを更新しました。 - livedoor Blog（ブログ）
引き続きpywebsocket。
Origin checkとHeartBeatがキーワードというかいつかハマリそうな予感。
覚えておこう。

こてさきAjax:websocketでは、encodeURIComponet()は使うべきではない - livedoor Blog（ブログ）
データはUTF-8で送受信するので、encodeURI()しなくても良いと、ふむふむ。

なんとなくイメージが湧いてきた。
プレゼン資料とかも漁ってみる。
（やっぱシーケンスがあるとわかりやすいですね！）

WebSocketでリアルタイムWeb
かなり噛み砕いた説明でわかりやすいです。

100113_opera webkit勉強会(websocket)
こてさきAjax:websocket関連の説明png - livedoor Blog（ブログ）
図がいっぱい。素敵。

【特集】詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 (10) Web Sockets | エンタープライズ | マイコミジャーナル
Kaazingを使ったデモ。初心者を切り捨てない感じで助かります。

そろそろ良いかな…よし、やってみよう！

node.jsのインストール

node.jsのサイトからnode-v0.1.26.tar.gzをダウンロード。

cd node-v0.1.26/
./configure —prefix=/Users/t/node.js/
※ prefix指定はできない？

./configure
※ 諦めてそのままインストールする。

make
sudo make install

which node
/usr/local/bin/node

何事もなく終了。
※ ホントはユーザ権限でインストールしたかったけど・・・

Hello, node.js

とりあえず、指定ディレクトリをlsして返すプログラムを書いてみました。
queryから取ろうと思ったけど、うまく動かないメソッドとかもあったのでやめときました。

vi ls.js

var sys = require('sys');

var filename = process.ARGV[2];

var http = require("http");
http.createServer(function(req, res){
	res.sendHeader(200,{"Content-Type": "text/html; charset=UTF-8"});
	sys.exec('ls -alF ' + filename).addCallback(function _exec(stdout, stderr) {
		res.sendBody(stdout);
		res.finish();
	});  
}).listen(8000);
:wq

node ls.js .

[別ターミナルで]
telnet localhost 8000
GET / HTTP/1.1
host:localhost

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
Transfer-Encoding: chunked

1cc
total 80
drwxr-xr-x   9 t  staff   306  1 25 00:17 ./
drwxr-xr-x+ 47 t  staff  1598  1 24 23:27 ../
-rw-r--r--@  1 t  staff  6148  1 25 00:17 .DS_Store
-rwxr-xr-x@  1 t  staff   304  1 24 23:42 example.js*
-rwxr-xr-x@  1 t  staff   329  1 24 23:49 log.txt*
-rwxr-xr-x@  1 t  staff   334  1 25 00:17 ls.js*
drwxr-xr-x@ 20 t  staff   680  1 24 23:35 node-v0.1.26/
drwxr-xr-x   5 t  staff   170  1 25 00:17 old/
-rwxr-xr-x@  1 t  staff   601  1 24 23:50 tail.js*
こんな感じで返ってきます。

Hello, Web Sockets

ようやく本題・・・ですが眠いので既存サンプルを動かすだけにしときます。

git clone git://github.com/Guille/node.websocket.js.git
node.websocket.js at masterをチェックアウト

cd node.websocket.js

cp test/test.html ~/apache/htdocs/
apache上にクライアントを配置 

vi ~/apache/htdocs/test.html
var webSocket = new WebSocket('ws://localhost:8000/time');
ポートを8000に変更（apacheと競合してたので）

node runserver.js --port="8000"
Web Socketsサーバを起動

apachectl start
apacheを起動（8080を使ってます）

Google Chrome 4+からlocalhost:8080/test.htmlにアクセスすると、
時刻がリアルタイムで更新されるサンプルが表示されます。
（地味ですが確かにpullではなくpushで実現されています。）

まとめ

思っていたより手軽に触れそうです。
僕程度のスキルでも2時間程度で動かすとこまではできました。

さて、なんか面白いことできないかなー。

Perlの勉強の為、久々に人工無脳を作ってみました。

説教っぽく聞こえなくもない言葉を30分に1回つぶやきます。

迷言ボット (bornneet) on Twitter

興味のある方はfollowしてみて下さい。
精度は全然ですが、まぐれで良いこというかもしれませんよ^^


最初は、以下の記事を参考にNet::Twitterでやろうとしたのですが、
Macにうまくインストールできなかったので、断念。
Twitter ボットの作り方 Perl 編 (1) – OTCHY.NET

cpanをupdate（cpan > install Bundle::CPAN）とかやってみるも、状況変わらず。
（テクノロ散策: PerlでNet::Twitterがインストールできない時はcpanをアップデート）

xreaにはNet::Twitterが入ってるので、使いたかったんですが、
仕方なく生Perlで書くことにしました。

参考にしたのはこちらの3記事。
404 Blog Not Found:API - Twitterfeed から Hatena::Bookmark Web Hookへ
nDiki: Net::Twitter - Net::OAuth を使って Twitter からフィードを取得 (2009-12-30)
LWP::UserAgentで基本認証とPOSTを - 徒書

最後の最後、xreaでの動作確認でさらにはまりました。
Storableに「Byte order is not compatible at blib/lib/Storable.pm」と言われてもうお手上げ。

またまた先人の力をお借りして何とか解決しました。
（storeを使わず、nstoreを使用）
404 Blog Not Found:perl - 勝手に添削 - Storable
Perl 5.6.2→5.8.7移行メモ

いやぁ、相変わらず、Perlには慣れませんねぇ…orz

※ おまけでxrea無料版ではcronが動かせないという罠も。（何を今さら）
　 というわけでcore serverのアカウントで稼働させてます。