ChatGPTがどんなアプリを作りたいか教えてくれるアプリ
あなたが作りたいアプリのジャンルを選んでください。
セキュリティ上のリスクを回避するため、このアプリではevalや外部サイトへの遷移・リダイレクトは許可されていません。
まずは以下のHTMLコードを作成してください。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ChatGPTがどんなアプリを作りたいか教えてくれるアプリ</title>
</head>
<body>
<h1>ChatGPTがどんなアプリを作りたいか教えてくれるアプリ</h1>
<p>あなたが作りたいアプリのジャンルを選んでください。</p>
<form>
<label for="genre1"><input type="radio" name="genre" value="SNS" id="genre1">SNS</label><br>
<label for="genre2"><input type="radio" name="genre" value="ゲーム" id="genre2">ゲーム</label><br>
<label for="genre3"><input type="radio" name="genre" value="ツール" id="genre3">ツール</label><br>
<br>
<input type="button" value="決定" onclick="showChoice()">
</form>
<br>
<div id="result"></div>
<script>
function showChoice() {
const radios = document.getElementsByName("genre");
for (let i = 0; i < radios.length; i++) {
if (radios[i].checked) {
const genre = radios[i].value;
let message;
switch (genre) {
case "SNS":
message = "やりたいことをつぶやいたり、友達とコミュニケーションを取ったりできるSNSアプリ。でも、あなたが考えるよりも既にこのジャンルにはたくさんのアプリが存在しているようだ…";
break;
case "ゲーム":
message = "一人でも、友達と一緒でも遊べる面白いゲームアプリ。でも、開発が難航して、リリースは予定よりもずいぶん遅れてしまいそうだ…";
break;
case "ツール":
message = "便利で使いやすいツールアプリ。でも、既存のアプリで十分だと思われ、需要が見込めなそうだ…";
break;
}
document.getElementById("result").innerHTML = message;
}
}
}
</script>
</body>
</html>
```
このコードでは、ラジオボタンで選択したアプリのジャンルに応じて、それぞれのジャンルに合ったメッセージを表示するものです。
まず`showChoice`関数で、選択されたラジオボタンの値を取得します。そして、ジャンルに応じてswitch文でメッセージを設定し、`document.getElementById("result").innerHTML`でHTMLに表示します。
実際に動かしてみましょう。ブラウザで上記のファイルを開くと、以下のような画面が表示されます。
ラジオボタンを選択して「決定」ボタンをクリックすると、ジャンルに応じたメッセージが表示されます。
このアプリにはジョークも取り入れてみました。例えば、「開発が難航して、リリースは予定よりもずいぶん遅れてしまいそうだ…」という文は、ゲームアプリの開発が多くの問題に直面し、リリースが遅れがちであることを象徴しています。