Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
電算部ネットワーク講座 
Node.js で Web アプリケーション開発
前回のおさらい 
• Node.js はサーバサイドで JavaScript を動か 
すための実行環境。 
• Node.js 単体でサーバになる。 
• フレームワークを使うと簡単に Web アプリ 
ケーションが書ける。
Node.js 
OS の機能を扱う API が提供されている。 
簡単に Web Server が立ち上がる。 
! 
http://nodejs.org/
Web Server 
var http = require("http"); 
! 
http.createServer(function (req, res) { 
res.writeHead(200, {"Content-Type": "...
フレームワーク 
Web Application Framework 
! 
Web アプリケーションを開発する上で、よく 
使う機能がまとめられた枠組み。
Express 
Node.js で使われる軽量フレームワーク。 
! 
http://expressjs.com/
Express Server 
var express = require("express"); 
var app = express(); 
! 
app.get("/", function(req, res){ 
res.send("he...
Express の強み 
var express = require("express"); 
var app = express(); 
! 
app.get("/", function(req, res){ 
res.send("hello...
簡単にルートが増やせる
復習終わり
今回の内容 
• テンプレートエンジン 
• HTTP Header 
• Google アカウント認証 
→次回やります
次回復習するので、完全に 
理解できなくても大丈夫。
テンプレートエンジン 
動的に HTML を生成する仕組み。 
! 
HTML を生成するための雛形をテンプレート 
と言う。ビュー (View) と呼ぶこともある。
Hogan.js 
Twitter でも使われている mustache の上位互 
換テンプレートエンジン。
テンプレート 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>{{title}}</title> 
</head> 
<body> 
<h1>{{title}}<...
これを template.html として 
views ディレクトリの中に保存。
HTML の生成 
var express = require("express"); 
var hogan = require("hogan-express"); 
var path = require("path"); 
! 
var ap...
これを server.js として 
views と同じ階層に保存。
実行してブラウザで確認!
コマンドプロンプト 
(cmd.exe) で実行 
必要なモジュールのインストール 
> npm install express hogan-express 
! 
サーバの起動 
> node server.js 
! 
! 
停止する時は ...
ディレクトリ構成
HTTP Header 
HTTP 通信のヘッダ情報 (メタデータ)。 
リクエストヘッダとレスポンスヘッダがある。
Request Header 
リクエストヘッダにはクライアント*が受け取れ 
るデータの形式、文字コード、ユーザエージェ 
ント等の情報が含まれている。 
! 
*クライアント=主にブラウザ
Response Header 
レスポンスヘッダにはコンテンツの長さや、 
ファイル形式、最終更新日時などのデータが 
入っている。
Request Header の取得 
var express = require("express"); 
var app = express(); 
! 
app.get("/", function(req, res){ 
res.send...
Response Header の出力 
var express = require("express"); 
var app = express(); 
! 
app.get("/", function(req, res){ 
res.set...
レスポンスヘッダの確認方法
ここで F12 キーを押下
Google アカウント認証 
Google アカウントでユーザ認証できるシス 
テム。 
新しくアカウントを作らなくてもサービスが 
利用できるので、ユーザにとっては嬉しい。
これは次回やります。
終わり
densan2014-late01
Nächste SlideShare
Wird geladen in …5
×

densan2014-late01

北海道科学大学電子計算機研究部ネットワークチーム
後期講座01

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

densan2014-late01

  1. 1. 電算部ネットワーク講座 Node.js で Web アプリケーション開発
  2. 2. 前回のおさらい • Node.js はサーバサイドで JavaScript を動か すための実行環境。 • Node.js 単体でサーバになる。 • フレームワークを使うと簡単に Web アプリ ケーションが書ける。
  3. 3. Node.js OS の機能を扱う API が提供されている。 簡単に Web Server が立ち上がる。 ! http://nodejs.org/
  4. 4. Web Server var http = require("http"); ! http.createServer(function (req, res) { res.writeHead(200, {"Content-Type": "text/plain"}); res.end("Hello Worldn"); }).listen(3000);
  5. 5. フレームワーク Web Application Framework ! Web アプリケーションを開発する上で、よく 使う機能がまとめられた枠組み。
  6. 6. Express Node.js で使われる軽量フレームワーク。 ! http://expressjs.com/
  7. 7. Express Server var express = require("express"); var app = express(); ! app.get("/", function(req, res){ res.send("hello world"); }); ! app.listen(3000);
  8. 8. Express の強み var express = 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. 9. 簡単にルートが増やせる
  10. 10. 復習終わり
  11. 11. 今回の内容 • テンプレートエンジン • HTTP Header • Google アカウント認証 →次回やります
  12. 12. 次回復習するので、完全に 理解できなくても大丈夫。
  13. 13. テンプレートエンジン 動的に HTML を生成する仕組み。 ! HTML を生成するための雛形をテンプレート と言う。ビュー (View) と呼ぶこともある。
  14. 14. Hogan.js Twitter でも使われている mustache の上位互 換テンプレートエンジン。
  15. 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. 16. これを template.html として views ディレクトリの中に保存。
  17. 17. 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);
  18. 18. これを server.js として views と同じ階層に保存。
  19. 19. 実行してブラウザで確認!
  20. 20. コマンドプロンプト (cmd.exe) で実行 必要なモジュールのインストール > npm install express hogan-express ! サーバの起動 > node server.js ! ! 停止する時は Ctrl + C を入力。 コードの修正を反映させるためには、毎回起動し直す。
  21. 21. ディレクトリ構成
  22. 22. HTTP Header HTTP 通信のヘッダ情報 (メタデータ)。 リクエストヘッダとレスポンスヘッダがある。
  23. 23. Request Header リクエストヘッダにはクライアント*が受け取れ るデータの形式、文字コード、ユーザエージェ ント等の情報が含まれている。 ! *クライアント=主にブラウザ
  24. 24. Response Header レスポンスヘッダにはコンテンツの長さや、 ファイル形式、最終更新日時などのデータが 入っている。
  25. 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. 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. 27. レスポンスヘッダの確認方法
  28. 28. ここで F12 キーを押下
  29. 29. Google アカウント認証 Google アカウントでユーザ認証できるシス テム。 新しくアカウントを作らなくてもサービスが 利用できるので、ユーザにとっては嬉しい。
  30. 30. これは次回やります。
  31. 31. 終わり

×