HTA+CSS+JavaScriptでCSVに保存するやつ

2023年2月21日 23:51

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja"> 
<title>.</title>
<link rel="stylesheet" href="w.css">
<hta:application 
	applicationname="worklog"
	border="thin"
	icon="w.ico"
	innerborder="no"
	singleinstance="yes"
	>
<script src="w.js"></script>

</head>

<body>
<div id="all">

	<div id="inputBox">
		<form id="textForm">
			<p>
				<label><input type="checkbox" id="log" onclick="logLoad()" tabindex="-1">log</label>
				<label><input type="checkbox" id="logMax" onclick="logLoad()" checked tabindex="-1">latest</label>
				&nbsp;<span id="textLength"><span class="white">..</span>0</span>&nbsp;
				<label><input type="checkbox" id="yesterday" tabindex="-1">ytd</label>
			</p>
			<input type="text" id="textArea" onkeyup="textCount()" tabindex="2">
			<input type="text" id="dummy" style="display:none;">
			<input type="button" id="button" onclick="textSubmit()" value="post" tabindex="3">
		</form>

	</div>

	<div id="logBox"></div>
	
</div></body></html>

*{
	font-family: "うずらフォント","Yu Gothic UI";
	font-size: 14px;
	vertical-align: middle;
}

body{
	background-color: #FEFEFF;
}

#all{
	line-height: 1.4;
}

#textForm{
	margin-bottom: 0.5em;
}	

#textArea{
	width: 280px;
	padding: 2px;
	font-family: "うずらフォント";
	font-size: 18px;
	border: 2px solid #999999;
}

.white{
	color: #FFFFFF;
}

p{
	margin: 0.2em 0;
}

#button{
	background-color: #CCEEFF;
	padding: 3px 1px;
	width: 2.8em;
	font-size: 14px;
	border: 2px solid #999999;
}
#button:hover{
	background-color: #FFEEFF;
}

#inputBox{
	background-color: #DDDDE6;
	width: 100％;
	padding: 0.5em 1em 0;
	position: fixed;
	border-bottom: 4px dashed #999999;
	left: 0;
	top: 0;
	filter: alpha(opacity=90); /*IE向けの透過設定*/
}

.logOpen{
	margin: 0;
	line-height: 2.5;
}

#margin{
	margin-top: 5em;
}

#logbox{
	margin : 0;
}

form{
	margin: 0;
}

li{
	list-style-type: circle;
}
/*黒disc,白circle*/

b{
	margin-left: 1.2em;
	font-size: 1.2em;
	font-weight: normal;
	line-height: 1.5;
}

.day{
	font-size: 1.01em;
	font-weight: normal;
	color: #FFFFFF;
}

ul:first-letter{
	margin: -1.5em;
	font-size: 2em;
}

.m1{
	color: #cc7a7a;
}
.m2{
	color: #cc7acc;
}
.m3{
	color: #7a7acc;
}
.m4{
	color: #7acccc;
}
.m5{
	color: #7acc7a;
}
.m6{
	color: #cccc7a;
}
.m7{
	color: #cc7aa3;
}
.m8{
	color: #a37acc;
}
.m9{
	color: #7aa3cc;
}
.m10{
	color: #7acca3;
}
.m11{
	color: #a3cc7a;
}
.m12{
	color: #cca37a;
}

var textArea;
var textLength;
var log;
var logBox;
var logMax;
var ytd;

function apliOnload() {
	windowPath(100);
	setVariable();
	log.checked = false;
}

function windowPath(wHeight) {
	window.resizeTo(400,wHeight);
}

function setVariable() {
	textArea =  document.getElementById("textArea");
	textLength = document.getElementById("textLength");
	log = document.getElementById("log");
	logBox = document.getElementById("logBox");
	logMax = document.getElementById("logMax");
	ytd = document.getElementById("yesterday");
}

function textCount() {
	var len = "□□" + textArea.value.length;
	len = len.slice(-3);
	len = len.replace( /□/g , '<span class="white">.</span>' );
	textLength.innerHTML = len;
}

function textSubmit(){
	if(textArea.value.length === 0){
		alert("文字を入力してください");
		textArea.focus();
	}else{
		var today = getTimeFormat(Date.now());
		textAdd("w.csv",today.ymd+","+today.weekday+",")
		logLoad();
	}
	function textAdd(filePath,datetime){
		var fs = new ActiveXObject("Scripting.FileSystemObject");
		var file = fs.OpenTextFile(filePath, 8);
		file.WriteLine(datetime + textArea.value);
		file.Close();
		ytd.checked = false;
		textArea.value = "";
		textCount();
		textArea.focus();
	}
}

function logLoad(){
	if(!log.checked){
		logBox.innerHTML = "";
		windowPath(100);
	}else{
		windowPath(400);
		var fs = new ActiveXObject("Scripting.FileSystemObject");
		var file = fs.OpenTextFile("w.csv", 1, false, 0);
		var array = [];
		var lineStr = [];
		while (!file.AtEndOfStream){
			lineStr = file.ReadLine().split(',');
			array.push(lineStr);
		}
		file.Close();
		createHtml(array);
	}
}

function createHtml(array){
	var limit = logMax.checked ? 200 : Infinity;
	var tempHtml = "";
	var logDate = "";
	var logDay = "";
	var logText = "";
	var tagHeader1 = '</ul><ul><span class="m';
	var tagHeader2 = '">■</span><b><span class="day">';
	var i = array.length -1;
	var count = 0;
	while(0<=i&&count<limit){
		if(array[i][0] !== logDate){
			outputHeader();
			tempHtml += logText;
			logDate = array[i][0];
			logDay = array[i][1];
			logText = "";
		}
		logText = '<li>' + array[i][2] + '</li>' + logText;
		count++;
		i--;
	}
	outputHeader();
	tempHtml += logText + '</ul>';
	logBox.innerHTML = '<div id="margin"></div>' + tempHtml.slice(5);
	function outputHeader(){
		var month = logDate.split('\/')[1];
		if(logText.length > 0 ){
			tempHtml += tagHeader1 + month + tagHeader2 + logDay + '</span> ' + logDate.slice(5) + '</b>';
		}
	}
}


function getTimeFormat(DT) {
	DT = new Date(DT); 
	if (ytd.checked){DT.setDate(DT.getDate()-1);}
	var format = new Object();
	var weekday = ['日', '月', '火', '水', '木', '金', '土'];
	var hour = DT.getHours();
	var minute = DT.getMinutes();
	var second = DT.getSeconds();
	format.weekday = weekday[DT.getDay()];
	format.year = DT.getYear();
	format.month = DT.getMonth()+1;
	format.date = DT.getDate();
	format.ymd = format.year + "/" + format.month + "/" + format.date;
	format.dateAll = format.year * 10000 + format.month * 100 + format.date;
	format.dtAll = format.dateAll * 1000000 + hour * 10000 + minute * 100 + second;
	return format;
}

onload = apliOnload;

この記事が気に入ったらサポートをしてみませんか？