expressを試してみた HTMLを表示させる
今回は、expressをインストールし、それを用いてhtmlをローカルサーバーで表示させる。
インストール
まずは、node.jsが必要なので、windowsの場合、ここからダウンロードする。
ubuntuでやる場合、
$ sudo apt-get update$ sudo apt-get install nodejs
$ sudo apt-get install npmもしくは、
$ sudo apt-get install nodejs npmとすれば、Node.jsをインストールすることができる。
次に、npmでexpressをインストールする。npm install expressで、expressのパッケージをインストールする。
すると、package.jsonに以下のコードが追加された。
これで、インストールされたことが確認できた。
実際にローカルサーバーでブラウザに表示させる
expressがインストールされたことが確認できたので、実際に表示させてみる。
まず、expressを用いるためには
var express = require('express');
var ejs = require("ejs");
var app = express(); と最初に定義する。express変数にexpressをrequireで使えるようにする処理を格納し、appにそのexpress関数を実行したものを格納する。
次に、get関数を用いる。第一引数に割り当てるパス、第二引数に処理を送ったり受け取ったりする処理を行う変数があり、{}内に表示させる内容を定義しておく。このコードの場合は、ブラウザにIketani Ran.と表示させる。
そして、listen関数でローカルサーバーを構築する。第一引数にはポート番号が書かれている。そして、{}内で、ログにPort Number is 3000.と表示させている。
これらをすべて纏めると、以下のようになる。
そして、これを実際に表示させてみる。node ファイル名でファイルを起動する。すると、以下のように表示され、ローカルサーバーが立ち上がった。
実際にブラウザで試してみる。
にアクセスすると、以下のように表示された。
これで、実行されたことがわかった。
確認ができれば、ローカルサーバーを一度閉じる。Ctrl+Cで閉じることができた。
HTMLファイルを表示
これを実際に用いる際は、htmlなどのファイルを用いて表示する。まずは、一つディレクトリを用意し、htmlとcssファイルを置く。因みに、htmlとcssファイルは、
と同じものを用いる。
早速、jsコードを書き換えてみた。res.sendをsendFileに変え、__dirname+'html/index.html'でhtmlファイルを読み込ませるようにした。
早速実行し、ブラウザで実行すると、以下のようになった。
これは、htmlファイルしか読み込んでいないため、cssファイルが読み取られてないのである。
これを読み込ませるために、use関数を定義し、static関数でhtmlディレクトリを読み込む。これでcssが用いることができるようになった。
再度実行し、ブラウザで開くと、
このように、cssファイルを読み込むことができるようになった。
別ページの表示
次に、別のページを表示できるようにする。そのためには、別のパスを定義したget関数を用意すればいい。
そして、htmlディレクトリに、別ページのhtml、cssファイルを追加する。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="another_page.css">
</head>
<body>
<div class="boxA">
<div class="header1">
header(left)
</div>
<div class="header2">
header(right)
</div>
</div>
<div class="boxB">
<div class="box1">
<div class="box1-1">
menuber1
</div>
<div class="box1-2">
menuber
</div>
<div class="box1-1">
menube2
</div>
</div>
<div class="box2">
<div class="box2-1">
title
</div>
<div class="box2-2">
Congraturation!
<br>You have accessed another page!
</div>
</div>
</div>
</body>
</html>
CSS
.boxA::after {
content: "";
display: block;
clear: both;
}
.boxB::after {
content: "";
display: block;
clear: both;
}
.header1 {float: left;
width: auto}
.header2 {float: right;
width: auto}
.boxA {padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
font-size: 40px;
font-weight: bold;
color:#1900ff;
background-color: rgb(0, 174, 255);
}
.boxB {
padding-top:20px;
}
.box1 {
float: left;
border:soild;
width: 200px;
border: 4px solid;
border-color:#a5a5a5;
padding-right: 5px;
padding-bottom: 100%;
}
.box1-1 {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 100%;
font-size: 30px;
font-weight: bold;
color:#1900ff;
background-color: rgb(0, 174, 255);
}
.box1-2 {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.box2 {float: left;
width: 83%;
padding-left: 20px;
}
.box2-1 {padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right:100%;
color:#1900ff;
background-color: rgb(0, 174, 255);
font-size: 30px;
font-weight: bold;
}
.box2-2 {padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;}
そして、htmlファイルも別ページにアクセスできるように改造する。
<div class="box2-2">
Hello World!
<br>I love Iketani Ran.
<br><a href ='/another'>another page.</a>
</div>
この状態でjsファイルを実行し、最初のページにアクセス。すると、追加したurlがあるため、そこをクリック。
すると、以下のページにアクセスすることができた。
これで、別ページの追加ができたことが確認できた。
こうして、expressでhtmlを表示させた。
