TrainStampRallyの技術的な話

なにそれ

https://train.ponkotuy.com/

鉄道に乗って目的地を巡り、スタンプを集めるゲーム。時間・距離・金額でランキングされる仕組みや、missionを作成する機能もある。

サーバサイド

Webサーバは純粋にJSONを返すだけで、レンダリングは主にJSとHTMLでやる、ありがちな構成。WebサーバはPlayframework + Scala + SkinnyORMで、DBはMariaDB。サーバ本体は家の自作サーバでArchLinux上で動いている。リバースProxyとしてnginxを採用。https化もここでやっている。これはLet's Encrypt使って1コマンドでhttps化できた。便利過ぎて感動している。

フロントエンド

VueJSを使ってレンダリングしている。JSはCoffeeScriptを変換、JSライブラリはCDNJS、HTMLはpugを変換、これらのコンパイル等の処理はgulpに任せている。CSSはBootstrapで、Materialデザインが気に入ったのでテーマにbootstrap-material-designを使っている。

データ作成

実はコードの半分以上がデータ投入部分である。日本全国の鉄道ダイヤを投入する必要があるのでかなり省力化できるように拘った。(表には出てこないけど

で色々試行錯誤した結果、「Excel表計算ソフト最強」という結論になり、データの量が多いところはTSVでロードできるinput elementを付けた物が多い。TSVなのは、Google SpreadsheetをコピペするとTSVになるので。Excel中心にやるならCSVをuploadする仕組みが良い。Google SpreadsheetはAPIを使って中身を参照できるが、認証まわりが面倒くさくてやめた。

時間的にも半分ぐらいデータ作成に費やしているし、コードも併せれば全体の7割がデータ作成と言っても過言ではなかった。ゲーム制作の1つの側面かもしれない。