Makoto
むーーー
しろまる
どうしたにゃ？
Makoto
前回自動勤怠システム教えてもらったんだけど
毎回ファイルを見に行って開けるのがめんどくさいのーーー
しろまる
ものぐさだにゃー
Makoto
仕方ないじゃん面倒なんだもん！
ジェームズ
それではブラウザで見れるようにしましょうか
Makoto
そんなことできるんだ！
ジェームズ
まずは前提条件とファイル構成を。。。。
■前提条件
・Apacche2
※Linuxでしたら下記を実行してください
apt-get install apache2
■最終的なファイル構成
/var
└ /www
└ /html
├ index.html
├ Kyukei.html
├ /js
│└ Script.js
└ /csv
├ /Kintai
│ ├ Kintai202205.csv
│ ├ Kintai202206.csv
│ └ …
└ /Kyukei
├ Kyukei202205.csv
├ Kyukei202206.csv
└ …
Makoto
ふむふむ
ジェームズ
html中身はこのように書いていきます
Kyukei．htmlの中身はほぼ同じですので
詳しくはGitHubを見てください。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>勤怠管理</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
</head>
<body>
<h1><center>勤怠一覧</center></h1>
<a href="Kyukei.html"><center>休憩</center></a>
<div class="dtable">
<div class="dtable_c">
<table id="A">
<tr>
<td class = "topmenu">
内容
</td>
<td class = "topmenu">
日時
</td>
</tr>
</table>
</div>
<div class="dtable_c">
<table id="B">
<tr>
<td class = "topmenu">
内容
</td>
<td class = "topmenu">
日時
</td>
</tr>
</table>
</div>
<div class="dtable_c">
<table id="C">
<tr>
<td class = "topmenu">
内容
</td>
<td class = "topmenu">
日時
</td>
</tr>
</table>
</div>
</div>
<script src="./js/Script.js"></script>
<script>
import_csv('./csv/Kintai/Kintai' + date2 + '.csv', 'A')
import_csv('./csv/Kintai/Kintai' + date3 + '.csv', 'B')
import_csv('./csv/Kintai/Kintai' + date4 + '.csv', 'C')
</script>
</body>
</html>
Makoto
あとでリンク貼っとくね！
ジェームズ
続いてCSSも書いていきます
Makoto
見やすいのでお願い！
ジェームズ
努力します。。。
td {
padding: 3px 10px;
border: 1px solid #333;
font-weight:bold;
color: #3f3f3f;
}
table td {
background: #ffffe0;
}
table tr:nth-child(odd) td {
background: #ffffff;
}
.dtable{
display: table;
table-layout:fixed; /* ブロックレベル要素を均等に配置 */
margin:0 auto;
}
.dtable_c{
display: table-cell;
border: 0px solid #666;
}
.topmenu{
text-align:center;
background-color:#9370db !important;
font-weight:bold;
color: #EfEfEf;
}
ジェームズ
では今回のキモのJava Scriptを書いていきましょうか
Makoto
わーい
ジェームズ
html内でファイルを指定して呼び出せるような関数にしましょう
//日付の取得
const date1 = new Date();
const date2 = date1.getFullYear() + ("00" + (date1.getMonth() - 1)).slice(-2);
const date3 = date1.getFullYear() + ("00" + date1.getMonth()).slice(-2);
const date4 = date1.getFullYear() + ("00" + (date1.getMonth() + 1)).slice(-2);
// CSVの読み込み
function import_csv(csv_path,element_name)
{
var output_csv_el = document.getElementById(element_name);
fetch(csv_path)
.then((res) => {
if(!res.ok) {
console.log('正常にリクエストを処理できませんでした。');
}
return res.text();
})
.then((csv_data) => {
convert_array(csv_data,output_csv_el);
})
.catch((error) => {
console.log('エラーが発生しました。');
})
}
// テキストデータを配列に変換
function convert_array(csv_data,output_csv_el)
{
let data_array = [];
const data_string = csv_data.split('\n');
for (let i = 0; i < data_string.length; i++) {
data_array[i] = data_string[i].split(',');
}
draw_table(data_array,output_csv_el);
}
// テーブル描画
function draw_table(data_array,output_csv_el)
{
data_array.forEach(elements => {
const tr = document.createElement('tr');
output_csv_el.appendChild(tr);
elements.forEach(element => {
let td = document.createElement('td');
td.innerText = element
tr.appendChild(td);
});
});
}
Makoto
できたぁーーー！
しろまる
お疲れにゃー
ジェームズ
お疲れ様です
Makoto
コメント