<!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</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);
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
h2 {
margin: 0;
color: #333;
font-size: 1.5rem;
}
#edit-toggle-btn {
background-color: #6c757d;
color: white;
border: none;
padding: 6px 12px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s;
}
#edit-toggle-btn.active {
background-color: #28a745;
}
.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; /* flex-growで伸びるが最小幅確保 */
}
.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; }
</style>
</head>
<body>
<div class="container" id="main-container">
<div class="header">
<h2>My Tasks</h2>
<button id="edit-toggle-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>
<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 container = document.getElementById('main-container');
// データ保存
function saveTodos() {
const todos = [];
// リスト内のinput（編集中）かspan（通常）のどちらかからテキストを取得
document.querySelectorAll('.todo-item').forEach(li => {
const inputEl = li.querySelector('.edit-input');
const textEl = li.querySelector('.todo-text');
if (inputEl) {
todos.push(inputEl.value); // 編集中ならinputの値
} else if (textEl) {
todos.push(textEl.textContent); // 通常ならtextの値
}
});
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('「編集」を押してみてください', false);
addTodo('修正ボタンでその場で書き換えられます', false);
saveTodos();
}
}
let sortable = new Sortable(list, {
animation: 150,
ghostClass: 'sortable-ghost',
dragClass: 'sortable-drag',
handle: '.handle',
delay: 0,
disabled: true,
onEnd: function() {
saveTodos();
}
});
editToggleBtn.addEventListener('click', () => {
const isEditMode = container.classList.toggle('edit-mode');
if (isEditMode) {
editToggleBtn.textContent = '完了';
editToggleBtn.classList.add('active');
sortable.option('disabled', false);
} else {
// 編集モード終了時に、もし編集中(input状態)のものがあれば強制保存して戻す
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');
// 要素構成: ハンバーガーアイコン + テキストエリア(span) + ボタン群
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>
`;
// テキストの設定（HTMLエスケープ対策としてtextContent使用）
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;
// input要素を作成
const inputEl = document.createElement('input');
inputEl.type = 'text';
inputEl.value = currentText;
inputEl.classList.add('edit-input');
// span を input に置き換え
li.replaceChild(inputEl, textSpan);
// ボタンを「保存」に変更
modifyBtn.textContent = '保存';
modifyBtn.classList.add('saving');
inputEl.focus();
// Enterキーでも保存できるようにする
inputEl.addEventListener('keypress', (e) => {
if (e.key === 'Enter') modifyBtn.click();
});
} else {
// --- 編集保存（完了） ---
const inputEl = li.querySelector('.edit-input');
const newText = inputEl.value.trim();
if (newText) {
textSpan.textContent = newText;
} else {
// 空なら元のテキストに戻す（あるいは削除機能に誘導しても良いが今回は戻す）
// ここでは元の値を持ってないので、空入力時は変更なし扱いにする
textSpan.textContent = inputEl.value === "" ? textSpan.textContent : newText;
}
// input を span に戻す
li.replaceChild(textSpan, inputEl);
// ボタンを「修正」に戻す
modifyBtn.textContent = '修正';
modifyBtn.classList.remove('saving');
saveTodos();
}
});
// 削除ボタン
li.querySelector('.delete-btn').addEventListener('click', (e) => {
e.stopPropagation();
if(confirm('削除しますか？')) {
li.style.transform = 'translateX(100%)';
li.style.transition = '0.3s';
setTimeout(() => {
li.remove();
saveTodos();
}, 300);
}
});
list.appendChild(li);
if (save) {
li.scrollIntoView({ behavior: 'smooth', block: 'end' });
saveTodos();
}
}
loadTodos();
</script>
</body>
</html>
使用変数
| ) { saveTodos -------( Function ) | |
| addBtn | |
| addTodo -------( Function ) | |
| autocomplete | |
| btn | |
| charset | |
| class | |
| container | |
| content | |
| currentText | |
| editToggleBtn | |
| id | |
| innerHTML | |
| input | |
| inputEl | |
| isEditing | |
| isEditMode | |
| key | |
| lang | |
| li | |
| list | |
| loadTodos -------( Function ) | |
| modifyBtn | |
| name | |
| newText | |
| placeholder | |
| save | |
| saved | |
| saveTodos -------( Function ) | |
| scalable | |
| scale | |
| sortable | |
| src | |
| text | |
| textContent | |
| textEl | |
| textSpan | |
| todos | |
| transform | |
| transition | |
| type | |
| value | |
| width |