忍者ブログ

Home > html5

html5 Archive

[PR]

  • 2017-06-28 (Wed)
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

  • Comments (Close):
  • TrackBack (Close):

社内でやったHTML(5?)プチ勉強会の資料

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

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

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

HTML5 超入門

おまけ

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

適材適所ですね。

PR

mod_websocket for lighttpdをMacで動かしてみる3(ssl,wss)

うちの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 for lighttpdをMacで動かしてみる2(無事成功!)

先日失敗した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)を有効化するのと、自分でサンプル作ってみるのが宿題。
あと、ソースも読んでみないと。

よーし、弄り倒すぞー。

mod_websocket for lighttpdをMacで動かそうとしたけど、失敗した

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

node.websocket.jsで超適当ホワイトボードアプリ

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

Home > html5

Search
Loading
Feeds
Links
スポンサードリンク
Ad
デル株式会社
Ad

Page Top