これはもしかしたら、ジョークプログラムかも、とお思いの皆さん・
- ご明察。
- JavaScript初心者が、Geminiくんに聞いて、JavaScriptで掲示板作って、と頼んだら作ってくれたものですね。
- （そのあと、JavaScript初心者が6時間ぐらい掛けて仕上げたものです。短いですが）
思い付きの発端
- GitHub Pagesに、掲示板CGIを設置したいけど、PerlもPHPも動かないよね。
- FC2とかの掲示板を借りるのはしゃくだよね。
- だったら、いっそのこと、Static HTMLとJavaScriptだけで掲示板って、作れないですかね～？
やってみた。
- ギッハブに上げるほどでもないので、ソースを貼り付け
- （ちなみに、骨格は全部Geminiくんが書いてくれました）
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>簡易掲示板</title>
</head>
<body>
<link rel="stylesheet" href="./style.css"/>
<h1>掲示板</h1>
<div id="thread-list"></div>
<form id="new-thread-form">
<label for="name">名前:</label>
<input type="text" id="name">
<br>
<label for="message">本文:</label>
<textarea id="message" cols="64"></textarea>
<br>
<button type="submit" onclick="postMsg()">投稿</button>
<br><br><br><br>
<button type="submit" onclick="clearMsg()">全データクリア</button>
</form>
<script src="script.js"></script>
</body>
</html>
JavaScript
script.js
// script.js
const threadList = document.getElementById('thread-list');
const newThreadForm = document.getElementById('new-thread-form');
var threads = [];
// ローカルストレージから読み込み.
function loadThreads() {
const s1 = localStorage.getItem('data');
if(s1 != '') {
threads = JSON.parse( s1 );
}
}
// スレッドデータをHTMLに変換する関数
function threadToHTML(thread) {
return `
<div class="thread">
<div class="thread-name">${thread.name}</div>
<div class="thread-message">${thread.message}</div>
</div>
`;
}
// スレッドを表示する関数
function displayThreads() {
threadList.innerHTML = '';
threads.forEach(thread => {
threadList.innerHTML += threadToHTML(thread);
});
}
// 新しいスレッドを追加する関数
function addThread(name, message) {
threads.push({ name, message });
displayThreads();
// ローカルストレージに保管.
const s1 = JSON.stringify(threads);
localStorage.setItem('data', s1 );
}
// ローカルストレージ全消去.
function clearThread() {
threads=[];
// ローカルストレージに保管.
const s1 = JSON.stringify(threads);
localStorage.setItem('data', s1 );
}
// 投稿ボタン OnClick
function postMsg() {
const name = document.getElementById('name').value;
const message = document.getElementById('message').value;
if((name!="")&&(message!="")) {
addThread(name, message);
}
newThreadForm.reset();
}
// 全消去ボタン OnClick
function clearMsg() {
clearThread();
}
// 最初のスレッドを表示する
// addThread('テストユーザー', 'これはテストスレッドです。');
loadThreads();
displayThreads();
//
- いらないかもだけど、CSS
style.css
/* style.css */
body {
font-family: sans-serif;
}
#thread-list {
margin-bottom: 20px;
}
.thread {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
.thread-name {
font-weight: bold;
}
.thread-message {
margin-top: 5px;
}
以上、JavaScript全くの初心者が人工知能に頼んで書いてもらったもの（を悪戦苦闘した結果）、でした。
スクショ
で、？
- 全クリアボタンはユーザーには見せないほうがいいでしょう。
- 投稿と同時に、なんらかのサーバーレスなストレージとか、自分のサイトに投稿ログを送信することで、投稿を集めることが可能。
- どんなに荒らされても、荒らしたデータは、その荒した人のブラウザのローカルストレージの中・・・というオチが楽しい。
- 自分用のメモ帳にも使えるかな。スマホとかで。ただし、異なるブラウザではデータは参照できません。
- もちろん、ブラウザのローカルストレージから投稿データを取得したり追加したりするかわりに、なんらかの外部ストレージ（Web API?）に保存したり参照したりすることが出来るように改造すれば、普通に掲示板になり得るかと・・・。
- （ただし、やるとは言ってない）