過去につくったスマホゲームのキャラクター「マカロン」と会話できるWebアプリをつくった

育休ももうあと少しと終わりが近づいてきた今日このごろですが、過去につくったスマホゲームのキャラクター「マカロン」と会話できるWebアプリ『Macaron Web』をつくりました。

どんなアプリ？

「マカロン」というキャラクターとおしゃべりを楽しめるweb appです。マカロンは自作のゲームに登場する超マイナーキャラクター。なので、おそらくほぼニーズはなく、自分と同居人がきゃいきゃい楽しむくらいの用途しか今のところなさそうです。

Macaron Webはここから遊べます

Repositoryはこちら

なんで作り始めたかは正直忘れてしまったのですが、LLMを使えば「マカロン」といい感じにおしゃべりを楽しめるのでは？との思いつきがスタートだった気がします。

インタラクティブに遊べる可愛い感じのものが好きなので、楽しくていつのまにかずっと作っていたって感じです。

あとは単純にLLM を使った何かをつくってみたかったのはあります。

フロントエンドはReact + VIteで開発し、Vercelにデプロイ。バックエンドはDenoで開発し、Deno Deployにデプロイしました。

バックエンドでのマカロン返答生成部分はLangChainを使ってOpenAI APIを叩いています。

普段webサービス開発をしてるわけでないので全ての技術でほぼ経験がなく、だいたいは「使ってみたいから」「情報が多そうだから」「なんか使いやすそうな気がする」というゆるい気持ちで選定しています。

Macaron WebではLangChainで主に few-shot promptingを活用した返答生成をしています。

スマホゲームで使用していたシナリオデータをもとにfew-shot prompting の examples を作成しました。シナリオ量がそんなに多くなかったので今回はRAGは利用せず、そのまま全データをプロンプトにぶち込んだ感じです。

いかに自分のなかにある「マカロンっぽい発言」を再現してもらうかに苦心しました。exmaples を調整したり、prefixを調整したり。

たまーにこっちの指示とかexampleを無視して漢字を使ってくるのが許せなかったので（マカロンは漢字なんか使わないんだぞ）、漢字が含まれる場合は別途ひらがな変換用のfew-show promptを投げたりしてます。

この漢字変換ロジックはOpenAI API使わずに普通に形態素解析して漢字ひらがな変換してもよかったんですが、今回はLangChain使うのがテーマだったのと、既存コード使い回せて楽なのもあってAPIに投げることにしました。

また、チャットにありがちなMemory機能も今回は実装してません。マカロンはそんなに賢い感じじゃないのでいいかなーって。

今回Macaron Webの開発では初っ端からGenerative AI駆動開発で進めたおかげで、あまり馴染みのない技術スタックでもなんとか表現したいものを実現することができました。（もちろん拙いところはたくさんあると思いますが...）

コードの生成のみならず、few-shot prompting のためのexamplesの生成とかもしてもらいました。

途中からはGitHub Copilotに課金して「なぜ最初から使わなかったのか」と大後悔したくらいヘビロテしました。

いやー、便利な世の中になったなあ。

デザイン作成の部分ではまだあまり活用できていないので、今後はそこらへんの領域にも踏み込んでいきたいなと思っています。

ここからは苦労話をさせてください。自分は普段あまりインフラに親しんでないため、Macaron Webのデプロイには二転三転四苦八苦しました。

当初はフロントエンドとバックエンドを1つのrepositoryで管理をしていて、Docker Composeで一気に立ち上げて動かそうとしていました。

これは自宅のminiPC上にデプロイして遊んだりしたかったからで、実際にDockerのおかげですぐに別環境でも動かして一通り試して遊べました。

しかし、いざ世のクラウドサーバーを利用してシュッと公開したいと思ったら、逆にDocker Composeを再利用するのがめんどうなことに後から気づきました。

細かい話は割愛しますが、DigitalOcean, AWS ECS, Heroku等々でDocker Composeしてたアプリをデプロイしようと試みてはうーんとなるのを繰り返しました。

特に自分はこのMacaron Webのためにインフラのお世話をしたくない気持ちが強く、結局はDockerを排除してフロントエンドとバックエンドでそれぞれVercel, Deno Deployを利用することに。

そうなるとrepository rootに各アプリが配置されてないと何かと面倒だったので、結局repositoryもフロントエンドとバックエンドで分けることにしたりと、色々とゴニョゴニョっとなりました。

そしていざVercel, Deno Deployにそれぞれデプロイしたら本当に一瞬で終わってマジで拍子抜け。

いやー、色々といい勉強になりました...。

苦労話その2をさせてください。CSSがクソめんどくさかったです。生成AIをもってしても工夫しなければCSSの調整は闇ということがわかりました。

そもそも最初何も考えずにノリで生CSSでstylingを頑張ってたんですが、フレームワークとかライブラリ使えばよかったと後悔しています。

スマホ対応とかも後から気づいて調整したので大変だった。スマホでは使えるようにしたかったのでまあまあ頑張りました。デバイスによっては表示崩れるかも。タブレットは捨てた。

苦労話もいくつかありましたが、学びも多く、そして何より可愛い感じのアプリがつくれて楽しかったです。

次はなにつくろうかなー。もうWebっぽいやつは一旦満足したので、スタンドアロンで動くゲームっぽい何かを作りたい気分かもしれません。

何はともあれ育休中にいい思い出ができて大変満足です。育児頑張ってくれてる夫と開発を優しく見守ってくれた（？）子には感謝せねばですね。