家電紹介アプリ
新生活に必要な家電を紹介します。
以下が、提供するアプリの実装例です。
```html
<!DOCTYPE html>
<html>
<head>
<title>家電紹介アプリ</title>
<meta charset="utf-8">
</head>
<body>
<h1>家電紹介アプリ</h1>
<p>新生活に必要な家電を紹介します。</p>
<form>
<label for="input-device">家電名:</label>
<input type="text" id="input-device" name="device">
<button type="button" onclick="showRecommendations()">送信</button>
</form>
<hr>
<div id="output">
</div>
<script>
function showRecommendations() {
const device = document.querySelector("#input-device").value;
let output = "";
switch (device) {
case "テレビ":
output = "<strong>検討すべきポイント:</strong><br>1. 画面サイズ<br>2. 解像度<br>3. HDR対応<br>4. チューナーの種類<br>5. スピーカーの性能<br><br><strong>おすすめのメーカー×モデル名:</strong><br>1. ソニー BRAVIA X9500H<br>2. Panasonic VIERA TH-55GX850<br>3. LG OLED55BX";
break;
case "冷蔵庫":
output = "<strong>検討すべきポイント:</strong><br>1. 容量<br>2. エネルギー効率<br>3. 省スペース設計<br>4. 水・氷の自動製氷機能<br>5. 内部構造<br><br><strong>おすすめのメーカー×モデル名:</strong><br>1. 日立 R-WG31G<br>2. パナソニック NR-S321HM<br>3. LG GR-J33FWCHL";
break;
case "洗濯機":
output = "<strong>検討すべきポイント:</strong><br>1. 容量<br>2. 薬剤投入機能<br>3. センサー機能の充実度<br>4. ドラム素材<br>5. 稼働音<br><br><strong>おすすめのメーカー×モデル名:</strong><br>1. 三菱電機 BDWX160LZ<br>2. シャープ ES-FV1200<br>3. パナソニック NA-FS35L5";
break;
case "電子レンジ":
output = "<strong>検討すべきポイント:</strong><br>1. 容量<br>2. 保温機能<br>3. 目覚まし時計機能<br>4. 温度調節機能<br>5. 電子レンジの機能充実度<br><br><strong>おすすめのメーカー×モデル名:</strong><br>1. パナソニック NE-MS262<br>2. 日立 MRO-XL5<br>3. SHARP R-62A1S";
break;
case "エアコン":
output = "<strong>検討すべきポイント:</strong><br>1. 総合能力適正値<br>2. 消費電力<br>3. フィルター機能<br>4. 運転音<br>5. 機能性の充実度<br><br><strong>おすすめのメーカー×モデル名:</strong><br>1. 三菱重工 MSZ-GV2218-W<br>2. ダイキン S56UTXP-W<br>3. 日立 RAD-V50H2-W";
break;
case "炊飯器":
output = "<strong>検討すべきポイント:</strong><br>1. 炊飯容量<br>2. メニュー数<br>3. 保温機能の充実度<br>4. デザイン<br>5. 調理時間の短さ<br><br><strong>おすすめのメーカー×モデル名:</strong><br>1. パナソニック SR-SPX104<br>2. 象印 NP-PF10-TD<br>3. タイガー JHB-A10S";
break;
case "掃除機":
output = "<strong>検討すべきポイント:</strong><br>1. 吸引力<br>2. フィルター機能の充実度<br>3. ノズルの種類<br>4. バッテリーの持続時間<br>5. 設計の使いやすさ<br><br><strong>おすすめのメーカー×モデル名:</strong><br>1. ダイソン Cyclone V10 Absolute<br>2. 日立 CV-SZ9-S<br>3. シャープ EC-HX100";
break;
case "ドライヤー":
output = "<strong>検討すべきポイント:</strong><br>1. 風量調節機能<br>2. 温度調節機能<br>3. ノズルの種類<br>4. モーターの性能<br>5. 重さ<br><br><strong>おすすめのメーカー×モデル名:</strong><br>1. パナソニック EH-CNA9B<br>2. 日立 CM-N4800BY<br>3. バブルブルー KJ-DH2384N-W";
break;
case "加湿器":
output = "<strong>検討すべきポイント:</strong><br>1. 加湿容量<br>2. 除湿機能<br>3. 節電モード<br>4. タンクの大きさ<br>5. 運転音<br><br><strong>おすすめのメーカー×モデル名:</strong><br>1. アイリスオーヤマ PCF-HD15<br>2. SHARP KC-J50<br>3. パナソニック F-VRLF80-W";
break;
case "電気ポット":
output = "<strong>検討すべきポイント:</strong><br>1. 設計<br>2. 保温機能の充実度<br>3. インナー素材<br>4. 沸騰速度<br>5. 安全機能<br><br><strong>おすすめのメーカー×モデル名:</strong><br>1. パナソニック NC-BG3000<br>2. パール金属 CMD-160<br>3. 象印 CD-WBQ30-TD";
break;
default:
output = "ごめんなさい、その家電には対応していません。";
break;
}
document.querySelector("#output").innerHTML = output;
}
</script>
</body>
</html>
```
このアプリは、ユーザーが入力フォームに家電名を入力すると、その家電を選定する際に検討すべきポイント5つと、おすすめのメーカー×モデル名のセット3つを表示します。ただし、対応しない家電名を入力された場合には、「ごめんなさい、その家電には対応していません。」と表示します。
このアプリの中でevalや他のサイトへの遷移、リダイレクトは使っていませんし、JavaScriptのコードもシンプルであるため、セキュリティ上の懸念はありません。また、面白いジョークを用意することができれば、より楽しいアプリになるでしょう。