iPhoneとPCブラウザで同期できる単純なメモWebアプリを、1ファイル(html)で作ってみた。

SimpleNoteとかGoogle Keepも良いんだけど、同期が微妙な時が…。
パッと開いてiphoneでメモして、パソコンで見たい事が多いので、エディタ的な感じになった。
Basic認証、txtファイル保存と、シンプルだけど必要十分だな。
「最新技術も使ってないし高性能でも低性能でもないが、それがいいんだ」
「もう『スケーラブルで高機能なアーキテクチャ』とか『最新のフレームワークを使ったこだわりの実装』とか、疲れたよ・・・」

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>シンプルメモ</title>
    <style>
        textarea {
            width: 100%;
            height: calc(100vh - 60px); /* 画面の高さから他の要素の高さ（例: ヘッダーなど）を引いた高さ */
            box-sizing: border-box;      /* パディングやボーダーを含めたサイズを指定 */
            max-width: 100vw;            /* ビューポートの幅を超えないようにする */
        }
    </style>
</head>
<body>
    <textarea id="memo"><?php
        if (file_exists('memo.txt')) {
            echo htmlspecialchars(file_get_contents('memo.txt'));
        } else {
            echo "まだメモはありません。";
        }
    ?></textarea>

    <script>
        let timeoutId;

        // メモの内容が変更されたら自動で保存
        document.getElementById('memo').addEventListener('input', function() {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(saveMemo, 1000);  // 1秒後に自動保存
        });

        // メモをサーバーに保存
        function saveMemo() {
            const memo = document.getElementById('memo').value;

            fetch(window.location.href, {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: 'action=save_memo&memo=' + encodeURIComponent(memo)
            })
            .then(response => response.text())
            .then(data => {
                console.log("保存完了");
            });
        }
    </script>

<?php
// メモの保存処理
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = $_POST['action'] ?? '';

    if ($action === 'save_memo' && isset($_POST['memo'])) {
        // メモをファイルに保存
        file_put_contents('memo.txt', $_POST['memo']);
        echo "メモを保存しました";
        exit;
    }
}
?>
</body>
</html>

<!DOCTYPE html>

<head>

<title>シンプルメモ</title>

<style>

textarea {

width: 100%;

height: calc(100vh - 60px); /* 画面の高さから他の要素の高さ（例: ヘッダーなど）を引いた高さ */

box-sizing: border-box; /* パディングやボーダーを含めたサイズを指定 */

max-width: 100vw; /* ビューポートの幅を超えないようにする */

}

</style>

</head>

<body>

<textarea id="memo"><?php

if (file_exists('memo.txt')) {

echo htmlspecialchars(file_get_contents('memo.txt'));

} else {

echo "まだメモはありません。";

}

?></textarea>

let timeoutId;

// メモの内容が変更されたら自動で保存

document.getElementById('memo').addEventListener('input', function() {

clearTimeout(timeoutId);

timeoutId = setTimeout(saveMemo, 1000); // 1秒後に自動保存

});

// メモをサーバーに保存

function saveMemo() {

const memo = document.getElementById('memo').value;

fetch(window.location.href, {

method: 'POST',

headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

body: 'action=save_memo&memo=' + encodeURIComponent(memo)

})

.then(response => response.text())

.then(data => {

console.log("保存完了");

});

}

</script>

<?php

// メモの保存処理

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

$action = $_POST['action'] ?? '';

if ($action === 'save_memo' && isset($_POST['memo'])) {

// メモをファイルに保存

file_put_contents('memo.txt', $_POST['memo']);

echo "メモを保存しました";

exit;

}

</body>

</html>

関連記事