ゲーム画面をブラウザから見られるサイトを作った話

CircLeT 2026(2026-03-01)にて発表したスライドです。

Transcript

1. ゲーム画面をブラウザから見られるサイトを作 った話 CircLeT 2026 2026-03-01 1
2. 自己紹介 sou7といいます。 そーなな、そーせぶん、そ ーくんなど好きに呼んでく ださい。 会津大学の修士1年生 趣味 : なろう小説を読み漁る こと、鉄道(ライト勢) おすすめの小説を紹介し合 いましょう！ 嫌いなもの : 花粉症(つらい) 2
3. 連絡先 ActivityPub/Misskey: @sou7@mi.sou7.io → Twitter: @sou7_  _  _ GitHub: @soukouki 3
4. 交通系シミュレーションゲーム Simutrans Simutransとは、鉄道・自動車・船・飛行機などの交通手段を使って、乗客や 貨物を運んで利益を得る交通系シミュレーションゲームです。 4
5. このゲームのすごいところ OSSで開発されていて、複数のフォークがある 日本人向けのプレイに特化したフォークなども存在する！ 2Dゲームで軽いので、マップサイズをめちゃくちゃ大きくできる A列車で行こう9では、マップは10km四方まで Simutransでは1マス125mと換算すると625km(5000x5000)でも動作可能 飛行機と寝台特急の競争がプレイングとして可能 編成数の上限は65535編成 A列車で行こう9の編成数の上限は列車300編成に自動車300台 有志が作成したグラフィックが大量にあり、日本の現役の鉄道車両はほぼ すべてカバー済み マルチプレイ可能 5
6. このゲームをもっと広めたい！ こんな素晴らしいゲームであるSimutransをもっと広めたい！ マルチプレイで作った素敵なマップを自慢したい！ しかしながら、マルチプレイの様子を見学するには以下の手順が必要で、ハー ドルが高いのが現状でした。 1. マルチプレイのDiscordの招待リンクを探す 2. 知らない人しか居ないDiscordサーバーに入る 3. 本体とグラフィックをダウンロードする 4. マルチプレイ用のサーバーに接続する 6
7. この状況をなん とかしたい 他の魅力的なゲームが溢れている 昨今、Simutransの良さを広めて いきたい！！！ ということで、Simutransのゲー ム画面をブラウザから見られるサ イトを作ってみました。 https://cityview.sou7.io/ 7
8. CityViewの仕組み SimutransをDockerコン テナで起動し、スクリー ンショットを撮影 スクショ位置はかなり誤 差があるので、位置合わ せをする 地図描画ライブラリ向け に、正方形のタイルに切 り出す※ ※実際にはタイルをまとめてより低ズームレベルの画像を生成したり、画像の圧縮を行ったりしています。 8
9. 全体の構成 今回はDocker Composeのレプリカ機能を使ったマイクロサービスアーキテク チャもどきで作成しました。 理由は以下のとおりです。 スクショ撮影の部分でゲームを複数起動するのは処理的に難しい 1コンテナ1Simutransという形にして、レプリカ機能を使うことで考えるこ とがグッと減る Rubyが好きなので複雑そうなところはRubyで書きたい 画像処理はライブラリがないと面倒なのでPythonで書きたい 9
10. Dockerコンテナ上でゲームを起動する？ SimutransはDockerコンテナ上でも動作します SimutransはLinuxに対応していて、アンチチートなどの仕組みはありません コンテナ上に仮想ディスプレイを置き、仮想的なキー入力を伝えてあげる ことで、Simutransをプログラムから操作できます。 あとはHTTP APIを提供しスクショを撮影するサーバーを置けば、いい感じに Simutransのスクリーンショットを撮れるコンテナの完成です。 10
11. まとめ 1. Simutransという素敵なゲームが あるのでみんな遊びましょう！ 最初はちょっととっつきづら い面もあるので、興味がある 人は連絡をください！ 2. ゲーム画面をブラウザから見られ るツールを作りました。 3. DockerとDocker Composeを活用 し、ややこしい部分を回避しまし た。 デモサイト : https://cityview.sou7.io/ 11
12. おまけ 時間があったら話します。 1. 使ったけれど説明しきれなかったもの 2. コードの規模 12
13. 使ったけれど説明しきれなかったもの MapLibre GL JS・地図タイル 画面移動やズームを自由自在に行うために、地図描画ライブラリである MapLibre GL JSを使いました。 MapLibre GL JSは地図タイル形式のデータを要求するため、CityViewの大部 分のコードはこの地図タイルのデータを作成することに費やしています。 Prefect 地図タイルの作成を並列でうまいこと処理するためにはタスクオーケストレ ーターを使うのが良いだろうと考え、Prefectを使いました。ただ、やってみ た結果としてはPrefectほどの多機能さはあまり必要なかったような気もして います。 13
14. LLMの活用について CityViewの開発には、コーディングエージェントは使わず、Chat形式でひた すらプログラムを書かせていました。 Claude Sonnetはもちろん活用でき、Kimi K2の性能はその少し下だが十分使 える、そんな印象を受けました。 マイクロサービスアーキテクチャもどきを採用したことで、各サービスごと に仕様が閉じているため開発効率が向上しました。 14
15. コードの規模 大体6000行くらいでした。 言語 行数 Python 2635行 Ruby 1949行 HTML・JS 1416行 Rubyが好きなので、Rubyでも書けそ うな部分はRubyで書きました。 区分 行数 prefect関連 1573行 service-capture 968行 その他のサービス 1062行 バックエンド 981行 フロントエンド 1416行 15