<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ランダム曲アプリ</title>
</head>
<body>
<h1>ランダム曲アプリ</h1>
<div id="result"></div>
<button onclick="showSong()">曲を選ぶ</button>
<script>
const songs = {
"1": ["紅蓮華", "Lemon", "愛にできることはまだあるかい", "I LOVE...", "ハルカミライ", "pretender", "Pretender", "微笑みのみかた", "宿命", "大丈夫"],
"2": ["Driver's High", "truth", "奏(かなで)", "渦と渦", "Just stay with me", "TT", "僕が僕らを探してる", "赤道を越えたら", "何度でも"],
"3": ["HANABI", "打上花火", "儚さ", "失踪FLYER", "千本桜", "ミッドナイトシティー", "乾杯", "PRIDE", "湯気"],
"4": ["I WILL", "We Are!", "シャルル", "光るなら", "Stand by Me", "夜に駆ける", "LIFE", "シンデレラガール", "Believe"],
"5": ["Butterfly", "華麗なる逆襲", "Orion", "約束の丘", "サクラミツツキ", "アンノウン・マザーグース", "Stella-rium", "Terminal", "世界が終わるまでは..."]
};
function showSong() {
const year = getYear();
const month = getMonth();
if (year === null || month === null) {
return;
}
const songsOfYearAndMonth = songs[year][month-1];
const randomSong = songsOfYearAndMonth[Math.floor(Math.random()*songsOfYearAndMonth.length)];
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = "今日の曲は... " + randomSong + "!";
}
function getYear() {
const year = prompt("西暦を入力してください(例: 2022)");
if (year === null) {
return null;
} else if (isNaN(year) || year < 1 || year > 9999) {
alert("有効な西暦を入力してください");
return null;
}
return year;
}
function getMonth() {
const month = prompt("月を1~12で入力してください");
if (month === null) {
return null;
} else if (isNaN(month) || month < 1 || month > 12) {
alert("有効な月を入力してください");
return null;
}
return month;
}
</script>
</body>
</html>
※注意点: 本アプリではjQueryなどの外部ライブラリを使用していません。また、曲名を修正したり、表示する曲の数を変更したりする場合は、それぞれ書き換える必要があります。また、曲名に関するジョークは、西暦、月とは全く関係ありませんが、例えば「今日の曲は空耳曲です。曲名は『ビール～ビ～ル～麦～』です」といったネタを入れることもできます。
