概要
神戸市が提供しているオープンデータ「観光施設情報」のCSVを元にHTMLを量産します。
制作物
・観光地一覧ページ(index.html)
・観光地詳細ページ（place**.html）
開発環境
node v9.3.0
npm v6.12.1
gulp v4.0.2
package.json
{
"name": "csv2html",
"version": "0.0.1",
"scripts": {
"gulp": "gulp"
},
"devDependencies": {
"autoprefixer": "^9.6.1",
"csv-parser": "^2.3.2",
"fs": "0.0.1-security",
"gulp": "^4.0.2",
"gulp-ejs": "^4.1.2",
"gulp-postcss": "^8.0.0",
"gulp-rename": "^1.4.0",
"gulp-stylus": "^2.7.0"
},
"browserslist": [
"last 2 versions",
"ie >= 10",
"Android >= 4"
]
}
読み込むCSV
名称,名称のルビ,郵便番号,カテゴリ,住所,緯度,経度,電話番号,説明文,営業時間,定休日,URL,バリアフリー対応
ソース
gulpfile.js
const gulp = require('gulp');
const postcss = require("gulp-postcss");
const autoprefixer = require('autoprefixer');
const stylus = require('gulp-stylus');
const rename = require('gulp-rename');
const ejs = require("gulp-ejs");
const fs = require('fs');
const csv = require('csv-parser');
/*-------------------------------------------------
--------------------------------------------------*/
gulp.task('stylus', function() {
return gulp.src(['resources/stylus/**/*.styl','!resources/stylus/**/_*.styl'])
.pipe(stylus({
compress: true
}))
.pipe(postcss([
autoprefixer({
cascade: false
})
]))
.pipe(gulp.dest('htdocs/assets/css/'));
});
/*-------------------------------------------------
--------------------------------------------------*/
gulp.task( "ejs", function () {
let json;
const results = [];
return fs.createReadStream(__dirname + '/resources/tourism_od2810.csv')
.pipe(csv())
.on('data', function(data){
let zip = data['郵便番号'];
data['郵便番号'] = zip.substr(1,3) + '-' + zip.substr(4,4);
let cat = data['カテゴリ'];
data['カテゴリ'] = cat.substr(1,4);
results.push(data);
})
.on('end', function(){
json = {
item : results
};
gulp.src(["./resources/ejs/index.ejs"])
.pipe(ejs(json))
.pipe(rename(
{
extname: '.html'
}))
.pipe( gulp.dest( "./htdocs" ) );
////////////////////////
for(let prop in results){
json = {
item : results[prop]
};
gulp.src(["./resources/ejs/place.ejs"])
.pipe(ejs(json))
.pipe(rename(
{
basename: 'place' + prop,
extname: '.html'
}))
.pipe( gulp.dest( "./htdocs" ) );
}
});
});
/*-------------------------------------------------
--------------------------------------------------*/
gulp.task('watch', function(){
gulp.watch( 'resources/sass/**/*.scss', gulp.task('scss'));
gulp.watch( 'resources/stylus/**/*.styl', gulp.task('stylus'));
gulp.watch( 'resources/ejs/**/*.ejs', gulp.task('ejs'));
});
観光地一覧 index.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>神戸市観光施設情報</title>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/script.min.js"></script>
</head>
<body>
<header>
<div class="header-inr">
<a class="header-logo" href="index.html">
<h1>神戸市観光施設情報</h1>
</a>
</div>
</header>
<div id="contents">
<h2>神戸市観光施設 一覧</h2>
<table>
<% for (var prop in item) { %>
<tr>
<td><a href="place<%- prop %>.html"><%- item[prop]['名称'] %></a></td>
</tr>
<% } %>
</table>
</div>
<footer>
Copyright 2019
</footer>
</body>
</html>
観光地詳細 place.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>神戸市観光施設情報</title>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/script.min.js"></script>
</head>
<body>
<header>
<div class="header-inr">
<a class="header-logo" href="index.html">
<h1>神戸市観光施設情報</h1>
</a>
</div>
</header>
<ul>
<li><a href="index.html">HOME</a></li>
<li><%- item['名称'] %></li>
</ul>
<div id="contents">
<h2><%- item['名称'] %></h2>
<div><%- item['名称のルビ'] %></div>
<iframe src="http://maps.google.co.jp/maps?q=<%- item['緯度'] %>,<%- item['経度'] %>&output=embed&t=m&z=20&hl=ja" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="100%" height="450"></iframe>
<table>
<tr>
<th>郵便番号</th>
<td><%- item['郵便番号'] %></td>
</tr>
<tr>
<th>カテゴリ</th>
<td><%- item['カテゴリ'] %></td>
</tr>
<tr>
<th>住所</th>
<td><%- item['住所'] %></td>
</tr>
<tr>
<th>緯度</th>
<td><%- item['緯度'] %></td>
</tr>
<tr>
<th>経度</th>
<td><%- item['経度'] %></td>
</tr>
<tr>
<th>電話番号</th>
<td><%- item['電話番号'] %></td>
</tr>
<tr>
<th>説明文</th>
<td><%- item['説明文'] %></td>
</tr>
<tr>
<th>営業時間</th>
<td><%- item['営業時間'] %></td>
</tr>
<tr>
<th>定休日</th>
<td><%- item['定休日'] %></td>
</tr>
<tr>
<th>URL</th>
<td><a href="<%- item['URL'] %>" target="_blank"><%- item['URL'] %></a></td>
</tr>
<tr>
<th>バリアフリー対応</th>
<td><%- item['バリアフリー対応'] %></td>
</tr>
</table>
</div>
<footer>
Copyright 2019
</footer>
</body>
</html>
Stylus
body
margin 0
padding 0
background-color #325e91
font-family 'Noto Sans JP', sans-serif
color #333333
header
padding 15px
background #ffffff
margin-bottom 15px
h1
margin 0
padding 0
a
text-decoration none
color #333333
footer
font-size 10px
color #ffffff
text-align center
padding 10px 0
background-color #000000
#contents
background-color #ffffff
max-width 1200px
width 100%
margin 0 auto 30px auto
padding 30px 10px
nav
width 25%
main
width 75%
table
border-collapse collapse
border-top 1px solid #cccccc
border-left 1px solid #cccccc
width 100%
th
background-color #eeeeee
text-align left
padding 10px
white-space nowrap
font-size 14px
border-bottom 1px solid #cccccc
border-right 1px solid #cccccc
td
padding 10px
font-size 14px
border-bottom 1px solid #cccccc
border-right 1px solid #cccccc
ul,li
padding 0
list-style none
ul
width 100%
max-width 1200px
margin 0 auto 10px auto
li
color #ffffff
display inline-block
&:after
content ">"
display inline-block
margin-left 10px
li:last-child:after
display none
li + li
margin-left 10px
a
color #ffffff
変換コマンド
Stylus変換
npm run gulp stylus
ejs変換
npm run gulp ejs
Watch
npm run gulp watch