Node.jsのスクリプトの基本を覚えよう (5/5)
作成:2013-04-13 10:46
更新:2013-04-13 10:46
更新:2013-04-13 10:46
■HTML内の一部をスクリプトで変更する
ただHTMLファイルを読み込んで表示するというだけでは、あまりサーバー側のプログラムを作るメリットが感じられませんね。そこで、読み込んだHTMLをもとにして、ちょっとしたテキスト処理を行うようにしてみましょう。
テンプレート的な考え方では、まず表示をするHTMLの中に、テキストを置換するための特別な値を埋め込んでおき、それを読み込んで表示する際に必要なコンテンツに置換して出力する――という方法が考えられます。やってみましょう。
まず、hello.htmlを修正します。基本的には先ほどとほぼ同じですが、ソースコード内に「@title@」と「@content@」という記述があるのに気がついたでしょう。これが、置換用の特別な値です（別にNode.jsにそういう特別な値が定義されてるわけではありませんよ。適当に考えた値です）。スクリプトでは、これらのテキストを検索して置き換えれば、スクリプトからHTML内を操作できるだろう、というわけです。
Node.jsのスクリプトも下に掲載しておきます。ここではテキストを読み込んだ後、replaceでテキストの置換をしています。
なお、ここでは非同期でファイルを読み込むreadFileを使いましたが、同期処理でファイルを読み込むメソッドもfsには用意されています。これについては次回、改めて触れることになるでしょう。
――とりあえず、これでちょっとした値をスクリプトからHTML内に埋め込むことはできました。しかし、これではあまり汎用性はありませんね。もう少し汎用的に表示を作成・操作できないと困ります。そこで次回は、「テンプレートエンジン」というものを使い、もっと便利にHTMLを使えるようにしましょう。
テンプレート的な考え方では、まず表示をするHTMLの中に、テキストを置換するための特別な値を埋め込んでおき、それを読み込んで表示する際に必要なコンテンツに置換して出力する――という方法が考えられます。やってみましょう。
まず、hello.htmlを修正します。基本的には先ほどとほぼ同じですが、ソースコード内に「@title@」と「@content@」という記述があるのに気がついたでしょう。これが、置換用の特別な値です（別にNode.jsにそういう特別な値が定義されてるわけではありませんよ。適当に考えた値です）。スクリプトでは、これらのテキストを検索して置き換えれば、スクリプトからHTML内を操作できるだろう、というわけです。
Node.jsのスクリプトも下に掲載しておきます。ここではテキストを読み込んだ後、replaceでテキストの置換をしています。
var data2 = data.replace(/@title@/g, title[number]).このようにして@title@と@content@をそれぞれ配列title/contentからランダムに選んだものに置換してからwriteしているわけです。ページをリロードする度に、ランダムに選んだテキストが表示されますので試してみてください。
replace(/@content@/g, content[number]);
なお、ここでは非同期でファイルを読み込むreadFileを使いましたが、同期処理でファイルを読み込むメソッドもfsには用意されています。これについては次回、改めて触れることになるでしょう。
――とりあえず、これでちょっとした値をスクリプトからHTML内に埋め込むことはできました。しかし、これではあまり汎用性はありませんね。もう少し汎用的に表示を作成・操作できないと困ります。そこで次回は、「テンプレートエンジン」というものを使い、もっと便利にHTMLを使えるようにしましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※hello.htmlの内容
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<title>@title@</title>
<style>
body { font-size:12pt; color:#006666; }
h1 { font-size:18pt; background-color:#AAFFFF; }
pre { background-color:#EEEEEE; }
</style>
</head>
<body>
<header>
<h1 id="h1">@title@</h1>
</header>
<div role="main">
<p>@content@</p>
</div>
</body>
</html>
※sampleapp.jsのソースコード
var http = require('http');
var fs = require('fs');
var server = http.createServer();
server.on('request', doRequest);
server.listen(1234);
console.log('Server running!');
// リクエストの処理
function doRequest(req, res) {
var number = Math.floor(Math.random() * 3);
fs.readFile('./hello.html', 'UTF-8',
function(err, data) {
var title = ["ページA", "ページB", "ページC"];
var content = ["※これはサンプルで作ったものです。",
"もう一つのコンテンツです。",
"最後に用意したコンテンツですよ。"];
var data2 = data.
replace(/@title@/g, title[number]).
replace(/@content@/g, content[number]);
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data2);
res.end();
});
}
※関連コンテンツ