Node.js 第3弾(ファイルの読み込み)

Node.js 第3弾です！
今度は、より実践的なことを書きますとか言いましたが、ぜんぜん進んでなく。。。
とりあえず、リクエストの処理とファイルの読み込みについて書きますr(^ω^*)

早速、アクセスするURLによって画面が変わるプログラムを見てみましょう！
以下にソースを記載しますが、URLのパスを読み取って、if文で処理を分けているのが分かると思います。

$ vi test.js
～
var http = require('http');
var server = http.createServer(function (request, response) {

  // リクエストされたパスによって分岐
  if ( request.url == '/') {
      response.writeHead(200, {'Content-Type': 'text/plain'});
      response.write('Hello World');
  } else if (request.url == '/test/') {
      response.writeHead(200, {'Content-Type': 'text/plain'});
      response.write('test OK');
  } else {
      response.writeHead(404, {'Content-Type': 'text/plain'});
      response.write('Error 404: Not Found');
  }

  response.end();
});

server.listen(1008);
console.log('Server running at http://www.nightmare-yk.com:1008/');
～

「http://www.nightmare-yk.com:1008/」にアクセスするとHello Worldと表示され、「http://www.nightmare-yk.com:1008/test/」にアクセスするとtest OKとと表示されます。それ以外でアクセスするとNot Foundとなります。

apacheを使うのに慣れているので、なんか気持ち悪い気もしますが、簡単ですね☆

次はファイルの読み込みと合わせ、スタイルシートの設定をしてみましょう！
web画面を作成する際、スタイルシートを使って画面の整形を行うと思います。apacheを使う際は、HTMLにスタイルシートの設定をすればそのまま読み込まれましたが、node.jsはそんな簡単にはいかないんですよね・・・(￣Д￣；；

node.jsは全てのファイルを読み込む処理を書かなければなりません。スタイルシートを使った画面は以下のように作ります。(*^▽^*)

■ test.js

var http = require('http');
var fs = require('fs');

var server = http.createServer();
server.on('request', doRequest);
server.listen(1008);
console.log('Server running at http://www.nightmare-yk.com:1008/');

function doRequest(request, response) {
    switch(request.url) {
    case '/':
        fs.readFile('./test.html', 'UTF-8',
            function (err, data) {
                response.writeHead(200, {'Content-Type': 'text/html'});
                response.write(data);
                response.end();
            }
        );
        break;
    case '/style.css':
        fs.readFile('./style.css', 'UTF-8',
            function (err, data) {
                response.writeHead(200, {'Content-Type': 'text/css'});
                response.write(data);
                response.end();
            }
        );
        break;
    case '/sample.png':
        fs.readFile('./sample.png', 'binary',
            function (err, data) {
                response.writeHead(200, {'Content-Type': 'image/png'});
                response.write(data, 'binary');
                response.end();
            }
        );
        break;
    }
};

■ test.html

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>闘い続けるSEの戯言</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="site-box">
      <div class="header">
        <img class="img" src="sample.png" alt="">闘い続けるSEの戯言 Node.js テストサイト
      </div>
      <div class="main">
        <form method="post" action="/">
          <br><br>
          <table class="frame">
            <tr>
              <td>
                <table class="table">
                  <tr>
                    <td class="value">名前</td>
                    <td class="input"><input class="text" type="text" name="name"></td>
                  </tr>
                  <tr>
                    <td class="value">生年月日</td>
                    <td class="input"><input class="text" type="text" name="current"></td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr><td></td></tr>
            <tr>
              <td><input type="submit" value="送信" name="ok" class="submit"></td>
            </tr>
          </table>
          <br><br>
        </form>
      </div>
      <div class="footer">&nbsp;</div>
    </div>
  </body>
</html>

■ style.css

.site-box {
  width: 800px;
}

.header {
  border-bottom: 2px #DC143C solid;
  background-color: #DCDCDC;
  font-size: 150%;
  text-align: center;
}

.main {
}

.footer {
  border-top: 2px #DC143C solid;
  background-color: #DCDCDC;
}

TABLE.frame {
  margin-left: auto;
  margin-right: auto;
  text-align : center;
}

TABLE.table {
  border-collapse: collapse;
}

TD.value {
  color: #FFFFFF;
  border: 3px solid #A9A9A9;
  background-color: #696969;
  width: 150px;
  font-size: 80%;
  text-align : left;
}

TD.input {
  border: 3px solid #A9A9A9;
  background-color: #696969;
  width: 160px;
  font-size: 80%;
}

INPUT.text {
  width: 160px;
}

INPUT.submit {
  width: 100px;
}

IMG.img {
  max-width: 20px;
  height: auto;
}

上記のプログラムを実行すると以下のような画面になります。今回例として、HTML、スタイルシート、画像を読み込んだ画面にしてみました。全てのファイルを読み込むようにプログラムを作らないといけないのはかなり面倒ですねΣ（￣Д￣;）