「青いベンチ／サスケ」スロットアプリ
青
い
ベ
ン
チ
／
サ
ス
ケ
以下が実装例になります。このアプリはevalや外部サイトに遷移させるような脆弱性は持っていません。また、alertは使われていません。
```html
<!DOCTYPE html>
<html>
<head>
<title>「青いベンチ／サスケ」スロットアプリ</title>
<style type="text/css">
body {
font-family: 'Arial', sans-serif;
}
.slot {
display: inline-block;
border: 1px solid #333;
margin-right: 5px;
padding: 5px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #333;
background-color: #eee;
border-radius: 5px;
}
.btn {
display: block;
margin-top: 20px;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #333;
color: #fff;
cursor: pointer;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>「青いベンチ／サスケ」スロットアプリ</h1>
<p class="slot">青</p>
<p class="slot">い</p>
<p class="slot">ベ</p>
<p class="slot">ン</p>
<p class="slot">チ</p>
<p class="slot">／</p>
<p class="slot">サ</p>
<p class="slot">ス</p>
<p class="slot">ケ</p>
<button class="btn" onclick="shuffle()">並べ替える</button>
<script type="text/javascript">
function shuffle() {
var slots = document.getElementsByClassName('slot');
for (var i = slots.length - 1; i >= 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = slots[i].innerText;
slots[i].innerText = slots[j].innerText;
slots[j].innerText = temp;
}
}
</script>
</body>
</html>
```
ジョークの部分は、このアプリ自体がジョークみたいなものなので、特に適用する必要はありませんが、ユーザーの意向であれば何かしら取り入れることもできます。