初めての自作アプリ「みのりとじゃんけん」
溺愛している2歳の娘「みのり」とじゃんけんをしたり、簡単なお喋りができるWebブラウザゲームです。
開発背景
職業訓練でJavaScriptの基礎学習を繰り返していた頃、エンジニアの友人に「何か作った方が勉強になるよ」と言われたのがきっかけで作ったアプリです。
最初はボタンを押すと文字がランダムで表示されるだけのシンプルなものでしたが、学習を兼ねて機能追加やリファクタリングを行い、キャラクターやBGMなども追加していきました。
その過程で、2歳の娘に実際に遊んでもらい「2歳児の視点」に立って操作性や演出などの課題を少しずつ改善していきました。自分の学習から始まり、実際のユーザー目線に立って試行錯誤を重ねて完成させた、一番思い入れのある初めての自作アプリです。
公開ページ
主な機能
ゲーム機能
- じゃんけん対戦: グー・チョキ・パーのボタン操作で対戦を行います。
- 勝敗判定と記録: 勝ち・負け・引き分けの回数をリアルタイムで集計し表示します。
- 連勝・連敗システム:
- 3連勝でプレイヤーの完全勝利（みのりが泣いてしまう）
- 3連敗でプレイヤーの完全敗北（みのりが喜ぶ）
- リアクション: 状況に応じて、キャラクターの表情やポーズが動的に変化します。プレイヤーの操作に対して、遅出しやシャッフル演出が行われます。（内部ロジックとしては即時判定ですが、演出として機能）
AIチャットボット機能
- 会話機能: チャットウィンドウからメッセージを送信すると、みのりが返信します。
- 仕組み: Google Apps Script (GAS) を経由して Groq API (Llama 3モデル) を呼び出し、キャラクター設定に基づいた応答を生成しています。
技術スタック
フロントエンド
- HTML5
- CSS: スタイリング後、UI/UX改善のため改修を繰り返し行いました。
- JavaScript:
- DOM操作による画面更新
fetchAPIを使用した非同期通信setInterval,setTimeoutを使用したタイマー処理など
バックエンド（AIチャット）
- Google Apps Script (JavaScript): フロントからPOSTを受け、外部APIへ中継します。
- Groq API: オープンソースAIモデル（Llama-3.1-8b-instant）を利用し、応答を生成します。
AI活用箇所
このアプリ開発ではプログラミング学習を主目的としていたため、以下の部分でAIを活用しています。
- CSSのスタイリング: AIで大枠を生成後、手動で改修
- ビジュアルエフェクト: ハートが拡散するアニメーション演出（ランダム関数を改修しハートの数・滞在時間等を調整）
- キャラクターイラスト: NanoBananaでイラスト生成。（PhotoShopで細部を修正・GIF化）
- BGM・効果音: Adobe FireflyでBGMを生成。
今後の実装予定
- 対戦相手として、ママ（Lv2）とパパ（Lv3）を選択式で追加
- 対戦相手として、ゲーム開始時に低確率でお友達のTK（Lv鬼）が登場
これらの実装はオブジェクト指向（継承・カプセル化・ポリモーフィズム等）への理解を深める目的を兼ねていますが、それ以上に「プレイヤーとしてのみのり」が喜ぶ革新的なアップデートとなる予定です。