2011.6.14追記
デモサイトを追加しました。
2011.6.6追記
node.jsの最新版で動作するようエントリを修正しました。
2011.5.25追記
GitHubにアップしました。詳しくは以下のエントリをご覧ください。
はじめに
このエントリでは、node.js + WebSocket(socket.io) + CSSSlide.jsを使って、リアルタイムでプレゼンテーションのスライドを共有するサンプルプログラムを作ってみました。
WebSocketはWeb上でサーバとクライアントとの相互通信を可能にする今後注目の技術です。WebSocketで、サーバからクライアントにデータをPush(配信)できるようになります。
リアルタイムのスライド共有
リアルタイムでプレゼンテーションのスライドを共有するとはどういうことか。たとえば、プレゼンの際に、聴講者に指定のURLをブラウザで表示してもらいます。その状態で、プレゼンターのPCからサーバを経由して、聴講者のブラウザに対してイベントを発行することで、聴講者が見ているスライドをリアルタイムで切り替えることができます。*1
CSSSlide.jsについて
今回、プレゼンテーションツールにはCSSSlide.jsというライブラリを使用しています。CSSSlide.jsはブラウザ上でプレゼンするときに便利なライブラリで、HTMLでプレゼン資料が作れて、キー操作やマウスクリックでスライドの切り替えができます。
必要なソフトウェアと動作確認したバージョン
- node.js v0.4.8
- express 2.3.11
- ejs 0.4.2
- socket.io 0.6.18
サンプルプログラムを作る前の準備
1. 上記に記載している必要なソフトウェアをインストールしてください。
- Mac OS X Snow Leopardにnode.jsをインストールする - 大人になったら肺呼吸
- node.js向けフレームワークexpressでアプリケーションのひな形をつくる - 大人になったら肺呼吸
npmをインストールした状態で、以下のコマンドを実行して必要なライブラリをインストールします。
sudo npm install express ejs socket.io -g
2. expressコマンドでアプリケーションのひな形を作成します。
express -t ejs SlideShare
コマンドを実行すると、以下のようなディレクトリが作成されます。
SlideShare/
├── app.js
├── logs
├── package.json
├── pids
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
└── views
├── index.ejs
└── layout.ejs3. CSSslide - CSS と JavaScript で動くウェブプレゼンツール 
4. ダウンロードしたファイルを以下のディレクトリに格納します。
├── public │ ├── images │ ├── javascripts │ │ └── CSSslide.js --- ★ │ └── stylesheets │ └── CSSslide.css --- ★
スライド共有するサンプルプログラム
layout.ejs
layout.ejsはスタイルシートの読み込み先を/stylesheets/CSSslide.cssに変更します。
<link rel='stylesheet' href='/stylesheets/CSSslide.css' />
index.ejs
index.ejsでは、socket.ioを読み込み、サーバに対して送信する処理を行っています。socket.connect();がサーバに接続しているところです。
サーバに送信するタイミングですが、キーイベントを拾って、LEFTキーとRIGHTキーが押されたときだけ、サーバに対してページ番号を送信しています。
index.ejsは日本語が含まれているので、UTF-8で保存してください。
<script type="text/javascript" src="/javascripts/CSSslide.js"></script> <div> <h1><%= title %></h1> <p>Welcome to <%= title %></p> </div> <div> <h2>スライド1</h2> <p>ダミーテキスト</p> </div> <div> <h2>スライド2</h2> <p>ダミーテキスト</p> </div> <script type="text/javascript" src="/socket.io/socket.io.js"></script> <script> var socket = new io.Socket(); // サーバからメッセージを受信したときの処理 socket.on('message', function(msg) { // CSSSlideのメソッドを呼び出して、指定されたページに移動する CSSslide.move(msg); }); // サーバに接続する socket.connect(); // キーが押された場合の処理 document.addEventListener("keydown", function(event) { // Right if (event.keyCode === 39) { // サーバに対して次ページ番号を送信する socket.send(CSSslide.nowPage + 1); } // Left else if(event.keyCode === 37) { // サーバに対して前ページ番号を送信する socket.send(CSSslide.nowPage - 1); } }, false); </script>
app.js
自動生成されたapp.jsの末尾に以下のコードを追加します。
サーバサイドは単純です。クライアントから送信されたメッセージを受信したら、socketにつながっているクライアントすべてにclient.broadcast(msg);でメッセージを送信しています。
var socket = require('socket.io').listen(app); // クライアントが接続してきたときの処理 socket.on('connection', function(client) { console.log(client.sessionId + ' connected'); // メッセージを受けたときの処理 client.on('message', function(msg) { console.log(client.sessionId + "'s send " + msg); // クライアントにメッセージを送信する console.log("クライアントにメッセージを送信しました。"); client.broadcast(msg); }); // クライアントが切断したときの処理 client.on('disconnect', function(){ console.log(client.sessionId + ' disconnected'); }); })
2011.06.06追記
require("express");がError: Cannot find module 'express'のエラーになる場合は、require関数の前に以下のコードを記述してください。
require.paths.push('/usr/local/lib/node_modules');
サンプルプログラムを動かす
1. SlideShareフォルダに移動して、以下のコマンドを実行し、サーバプログラムを起動します。
node app.js >17 Apr 23:12:10 - Your node instance does not have root privileges. This means that the flash XML policy file will be served inline instead of on port 843. This will slow down initial connections slightly. >17 Apr 23:12:10 - socket.io ready - accepting connections
2. ブラウザでhttp://127.0.0.1:3000/にアクセスします。
サーバのログでクライアントが接続してきたことが確認できます。
17 Apr 23:14:51 - socket.io ready - accepting connections 17 Apr 23:17:02 - Initializing client with transport "websocket" 17 Apr 23:17:02 - Client 5793034215457737 connected 5793034215457737 connected
3. WebSocke対応のブラウザ*2を複数立ち上げ、http://127.0.0.1:3000/にアクセスします。片方のブラウザでLEFTキーやRIGHTキーを押すと、もう一方のブラウザのスライドがリアルタイムで切り替わります。
