<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Mobile Ready TODO List with Assessment</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
padding: 20px 10px;
margin: 0;
-webkit-tap-highlight-color: transparent;
}
.container {
width: 100%;
max-width: 500px;
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: relative;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.header-left {
display: flex;
align-items: center;
gap: 10px;
}
h2 { margin: 0; color: #333; font-size: 1.5rem; }
.header-btn {
border: none;
padding: 6px 12px;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
color: #333;
transition: opacity 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.header-btn:active { opacity: 0.8; }
#edit-toggle-btn { background-color: #6c757d; color: white; font-size: 14px; }
#edit-toggle-btn.active { background-color: #28a745; }
#random-btn { background-color: #ffc107; }
#history-btn { background-color: #6f42c1; color: white; }
.input-group {
display: flex;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
border-radius: 8px;
overflow: hidden;
}
#task-input {
flex-grow: 1;
padding: 12px 15px;
border: 1px solid #ddd;
border-right: none;
outline: none;
font-size: 16px;
border-radius: 8px 0 0 8px;
}
#add-btn {
padding: 0 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
font-weight: bold;
font-size: 16px;
border-radius: 0 8px 8px 0;
min-width: 60px;
}
.todo-list { list-style: none; padding: 0; margin: 0; min-height: 50px; }
.todo-item {
background-color: #fff;
border-bottom: 1px solid #eee;
padding: 15px 10px;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
touch-action: pan-y;
min-height: 40px;
}
.todo-text {
flex-grow: 1;
font-size: 16px;
padding-right: 10px;
word-break: break-all;
line-height: 1.5;
}
.edit-input {
flex-grow: 1;
font-size: 16px;
padding: 5px 8px;
margin-right: 10px;
border: 2px solid #17a2b8;
border-radius: 4px;
outline: none;
width: 100px;
}
.handle, .delete-btn, .modify-btn { display: none; }
.edit-mode .handle {
display: inline-block;
color: #ccc;
margin-right: 10px;
cursor: grab;
font-size: 20px;
padding: 5px;
}
.btn-group { display: flex; gap: 5px; align-items: center; }
.edit-mode .modify-btn {
display: block;
background-color: #17a2b8;
color: white;
border: none;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
flex-shrink: 0;
}
.edit-mode .modify-btn.saving { background-color: #007bff; }
.edit-mode .delete-btn {
display: block;
background-color: #ff4d4d;
color: white;
border: none;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
flex-shrink: 0;
}
.sortable-ghost { opacity: 0.4; background-color: #e3f2fd; }
.sortable-drag { background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.15); opacity: 1; }
/* モーダル共通 */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
justify-content: center;
align-items: center;
backdrop-filter: blur(2px);
}
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 12px;
width: 90%;
max-width: 450px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 5px 20px rgba(0,0,0,0.25);
animation: popIn 0.2s ease-out;
}
@keyframes popIn {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* 履歴表示スタイル */
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.modal-header h3 { margin: 0; font-size: 1.2rem; color: #333; }
.close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: #666; padding: 0 5px; }
#history-list {
list-style: none;
padding: 0;
margin: 0;
overflow-y: auto;
flex-grow: 1;
}
.history-item {
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 14px;
}
.history-header {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
.history-date { font-size: 12px; color: #888; }
.history-symbol { font-weight: bold; color: #6f42c1; margin-left: 10px; }
.history-text {
color: #333;
font-weight: 500;
word-break: break-all;
margin-bottom: 4px;
}
.history-memo {
font-size: 13px;
color: #666;
background: #f8f9fa;
padding: 4px 8px;
border-radius: 4px;
display: inline-block;
margin-top: 2px;
}
.empty-history { text-align: center; color: #999; padding: 20px 0; }
#clear-history-btn {
margin-top: 15px;
background-color: #fff;
color: #dc3545;
border: 1px solid #dc3545;
padding: 8px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
width: 100%;
}
/* ★ 削除確認モーダル カスタム要素 */
.confirm-task-preview {
font-weight: bold;
color: #007bff;
display: block;
margin-bottom: 15px;
background: #f8f9fa;
padding: 10px;
border-radius: 6px;
word-break: break-all;
text-align: center;
}
/* 評価ボタン群 */
.assessment-group {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 15px;
}
.assess-btn {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #ddd;
background: #fff;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
color: #ccc;
}
.assess-btn.selected {
border-color: #6f42c1;
color: #6f42c1;
background-color: #f3eefc;
font-weight: bold;
transform: scale(1.1);
}
/* 1行メモ入力 */
#confirm-memo-input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
margin-bottom: 20px;
box-sizing: border-box; /* paddingを含める */
}
.confirm-main-buttons { display: flex; gap: 10px; margin-bottom: 10px; }
.confirm-btn {
padding: 12px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
flex: 1;
}
#btn-record-delete { background-color: #6f42c1; color: white; }
#btn-just-delete { background-color: #ff4d4d; color: white; }
#btn-cancel-delete { background-color: #e9ecef; color: #333; width: 100%; }
</style>
</head>
<body>
<div class="container" id="main-container">
<div class="header">
<div class="header-left">
<h2>My Tasks</h2>
<button id="random-btn" class="header-btn" title="ランダム">🎲</button>
<button id="history-btn" class="header-btn" title="履歴">📖</button>
</div>
<button id="edit-toggle-btn" class="header-btn">編集</button>
</div>
<div class="input-group">
<input type="text" id="task-input" placeholder="タスクを入力..." autocomplete="off">
<button id="add-btn">追加</button>
</div>
<ul id="todo-list" class="todo-list"></ul>
</div>
<div id="history-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>完了・削除履歴</h3>
<button class="close-btn" id="close-history">×</button>
</div>
<ul id="history-list"></ul>
<button id="clear-history-btn">履歴を全て消去</button>
</div>
</div>
<div id="confirm-modal" class="modal">
<div class="modal-content" style="max-width: 380px;">
<div class="modal-header" style="border:none; padding-bottom:0; margin-bottom:10px;">
<h3 style="font-size:1rem; color:#666;">タスクを削除・記録</h3>
</div>
<span id="confirm-task-name" class="confirm-task-preview"></span>
<div class="assessment-group">
<button class="assess-btn" data-val="○">○</button>
<button class="assess-btn" data-val="△">△</button>
<button class="assess-btn" data-val="✕">✕</button>
</div>
<input type="text" id="confirm-memo-input" placeholder="ひとことメモ（任意）" autocomplete="off">
<div class="confirm-actions">
<div class="confirm-main-buttons">
<button id="btn-record-delete" class="confirm-btn">📖 記録して削除</button>
<button id="btn-just-delete" class="confirm-btn">🗑️ 記録せず削除</button>
</div>
<button id="btn-cancel-delete" class="confirm-btn">キャンセル</button>
</div>
</div>
</div>
<script>
const input = document.getElementById('task-input');
const addBtn = document.getElementById('add-btn');
const list = document.getElementById('todo-list');
const editToggleBtn = document.getElementById('edit-toggle-btn');
const randomBtn = document.getElementById('random-btn');
const historyBtn = document.getElementById('history-btn');
const container = document.getElementById('main-container');
// 履歴モーダル
const historyModal = document.getElementById('history-modal');
const closeHistoryBtn = document.getElementById('close-history');
const historyList = document.getElementById('history-list');
const clearHistoryBtn = document.getElementById('clear-history-btn');
// ★ 削除確認モーダル要素
const confirmModal = document.getElementById('confirm-modal');
const confirmTaskName = document.getElementById('confirm-task-name');
const confirmMemoInput = document.getElementById('confirm-memo-input'); // メモ入力欄
const assessBtns = document.querySelectorAll('.assess-btn'); // 評価ボタンたち
const btnRecordDelete = document.getElementById('btn-record-delete');
const btnJustDelete = document.getElementById('btn-just-delete');
const btnCancelDelete = document.getElementById('btn-cancel-delete');
let pendingDeleteTarget = null;
let selectedSymbol = ''; // 選択された記号を保持
function getCurrentTime() {
const now = new Date();
const y = now.getFullYear();
const m = (now.getMonth() + 1).toString().padStart(2, '0');
const d = now.getDate().toString().padStart(2, '0');
const h = now.getHours().toString().padStart(2, '0');
const min = now.getMinutes().toString().padStart(2, '0');
return `${y}/${m}/${d} ${h}:${min}`;
}
// ★ 履歴保存関数の拡張 (symbol, memo追加)
function saveToHistory(text, symbol, memo) {
const historyData = JSON.parse(localStorage.getItem('myTodoHistory') || '[]');
const newItem = {
text: text,
date: getCurrentTime(),
symbol: symbol || '', // 未選択なら空文字
memo: memo || '' // 未入力なら空文字
};
historyData.unshift(newItem);
localStorage.setItem('myTodoHistory', JSON.stringify(historyData));
}
// ★ 履歴表示関数の拡張
function renderHistory() {
const historyData = JSON.parse(localStorage.getItem('myTodoHistory') || '[]');
historyList.innerHTML = '';
if (historyData.length === 0) {
historyList.innerHTML = '<li class="empty-history">履歴はありません</li>';
return;
}
historyData.forEach(item => {
const li = document.createElement('li');
li.className = 'history-item';
// 記号がある場合のみ表示
const symbolHtml = item.symbol ? `<span class="history-symbol">${item.symbol}</span>` : '';
// メモがある場合のみ表示
const memoHtml = item.memo ? `<div class="history-memo">${item.memo}</div>` : '';
li.innerHTML = `
<div class="history-header">
<span class="history-date">${item.date}</span>
${symbolHtml}
</div>
<div class="history-text">${item.text}</div>
${memoHtml}
`;
historyList.appendChild(li);
});
}
// --- 履歴モーダル制御 ---
historyBtn.addEventListener('click', () => {
renderHistory();
historyModal.style.display = 'flex';
});
closeHistoryBtn.addEventListener('click', () => {
historyModal.style.display = 'none';
});
clearHistoryBtn.addEventListener('click', () => {
if(confirm('履歴を全て完全に消去しますか？')) {
localStorage.removeItem('myTodoHistory');
renderHistory();
}
});
// --- 削除確認モーダル制御 ---
// ★ 評価ボタンの選択処理
assessBtns.forEach(btn => {
btn.addEventListener('click', () => {
// 他のボタンの選択状態を解除
assessBtns.forEach(b => b.classList.remove('selected'));
// クリックされたボタンを選択状態に
btn.classList.add('selected');
selectedSymbol = btn.dataset.val;
});
});
function executeDelete(record) {
if (!pendingDeleteTarget) return;
const li = pendingDeleteTarget;
// テキスト取得
let taskText = "";
const inputEl = li.querySelector('.edit-input');
if (inputEl) taskText = inputEl.value;
else taskText = li.querySelector('.todo-text').textContent;
// 記録する場合
if (record && taskText) {
const memoText = confirmMemoInput.value.trim();
saveToHistory(taskText, selectedSymbol, memoText);
}
// 削除アニメーション
li.style.transform = 'translateX(100%)';
li.style.transition = '0.3s';
setTimeout(() => {
li.remove();
saveTodos();
}, 300);
confirmModal.style.display = 'none';
pendingDeleteTarget = null;
}
// ボタンイベント
btnRecordDelete.addEventListener('click', () => executeDelete(true));
btnJustDelete.addEventListener('click', () => executeDelete(false));
btnCancelDelete.addEventListener('click', () => {
confirmModal.style.display = 'none';
pendingDeleteTarget = null;
});
window.addEventListener('click', (e) => {
if (e.target === historyModal) historyModal.style.display = 'none';
if (e.target === confirmModal) {
confirmModal.style.display = 'none';
pendingDeleteTarget = null;
}
});
function saveTodos() {
const todos = [];
document.querySelectorAll('.todo-item').forEach(li => {
const inputEl = li.querySelector('.edit-input');
const textEl = li.querySelector('.todo-text');
if (inputEl) todos.push(inputEl.value);
else if (textEl) todos.push(textEl.textContent);
});
localStorage.setItem('myTodoList', JSON.stringify(todos));
}
function loadTodos() {
const saved = localStorage.getItem('myTodoList');
if (saved) {
const todos = JSON.parse(saved);
todos.forEach(text => addTodo(text, false));
} else {
addTodo('タスク1', false);
addTodo('タスク2', false);
addTodo('タスク3', false);
saveTodos();
}
}
let sortable = new Sortable(list, {
animation: 150,
ghostClass: 'sortable-ghost',
dragClass: 'sortable-drag',
handle: '.handle',
delay: 0,
disabled: true,
onEnd: function() { saveTodos(); }
});
randomBtn.addEventListener('click', () => {
const items = Array.from(list.children);
if (items.length < 2) return;
for (let i = items.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[items[i], items[j]] = [items[j], items[i]];
}
items.forEach(item => list.appendChild(item));
saveTodos();
});
editToggleBtn.addEventListener('click', () => {
const isEditMode = container.classList.toggle('edit-mode');
if (isEditMode) {
editToggleBtn.textContent = '完了';
editToggleBtn.classList.add('active');
sortable.option('disabled', false);
} else {
document.querySelectorAll('.modify-btn.saving').forEach(btn => btn.click());
editToggleBtn.textContent = '編集';
editToggleBtn.classList.remove('active');
sortable.option('disabled', true);
}
});
addBtn.addEventListener('click', () => {
const text = input.value.trim();
if (text) {
addTodo(text);
input.value = '';
input.focus();
}
});
input.addEventListener('keypress', (e) => {
if (e.key === 'Enter') addBtn.click();
});
function addTodo(text, save = true) {
const li = document.createElement('li');
li.classList.add('todo-item');
li.innerHTML = `
<span class="handle">≡</span>
<span class="todo-text"></span>
<div class="btn-group">
<button class="modify-btn">修正</button>
<button class="delete-btn">削除</button>
</div>
`;
const textSpan = li.querySelector('.todo-text');
textSpan.textContent = text;
const modifyBtn = li.querySelector('.modify-btn');
modifyBtn.addEventListener('click', () => {
const isEditing = modifyBtn.classList.contains('saving');
if (!isEditing) {
const currentText = textSpan.textContent;
const inputEl = document.createElement('input');
inputEl.type = 'text';
inputEl.value = currentText;
inputEl.classList.add('edit-input');
li.replaceChild(inputEl, textSpan);
modifyBtn.textContent = '保存';
modifyBtn.classList.add('saving');
inputEl.focus();
inputEl.addEventListener('keypress', (e) => {
if (e.key === 'Enter') modifyBtn.click();
});
} else {
const inputEl = li.querySelector('.edit-input');
const newText = inputEl.value.trim();
textSpan.textContent = inputEl.value === "" ? textSpan.textContent : newText;
li.replaceChild(textSpan, inputEl);
modifyBtn.textContent = '修正';
modifyBtn.classList.remove('saving');
saveTodos();
}
});
// ★ 削除ボタン処理
li.querySelector('.delete-btn').addEventListener('click', (e) => {
e.stopPropagation();
pendingDeleteTarget = li;
// タスク名セット
let currentText = "";
const inputEl = li.querySelector('.edit-input');
if (inputEl) currentText = inputEl.value;
else currentText = textSpan.textContent;
confirmTaskName.textContent = currentText;
// ★ 初期化処理
// メモを空にする
confirmMemoInput.value = '';
// 記号選択をリセット (例えばリセット時は何も選択しない、あるいはデフォルトで○にする等)
assessBtns.forEach(b => b.classList.remove('selected'));
selectedSymbol = ''; // 必須でなければ空文字
confirmModal.style.display = 'flex';
// メモ入力にフォーカスを当てると使いやすいかも（スマホだとキーボードが出るのでお好みですが、今回は外しておきます）
});
list.appendChild(li);
if (save) {
li.scrollIntoView({ behavior: 'smooth', block: 'end' });
saveTodos();
}
}
loadTodos();
</script>
</body>
</html>
使用変数
| ) { saveTodos -------( Function ) | |
| addBtn | |
| addTodo -------( Function ) | |
| assessBtns | |
| autocomplete | |
| b | |
| btn | |
| btnCancelDelete | |
| btnJustDelete | |
| btnRecordDelete | |
| charset | |
| class | |
| className | |
| clearHistoryBtn | |
| closeHistoryBtn | |
| confirmMemoInput | |
| confirmModal | |
| confirmTaskName | |
| container | |
| content | |
| currentText | |
| d | |
| display | |
| editToggleBtn | |
| endingDeleteTarget | |
| executeDelete -------( Function ) | |
| getCurrentTime -------( Function ) | |
| h | |
| historyBtn | |
| historyData | |
| historyList | |
| historyModal | |
| i | |
| id | |
| innerHTML | |
| input | |
| inputEl | |
| isEditing | |
| isEditMode | |
| item | |
| items | |
| j | |
| key | |
| lang | |
| length | |
| li | |
| list | |
| loadTodos -------( Function ) | |
| m | |
| memoHtml | |
| memoText | |
| min | |
| modifyBtn | |
| name | |
| newItem | |
| newText | |
| now | |
| placeholder | |
| randomBtn | |
| renderHistory -------( Function ) | |
| save | |
| saved | |
| saveTodos -------( Function ) | |
| saveToHistory -------( Function ) | |
| scalable | |
| scale | |
| selectedSymbol | |
| sortable | |
| src | |
| style | |
| symbolHtml | |
| target | |
| taskText | |
| text | |
| textContent | |
| textEl | |
| textSpan | |
| title | |
| todos | |
| transform | |
| transition | |
| type | |
| val | |
| value | |
| width | |
| y |