html5 Archive

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時間程度で動かすとこまではできました。

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

お久しぶりです。

僕がインターネットのない生活を送っている間に、
待望のFirefox3.6がリリースされましたね！

これでFirefoxがターゲットのサイトなら、FireAPIを使い放題です！！
（今まではβ版だったので、開発者しか使ってませんでしたからね・・・）

というわけで、以下の2作品をFile API対応させときました。

ダイアログを使うか、選択欄にdrag&dropすればローカルファイルを指定できます。

錯覚エディター by HTML5 Canvas
canvasで画像拡大鏡

何かたまにおかしくなりますが、サンプルということで許して下さい^^
あと、巨大ファイルや画像じゃないファイルを指定すると壊れますのでご注意を。

File API、面白いので皆さん是非試してみて下さい！

※ 以前File APIの簡単な使い方をLTしたのでよろしければどうぞ。

引き続きHTML5 File APIにはまっています。
（W3C File APIって言った方が良いのかな？）

というわけで、こんなん作ってみました。

Comparer.js

ファイルを2個選択した状態でドラッグ＆ドロップすれば、
MD5を比較して同一ファイルかどうかを判定します。

なんと、こんな簡単に複数のファイルも処理できちゃうんですねー！

Firefox 3.6でしか動かないのが悔しい・・・。
はやく他のブラウザも実装しないかなぁ。

ラジオボタンでハッシュ方式が選べるようになりました。
（偉いのはライブラリの作者さんで、僕は呼んでるだけですが。）

MD5er.js

やばい、File API楽しい。

font dragrに興味津々で、僕もなんか作ってみたいなーと思ってたら、
Mozillaがわかりやすいサンプルを公開してくれた。

というわけで、早速（？）解説記事を参考に真似してみた。

MD5er.js

中央のボックスにファイルをドラッグ＆ドロップすると、
そのファイルのMD5値を表示します。

動くのは、今のところFirefox 3.6のみです。
※ Mac OS X 10.6 Snow Leopardで確認

特に目新しくはないと思いますが、
サーバサイドに情報を送らずに計算できるので、
お手軽に使えてプライバシー的にも安心かもしれません。

以上、思ったより手軽にできたので皆さんも是非。
（ソースはご自由にどうぞ。try&errorで適当にやったので仕様的に正しいかわかりませんが。）
また何か思いついたら作ってみたいと思います。