ページ: 途中下車ウォークの記録

次のページを作成する方法です。
[途中下車ウォークの記録](https://ekzemplaro.gitlab.io/trip/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/0e233386-0a36-1af3-5b80-c513131ec831.png)


コードは Gitlab に置きます。
[trip](https://gitlab.com/ekzemplaro/trip)

プロジェクトは、
Pages/Plain HTML
というテンプレートを使って作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/111c53c8-ac11-cbb3-196f-2b28c5525f21.png)

public 以下のフォルダー構造

```text
$ tree public/
public/
├── data.json
├── index.html -> trip.html
├── trip.css
├── trip.html
└── trip.js
```

```html: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>
```

```js: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
}

// -----------------------------------------------------------------------
```

```css: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;}

/* -------------------------------------------------------------- */
```

```json: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": ""}]}
]
```

## データの更新方法

```bash:go_upload.sh
git add --all
git commit -m "Commit on Dec/29/2022 AM 10:14"
git push
```