メモ | ALCALA ACADEMY

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>ローカルメモ帳（自動リサイズ版）</title>
<style>
/* ライトモード・ダークモードの自動切り替え */
:root {
–bg-color: #f5f5f7;
–card-bg: #ffffff;
–text-color: #1d1d1f;
–primary-color: #0071e3;
–border-color: #d2d2d7;
}
@media (prefers-color-scheme: dark) {
:root {
–bg-color: #1c1c1e;
–card-bg: #2c2c2e;
–text-color: #f5f5f7;
–primary-color: #0a84ff;
–border-color: #48484a;
}
}
body {
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif;
background-color: var(–bg-color);
color: var(–text-color);
margin: 0;
padding: 16px;
/* ページ全体がスクロールできるように変更 */
display: block;
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
}
h1 {
font-size: 20px;
margin: 0;
}
.status {
font-size: 12px;
color: #86868b;
font-weight: 500;
}
textarea {
width: 100%;
min-height: 300px;
padding: 16px;
border: 1px solid var(–border-color);
border-radius: 14px;
background-color: var(–card-bg);
color: var(–text-color);
font-size: 16px;
line-height: 1.6;
/* 自動で広がるので手動リサイズと内部スクロールを無効化 */
resize: none;
overflow: hidden;
box-sizing: border-box;
outline: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
textarea:focus {
border-color: var(–primary-color);
}
.controls {
display: flex;
gap: 12px;
}
button {
flex: 1;
padding: 14px;
border: none;
border-radius: 10px;
background-color: var(–primary-color);
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
transition: opacity 0.2s;
}
button:active {
opacity: 0.7;
}
button.secondary {
background-color: var(–border-color);
color: var(–text-color);
max-width: 100px;
}
</style>
</head>
<body>
<div class=”container”>
<header>
<h1>ローカルメモ</h1>
<div id=”status” class=”status”>自動保存済み</div>
</header>

<div class=”controls”>
<button id=”copyBtn”>テキストをコピー</button>
<button id=”clearBtn” class=”secondary”>消去</button>
</div>
</div>

// ★追加：テキストボックスの高さを文字数に合わせて自動調整する関数
function autoResize() {
memoArea.style.height = ‘auto’; // 一旦高さをリセット
memoArea.style.height = memoArea.scrollHeight + ‘px’; // 中身の高さに合わせて再設定
}

// ① ページを開いたときに、前回保存したメモを復元して高さを調整
window.addEventListener(‘DOMContentLoaded’, () => {
const savedMemo = localStorage.getItem(‘local_html_memo’);
if (savedMemo) {
memoArea.value = savedMemo;
}
autoResize(); // 読み込み時にも枠を広げる
});

// ② 文字が入力されるたびに、枠を広げてブラウザ内に自動保存する
let saveTimeout;
memoArea.addEventListener(‘input’, () => {
autoResize(); // 入力するたびに高さを調整

statusDiv.textContent = ‘保存中…’;
clearTimeout(saveTimeout);

saveTimeout = setTimeout(() => {
localStorage.setItem(‘local_html_memo’, memoArea.value);
statusDiv.textContent = ‘自動保存済み’;
}, 300);
});

// ③ ワンタップでクリップボードにコピーする機能
copyBtn.addEventListener(‘click’, () => {
if (!memoArea.value) return;
navigator.clipboard.writeText(memoArea.value).then(() => {
const originalText = copyBtn.textContent;
copyBtn.textContent = ‘コピー完了！’;
setTimeout(() => copyBtn.textContent = originalText, 1500);
}).catch(() => {
memoArea.select();
document.execCommand(‘copy’);
copyBtn.textContent = ‘コピー完了！’;
setTimeout(() => copyBtn.textContent = ‘テキストをコピー’, 1500);
});
});

// ④ メモの全消去機能
clearBtn.addEventListener(‘click’, () => {
if (!memoArea.value) return;
if (confirm(‘メモをすべて消去しますか？’)) {
memoArea.value = ”;
localStorage.removeItem(‘local_html_memo’);
autoResize(); // 消去したときも枠のサイズを元に戻す
statusDiv.textContent = ‘消去されました’;
}
});

// ⑤ 画面サイズが変わったとき（スマホを横持ちにした時など）にも枠を調整
window.addEventListener(‘resize’, autoResize);
</script>
</body>
</html>