Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

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 1 year has passed since last update.

@ekzemplaro(内田 雅智)

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

Last updated at Posted at 2022-12-29

次のページを作成する方法です。
途中下車ウォークの記録
image.png

コードは Gitlab に置きます。
trip

プロジェクトは、
Pages/Plain HTML
というテンプレートを使って作成します。
image.png

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
1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?