LoginSignup
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

開発者の環境や技術Advent Calendar 2019

Day 3
@hiroyuki_nagata(ながた ひろゆき)

CSVデータから大量にHTMLファイルを生成する。

Posted at

概要

神戸市が提供しているオープンデータ「観光施設情報」のCSVを元にHTMLを量産します。

制作物

・観光地一覧ページ(index.html)

index.jpg

・観光地詳細ページ（place**.html）

detail.jpg

開発環境

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,バリアフリー対応

観光施設情報 CSVデータ

ソース

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

リンク

Github

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?