たれみみ部
たれみみうさぎたちとおしゃべりしたり、作品をながめたり、ミニゲームで遊んだりできるウェブサイト。
公開中できること
- おしゃべり … たれみみうさぎとのAIチャット。セリフに合わせて表情が変わります。
- ギャラリー・動画 … 作品を並べて眺められます。ときどきうさぎが乱入します。
- 部員機能 … ログインすると部員証がもらえて、実績やデイリーミッション、活動の記録がたまっていきます。
- 3D … 3Dのうさぎが動きまわるページと、作品を飾って歩ける3D美術館。
- ミニゲーム … たれみみコネクト、対戦ゲーム「たれコマッシュ」、カルタ、反射神経ゲーム、ミステリーギャラリーなど。スコアは共通のランキングに載ります。
つくり
| フロント | Next.js 14（App Router）+ TypeScript + Tailwind CSS。Vercel にデプロイしています。 |
|---|---|
| データベース・認証 | Supabase（PostgreSQL + Auth）。Google ログインに対応し、部員プロフィール、実績、ミッション、各ゲームのスコアを保存しています。 |
| AI | Google Gemini API。キャラクターの口調を保つプロンプトを組み、返答のラベルに応じた表情画像をあらかじめ読み込んで、待ち時間を短くしています。 |
| 3D | three.js。うさぎのモデルはコードで組み立てていて、GLB として書き出せます。美術館シーンではNPCが歩きまわります。 |
| 画像 | 部員がアップロードしたアイコンや部員証の画像は Cloudflare R2 に保存・配信。生成には html2canvas と sharp を使っています。 |
| 計測 | アクセスログを自前で記録し、管理画面で日別・ページ別・時間帯別に見られるようにしています。 |
| テスト | Vitest。ゲームのバランス調整は、何度も対戦を回すシミュレーションをテストとして実行して数字で確かめています。 |
技術的におもしろいところ
対戦ゲームの物理を決定論にしてある
対戦ゲーム「たれコマッシュ」の物理は、同じシードと同じ入力なら必ず同じ結果になるように作っています。 おかげでバランス調整を勘に頼らずに済み、パラメータを変えるたびに大量の対戦をシミュレーションとして回して、 勝率の偏りを数字で見ながら詰められます。同じ物理エンジンをレースの「たれコマGP」でも共有しています。
ランキングは1つのテーブルに全ゲームが相乗り
ミニゲームごとにテーブルを作らず、ゲームIDで区別する汎用のスコアテーブルにまとめています。 新しいゲームを足すときはデータベース側の作業が要らず、デイリー・週間・通算の集計も1か所で済みます。 会員登録なしで遊ぶ場合は、端末ごとに作った匿名のIDで自分の記録をまとめて表示します。
同じゲームコードが3か所で動く
ミニゲームは、サイト内のページ・itch.io・iOSアプリの3か所で動きます。 Vite で単体のHTMLへビルドし直したものを配っていて、iOS版はそれをアプリに同梱して WKWebView から読み込む形。 ゲーム本体を書き直さずにネイティブ配信へ載せられます。
プライバシー・お問い合わせ
たれみみ部のプライバシーポリシーと利用規約は、サイト内に掲載しています。
ご意見・不具合のご報告は、たれみみ部の「コンタクト」ページ、または Sizu dev のお問い合わせページからご連絡ください。