🎉 フィラーワードチェッカー 🎉
🎈 ここに結果が表示されます！ 🎈
🥳🎊✨🎉💫
```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes bounce {
0% { transform: scale(1); }
25% { transform: scale(1.2); }
50% { transform: scale(1); }
75% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes pop {
0% { transform: rotate(0deg); }
50% { transform: rotate(20deg); }
100% { transform: rotate(0deg); }
}
.animate-bounce {
animation: bounce 0.6s;
}
.animate-pop {
animation: pop 0.6s;
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; border: 2px solid #000; border-radius: 10px; padding: 10px; box-sizing: border-box; overflow: auto; position: relative;">
<h2 style="text-align: center;">🎉 フィラーワードチェッカー 🎉</h2>
<textarea id="inputText" placeholder="ここに文章を入力してください..." style="width: 100%; height: 100px; padding: 5px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc;"></textarea>
<button id="checkBtn" style="margin-top: 10px; padding: 10px; width: 100%; font-size: 16px; border: none; border-radius: 5px; background-color: #4CAF50; color: white; cursor: pointer;">🔍 チェックする</button>
<div id="output" style="margin-top: 10px; padding: 10px; background-color: #f9f9f9; border-radius: 5px; min-height: 100px; position: relative;">
🎈 ここに結果が表示されます！ 🎈
</div>
<div id="message" style="margin-top: 10px; text-align: center; font-size: 18px; font-weight: bold;"></div>
<div style="position: absolute; bottom: 10px; right: 10px;">
🥳🎊✨🎉💫
</div>
</div>
<script>
const filterWords = ["えー", "まあ", "あー", "えーと", "ええと"];
const checkBtn = document.getElementById('checkBtn');
const inputText = document.getElementById('inputText');
const output = document.getElementById('output');
const message = document.getElementById('message');
checkBtn.addEventListener('click', () => {
let text = inputText.value;
let count = 0;
filterWords.forEach(word => {
const regex = new RegExp(word, 'g');
const matches = text.match(regex);
if (matches) count += matches.length;
text = text.replace(regex, `<span style="color: red;">${word}</span>`);
});
output.innerHTML = text + " 📝✨";
if (count >=5) {
message.textContent = "言葉に詰まっているよ！もう少しすらすらと言えるようになろう！ 🚀🔥";
} else {
message.textContent = "その調子！👍🎯";
}
message.classList.add('animate-bounce');
setTimeout(() => {
message.classList.remove('animate-bounce');
}, 600);
});
// Add button animations
checkBtn.addEventListener('click', () => {
checkBtn.classList.add('animate-pop');
setTimeout(() => {
checkBtn.classList.remove('animate-pop');
}, 600);
});
</script>
</body>
</html>
```