node.jsはじめました - KAYAC engineers' blog

はじめまして！技術部2年目のsugyanと申します。初めてtech.kayac.comに投稿します！
先日自分のブログで書いた記事が思いのほか好評だったので、これについてもう少し詳しく書いてみようと思います。
node.js+socket.ioを使ったライブコーディングwebアプリを作ってる - すぎゃーんメモ

node.jsについて

最近話題の、サーバーサイドJavaScript「node.js」。みなさん触ってみてますか？
「Google V8 JavaScript Engineによるイベント駆動の…」と、どんなものかは知っているものの実際には触っていない、という人がまだ多いような気がします。
僕も昨年の12月くらいにようやく触ってみたという程度なのですが、意外にお手軽で簡単に使えるし面白いので、「JavaScriptはまだニガテで＞＜」というヒトでも安心して始められるのではと思っています。
せっかくなのでこの機にやってみてはいかがでしょうか！

node.jsのインストール

$ wget http://nodejs.org/dist/node-v0.4.1.tar.gz
$ tar zxvf node-v0.4.1.tar.gz
$ cd node-v0.4.1
$ ./configure --prefix=<インストールしたい場所>
$ make
$ make install

超簡単ですね！PATHが通っていればもうnodeコマンドでプログラムを動かすことができちゃいます。perlやrubyなどのスクリプト言語のようにワンライナーでプログラムを実行することもできます。

$ node -v
v0.4.1
$ node -e 'console.log("Hello World!"); process.exit(0)'
Hello World!

npmでライブラリ管理

アプリ開発にはライブラリが欠かせないですね。 node.js用のライブラリはnpmを使ってインストールするのが便利です。

$ curl http://npmjs.org/install.sh | sh
$ npm install <パッケージ名>

PerlでいうCPANほど熟してはいませんが、数多くのpackageが作成されていてここで公開されています。
node.jsが日々バージョンアップを重ねているため既に動かなくなってしまっているものもありますが、メジャーなライブラリはしっかりメンテナンスされて追従しているので、安心して使えると思います。
せっかくなので幾つかオススメのライブラリを紹介します。

Socket.IO
Express
EJS

Jade

Haml

node.jsでリアルタイムWebアプリを作ろう

では早速、node.jsやsocket.ioを使ってリアルタイムなWebアプリを作ってみましょう。
上記のライブラリたちを使って、下記のようなスクリプト("hello.js"とします)を書きます。

var express = require('express');
var app     = express.createServer();

app.get('/', function(req, res) {
    res.render('index.ejs', {
        layout: false,
        locals: { name: req.param('name') || 'anonymous' }
    });
});
app.listen(3000);
console.log('Server running at http://127.0.0.1:3000/');

var io = require('socket.io');
var socket = io.listen(app);
socket.on('connection', function(client) {
    client.on('message', function(msg) {
        client.send(msg);
        client.broadcast(msg);
    });
})

次に、"views"ディレクトリを作り"views/index.ejs"というファイルを作ります。

<html>
  <head>
    <title>hello node.js!</title>
  </head>
  <body>
    I'm <span id="name"><%= name %></span>.<br />
    <form onsubmit="return send();">
      <input type="text" name="message" id="message" />
      <input type="submit" />
    </form>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">
      var socket = new io.Socket();
      socket.on('message', function(msg) {
        var div = document.createElement('div');
        div.appendChild(document.createTextNode(msg));
        document.body.appendChild(div);
      });
      socket.connect();

      function send() {
        var message = document.getElementById('message');
        socket.send(document.getElementById('name').innerText + ': ' + message.value);
        message.value = '';
        return false;
      }
    </script>
  </body>
</html>

この2つを書いたら、サーバーを動かして http://localhost:3000/ にブラウザからアクセスしてみましょう。

$ ls -lR
total 8
-rw-r--r--  1 sugyan  staff  519  2 25 02:26 hello.js
drwxr-xr-x  3 sugyan  staff  102  2 25 02:37 views

./views:
total 8
-rw-r--r--  1 sugyan  staff  882  2 25 02:18 index.ejs
$ node hello.js
Server running at http://127.0.0.1:3000/
25 Feb 02:38:34 - 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.
25 Feb 02:38:34 - socket.io ready - accepting connections

フォームに文字を入力してsubmitすると、http://localhost:3000/ を開いているすべてのページで画面が更新されます。別タブや別ブラウザなど、複数開きながら見てみると良く分かります。

↑submitした内容が別ブラウザにも即座に反映される！！

簡単な解説

サーバ側(hello.js)

クライアント側(index.ejs)

クライアント側を作ってみよう

上の例とはちょっと違いますが似たようなbroadcastサーバをこっそりと動かしています。そこに繋いで同じようなことをするサンプルをjsdo.itにあげてあります。

Socket.IO sample - jsdo.it - share JavaScript, HTML5 and CSS

これも同じように同時に繋いでいるブラウザすべてにリアルタイムに変更が反映されるので、ちょっと工夫すれば簡単にテキストチャットのアプリが作れちゃいますね！
jsdo.itでのSocket.IO使用作品 ←forkして面白いチャットアプリを作ってみませんか！？

いま、リアルタイムwebがアツい！

ライブコーディング！

そういうわけで、このnode.js, socket.ioを使って、web上でライブコーディングするアプリを現在作成中だったりします。
livecoder

エディタでの編集をリアルタイムに他のユーザの画面に反映させることができるので、これでライブコーディングを行うことができます。
web上でライブコーディングする機能は既にwonderflで実現されていますが、node.js+socket.ioで作ると少なくとも見る側はiPhoneなどでも見えるので魅力的ですね。
いずれjsdo.itにも組み込みたいと思っていますが、まだまだ開発中です。

位置情報共有！

弊社のスマートフォンアプリNakamap(ナカマップ)。
自分で更新操作をすることなく、同じグループにいる仲間の位置情報やチャットがどんどんリアルタイムに反映されていきます。

オンライン説明会！

本日2/25(金) 20:00から行われる、弊社のオンライン説明会もリアルタイム技術を駆使しています！
新卒採用企画オンライン会社説明会 2012 | 面白法人カヤック

ぜひ見に来てみて下さい！

カヤックではリアルタイム技術が大好きな技術者も募集しています！