Node.js + Socket.IOでチャットシステム (第3回)

さて第3回目の今回は、前回までで作ったチャットシステムを拡張しやすいように、フォルダ構成などを整えます。

おそらく現時点でのファイル構成は次のようになっていると思います。

それでは、早速準備を整えていきます。

ライブラリ配置ディレクトリの作成

現在のコードではindex.htmlに直接JavaScriptのコードを書き込んだり、jQueryの公式にリンクしたりしていますが、あまりかっこよくないので、配置を換えます。

Expressではアプリケーションのルートディレクトリにpublicというフォルダを作り、その中にスタイルシートやJavaScript用のフォルダを配置します。

今回はpublic下にcssとjsというフォルダを作ります。

次にpublic/js内にchat.jsというファイルを作り、index.htmlに書いていた以下のコードを移植します。

public/js/chat.js```js

これとあわせてjQeuryをダウンロードしてきて、同じくpublic/jsディレクトリに配置します。

さて続いてはスタイルシートです。スタイルシートはpublicディレクトリ下のcssというディレクトリに置きます。今回はそこにstyle.cssというファイルを作ります。

これまでindex.htmlに直打ちしていたcssの内容を次のように分離します。

public/css/style.css

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }

これで、現在あったコードの整理は完了しました。

—

HTMLファイルのJade化

では続いて、index.htmlをJade化して後々いじる時に手抜きが出来るようにしておきます。

JadeというのはHTMLに似たマークアップ + ちょっとした制御構造を持つもので、HTMLの記述をより少なくすることができます。

まずJadeをnode.jsで使えるようにするために、以下のコマンドを打ちます。

$ npm install --save jade

これでJadeがローカル環境にインストールされると同時にpackage.jsonのdependenciesにも追加されます。

Jadeがインストールできたら、Jadeファイルを置くディレクトリを作成します。ここはExpressの標準に従って、アプリケーション・ディレクトリ下にviewsというディレクトリを作り、そこに以下の2つのファイルを配置します。

views/index.jade

extends layout

block content
    ul#messages
    form(action="")
        input#m(autocomplete="off")
        button Send
    script(type="text/javascript", src="/socket.io/socket.io.js")
    script(type="text/javascript", src="/js/jquery-2.1.1.min.js")
    script(type="text/javascript", src="/js/chat.js")

views/layout.jade

doctype html
html
    head
        title chat example
        link(rel="stylesheet", href="/css/style.css")
    body
        block content

この2つのファイルを合わせてindex.htmlを表現しているのですが、layout.jadeはヘッダなどのファイルごとに変わらない部分を記述しており、この中には「block content」という列があります。

index.jadeには「extends layout」という最初の一列があり、これはlayout中のblock要素をこのファイルの中で記述しますという意味です。

実際index.jadeのなかでは「block content」の下に、挿入されるべき内容が記述されています。

残るはindex.jsでJadeをレンダリングして表示するようにするだけです。index.jsを次のように書き換えます。

index.js

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

// jadeを使うための処理
app.use(express.static(__dirname + '/public'));
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');

app.get('/', function(req, res) {
    // views/index.jadeをレンダリング
    res.render('index');
});

io.on('connection', function(socket) {
    console.log('a user connected');
    socket.on('disconnect', function() {
        console.log('user disconnected');
    });

    socket.on('chat message', function(msg) {
        console.log('message: ' + msg);
        io.emit('chat message', msg);
    });
});

http.listen(3000, function() {
    console.log('listening on *:3000');
});

重要なのはapp.use関数で最初にクライアントから見た見た目のルートディレクトリを指定します。ここではpublicフォルダが指定されています。

次にviewを規定するjadeファイルの場所とレンダリングするための言語を指定します。

ここではjadeファイルがviewsをフォルダに入っているのでapp.set(‘views’, __dirname + ‘/views’)と指定し、レンダリングにはJadeを使うのでapp.set(‘view engine’, ‘jade’)とします。

これで今回の作業は終了です。基本的にブラウザで見られるものは変わりませんが、だいぶコードの分離が進んで整理された気がします。

最終的なファイル構成は次のようになります。

次回はチャットの機能を少し拡充してログイン画面をつけるところまで行きたいと思います。

それでは、今回も最後までお読みいただきありがとうございました。