Download as PDF, PPTX
![HTML の生成
var express = require("express");
var hogan = require("hogan-express");
var path = require("path");
!
var app = express();
!
// ビューの設定
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "html");
app.engine("html", hogan);
!
app.get("/", function(req, res){
// HTML のレンダリング (生成)
res.render("template", {
title: "template example",
list: ["node.js", "express", "hogan"]
});
});
!
app.listen(3000);](https://image.slidesharecdn.com/01-141007032427-conversion-gate02/85/densan2014-late01-17-320.jpg)
![Request Header の取得
var express = require("express");
var app = express();
!
app.get("/", function(req, res){
res.send("User-Agent: " + req.headers["user-agent"]);
});
!
app.listen(3000);](https://image.slidesharecdn.com/01-141007032427-conversion-gate02/85/densan2014-late01-25-320.jpg)
![Response Header の出力
var express = require("express");
var app = express();
!
app.get("/", function(req, res){
res.set("X-Powered-By", "densan");
res.send("User-Agent: " + req.headers["user-agent"]);
});
!
app.listen(3000);](https://image.slidesharecdn.com/01-141007032427-conversion-gate02/85/densan2014-late01-26-320.jpg)
More Related Content
densan2014-late01
- 1. 電算部ネットワーク講座 Node.js でWeb アプリケーション開発
- 2. 前回のおさらい • Node.jsはサーバサイドで JavaScript を動か すための実行環境。 • Node.js 単体でサーバになる。 • フレームワークを使うと簡単に Web アプリ ケーションが書ける。
- 3. Node.js OS の機能を扱うAPI が提供されている。 簡単に Web Server が立ち上がる。 ! http://nodejs.org/
- 4. Web Server varhttp = require("http"); ! http.createServer(function (req, res) { res.writeHead(200, {"Content-Type": "text/plain"}); res.end("Hello Worldn"); }).listen(3000);
- 5. フレームワーク Web ApplicationFramework ! Web アプリケーションを開発する上で、よく 使う機能がまとめられた枠組み。
- 6. Express Node.js で使われる軽量フレームワーク。 ! http://expressjs.com/
- 7. Express Server varexpress = require("express"); var app = express(); ! app.get("/", function(req, res){ res.send("hello world"); }); ! app.listen(3000);
- 8. Express の強み varexpress = require("express"); var app = express(); ! app.get("/", function(req, res){ res.send("hello world"); }); ! app.get("/densan/:name", function(req, res){ res.send("こんにちは " + req.params.name + " さん。"); }); ! app.listen(3000);
- 9.
- 10.
- 11. 今回の内容 • テンプレートエンジン • HTTP Header • Google アカウント認証 →次回やります
- 12.
- 13. テンプレートエンジン 動的に HTMLを生成する仕組み。 ! HTML を生成するための雛形をテンプレート と言う。ビュー (View) と呼ぶこともある。
- 14. Hogan.js Twitter でも使われているmustache の上位互 換テンプレートエンジン。
- 15. テンプレート <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{{title}}</title> </head> <body> <h1>{{title}}</h1> <ul> {{#list}} <li>{{.}}</li> {{/list}} </ul> </body> </html>
- 16. これを template.html として views ディレクトリの中に保存。
- 17. HTML の生成 varexpress = require("express"); var hogan = require("hogan-express"); var path = require("path"); ! var app = express(); ! // ビューの設定 app.set("views", path.join(__dirname, "views")); app.set("view engine", "html"); app.engine("html", hogan); ! app.get("/", function(req, res){ // HTML のレンダリング (生成) res.render("template", { title: "template example", list: ["node.js", "express", "hogan"] }); }); ! app.listen(3000);
- 18. これを server.js として views と同じ階層に保存。
- 19.
- 20. コマンドプロンプト (cmd.exe) で実行 必要なモジュールのインストール > npm install express hogan-express ! サーバの起動 > node server.js ! ! 停止する時は Ctrl + C を入力。 コードの修正を反映させるためには、毎回起動し直す。
- 21.
- 22. HTTP Header HTTP通信のヘッダ情報 (メタデータ)。 リクエストヘッダとレスポンスヘッダがある。
- 23. Request Header リクエストヘッダにはクライアント*が受け取れ るデータの形式、文字コード、ユーザエージェ ント等の情報が含まれている。 ! *クライアント=主にブラウザ
- 24. Response Header レスポンスヘッダにはコンテンツの長さや、 ファイル形式、最終更新日時などのデータが 入っている。
- 25. Request Header の取得 var express = require("express"); var app = express(); ! app.get("/", function(req, res){ res.send("User-Agent: " + req.headers["user-agent"]); }); ! app.listen(3000);
- 26. Response Header の出力 var express = require("express"); var app = express(); ! app.get("/", function(req, res){ res.set("X-Powered-By", "densan"); res.send("User-Agent: " + req.headers["user-agent"]); }); ! app.listen(3000);
- 27.
- 28.
- 30. Google アカウント認証 Googleアカウントでユーザ認証できるシス テム。 新しくアカウントを作らなくてもサービスが 利用できるので、ユーザにとっては嬉しい。
- 31.
- 32.