次のページを作成する方法です。
途中下車ウォークの記録
コードは Gitlab に置きます。
trip
プロジェクトは、
Pages/Plain HTML
というテンプレートを使って作成します。
public 以下のフォルダー構造
$ tree public/
public/
├── data.json
├── index.html -> trip.html
├── trip.css
├── trip.html
└── trip.js
trip.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta property="og:image" content="https://ekzemplaro.org/png/linux_logo.png">
<title>途中下車ウォークの記録</title>
</head>
<body>
<blockquote>
<h2>途中下車ウォークの記録</h2>
<blockquote>
<div class="contents"></div>
</blockquote>
</blockquote>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
<a href="../">Return</a><br /><br />
Dec/29/2022 AM 07:00<br />
<script src="trip.js"></script>
<link rel="stylesheet" href="trip.css">
</body>
</html>
trip.js
// -----------------------------------------------------------------------
// trip.js
//
// Dec/28/2022
//
// -----------------------------------------------------------------------
'use strict'
// -----------------------------------------------------------------------
window.onload = ()=>
{
document.querySelector("#outarea_aa").innerHTML = "*** trip.js *** start ***"
const file_json = "./data.json"
const place = ".contents"
read_fetch_table_proc(file_json,place)
document.querySelector("#outarea_hh").innerHTML = "*** trip.js *** end ***"
}
// -----------------------------------------------------------------------
function read_fetch_table_proc(url,place)
{
fetch(url).then((response) => {
if(!response.ok) {
console.log('Read error!')
throw new Error('error')
}
console.log('Read ok!')
return response.text()
}).then((data) => {
// console.log(data)
const data_aa = JSON.parse(data)
show_table_proc(place,data_aa)
})
}
// -----------------------------------------------------------------------
// [4]:
function show_table_proc(place,data_aa)
{
var str_out = ""
str_out += "<table>"
str_out += "<tr>"
str_out += "<th>No</th>"
str_out += "<th>日付</th>"
str_out += "<th>起点</th>"
str_out += "<th>終点</th>"
str_out += "</tr>"
var no = 1
data_aa.forEach(function (aax)
{
const llx = (aax.itenery).length
str_out += "<tr>"
str_out += "<td rowspan=" + llx + ">" + no + "</td>"
str_out += "<td rowspan=" + llx + ">" + aax.date + "</td>"
for (var it in aax.itenery)
{
str_out += "<td>" + aax.itenery[it].from + "</td>"
str_out += "<td>" + aax.itenery[it].to + "</td>"
str_out += "</tr>"
}
str_out += "</tr>"
no += 1
})
str_out += "</table>"
document.querySelector(place).innerHTML = str_out
}
// -----------------------------------------------------------------------
trip.css
/* -------------------------------------------------------------- */
/*
trip.css
Dec/29/2022
*/
/* -------------------------------------------------------------- */
table.main,td,th {
table-layout:fixed;
border:1.5px #7e7e7e solid;
border-collapse: collapse;
height: 16px;
}
th {
background: #c6c6c6;
}
table.tag {
border:0.5px green solid;
}
tr.cyan {
background-color: #c7d7c7;
}
.red {color:#ff0000;}
/* -------------------------------------------------------------- */
data.json
[
{"date": "2022-1-4", "itenery": [{"from": "四谷", "to": "上野"}]},
{"date": "2022-1-8", "itenery": [{"from": "稲田", "to": "笠間"},
{"from": "水戸", "to": "赤塚"},
{"from": "友部", "to": "宍戸"}]},
{"date": "2022-1-10", "itenery": [{"from": "三島", "to": "下土狩"},
{"from": "大岡", "to": "三島"}]},
{"date": "2022-1-14", "itenery": [{"from": "大宮", "to": "浦和"}]},
{"date": "2022-1-17", "itenery": [{"from": "稲毛海岸", "to": "検見川"},
{"from": "新鎌ヶ谷", "to": "東松戸"}]},
{"date": "2022-1-29", "itenery": [{"from": "北浦和", "to": "与野"}]},
{"date": "2022-2-13", "itenery": [{"from": "桐生", "to": "西桐生"},
{"from": "中央前橋", "to": "前橋"},
{"from": "伊勢崎", "to": "新伊勢崎"},
{"from": "細谷", "to": "太田"}]},
{"date": "2022-2-21", "itenery": [{"from": "稲毛海岸", "to": "京成幕張"},
{"from": "初富", "to": "八柱"}]},
{"date": "2022-3-1", "itenery": [{"from": "与野", "to": "浦和"}]},
{"date": "2022-3-13", "itenery": [{"from": "白坂", "to": "新白河"},
{"from": "白河", "to": "新白河"},
{"from": "黒磯", "to": "那須塩原"}]},
{"date": "2022-3-14", "itenery": [{"from": "稲毛海岸", "to": "新検見川"},
{"from": "船橋", "to": "船橋法典"},
{"from": "南浦和", "to": "浦和"}]},
{"date": "2022-3-4", "itenery": [{"from": "白河", "to": "新白河"},
{"from": "黒磯", "to": "那須塩原"}]},
{"date": "2022-3-31", "itenery": [{"from": "三島", "to": "下土狩"},
{"from": "大岡", "to": "沼津"}]},
{"date": "2022-4-3", "itenery": [{"from": "伊勢崎", "to": "駒形"}]},
{"date": "2022-4-8", "itenery": [{"from": "大宮", "to": "与野"}]},
{"date": "2022-4-10", "itenery": [{"from": "宍戸", "to": "友部"},
{"from": "水戸", "to": "赤塚"},
{"from": "友部", "to": "宍戸"}]},
{"date": "2022-4-14", "itenery": [{"from": "沼津", "to": "片浜"}]},
{"date": "2022-4-18", "itenery": [{"from": "稲毛海岸", "to": "検見川"},
{"from": "京成船橋", "to": "船橋法典"},
{"from": "南越谷", "to": "越谷"}]},
{"date": "2022-4-30", "itenery": [{"from": "桐生", "to": "丸山下"},
{"from": "城東", "to": "前橋"},
{"from": "富岡", "to": "新屋"},
{"from": "伊勢崎", "to": "剛志"}]},
{"date": "2022-5-11", "itenery": [{"from": "沼津", "to": "片浜"},
{"from": "川口", "to": "南浦和"}]},
{"date": "2022-5-21", "itenery": [{"from": "新木場", "to": "東雲"},
{"from": "国際展示場", "to": "東京テレポート"},
{"from": "新浦安", "to": "舞浜"}]},
{"date": "2022-5-28", "itenery": [{"from": "泉岳寺", "to": "高輪ゲートウェイ"},
{"from": "恵比寿", "to": "渋谷"}]},
{"date": "2022-6-10", "itenery": [{"from": "与野", "to": "北浦和"}]},
{"date": "2022-6-20", "itenery": [{"from": "稲毛海岸", "to": "京成幕張"},
{"from": "京成船橋", "to": "船橋法典"},
{"from": "南越谷", "to": "越谷"}]},
{"date": "2022-7-8", "itenery": [{"from": "与野", "to": "北浦和"}]},
{"date": "2022-7-9", "itenery": [{"from": "新白河", "to": "白河"},
{"from": "白河", "to": "新白河"},
{"from": "西那須野", "to": "野崎"}]},
{"date": "2022-7-11", "itenery": [{"from": "浦和", "to": "南浦和"},
{"from": "検見川", "to": "稲毛海岸"},
{"from": "千葉港", "to": "千葉"},
{"from": "新小岩", "to": "小岩"}]},
{"date": "2022-8-11", "itenery": [{"from": "浅草", "to": "錦糸町"},
{"from": "羽沢横浜国大", "to": "片倉町"}]},
{"date": "2022-8-29", "itenery": [{"from": "品川", "to": "大崎"},
{"from": "羽沢横浜国大", "to": "東神奈川"},
{"from": "大森", "to": "大崎"},
{"from": "野木", "to": "間々田"}]},
{"date": "2022-9-2", "itenery": [{"from": "新川崎", "to": "鹿島田"}]},
{"date": "2022-9-5", "itenery": [{"from": "品川", "to": "大崎"},
{"from": "羽沢横浜国大", "to": "東神奈川"},
{"from": "大口", "to": "鶴見"},
{"from": "野木", "to": "間々田"}]},
{"date": "2022-9-8", "itenery": [{"from": "長泉なめり", "to": "三島"},
{"from": "田端", "to": "尾久"}]},
{"date": "2022-9-16", "itenery": [{"from": "赤羽", "to": "東十条"}]},
{"date": "2022-9-21", "itenery": [{"from": "泉岳寺", "to": "高輪ゲートウェイ"},
{"from": "神田", "to": "上野"}]},
{"date": "2022-9-26", "itenery": [{"from": "越谷", "to": "越谷レークタウン"},
{"from": "検見川浜", "to": "検見川"},
{"from": "関屋", "to": "北千住"}]},
{"date": "2022-9-28", "itenery": [{"from": "沼津", "to": "片浜"}]},
{"date": "2022-10-9", "itenery": [{"from": "与野", "to": "さいたま新都心"}]},
{"date": "2022-10-15", "itenery": [{"from": "尻手", "to": "大師橋"},
{"from": "天王州アイル", "to": "品川"}]},
{"date": "2022-10-17", "itenery": [{"from": "船橋", "to": "南船橋"},
{"from": "検見川浜", "to": "検見川"},
{"from": "南越谷", "to": "越谷"}]},
{"date": "2022-11-12", "itenery": [{"from": "西川田", "to": "江曽島"}]},
{"date": "2022-11-21", "itenery": [{"from": "船橋", "to": "西船橋"},
{"from": "検見川浜", "to": "検見川"},
{"from": "越谷レークタウン", "to": "越谷"}]},
{"date": "2022-11-22", "itenery": [{"from": "南宇都宮", "to": "江曽島"}]},
{"date": "2022-12-10", "itenery": [{"from": "大貫", "to": "青堀"}]},
{"date": "2022-12-13", "itenery": [{"from": "思川", "to": "自治医大"}]},
{"date": "2022-12-17", "itenery": [{"from": "新川崎", "to": "大倉山"},
{"from": "日吉本町", "to": "鶴見"}]},
{"date": "2022-12-19", "itenery": [{"from": "稲毛海岸", "to": "検見川"},
{"from": "西千葉", "to": "千葉"},
{"from": "馬喰町", "to": "上野"}]},
{"date": "2022-12-23", "itenery": [{"from": "大宮", "to": "与野"}]},
{"date": "2022-12-25", "itenery": [{"from": "富田", "to": "足利フラワーパーク"},
{"from": "山前", "to": "小俣"},
{"from": "岡部", "to": "深谷"},
{"from": "行田", "to": "吹上"},
{"from": "宮原", "to": "東大宮"}]},
{"date": "2022-12-26", "itenery": [{"from": "泉岳寺", "to": "高輪ゲートウェイ"}]},
{"date": "2022-12-4", "itenery": [{"from": "", "to": ""},
{"from": "", "to": ""},
{"from": "", "to": ""}]},
{"date": "2022-12-4", "itenery": [{"from": "", "to": ""},
{"from": "", "to": ""}]},
{"date": "2022-12-4", "itenery": [{"from": "", "to": ""}]},
{"date": "2022-12-4", "itenery": [{"from": "", "to": ""}]}
]
データの更新方法
go_upload.sh
git add --all
git commit -m "Commit on Dec/29/2022 AM 10:14"
git push