以下は、ユーザーの要望に基づいて予約アプリを作成した一例です。この例では、JavaScriptを使用して予約カレンダーを作成し、パスワード保護を実装しています。また、パスワード要求の際にジョークを表示する機能も追加されています。
```html
<!DOCTYPE html>
<html>
<head>
<title>予約アプリ</title>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 5px;
}
</style>
<script>
function checkPassword() {
const password = prompt("パスワードを入力してください:");
if (password === "asdfg") {
displayCalendar();
} else {
alert("パスワードが違います。再度入力してください。");
checkPassword(); // 再帰的にパスワードを確認する
}
}
function displayCalendar() {
// カレンダーの表示などの処理を実装する部分
// この例では、単純な予約可能・予約不可の表示を表形式で実装しています
const table = document.createElement("table");
const tbody = document.createElement("tbody");
const hours = ["10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00"];
const reservations = [
{ time: "10:00", name: "予約A" },
{ time: "12:00", name: "予約B" },
{ time: "14:00", name: "予約C" },
// 予約データは必要に応じて追加する
];
// ヘッダー行（予約時間）
const headerRow = document.createElement("tr");
hours.forEach(hour => {
const headerCell = document.createElement("th");
headerCell.textContent = hour;
headerRow.appendChild(headerCell);
});
tbody.appendChild(headerRow);
// 予約データの行作成
reservations.forEach(reservation => {
const dataRow = document.createElement("tr");
hours.forEach(hour => {
const dataCell = document.createElement("td");
if (reservation.time === hour) {
dataCell.textContent = reservation.name;
}
dataRow.appendChild(dataCell);
});
tbody.appendChild(dataRow);
});
table.appendChild(tbody);
document.body.appendChild(table);
}
checkPassword();
</script>
</head>
<body>
</body>
</html>
```
この例では、予約カレンダーを表形式で表示しています。`checkPassword()`関数が初期呼び出しで実行され、パスワードの入力を受け付けます。正しいパスワードが入力されると`displayCalendar()`関数が呼び出され、予約カレンダーが表示されます。パスワードが誤って入力された場合は再度パスワードを要求します。
予約カレンダーには、予約可能な時間帯と既存の予約データが表示されます。予約データは例として固定されていますが、実際のアプリケーションではデータベースや外部データソースから取得するなどの処理が必要です。
なお、セキュリティ上の注意点としては、この例ではパスワードが平文で記述されているため、セキュリティ上のリスクがあります。パスワードを保存する場合は、ハッシュ関数を使用して安全に保存するなどの対策が必要です。
