LIGデザイナー採用
LIGデザイナー採用
2014.12.09

チャットツールをGitとNode.jsとHerokuでDIYする方法〜画面作成編〜

エリカ

こんにちは。ディレクターのエリカです。

ふと「誰かとチャットしたい!」って思うこと、定期的にありますよね。でも、手頃なチャットツールが見つからない・・・
そんなときは、DIYをしてみるのはいかがでしょうか。

そのための手順について、前回の「環境構築編」に続き、今回は「画面作成編」として解説をしていきます。

画面作成のために必要なもの

主に使用するものは以下の3つです。

  • Node.js
  • express
  • socket.io

express4とsocket.ioを使ってチャットツールを作成します。

ExpressGeneratorのインストール

express-generatorをインストールしましょう。

前回の記事を実行していれば、npmコマンドが利用できるようになっていると思います。

npm install express-generator -g

expressを使ってアプリの雛形を作成します。

express -e myapp

※-e オプションで初期テンプレートエンジンをejsにしています。
項目は基本的に全てOKで問題ありません。

cd myapp

必要なモジュールをインストールします。

npm install

socket.ioのインストール

さらに追加でsocket.ioをインストールしましょう。

npm install socket.io --save

--saveオプションでpackage.jsonにインストール情報を追記しておきます。
こうしておくと、あとで

npm install

した際に、依存モジュールをインストールしてくれるようになります。

package.jsonはこのようになっています。

{
  "name": "myapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.8.1",
    "cookie-parser": "~1.3.3",
    "debug": "~2.0.0",
    "ejs": "~0.8.5",
    "express": "~4.9.0",
    "morgan": "~1.3.0",
    "serve-favicon": "~2.1.3",
    "socket.io": "^1.2.0"
  }
}

ここからは、「socket.io」のサイトを参考にして進めます。

現在のバージョンですと、ドキュメントそのままでは動作しませんでした。
エンドポイントでsocket.ioがlistenできる状態にしてあげる必要があります。

少し変更しましょう。
まずはio.jsというファイルを作成します。

io.js

var socketio = require('socket.io');

function io(server) {
    var io = socketio.listen(server);
    
    io.on('connection', function (socket) {
        socket.emit('news', { hello: 'world' });
        socket.on('my other event', function (data) {
            console.log(data);
        });
    });
}

module.exports = io;

これをエンドポイントに追加します。

bin/www

#!/usr/bin/env node
var debug = require('debug')('myapp');
var app = require('../app');
var io = require('../io');

app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function() {
  debug('Express server listening on port ' + server.address().port);
});
io(server);

次に、サンプルのスクリプトをindex.ejsのbodyの閉じタグ直前に記述します。

views/index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io.connect('http://localhost');
        socket.on('news', function (data) {
            console.log(data);
        socket.emit('my other event', { my: 'data' });
        });
    </script>
  </body>
</html>
npm start

これで
http://localhost:3000/
にアクセスすると、ブラウザのconsoleに{hello:'world'}オブジェクトが、node.jsのコンソールに{my: 'data'}オブジェクトがそれぞれロギングされます。

下準備は完了です。

チャットアプリケーションのコーディング

それでは、チャットアプリを作成していきます。

こちらを参考に、views/index.ejsの中身を下記に置き換えましょう。

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { 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; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    
    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
    var socket = io();
    $('form').submit(function(){
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
    });
    socket.on('chat message', function(msg){
        $('#messages').append($('<li>').text(msg));
    });
    </script>
  </body>
</html>

あわせてio.jsの中身も下記に変更します。

var socketio = require('socket.io');

function io(server) {
    var io = socketio.listen(server);
    
    io.on('connection', function (socket) {
     socket.on('chat message', function(msg){
    io.emit('chat message', msg);
	  });
    });
}

module.exports = io;

もう一度、

npm start

して、 http://localhost:3000/ にアクセスします。

ページ下部のテキストフィールドに文章を入力し、Sendボタンを押してみてください。画面上部に入力内容が表示されていきます。

次に、複数ブラウザを起動し、それぞれこちら(http://localhost:3000/)にアクセスします。

あるブラウザで文章を入力しSendボタンを押下すると、それが全てのブラウザに表示されます。

これで、チャットアプリが完成しました。

まとめ

サンプルコードだけで簡単にチャットツールが作成できましたね。

これだけでも、例えば前回お伝えしたHerokuにデプロイすれば、そのURLにアクセスした人同士でチャットができるようになります。

次は、チャット相手がいないという場合のために、チャット相手を人工的に作ってみたいと思います。

おつかれさまでした。

 

【Node.js入門記事】

Node.js完全初心者のための、合計値を計算し、コンソールに出力する方法

Node.js完全初心者が、ファイルを非同期で読み取り、行数をコンソールに出力する方法

Node.js完全初心者が、ファイルを同期で読み取り、行数をコンソールに出力する方法

Node.jsを使ってjQueryチックにWebサイトをクローリングする方法

いまアツいJavaScript!ゼロから始めるNode.js入門〜5分で環境構築編〜