EJSテンプレートエンジンの使い方メモ3 複数のテンプレートを組み合わせる

SAGA.TXT > 学習メモ > node.js > EJSテンプレートエンジンの使い方メモ3 複数のテンプレートを組み合わせる

EJSテンプレートエンジンの使い方メモ3 複数のテンプレートを組み合わせる

2016-02-13

node01

こんにちは。さがっとです！

WEBアプリを作成できる。
を目標にnode.jsについて学習したことをメモしていきたいと思います。

2016/02/13学習分です。

やりたい事。

前回作成したテンプレートファイル(index.ejs)に、「content.ejs」という新しいファイルをはめこんで表示を行えるようにしたいと思います。

ejs_do

自学習用とはいえ、もろ手書きですんません。。

新しいテンプレートファイル

■content.ejs

<p>※ここから注目</p>
<p>このメッセージはcontent.ejsにもともと入っていたものだよ。</p>
<p><%= message %></p>

<p>※ここから注目</p>

<p>このメッセージはcontent.ejsにもともと入っていたものだよ。</p>

今回全体表示用のindex.ejsにはめこむテンプレートファイル。

<%= message %>はcontent.ejsをレンダリングする際に書き換えを行う。

全体を表示するテンプレートファイル

■index.ejs

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><%=title %></title>
</head>

<body>

<div class="js-accordion">
	<ul>
		<li><span class="title top">タイトル</span><span class="text top">本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
		<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>
	</ul>
	<a href="#" class="btn_accordion open">▼　もっとみる</a>
</div>

<h1><%=title %></h1>
<!--★ここに、content.ejsの中身を書き出す！-->
<p><%-content %></p>
</body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

<ul>

<li><span class="title top">タイトル</span><span class="text top">本文本文本文本文本文本文本文本文本文本文本文</span>

<li><span class="title">タイトル</span><span class="text">本文本文本文本文本文本文本文本文本文本文本文本文本文</span>

</ul>

<a href="#" class="btn_accordion open">▼　もっとみる</a>

</div>

</body>

</html>

前回と同じままです。<%-content %>にcontent.ejsの中身を書き出します。

スクリプトファイル

■serverapp.js

//httpモジュールをロード
var http = require('http');
var fs =require('fs');
//ejsオブジェクトの取得
var ejs = require('ejs');
//テンプレートファイルの読み込み(同期処理)
var index = fs.readFileSync('./index.ejs', 'utf8');
//★１．content.ejsテンプレートファイル読み込み
var content = fs.readFileSync('./content.ejs', 'utf8');

//「createServer」メソッドを呼び出してhttp.Serverオブジェクトを作成
var server = http.createServer();
//onメソッドでserverオブジェクトのrequestイベントにdoRequestという関数を割り当て
server.on('request', doRequest);
//server待ち受け
server.listen(3000);
console.log('Server running!');
 
// リクエストの処理
//第１引数は、「request」オブジェクト:クライアントからのリクエストに関する機能
//第２引数は「response」オブジェクト:サーバーからクライアントへ戻されるレスポンスに関する機能
function doRequest(req, res) {
	//★２．content.ejsのレンダリング
	var contentdata = ejs.render(content,{
		message:"このメッセージはcontent.ejsをレンダリングする時に格納されました。"
	});
	//★３．全体表示のテンプレート(index)内に、コンテンツ(contentdata)をはめこむ
	var indexdata   = ejs.render(index,   {
		title   : "タイトル",
		content　: contentdata
    });
	
	//ヘッダー情報の書き出しresponseオブジェクトの「writeHead」メソッド
	res.writeHead(200, {'Content-Type': 'text/html'});
	//★４．コンテンツの書き出しresponseオブジェクトの「write」メソッド
	res.write(indexdata);
	//コンテンツの完了responseの「end」
	res.end();
}

//httpモジュールをロード

var http = require('http');

var fs =require('fs');

//ejsオブジェクトの取得

var ejs = require('ejs');

//テンプレートファイルの読み込み(同期処理)

var index = fs.readFileSync('./index.ejs', 'utf8');

//★１．content.ejsテンプレートファイル読み込み

var content = fs.readFileSync('./content.ejs', 'utf8');

//「createServer」メソッドを呼び出してhttp.Serverオブジェクトを作成

var server = http.createServer();

//onメソッドでserverオブジェクトのrequestイベントにdoRequestという関数を割り当て

server.on('request', doRequest);

//server待ち受け

server.listen(3000);

console.log('Server running!');

// リクエストの処理

//第１引数は、「request」オブジェクト:クライアントからのリクエストに関する機能

//第２引数は「response」オブジェクト:サーバーからクライアントへ戻されるレスポンスに関する機能

function doRequest(req, res) {

//★２．content.ejsのレンダリング

var contentdata = ejs.render(content,{

message:"このメッセージはcontent.ejsをレンダリングする時に格納されました。"

});

//★３．全体表示のテンプレート(index)内に、コンテンツ(contentdata)をはめこむ

var indexdata = ejs.render(index, {

title : "タイトル",

content　: contentdata

});

//ヘッダー情報の書き出しresponseオブジェクトの「writeHead」メソッド

res.writeHead(200, {'Content-Type': 'text/html'});

//★４．コンテンツの書き出しresponseオブジェクトの「write」メソッド

res.write(indexdata);

//コンテンツの完了responseの「end」

res.end();

}

★１．index.ejsと一緒に、content.ejsを変数に読み込んでおく。

★２．content.ejsのレンダリング
タグにメッセージをオプションの値としてセットしておく。

★３．ページ全体のテンプレート（hello.ejs）をrenderでレンダリングする。

この際、content1.ejsをレンダリングしたデータをオプションの値としてセットしておく。

★４．レンダリングされたデータを書き出す。

動かしてみる

ejs_do

こんな感じで同じディレクトリに配備しておきます↑

コマンドプロンプトでスクリプトファイルを起動。

node serverapp.js

1	node serverapp.js

http://localhost:3000へアクセス。

ejs_do

でた！早くゴリゴリコーディングしたい！

この記事がお役に立てたら、是非シェアをお願いします^^

SAGA.TXT

EJSテンプレートエンジンの使い方メモ3 複数のテンプレートを組み合わせる

やりたい事。

新しいテンプレートファイル

全体を表示するテンプレートファイル

スクリプトファイル

動かしてみる

■さがっと

最近の投稿

アーカイブ