Expressを導入しよう (6/7)
作成:2015-08-13 10:37
更新:2015-08-13 10:37
更新:2015-08-13 10:37
■テンプレートを利用する
とりあえず、Expressを使った基本的な処理の流れはだいたいわかりました。続いて、テンプレートを利用して表示を行ってみることにしましょう。テンプレートファイルを用意し、app.jsのスクリプトを修正すればできそうですね。
まずは、テンプレートから作成しましょう。今回は「test.ejs」というファイル名で作成することにします。下にソースコードを掲載しておきます。
今回作成したtest.ejsは、Webアプリケーションの中にそのまま配置はしません。Webアプリケーションのフォルダの中に、新たに「views」という名前のフォルダを用意してください。そしてこのフォルダの中にtest.ejsを入れておきます。
Expressでは、画面表示関係のテンプレートは、このように「views」フォルダ内にまとめることになっています（設置場所やフォルダ名などは変更できますが、デフォルトではviewsという名前のフォルダになっているのでここではそのまま作成します）。
作成したテンプレートは、基本的に前回までのEJS用テンプレートとほとんど同じです。
ここでは、ヘッダー部分とボディに<%=title %>というタイトルを出力するタグを用意し、またコンテンツの表示用に<%-content %>というタグを用意してあります。Node.jsのスクリプトでは、これらのタグで出力しているtitleやcontentといった変数に値を受け渡すように処理を用意すればいいわけですね。
まずは、テンプレートから作成しましょう。今回は「test.ejs」というファイル名で作成することにします。下にソースコードを掲載しておきます。
今回作成したtest.ejsは、Webアプリケーションの中にそのまま配置はしません。Webアプリケーションのフォルダの中に、新たに「views」という名前のフォルダを用意してください。そしてこのフォルダの中にtest.ejsを入れておきます。
Expressでは、画面表示関係のテンプレートは、このように「views」フォルダ内にまとめることになっています（設置場所やフォルダ名などは変更できますが、デフォルトではviewsという名前のフォルダになっているのでここではそのまま作成します）。
作成したテンプレートは、基本的に前回までのEJS用テンプレートとほとんど同じです。
ここでは、ヘッダー部分とボディに<%=title %>というタイトルを出力するタグを用意し、またコンテンツの表示用に<%-content %>というタグを用意してあります。Node.jsのスクリプトでは、これらのタグで出力しているtitleやcontentといった変数に値を受け渡すように処理を用意すればいいわけですね。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!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:#000066; }
h1 { font-size:18pt; background-color:#DDDDFF; }
pre { background-color:#EEEEEE; }
</style>
</head>
<body>
<header>
<h1><%=title %></h1>
</header>
<article>
<%-content %>
</article>
</body>
</html>
※関連コンテンツ