まえがき

学生の皆さんは授業期間が終わり夏休みを謳歌していることと思います．ちなみに私は，研究室の予定が詰まっていて，帰省も合宿も何とかねじ込みました．もっとゆっくりしたい….どうもウグイスです．

今回はDen3夏合宿 in 熱海セミナーハウスの中で開催したDen3夏のGameJamに参加させていただいたので，そちらの出した作品の紹介となります．

今回のテーマは「コレクション」ということで，何かを集めるとかを想定している感じですかね．

昔はちゃんとUnityでゲームを作っていたのですが，最近は研究ではWebバックエンド，フロントエンド，データ解析ばかりで最新のUnityのアップデートとかもわからないので，今回はWebアプリを作成することにしました．

ただゲームには寄せたいなということで，そっちでアイデアを膨らませてみました．

アイデア出し

お題は「コレクション」日本語では集めるですね．関係ありそうな言葉としては，疎密や収集なんかが思い浮かびます．

今回はゲームジャムということで，ゲームは作らないにしてもビジュアル系で行きたいと考えてました．

つまり，何かを集めてビジュアル表現にするという感じですね．

次の問題は何を集めるかです．大きく二つのアイデアが考えられます．一つはガチャやゲームなどで仮想アイテムを集めてもらってそれを表示する．もう一つは現実の情報を収集して，それを表示する．

前者はガチャ画面やゲーム画面を実装する必要があり，若干面倒です．というわけで後者で考えました．

よくある実用アプリとしては株価だったり，スポーツの試合結果だったりが考えられますが，ありきたりなのでちょっと抵抗があります．

で，せっかくならゲーム関連の情報を集めて可視化できればいいのではと思い，Gemini君にアイデアを出させた結果，ゲームのレビューとかいいのではとなりました．

というわけで，ゲームのレビューを星空のように表現するというアイデアで行くことにしました．

実装

今回は時間がない(合宿前日に作業してます)ので，自分で実装する時間もないのでGemini君に実装してもらいました．

詳細

Github: https://github.com/uguisu64/steamReview

• バックエンド: Flask
• フロントエンド: SvelteKit

バックエンドとフロントエンドを分けたのですが，今になって考えればこれくらいの単発アプリならSvelteKit単品で実装してしまった方がベターな気がします．

まあSteamAPIからレビューを取ってくるテストのときにPythonを使っててそのまま実装しちゃったので…

バックエンドはレビューを取ってきて，asariという感情分析ライブラリを使ってネガポジの点数を出してフロントエンドに返す設計になってます．

フロントエンドではバックエンドの情報をいい感じにビジュアルに落とします．ビジュアル表現はd3.jsを使いました．Geminiに実装させるのでGeminiが提案するものをそのまま使った方がいいだろうと判断しました．

GeminiCLIを使うことも一瞬考慮したんですけど，単純なアプリなので，相談してたChatの方でそのまま実装させちゃいました．途中からCLIに切り替えたらよかったなと思いました．面倒くさがるのは良くないですね．

作製の様子

奇跡的に作成中にスクショしてたので少し載せます．

まず最初のバージョンですね．2つのサイズの星が散らばってます．小さい方は一つ一つのレビューに相当し，大きい方はジャンルを表してます．で，星にマウスカーソルを合わせると実際にレビューが見えます．ちなみにスコアによって色が変わるようにしてます．

背景白色だとまぶしいのと星空なら黒バックだろというわけで背景を黒寄りにしました．

これが最終バージョンで，ジャンルの星を押すとジャンルに関係のあるレビューに線が引かれるようにしました．

あとがき

というわけでGameJamで作った作品の紹介ブログでした．ブログリレー形式なので，明日以降，毎日作品に関するブログが投稿される予定です．(GameJamブログリレーの初手がゲームじゃないのはどうなのと思わなくもない)

時間がなかったので実装はGemini丸投げしたのですが，曖昧な状態で作らせ始めたのがよくなかったですね．ちゃんと仕様を決めてからやればよかったと思いました．

ちなみに割と手抜きな部分が多くて，ジャンルとかも固定ですし．ジャンルに所属しているかは，関係単語がレビューに含まれてるかだったりで，改善の余地はある感じです．

というわけで精読ありがとうございます．次のブログで会いましょう，ウグイスでした．