概要
神戸市が提供しているオープンデータ「観光施設情報」の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
constgulp=require('gulp');constpostcss=require("gulp-postcss");constautoprefixer=require('autoprefixer');conststylus=require('gulp-stylus');constrename=require('gulp-rename');constejs=require("gulp-ejs");constfs=require('fs');constcsv=require('csv-parser');/*-------------------------------------------------
--------------------------------------------------*/gulp.task('stylus',function(){returngulp.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(){letjson;constresults=[];returnfs.createReadStream(__dirname+'/resources/tourism_od2810.csv').pipe(csv()).on('data',function(data){letzip=data['郵便番号'];data['郵便番号']=zip.substr(1,3)+'-'+zip.substr(4,4);letcat=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(letpropinresults){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><htmllang="ja"><head><metacharset="utf-8"><title>神戸市観光施設情報</title><linkhref="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap"rel="stylesheet"><linkrel="stylesheet"href="assets/css/style.css"><script src="assets/js/script.min.js"></script></head><body><header><divclass="header-inr"><aclass="header-logo"href="index.html"><h1>神戸市観光施設情報</h1></a></div></header><divid="contents"><h2>神戸市観光施設 一覧</h2><table><%for(varpropinitem){%><tr><td><ahref="place<%- prop %>.html"><%-item[prop]['名称']%></a></td></tr><%}%></table></div><footer>
Copyright 2019
</footer></body></html>観光地詳細 place.ejs
<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><title>神戸市観光施設情報</title><linkhref="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap"rel="stylesheet"><linkrel="stylesheet"href="assets/css/style.css"><script src="assets/js/script.min.js"></script></head><body><header><divclass="header-inr"><aclass="header-logo"href="index.html"><h1>神戸市観光施設情報</h1></a></div></header><ul><li><ahref="index.html">HOME</a></li><li><%-item['名称']%></li></ul><divid="contents"><h2><%-item['名称']%></h2><div><%-item['名称のルビ']%></div>
<iframesrc="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><ahref="<%- 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
bodymargin0padding0background-color#325e91font-family'Noto Sans JP',sans-serifcolor#333333headerpadding15pxbackground#ffffffmargin-bottom15pxh1margin0padding0atext-decorationnonecolor#333333footerfont-size10pxcolor#fffffftext-aligncenterpadding10px0background-color#000000#contentsbackground-color#ffffffmax-width1200pxwidth100%margin0auto30pxautopadding30px10pxnavwidth25%mainwidth75%tableborder-collapsecollapseborder-top1pxsolid#ccccccborder-left1pxsolid#ccccccwidth100%thbackground-color#eeeeeetext-alignleftpadding10pxwhite-spacenowrapfont-size14pxborder-bottom1pxsolid#ccccccborder-right1pxsolid#cccccctdpadding10pxfont-size14pxborder-bottom1pxsolid#ccccccborder-right1pxsolid#ccccccul,lipadding0list-stylenoneulwidth100%max-width1200pxmargin0auto10pxautolicolor#ffffffdisplayinline-block&:aftercontent">"displayinline-blockmargin-left10pxli:last-child:afterdisplaynoneli+limargin-left10pxacolor#ffffff変換コマンド
Stylus変換
npm run gulp stylus
ejs変換
npm run gulp ejs
Watch
npm run gulp watch