ぷーあるちゃのログ振り返り用ビューア

最近（R5.11月中ごろ）ログの記録を紙から電子に切り替えました

紙に書くのでもいいのですが、入力スピードの観点からデジタルに切り替えました

※それ以外の要因として、紙が溜まってきて取り扱いに困っていることや検索性の悪さもあります

見た目はこんな感じです

https://i.gyazo.com/b7ff375d47abf24dbf2e0c8118869f25.jpg

マジックナンバー７±２を意識したわけではなく、仕事の営業日が５日間なので、５日分の表示にしています

一覧できるようにすることで、プロジェクトノートを作らなくても、情報の継続性を追えるようになった気がします

５日前ぐらいのことならば覚えているだろうと根拠のない自信がありましたが、振り返ってみるとほぼ覚えていませんでしたw

このログビューアはhtmlとJavascriptとCSSで作っていて、サーバは使わず、完全ローカルで動作しています

一日ごとのログもテキストエディタを使い、htmlに書いています

１日ごとのログの記録ファイルは、テンプレートを作っていますが、自動生成にはせず、複製して、手入力でファイル名の変更や日付の入力を行なっています

自動化は可能ですが、そこはあえて、手動にしています。これまでログの記録ファイルやページを自動生成したこともありますが、ことごとく書かなくなったので、自動化はやめておくことにしています

参考までソースも保存しておきます

サンデープログラマ（日曜大工プログラマ）なので、コードがとても冗長です、ご容赦ください

rashita.iconとても良いですね。まさにライフハックというか、小さな工夫というか素晴らしいと思います。

「パソコンを使う」ってつまりはこういうことなのだなという感触。

ぷーあるちゃ.iconご紹介いただきありがとうございました😭

https://open.spotify.com/episode/4CwYEbySoxr4x676Qxt9hf?si=7zTbhnHQSZ6YgyVhOsj63g

自分のやりたいことは、突き詰めると、そんなたくさんもないですし、見た目にもシンプルだったりしますね、結局のところ。

誰か作ったアプリが叶えてくれるとは、限らない。

rashita.iconたぶんその「自分のやりたいこと」を突き詰めて考えることが簡単ではないんでしょうね。だから「他の人のやりたいこと」に引きずられてしまうというか。

code:5days.html

<html>

<head>

</head>

var today = new Date();

var year = today.getFullYear();

var month = (today.getMonth() + 1).toString().padStart(2, '0');

var day = today.getDate().toString().padStart(2, '0');

var formattedDate = ${year}${month}${day};

console.log(formattedDate);

//１日前

var onedayago = new Date(today);

onedayago.setDate(today.getDate()-1);//１日前の日付を設定

var year1 = onedayago.getFullYear();

var month1 = (onedayago.getMonth() + 1).toString().padStart(2, '0');

var day1 = onedayago.getDate().toString().padStart(2, '0');

var formattedDate1day = ${year1}${month1}${day1};

console.log(formattedDate1day);

//２日前

var twodayago = new Date(today);

twodayago.setDate(today.getDate()-2);//２日前の日付を設定

var year2 = twodayago.getFullYear();

var month2 = (twodayago.getMonth() + 1).toString().padStart(2, '0');

var day2 = twodayago.getDate().toString().padStart(2, '0');

var formattedDate2day = ${year2}${month2}${day2};

console.log(formattedDate2day);

//３日前

var threedayago = new Date(today);

threedayago.setDate(today.getDate()-3);//３日前の日付を設定

var year3 = threedayago.getFullYear();

var month3 = (threedayago.getMonth() + 1).toString().padStart(2, '0');

var day3 = threedayago.getDate().toString().padStart(2, '0');

var formattedDate3day = ${year3}${month3}${day3};

console.log(formattedDate3day);

//４日前

var fourdayago = new Date(today);

fourdayago.setDate(today.getDate()-4);//３日前の日付を設定

var year4 = fourdayago.getFullYear();

var month4 = (fourdayago.getMonth() + 1).toString().padStart(2, '0');

var day4 = fourdayago.getDate().toString().padStart(2, '0');

var formattedDate4day = ${year4}${month4}${day4};

console.log(formattedDate4day);

var myfunc2 = function () {

document.getElementById('day5').innerHTML = '<object data=' + formattedDate + '.html' + '></object>';

document.getElementById('day4').innerHTML = '<object data=' + formattedDate1day + '.html' + '></object>';

document.getElementById('day3').innerHTML = '<object data=' + formattedDate2day + '.html' + '></object>';

document.getElementById('day2').innerHTML = '<object data=' + formattedDate3day + '.html' + '></object>';

document.getElementById('day1').innerHTML = '<object data=' + formattedDate4day + '.html' + '></object>';

};

</script>

<h1>５日間のログ</h1>

以下の場所に過去５日間のファイルを表示する</br>

</body>

</html>

CSSです。CSSというフォルダを作ってお使いください

code:css2.css

body{

font-family: serif;

}

h1{

font-family: sans-serif;

}

h2{

font-family: sans-serif;

}

object{

border: dotted 1px;

width: 400px;

height: 400px;

}

#day1{

float:left;

}

#day2{

float:left;

}

#day3{

float:left;

}

#day4{

float:left;

}

#day5{

float:left;

}

１日ごとのログファイルのテンプレートです。

ファイル名を西暦＋日付に直してお使いください

例　20231203.html

code:template.html

<html>

<head>

</head>

<body>

</body>

</html>

#ぷーあるちゃ