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

ゲーム画面をブラウザから見られるサイトを作った話 CircLeT 2026 2026-03-01 1

自己紹介 sou7といいます。そーなな、そーせぶん、そーくんなど好きに呼んでください。会津大学の修士1年生趣味 : なろう小説を読み漁ること、鉄道(ライト勢)
おすすめの小説を紹介し合いましょう！嫌いなもの : 花粉症(つらい) 2

連絡先 ActivityPub/Misskey: @[email protected] → Twitter: @sou7_ _ _ GitHub: @soukouki
3

交通系シミュレーションゲーム Simutrans Simutransとは、鉄道・自動車・船・飛行機などの交通手段を使って、乗客や貨物を運んで利益を得る交通系シミュレーションゲームです。 4

このゲームのすごいところ OSSで開発されていて、複数のフォークがある日本人向けのプレイに特化したフォークなども存在する！ 2Dゲームで軽いので、マップサイズをめちゃくちゃ大きくできる A列車で行こう9では、マップは10km四方まで Simutransでは1マス125mと換算すると625km(5000x5000)でも動作可能飛行機と寝台特急の競争がプレイングとして可能編成数の上限は65535編成 A列車で行こう9の編成数の上限は列車300編成に自動車300台有志が作成したグラフィックが大量にあり、日本の現役の鉄道車両はほぼ
すべてカバー済みマルチプレイ可能 5

このゲームをもっと広めたい！こんな素晴らしいゲームであるSimutransをもっと広めたい！マルチプレイで作った素敵なマップを自慢したい！しかしながら、マルチプレイの様子を見学するには以下の手順が必要で、ハードルが高いのが現状でした。 1. マルチプレイのDiscordの招待リンクを探す 2. 知らない人しか居ないDiscordサーバーに入る 3.
本体とグラフィックをダウンロードする 4. マルチプレイ用のサーバーに接続する 6

この状況をなんとかしたい他の魅力的なゲームが溢れている昨今、Simutransの良さを広めていきたい！！！ということで、Simutransのゲーム画面をブラウザから見られるサイトを作ってみました。 https://cityview.sou7.io/ 7

CityViewの仕組み SimutransをDockerコンテナで起動し、スクリーンショットを撮影スクショ位置はかなり誤差があるので、位置合わせをする地図描画ライブラリ向けに、正方形のタイルに切り出す※
※実際にはタイルをまとめてより低ズームレベルの画像を生成したり、画像の圧縮を行ったりしています。 8

全体の構成今回はDocker Composeのレプリカ機能を使ったマイクロサービスアーキテクチャもどきで作成しました。理由は以下のとおりです。スクショ撮影の部分でゲームを複数起動するのは処理的に難しい 1コンテナ1Simutransという形にして、レプリカ機能を使うことで考えることがグッと減る Rubyが好きなので複雑そうなところはRubyで書きたい画像処理はライブラリがないと面倒なのでPythonで書きたい
9

Dockerコンテナ上でゲームを起動する？ SimutransはDockerコンテナ上でも動作します SimutransはLinuxに対応していて、アンチチートなどの仕組みはありませんコンテナ上に仮想ディスプレイを置き、仮想的なキー入力を伝えてあげることで、Simutransをプログラムから操作できます。あとはHTTP APIを提供しスクショを撮影するサーバーを置けば、いい感じに Simutransのスクリーンショットを撮れるコンテナの完成です。 10

まとめ 1. Simutransという素敵なゲームがあるのでみんな遊びましょう！最初はちょっととっつきづらい面もあるので、興味がある人は連絡をください！ 2. ゲーム画面をブラウザから見られるツールを作りました。
3. DockerとDocker Composeを活用し、ややこしい部分を回避しました。デモサイト : https://cityview.sou7.io/ 11

おまけ時間があったら話します。 1. 使ったけれど説明しきれなかったもの 2. コードの規模 12

使ったけれど説明しきれなかったもの MapLibre GL JS・地図タイル画面移動やズームを自由自在に行うために、地図描画ライブラリである MapLibre GL JSを使いました。 MapLibre GL
JSは地図タイル形式のデータを要求するため、CityViewの大部分のコードはこの地図タイルのデータを作成することに費やしています。 Prefect 地図タイルの作成を並列でうまいこと処理するためにはタスクオーケストレーターを使うのが良いだろうと考え、Prefectを使いました。ただ、やってみた結果としてはPrefectほどの多機能さはあまり必要なかったような気もしています。 13

LLMの活用について CityViewの開発には、コーディングエージェントは使わず、Chat形式でひたすらプログラムを書かせていました。 Claude Sonnetはもちろん活用でき、Kimi K2の性能はその少し下だが十分使える、そんな印象を受けました。マイクロサービスアーキテクチャもどきを採用したことで、各サービスごとに仕様が閉じているため開発効率が向上しました。 14

コードの規模大体6000行くらいでした。言語行数 Python 2635行 Ruby 1949行 HTML・JS 1416行
Rubyが好きなので、Rubyでも書けそうな部分はRubyで書きました。区分行数 prefect関連 1573行 service-capture 968行その他のサービス 1062行バックエンド 981行フロントエンド 1416行 15

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

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

soukouki

More Decks by soukouki

Other Decks in Technology

Featured

Transcript