ドラえもん口調アプリ
下のフォームに文字を入力して、「話す」をクリックしてください。
以下が実際のプログラムです。セキュリティ脆弱性があるevalや、他のサイトに遷移させたりリダイレクトさせたりするコードは含まれていません。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ドラえもん口調アプリ</title>
</head>
<body>
<h1>ドラえもん口調アプリ</h1>
<p>下のフォームに文字を入力して、「話す」をクリックしてください。</p>
<form>
<label for="input_text">入力:</label>
<input type="text" id="input_text" name="message"><br><br>
<button type="button" onclick="talk()">話す</button>
</form>
<br>
<p id="output_text"></p>
<script>
function talk() {
const inputText = document.getElementById("input_text").value;
let outputText = "";
for (let i = 0; i < inputText.length; i++) {
let char = inputText.charAt(i);
let afterChar = "";
switch (char) {
case "あ":
afterChar = "ぴょん♪";
break;
case "い":
afterChar = "ぴゅー♪";
break;
case "う":
afterChar = "ふわぁ〜♪";
break;
case "え":
afterChar = "はいさいの〜♪";
break;
case "お":
afterChar = "ほいっ♪";
break;
case "か":
afterChar = "ぱんぱかぱ〜ん♪";
break;
case "き":
afterChar = "ぴかぴかぴっころ〜♪";
break;
case "く":
afterChar = "くまのプーさん、が好きなの〜♪";
break;
case "け":
afterChar = "いただきま〜す♪";
break;
case "こ":
afterChar = "コングラッチュレーション♪";
break;
case "さ":
afterChar = "シュバッとぶっとばして、ポーン♪";
break;
case "し":
afterChar = "シャララララ、シャララララ♪";
break;
case "す":
afterChar = "すきすきすっきー♪";
break;
case "せ":
afterChar = "センスいいわ〜♪";
break;
case "そ":
afterChar = "それどうしたの？♪";
break;
case "た":
afterChar = "てへっ♪";
break;
case "ち":
afterChar = "チリン♪";
break;
case "つ":
afterChar = "つらららら〜♪";
break;
case "て":
afterChar = "てんこもり、てんこもり♪";
break;
case "と":
afterChar = "とってもキュートで、とってもラブリィ♪";
break;
case "な":
afterChar = "ナイスショット♪";
break;
case "に":
afterChar = "ニャー♪";
break;
case "ぬ":
afterChar = "ヌ〜♪";
break;
case "ね":
afterChar = "ネバーマインド♪";
break;
case "の":
afterChar = "のどかな、のんびりした風景が好きなの〜♪";
break;
case "は":
afterChar = "ハイカラステキな気分♪";
break;
case "ひ":
afterChar = "ひゃっほ〜♪";
break;
case "ふ":
afterChar = "フンフン、フーン♪";
break;
case "へ":
afterChar = "へ〜きですわ〜♪";
break;
case "ほ":
afterChar = "ホイホイホイ♪";
break;
case "ま":
afterChar = "マジかよ〜♪";
break;
case "み":
afterChar = "ミラクル☆スゴロク♪";
break;
case "む":
afterChar = "ムキムキパワフル、ムキムキスタイリッシュ♪";
break;
case "め":
afterChar = "メタルのつよーい芯で〜♪";
break;
case "も":
afterChar = "モグモグ、リクルート♪";
break;
case "や":
afterChar = "ヤッターマン♪";
break;
case "ゆ":
afterChar = "ユッキーナ〜♪";
break;
case "よ":
afterChar = "ヨーセイ、ドンウォーリ♪";
break;
case "ら":
afterChar = "ラブラブで〜す♪";
break;
case "り":
afterChar = "リセールッ、マニアリズム♪";
break;
case "る":
afterChar = "ルンバンバ♪";
break;
case "れ":
afterChar = "レッドカーペット、レディー?ゴー♪";
break;
case "ろ":
afterChar = "ロックンロールは魂の叫び〜♪";
break;
default:
afterChar = char;
break;
}
outputText += afterChar;
}
document.getElementById("output_text").textContent = outputText;
}
</script>
</body>
</html>
```
ジョーク要素も加えたい場合は、例えばフォームのラベルを「ドラえもんに話してほしい言葉:」としたり、ボタンを「ドラえもん、お願いします！」としたりすると、より楽しい雰囲気が出るかもしれません。