<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下書き管理ツール</title>
<meta name="description" content="ブラウザ上で下書きを保存・管理し、コピーやエクスポート、タイムスタンプの付加などが可能な便利ツールです。ワープロソフトに比べ、名前を付けて保存する手間も省けます。">
<meta name="author" content="Everyone's Knowledge: Handy Notes みんなの知識 ちょっと便利帳">
<meta name="creation date" content="2024.09.01">
<meta name="robots" content="NOINDEX,NOFOLLOW">
<!-- Google Fonts CDN -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
<style>
body {font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; margin: 0 0 0 5px;}
.draft-form { margin-bottom: 5px; }
label { display: block; margin-bottom: 5px; }
input[type="text"], textarea { width: 98%; padding: 8px; margin-bottom: 10px; border: #666 1px solid ;border-radius: 4px; }
button { padding: 10px 15px; margin-right: 5px; }
.preview { padding: 10px; border: 1px solid #333; border-radius: 4px; background-color: #FAFAFA; margin-top: 10px; }
.title-highlight { font-weight: bold; color: #333; }
fieldset{margin: 0 0 20px 0; border: darkgray 2px solid; border-radius: 4px; }
.bgcolor-01{background-color: lavenderblush; }
.bgcolor-02{background-color: lightcyan; }
.bgcolor-03{background-color: #E8FBE8; }
.bgcolor-04{background-color: #FCFAFC; }
.bgcolor-05{background-color: #F5FFFA; }
/* ボタンのスタイル */
button {
background-color: #007bff; /* 青い背景色 */
color: #fff; /* 白い文字色 */
border: none;
border-radius: 4px;
padding: 3px 5px;
font-size: 16px; /* フォントサイズの指定 */
cursor: pointer;
margin: 5px 0;
transition: background-color 0.3s ease; /* ホバー時のアニメーション */
}
button:hover {
background-color: #0056b3; /* ホバー時の背景色 */
}
button[type="reset"] {
background-color: #6c757d; /* グレーの背景色 */
}
button[type="reset"]:hover {
background-color: #5a6268; /* ホバー時のグレーの背景色 */
}
/* リセットボタンのスタイル */
.reset-btn {
background-color: #ff6b6b;
}
/* 説明タイトル */
.setysumei_title{
font-weight: bold;
}
/* 説明本文*/
.setysumei_honbun{
margin: 0 0 0 20px;
}
legend{font-weight: bold}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const forms = document.querySelectorAll('.draft-form');
forms.forEach((form, index) => {
const titleField = form.querySelector(`input[name="title-${index + 1}"]`);
const contentField = form.querySelector(`textarea[name="content-${index + 1}"]`);
const previewDiv = form.querySelector('.preview');
const timestampKey = `timestamp-${index + 1}`;
// フィールドのデータをローカルストレージから復元
titleField.value = localStorage.getItem(titleField.name) || '';
contentField.value = localStorage.getItem(contentField.name) || '';
const savedTimestamp = localStorage.getItem(timestampKey) || 'まだ保存されていません';
// 入力ごとにローカルストレージに保存とプレビュー更新
[titleField, contentField].forEach(field => {
field.addEventListener('input', () => {
localStorage.setItem(field.name, field.value);
const timestamp = new Date().toLocaleString();
localStorage.setItem(timestampKey, timestamp);
adjustTextareaHeight(contentField);
updatePreview(timestamp);
});
});
// リセットボタンでローカルストレージもクリア
form.querySelector('.reset-btn').addEventListener('click', () => {
[titleField, contentField].forEach(field => {
localStorage.removeItem(field.name);
field.value = '';
adjustTextareaHeight(contentField);
});
localStorage.removeItem(timestampKey);
updatePreview('まだ保存されていません');
});
// クリックでコピーする機能
form.querySelector('.copy-btn').addEventListener('click', () => {
const content = contentField;
content.select();
document.execCommand('copy');
alert('内容がコピーされました！');
});
// エクスポート機能
form.querySelector('.export-btn').addEventListener('click', () => {
const data = {
title: titleField.value,
content: contentField.value,
timestamp: localStorage.getItem(timestampKey) || new Date().toLocaleString()
};
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `draft-${index + 1}.json`;
a.click();
});
// プレビュー機能の更新
function updatePreview(timestamp) {
const title = titleField.value ? `《${titleField.value}》` : '';
const escapedContent = contentField.value
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/\n/g, '<br>');
previewDiv.innerHTML = `
<div class="title-highlight">${title}</div>
<p>${escapedContent}</p>
<small>保存日時: ${timestamp}</small>
`;
}
// テキストエリアの高さを内容に合わせて調整する関数
function adjustTextareaHeight(textarea) {
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
}
// ページ読み込み時にテキストエリアの高さを調整
adjustTextareaHeight(contentField);
updatePreview(savedTimestamp);
});
});
</script>
</head>
<body>
<div align="center"><strong>《 下書き管理ツール 》</strong></div>
<fieldset class="bgcolor-01">
<legend>《 下書き ① 》</legend>
<div class="draft-form">
<label for="title-1">タイトル:</label>
<input type="text" id="title-1" name="title-1" placeholder="タイトルを入力">
<label for="content-1">内容:</label>
<textarea id="content-1" name="content-1" placeholder="内容を入力"></textarea>
<button type="button" class="copy-btn">クリックでコピー</button>
<button type="button" class="export-btn">エクスポート</button>
<button type="button" class="reset-btn">リセット</button>
<div class="preview"></div>
</div>
</fieldset>
<fieldset class="bgcolor-02">
<legend>《 下書き ② 》</legend>
<div class="draft-form">
<label for="title-2">タイトル:</label>
<input type="text" id="title-2" name="title-2" placeholder="タイトルを入力">
<label for="content-2">内容:</label>
<textarea id="content-2" name="content-2" placeholder="内容を入力"></textarea>
<button type="button" class="copy-btn">クリックでコピー</button>
<button type="button" class="export-btn">エクスポート</button>
<button type="button" class="reset-btn">リセット</button>
<div class="preview"></div>
</div>
</fieldset>
<fieldset class="bgcolor-03">
<legend>《 下書き ③ 》</legend>
<div class="draft-form ">
<label for="title-3">タイトル:</label>
<input type="text" id="title-3" name="title-3" class="b" placeholder="タイトルを入力">
<label for="content-3">内容:</label>
<textarea id="content-3" name="content-3" placeholder="内容を入力"></textarea>
<button type="button" class="copy-btn">クリックでコピー</button>
<button type="button" class="export-btn">エクスポート</button>
<button type="button" class="reset-btn">リセット</button>
<div class="preview"></div>
</div>
</fieldset>
<fieldset class="bgcolor-04">
<legend>《 下書き ④ 》</legend>
<div class="draft-form ">
<label for="title-4">タイトル:</label>
<input type="text" id="title-4" name="title-4" class="b" placeholder="タイトルを入力">
<label for="content-4">内容:</label>
<textarea id="content-4" name="content-4" placeholder="内容を入力"></textarea>
<button type="button" class="copy-btn">クリックでコピー</button>
<button type="button" class="export-btn">エクスポート</button>
<button type="button" class="reset-btn">リセット</button>
<div class="preview"></div>
</div>
</fieldset>
<fieldset class="bgcolor-05">
<legend>《 下書き ⑤ 》</legend>
<div class="draft-form ">
<label for="title-5">タイトル:</label>
<input type="text" id="title-5" name="title-5" class="b" placeholder="タイトルを入力">
<label for="content-5">内容:</label>
<textarea id="content-5" name="content-5" placeholder="内容を入力"></textarea>
<button type="button" class="copy-btn">クリックでコピー</button>
<button type="button" class="export-btn">エクスポート</button>
<button type="button" class="reset-btn">リセット</button>
<div class="preview"></div>
</div>
</fieldset>
<fieldset>
<legend><h3>《下書き管理ツールの仕様・特徴・機能など》</h3></legend>
<div class="notes" style="margin: 0 10px 10px">
<div class="setysumei_title">① ローカルストレージの保存場所など</div>
<div class="setysumei_honbun"> 入力されたデータは、ユーザーのブラウザの「ローカルストレージ」に保存されます。ローカルストレージは、以下の特性を持つブラウザのストレージ機能です。</div>
<ul>
<li><strong>ブラウザ固有</strong>: ローカルストレージは、データが保存された特定のブラウザ内にのみ存在します。他のブラウザやデバイスからはアクセスできません。</li>
<li><strong>ドメイン固有</strong>: データは保存された特定のドメイン（サイト）に関連付けられています。同じドメイン内のページならアクセスできますが、異なるドメインではアクセスできません。</li>
<li><strong>持続性</strong>: ローカルストレージに保存されたデータは、ブラウザを閉じても残りますが、コンピュータをシャットダウンや再起動した場合、データが削除されることがあります。必ず重要なデータは、テキストエディターや他の保存手段でバックアップしてください。また、プライベートモード（シークレットモード）では、データが保存されない場合があります。</li>
</ul>
<div class="setysumei_title">② Webサーバー上での挙動</div>
<div class="setysumei_honbun"> このHTMLファイルをWebサーバーにアップロードした場合、次のような挙動が予想されます。</div>
<ul>
<li><strong>同一ユーザー・同一ブラウザでの利用</strong>:</li>
<ul>
<li>あるユーザーがこのページにアクセスすると、そのユーザーのブラウザのローカルストレージにデータが保存されます。</li>
<li>同じユーザーが同じブラウザから再度アクセスした場合、以前の入力内容が復元されます。</li>
<li>ローカルストレージはクライアント（ユーザーのデバイス）側に保存されるため、他のユーザーやデバイスからはアクセスできません。</li>
</ul>
<li><strong>異なるユーザー・異なるブラウザでの利用</strong>:</li>
<ul>
<li>異なるユーザーが同じWebページにアクセスした場合、そのユーザーのブラウザに新しいローカルストレージが作成され、前のユーザーのデータにアクセスすることはできません。</li>
</ul>
<li><strong>データのセキュリティ</strong>:</li>
<ul>
<li>ローカルストレージはクライアント側に保存されるため、サーバーにはデータは送信されません。したがって、データはユーザー自身のデバイスにのみ保存されます。Webサーバー上にアップロードしても、個別のユーザーごとにデータが管理されるため、プライバシーは守られます。</li>
</ul>
</ul>
<div class="setysumei_title">③ 機能など</div>
<ul>
<li><strong>保存データのエクスポート機能</strong>: 保存したデータをJSON形式でエクスポートし、再利用することができます。</li>
<li><strong>入力内容のプレビュー機能</strong>: 入力中の内容をリアルタイムでプレビューし、編集の際の確認がしやすくなります。</li>
<li><strong>タイムスタンプの機能</strong>: 各下書きの保存日時を記録し、最後の編集時刻を確認することができます。</li>
<li><strong>コピー機能</strong>: 入力・保存した内容を、コピーボタンでコピーして利用することができます。</li>
</ul>
<div class="setysumei_title">《 まとめ 》</div>
<div class="setysumei_honbun"> このツールは、ローカルストレージを使用してデータを保存するため、Webサーバー上にアップロードしても、他のユーザーとデータが共有されることはありません。それぞれのユーザーが自分のブラウザ内でのみデータを保持し、リセットするまでデータは残り続けます。この機能はWebサーバー上でも安全に利用でき、ユーザーごとに独立して機能します。
<br> このツールは、ブラウザのローカルストレージを利用して簡単に下書きを保存・管理するためのものです。名前を付けて保存する手間を省き、ブラウザ上で直接入力と保存が行えます。使い方によっては、テキストエディターやワープロソフトと比べて便利さが増し、作業効率も高まるものと考えられます。<br>
<strong style="color: crimson"> ただし、コンピュータのシャットダウンや再起動によりデータが消える場合がありますので、重要なデータは定期的にエクスポートするか、テキストエディターやワープロソフトで保存してください。このツールは、あくまでも下書きの一時的保存の機能を提供するものです。</strong>
</div>
</div>
</fieldset>
</body>
</html>
