Node.js/TemplateEngine
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2023
?
データサイエンス/2023
?
3DCG演習/2023
?
情報デザイン概論/2023
?
情報デザイン研究/2023
?
卒業研究/2023
?
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*Node.js|TemplateEngine
~
**テンプレートエンジンとは
テンプレートエンジンとは、テンプレートファイルと呼ばれる ...
-''EJS'':http://ejs.co/ Apache License, Version 2.0
-Hogan.js:http://twitter.github.io/hogan.js/ Apache Lic...
-Mustache:http://mustache.github.io/ MIT License
-Handlebars:http://handlebarsjs.com/ MIT License
-Swig:http://paularmstrong.github.io/swig/ 独自ライセンス
~
~
**EJS で体験
***EJS の概要
-EJS は Node.js では定番のテンプレートエンジンです。Node....
-テンプレートファイルの拡張子は ''.ejs'' です。
-スクリプトデリミタは、以下のようなパターンで、任意の値を...
--<%= キー名 %>
サーバーサイドでキー名に指定した値を書き出します。
HTMLタグが含まれていた場合はエスケープされます。
--<%- キー名 %>
サーバーサイドでキー名に指定した値を書き出します。
HTMLタグが含まれていた場合もエスケープされません。
--<% 処理 %>
以下、実際に簡単なプロジェクトを作ってみましょう。
~
***プロジェクトの準備
-適当な場所に myProject フォルダを作って下さい(どこでも...
-ターミナルでそこへ移動します。
$ cd /Users/XXXX/myProject
~
***プロジェクトの初期化(package.json の生成)
-プロジェクトの初期化作業を行います。以下のコマンドは、当...
$ npm init
-タイトルのみ入力して(ここでは sample_site)、その他はそ...
{
"name": "sample_site",
"version": "1.0.0",
"description": "sample",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "koichi inoue",
"license": "ISC"
}
package.json はパッケージのバージョン情報を保持した[[JSON...
~
***EJS のインストール
$ npm install ejs
-node_modules フォルダ内に ejs フォルダができ、そこに ejs...
-package.json にはインストール情報が蓄積される仕組みにな...
"dependencies": {
"ejs": "^2.6.2"
}
~
***.ejsファイルの作成
myProject フォルダに以下のコードを ''template.ejs'' とし...
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title><%= title %></title>
</head>
<body>
<%- heading %>
<ul>
<% arr.forEach(function(val) { %>
<li><%= val %></li>
<% }) %>
</ul>
</body>
</html>
~
***index.js (サーバー)の作成
myProject フォルダに以下を ''index.js'' として保存して下...
index.js は、 package.json に記載された "main": "index.j...
Node.js で実行させるファイルになります。
var http = require('http');
var fs = require('fs');
var ejs = require('ejs');
var temp = fs.readFileSync('./template.ejs', 'utf-8');
var server = http.createServer(function(req, res) {
// 第一引数:テンプレート、第二引数:値
var data = ejs.render(temp, {
title: 'SampleSite',
heading: '<h1>EJS Sample</h1>',
arr:['美術', 'デザイン', '写真']
});
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
res.end();
});
//Localhost の 8000 ポートで待機
server.listen(8000);
console.log('Server running at http://127.0.0.1:8000. Q...
~
***起動と動作確認
起動するには、node コマンドを使う方法と、package.json に...
-1. node コマンドで、index.js を起動
$ node index.js
Server running at http://127.0.0.1:8000. QUIT > [CTRL +...
-2. npm コマンドで起動
package.json に、以下のように起動コードを追加すると、npm...
:
"scripts": {
"start":"node index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
:
起動は以下のコマンドです。
$ npm start
Server running at http://127.0.0.1:8000. QUIT > [CTRL +...
-ブラウザでローカルサーバーにアクセスしてみます
http://localhost:8000
-以下のように表示されるはずです
EJS Sample
1. 美術
2. デザイン
3. 写真
~
***参考:package.json のプロパティー
-name:モジュールの名前(必須)
npmモジュール は name と versionで一意となる前提なので、...
-version:モジュールのバージョン(必須)
-private:true になっていると非公開
-description:モジュールの説明
-main:モジュールの中で最初に呼ばれるファイルを指定 > in...
-scripts:任意の shell script を実行するエイリアスコマン...
-repository:ソースコードが管理されている場所
-author:作者名。一般に以下のように記載
{ "author": "Koichi Inoue <xxxx@gmail.com> (https://gith...
-license:ライセンス情報
-dependencies:依存するモジュールとバージョンを記述
-devDependencies:npmに公開するモジュールを開発するときに...
~
~
終了行:
*Node.js|TemplateEngine
~
**テンプレートエンジンとは
テンプレートエンジンとは、テンプレートファイルと呼ばれる ...
-''EJS'':http://ejs.co/ Apache License, Version 2.0
-Hogan.js:http://twitter.github.io/hogan.js/ Apache Lic...
-Mustache:http://mustache.github.io/ MIT License
-Handlebars:http://handlebarsjs.com/ MIT License
-Swig:http://paularmstrong.github.io/swig/ 独自ライセンス
~
~
**EJS で体験
***EJS の概要
-EJS は Node.js では定番のテンプレートエンジンです。Node....
-テンプレートファイルの拡張子は ''.ejs'' です。
-スクリプトデリミタは、以下のようなパターンで、任意の値を...
--<%= キー名 %>
サーバーサイドでキー名に指定した値を書き出します。
HTMLタグが含まれていた場合はエスケープされます。
--<%- キー名 %>
サーバーサイドでキー名に指定した値を書き出します。
HTMLタグが含まれていた場合もエスケープされません。
--<% 処理 %>
以下、実際に簡単なプロジェクトを作ってみましょう。
~
***プロジェクトの準備
-適当な場所に myProject フォルダを作って下さい(どこでも...
-ターミナルでそこへ移動します。
$ cd /Users/XXXX/myProject
~
***プロジェクトの初期化(package.json の生成)
-プロジェクトの初期化作業を行います。以下のコマンドは、当...
$ npm init
-タイトルのみ入力して(ここでは sample_site)、その他はそ...
{
"name": "sample_site",
"version": "1.0.0",
"description": "sample",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "koichi inoue",
"license": "ISC"
}
package.json はパッケージのバージョン情報を保持した[[JSON...
~
***EJS のインストール
$ npm install ejs
-node_modules フォルダ内に ejs フォルダができ、そこに ejs...
-package.json にはインストール情報が蓄積される仕組みにな...
"dependencies": {
"ejs": "^2.6.2"
}
~
***.ejsファイルの作成
myProject フォルダに以下のコードを ''template.ejs'' とし...
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title><%= title %></title>
</head>
<body>
<%- heading %>
<ul>
<% arr.forEach(function(val) { %>
<li><%= val %></li>
<% }) %>
</ul>
</body>
</html>
~
***index.js (サーバー)の作成
myProject フォルダに以下を ''index.js'' として保存して下...
index.js は、 package.json に記載された "main": "index.j...
Node.js で実行させるファイルになります。
var http = require('http');
var fs = require('fs');
var ejs = require('ejs');
var temp = fs.readFileSync('./template.ejs', 'utf-8');
var server = http.createServer(function(req, res) {
// 第一引数:テンプレート、第二引数:値
var data = ejs.render(temp, {
title: 'SampleSite',
heading: '<h1>EJS Sample</h1>',
arr:['美術', 'デザイン', '写真']
});
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
res.end();
});
//Localhost の 8000 ポートで待機
server.listen(8000);
console.log('Server running at http://127.0.0.1:8000. Q...
~
***起動と動作確認
起動するには、node コマンドを使う方法と、package.json に...
-1. node コマンドで、index.js を起動
$ node index.js
Server running at http://127.0.0.1:8000. QUIT > [CTRL +...
-2. npm コマンドで起動
package.json に、以下のように起動コードを追加すると、npm...
:
"scripts": {
"start":"node index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
:
起動は以下のコマンドです。
$ npm start
Server running at http://127.0.0.1:8000. QUIT > [CTRL +...
-ブラウザでローカルサーバーにアクセスしてみます
http://localhost:8000
-以下のように表示されるはずです
EJS Sample
1. 美術
2. デザイン
3. 写真
~
***参考:package.json のプロパティー
-name:モジュールの名前(必須)
npmモジュール は name と versionで一意となる前提なので、...
-version:モジュールのバージョン(必須)
-private:true になっていると非公開
-description:モジュールの説明
-main:モジュールの中で最初に呼ばれるファイルを指定 > in...
-scripts:任意の shell script を実行するエイリアスコマン...
-repository:ソースコードが管理されている場所
-author:作者名。一般に以下のように記載
{ "author": "Koichi Inoue <xxxx@gmail.com> (https://gith...
-license:ライセンス情報
-dependencies:依存するモジュールとバージョンを記述
-devDependencies:npmに公開するモジュールを開発するときに...
~
~
ページ名: