Instagram投稿テンプレ作成アプリ
気持ちや季節、画像の雰囲気を指定してください。
以下が、実際のプログラム例です。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Instagram投稿テンプレ作成アプリ</title>
</head>
<body>
<h1>Instagram投稿テンプレ作成アプリ</h1>
<p>気持ちや季節、画像の雰囲気を指定してください。</p>
<form>
<label for="mood">気持ち：</label>
<input type="text" id="mood" name="mood"><br>
<label for="season">季節：</label>
<select id="season" name="season">
<option value="spring">春</option>
<option value="summer">夏</option>
<option value="autumn">秋</option>
<option value="winter">冬</option>
</select><br>
<label for="atmosphere">画像の雰囲気：</label>
<input type="radio" id="bright" name="atmosphere" value="bright">
<label for="bright">明るい</label>
<input type="radio" id="calm" name="atmosphere" value="calm">
<label for="calm">落ち着いた</label>
<input type="radio" id="cool" name="atmosphere" value="cool">
<label for="cool">クールな</label><br>
<button type="button" onclick="createTemplate()">テンプレ作成</button>
</form>
<div id="template"></div>
<script>
function createTemplate() {
var mood = document.getElementById("mood").value;
var season = document.getElementById("season").value;
var atmosphere = document.querySelector('input[name="atmosphere"]:checked').value;
var template = "<img src='" + season + "-" + atmosphere + ".jpg' alt='" + mood + "'>" +
"<p>今の気持ち：" + mood + "</p>" +
"<p>季節：" + season + "</p>" +
"<p>画像の雰囲気：" + atmosphere + "</p>";
document.getElementById("template").innerHTML = template;
}
</script>
</body>
</html>
```
このアプリは、ユーザーがフォームに気持ち、季節、画像の雰囲気を入力すると、それに基づいてInstagram用の画像テンプレートを作成して表示します。画像は、季節と画像の雰囲気に基づいて、"spring-bright.jpg"のような名前で用意されたものを使います。
ジョークとして、テンプレ作成ボタンを「エフェクトをかける！」などに変えても面白いかもしれません。