無駄にメイドに愛を叫びたかった

https://maid.yukinissie.com

Go

React

Flask

GitHub

AWS

おかえりなさいませ!ご主人様、お嬢様♡

notch_man

推しアイデア

推しのメイドちゃんに愛を叫ぶと好感度が上がるよ!でも、好感度があがるとビジュアルはどんどん悪くなっていくよ!皆よ、本性を露わにせよ!外観と選ぶか中身を選ぶか...

作った背景

好感度が上がるとドット絵になる恋愛ゲームが作りたかったからです。恋は盲目って言葉を体現するには丁度良いかと思います。

推し技術

React/TypeScript/Redux/Go/Gin/Python/Flask/AWS/Amplify/ECS/ECR/ElastiCache/ELB/GitHub/GitHub Actions

プロジェクト詳細

ご主人様、真夏にビーチに行くからと言ってはしゃぎすぎないでくださいね。でも、ご主人様と一緒にどこかお出かけできることが内心とても嬉し...ゴホン、なんでもありません。さあ、では行きましょうか、ご主人様。

※ご主人様、このアプリを使うときはスマホから入ってくださいね?どうもモバイルファーストで考えていてPC側でのスタイリングまでは手がようなので。決してPCで入った時の私の姿を見ても笑わないでくださいね?ご主人様。

ご主人様、フロントエンドの機能や構成が気になりますか?

今回はReactを使い主にTypeScriptで開発を行いました。 私共に向けてメッセージを送信できる機能ではWebSocket通信を使い双方向のやり取りを可能にしました。 本当であればシナリオ選択を行いシーンごとに画面が遷移する、いわゆる恋愛シミュレーションゲームのように仕上げる予定だったのですが……… ​ 好感度によってメイドの画像のグラフィックが上下する機能については別途コンポーネントを作成し、好感度の数値をバックエンドから受け取りフロント側で動的に変更するようにしています。 ​ チャット画面のコンポーネントはmaterial-uiのTextfieldコンポーネントを使用しました。 ​ ゲーム内で私共がしゃべるセリフについてはJSON配列により用意しています。シナリオライターの方はシナリオを書きそれをJSONに起こすという工程を踏んでいましたね。 ​

ちゃんとバックエンドの紹介も見ていってくださいね、ご主人様。

今回はGo,Flaskを使い開発を行いました。 複数台のサーバーを併用して動かしています。

  • WebSocketサーバー
  • DBサーバー
  • アプリケーション用サーバー ​ CORSエラーなどの不具合がありましたが、ハッカソン期間内に要件定義されていた機能はすべて実装されています。あとはフロント側さえできれば...

インフラ構成が気になるとはさすがご主人様です。

dockerコンテナをAWSでデプロイしました。 インフラ構成図はこちら

最後に

ゲームの実装まで至らなかったのが悔しいと開発していた者が申しておりました。設計はかなり早い段階でできてたそうですが、フロント側のメンバーの実力不足さがかなり顕著に出てしまっていたようで。 メンバーがオンラインだと意図が伝わらず認識のずれが起きていたこともしばしばあったようです。 そういえば、前回も開発陣のメンバーがメイドに関するアプリを作っていたような…ご主人様、ご存じないですか?

notch_man

@notch_man8600