初めに
前回は生httpでサーバサイドを作成しましたが、今回はテンプレートを使いたいので
express.jsを使用します
事前準備
以下のコマンドを実行してexpress.jsをインストールする
npm install express --save
写真サイトの作成
ゴールは写真共有サイトの作成になります
今回は写真を表示する仕組みを作ります
サーバーサイド作成
やっている事としては、imgディレクトリ配下のjpgファイルを全て取得してテンプレートに渡す
// ①HTTPサーバを作成するための必要
const express = require("express");
let app = express();
// ディレクトリ読み込み用
let fs = require('fs');
const IMG_PATH = 'img/img/';
// テンプレートエンジンの指定
app.set("view engine", "ejs");
// 静的ファイルを読み込めるようにする
app.use(express.static('css'));
app.use(express.static('img'));
app.get("/", function(req, res) {
let fileList = [];
try {
// img配下のファイルをすべて読み込む
let files = fs.readdirSync(IMG_PATH);
// jpgの画像を絞り込む
files.filter(function(file) {
return fs.statSync(IMG_PATH + file).isFile() && /.*\.jpg$/.test(file); //絞り込み
}).forEach(function(file) {
fileList.push(file);
});
let data = {
items : fileList
}
console.log(data);
// レンダリングを行う
res.render("./index.ejs", data);
} catch (err) {
// 読み込めない場合エラー画面に繊維
console.error(err);
res.render("./error.ejs");
}
});
// サーバ実行
app.listen(8081);
テンプレートの作成
・index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<header class="header">
<!-- タイトルとヘッダ画像の挿入 -->
<h1>写真投稿サイト</h1>
<div class="header-img"><img class="img-header" src="header/header.jpg" alt="" />
</header>
<!-- UIkit CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 共有する写真のパスを渡して全部表示する -->
<%- include("./item.ejs", items) %>
</body>
</html>
・item.ejs
<div>
<p>写真一覧</p>
<!-- 横スライドショーで表示 -->
<ul class="horizontal-list">
<% for (let item of items) { %>
<li class="item">
<!-- クリック時は正規のファイルをダウンロードさせる -->
<a href="img/<%- item %>" download="img/<%- item %>">
<!-- 画面に表示するのは小さくした画像（容量削減のため） -->
<img src="img_mini/s<%- item %>" alt="s<%- item %>">
</a>
</li>
<% } %>
</ul>
※写真全部で２G超えています。取得時はwifi環境で実施してください。
また、zipファイルのためダウンロード前に解凍環境を確認してください
<a href="136-231570-335954_photo_l_part1_of_2.zip" download>一括ダウンロードその１</a><br>
<a href="136-231570-335954_photo_l_part2_of_2.zip" download>一括ダウンロードその２</a><br>
・style.css
## スタイル
/** ヘッダのスタイル*/
header h1 {
font-size: 2.0rem;
line-height: 1.5rem;
background-color: #7CB342;
padding: 0px 5%;
color: #fff;
}
.horizontal-list {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.item {
/* 横スクロール用 */
display: inline-block;
margin: 16px;
background: rgba(255, 0, 0, 0.4);
}
/** ヘッダの画像だけは横いっぱいに表示 */
.img-header {
width: 100%;
max-width: 100%;
height: auto;
}
完成図
完成図です。顔はマスキングしてますのであしからず
総括
って感じで一応見せる用のサイトは作成できました。
シンプルすぎますがw
一応次はドメイン取得して外部公開方法予定です。