以下は、JSON Scalable Database (JSDB) API を活用したシンプルなメモ帳アプリケーションのサンプルコードです。PHP を使用して、メモの追加、表示、編集、削除が行えます。
/notepad
├── index.php // メモ帳のUIと操作ページ
├── style.css // 簡易スタイルシート（オプション）
<?php
$apiKey = ""; // 使用するAPIのkey名（データベース名）
$apiEndpoint = "https://events-front.mixeder.net/v2/jsdb";
// メモ一覧を取得する関数
function getNotes() {
global $apiKey, $apiEndpoint;
$response = file_get_contents("$apiEndpoint?key=$apiKey&action=read");
return json_decode($response, true) ?? [];
}
// メモを追加する関数
if (isset($_POST['add'])) {
$newNote = json_encode(["text" => $_POST['note']]);
file_get_contents("$apiEndpoint?key=$apiKey&action=add&data=" . urlencode($newNote));
header("Location: index.php");
exit();
}
// メモを削除する関数
if (isset($_GET['delete'])) {
$id = $_GET['delete'];
file_get_contents("$apiEndpoint?key=$apiKey&action=delete&id=$id");
header("Location: index.php");
exit();
}
// メモの更新
if (isset($_POST['update'])) {
$id = $_POST['id'];
$updatedNote = json_encode(["text" => $_POST['note']]);
file_get_contents("$apiEndpoint?key=$apiKey&action=update&id=$id&data=" . urlencode($updatedNote));
header("Location: index.php");
exit();
}
// すべてのメモを取得
$notes = getNotes();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>メモ帳</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>メモ帳</h1>
<!-- メモ追加フォーム -->
<form method="POST">
<textarea name="note" rows="3" placeholder="新しいメモを入力してください..." required></textarea>
<button type="submit" name="add">追加</button>
</form>
<!-- メモ一覧表示 -->
<ul>
<?php foreach ($notes as $note): ?>
<li>
<form method="POST" style="display:inline;">
<input type="hidden" name="id" value="<?= $note['id'] ?>">
<input type="text" name="note" value="<?= htmlspecialchars($note['text']) ?>" required>
<button type="submit" name="update">更新</button>
</form>
<a href="?delete=<?= $note['id'] ?>" onclick="return confirm('このメモを削除しますか？')">削除</a>
</li>
<?php endforeach; ?>
</ul>
</body>
</html>
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
}
form {
margin-bottom: 10px;
}
textarea, input[type="text"] {
width: 80%;
margin-right: 5px;
padding: 10px;
}
button {
padding: 10px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
display: flex;
align-items: center;
}
