✨ 今日のキラキラ占い ✨
朝起きた時の気分はどうだった？🌞
今日の気分：笑顔
今日の運勢：大吉！キラキラな一日になりそう！
ラッキーアイテム：キラキラのアクセサリー✨
アドバイス：明るい気分を活かして、新しいことに挑戦してみて！
✨ 占いの説明
ツムピロのキラキラ占いは、簡単な質問に答えるだけで今日の気分と運勢を診断するよ！🌟
- 3つの質問に答えて、今日の気分をチェック！✨
- 気分に応じた運勢やラッキーアイテム、アドバイスをゲット！💖
- 結果をSNSでシェアして、友達と一緒にキラキラを楽しもう！🌈
✨ プログラムの説明とコツ・技
この占いは、JavaScriptを使って作ったよ！💻 仕組みやプログラミングのコツを詳しく解説するね！
- データ構造：質問と結果を配列（`questions`と`moods`）で管理してるよ。`questions`は質問文と選択肢を保持、`moods`は気分ごとの結果データ（画像、運勢、ラッキーアイテムなど）を保持してるんだ。データを分離することで、保守性が高まり、新しい質問や結果を簡単に追加できるよ！✨
- 状態管理：`currentQuestion`（現在の質問番号）と`score`（スコア）をグローバル変数で管理。質問が進むたびに`currentQuestion`を増やし、選択肢に応じて`score`を加算してるよ。状態をシンプルに管理することで、バグを減らし、コードが読みやすくなるんだ！💡
- 動的なボタン更新（技）：質問ごとに選択肢ボタンのテキストと`onclick`イベントを動的に更新してるよ（`answerQuestion`関数）。これにより、ボタンを再利用できて、コード量を減らせるんだ。ボタンのイベントを動的に変更する技は、繰り返しUIを扱う時に便利だよ！🚀
- 結果の条件分岐：スコア（0～6点）に応じて結果を3段階（笑顔、普通、少し落ち込み気味）に分岐してるよ。`score >= 4`なら「笑顔」、`score >= 2`なら「普通」、それ以外は「少し落ち込み気味」になるんだ。シンプルな条件分岐で結果を決めることで、ユーザーに分かりやすいロジックになってるよ！🌟
- SNSシェア機能：`shareOnTwitter`関数では、Xの投稿URLを生成して新しいウィンドウで開いてるよ。`encodeURIComponent`を使ってテキストをURLエンコードすることで、特殊文字や日本語も正しく投稿できるんだ。Instagramは直接投稿APIがないから、スクショを促すアラートを表示してるよ。SNSシェアは拡散力を高める大事な機能だね！📱
- 音声読み上げのカスタマイズ：結果表示時に`SpeechSynthesis`を使って音声を再生してるよ。`speakResult`関数では、気分に応じて声のピッチとスピードを調整してる（例：笑顔なら高めのピッチ）。さらに、`removeEmojis`関数で絵文字を除去して、自然な読み上げにしてるんだ！🎤
- 外部リンクの活用（技）：アドバイスに外部リンク（Spotify、Google Maps、Amazon）を追加してるよ。`moods`配列にリンクを埋め込んで、結果に応じて動的に表示してるんだ。外部リソースを活用することで、占いの実用性を高められるし、ユーザー体験も向上するよ！💖
- リスタート機能：`restartFortune`関数で状態をリセットして、最初の質問に戻してるよ。`questionContainer`と`resultContainer`の表示/非表示を切り替えることで、ページをリロードせずに再スタートできるんだ。状態リセットの技は、ゲームや診断ツールでよく使う便利な方法だよ！🔄
✨ SNS
ツムピロのキラキラな日常をフォローして、一緒にワクワクしよう！✨
メニューページへ戻る
