押すだけ簡単ランダムカクテルメーカー！！
こんにちは！今回は、HTMLとJavaScriptを使って、ランダムにカクテルを生成してくれるミニアプリを作ってみました。ボタンを押すだけで、お酒と割材を組み合わせたカクテルが表示され、名前まで教えてくれます。普段の家飲みがちょっと楽しくなるかも？
この記事では、以下を紹介します：
- アプリの動作イメージ
- 使用したコードの説明
- カスタマイズ方法
完成したアプリ
こちらが完成したアプリの動作イメージです：
ボタンを押すと、以下のようにランダムなカクテルが生成されます。
例：
- ジン + トニックウォーター → ジントニック
- ラム + コーラ → キューバリブレ
オリジナルな組み合わせも楽しめます！
コード
HTML部分
<!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>
<div class="container">
<h1>ランダムカクテルメーカー</h1>
<p>ベースのお酒と割材からカクテルを作ります！</p>
<button onclick="generateCocktail()">カクテルを作る</button>
<div class="result" id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS部分
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #ffafbd, #ffc3a0);
color: #fff;
}
.container {
text-align: center;
background: rgba(255, 255, 255, 0.1);
padding: 30px 20px;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 2.5em;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
button {
background: #ff6f61;
color: #fff;
border: none;
border-radius: 10px;
padding: 15px 25px;
font-size: 1em;
font-weight: bold;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
}
button:hover {
background: #ff8573;
transform: translateY(-3px);
}
.result {
margin-top: 20px;
font-size: 1.5em;
font-weight: bold;
color: #fefae0;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
JavaScript部分
const baseAlcohols = [
"ジン",
"ウォッカ",
"ラム",
"テキーラ",
"ウイスキー",
"赤ワイン",
"白ワイン",
"焼酎",
"ブランデー"
];
const mixers = [
"トニックウォーター",
"ソーダ",
"オレンジジュース",
"レモンジュース",
"ライムジュース",
"グレープフルーツジュース",
"トマトジュース",
"ジンジャーエール",
"コーラ"
];
const cocktailNames = {
"ジン+トニックウォーター": "ジントニック",
"ラム+コーラ": "キューバリブレ",
"テキーラ+グレープフルーツジュース": "パロマ",
"ウォッカ+オレンジジュース": "スクリュードライバー",
"ウイスキー+ジンジャーエール": "ハイボール",
"ブランデー+ソーダ": "ブランデーソーダ",
"赤ワイン+コーラ": "カリモチョ"
};
function generateCocktail() {
const base = baseAlcohols[Math.floor(Math.random() * baseAlcohols.length)];
const mixer = mixers[Math.floor(Math.random() * mixers.length)];
const cocktailKey = `${base}+${mixer}`;
const cocktailName = cocktailNames[cocktailKey] || "オリジナルカクテル";
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = `今日のカクテルは：<br>${base} + ${mixer}<br><strong>${cocktailName}</strong>`;
}
カスタマイズ方法
お酒や割材を追加
- JavaScriptの
baseAlcoholsやmixersリストに新しいお酒や割材を追加できます。 - 例えば、
baseAlcohols.push("カンパリ");
mixers.push("グレナデンシロップ");
カクテル名を追加
-
cocktailNamesオブジェクトに新しい組み合わせと名前を追加しましょう。 - 例：
"カンパリ+オレンジジュース": "スプモーニ",
まとめ
たった数十行のコードで、楽しいカクテル生成アプリが完成しました！
お酒の知識を深めたり、新しい組み合わせを試したりするきっかけになれば嬉しいです。
ぜひアレンジして、自分だけのカクテルメーカーを作ってみてください！🍹
※組み合わせを試しすぎて飲みすぎに注意！！←