【個人開発】パズルゲームを作ってコスト0円で公開した話
はじめに
10パズル迷路というパズルゲーム系のWebアプリを作成しました。
スタートからゴールまで迷路（ただのマス目？）をたどり、通ったマスの数字・記号をつなげて答えが10になる数式を作るというゲームです。
ケチな性分なので、なるべくコストをかけずに作成・公開することを目指しています。
今回はコスト0円で公開までこぎつけましたので、その道のりを書き残しておきます。
自己紹介
はじめまして、SHIROです。
非エンジニア職なので、休日だけコードを書いています。特技は「車のナンバーを見て四則演算で10を作る」ことです。
アプリ開発のきっかけ
今年の春ごろにWordleが流行った時に、派生したゲームが複数作られていて自分も何か作りたいと思ったのがきっかけでした。
この時点で考えていた要件は以下の通りです。
- Webアプリ（ネイティブアプリを作って公開するのはお金がかかるので。）
- 問題が日替わりで表示される
- 運用コスト0円
ゲームのアイデア
どうせなら自分がやりたいゲームを作ろうと思って、「車のナンバーを見て四則演算で10を作る」ゲームを作ることにしました。
ただ数字を4つ表示して10を作るのはつまらないので、どんなデザインにするか悩んでいた時に、よくある謎解きゲームの「迷路を解いて、通った道の文字を順に並べる」やつを見かけてこれにしようと思いました。
開発
バックエンド
問題を生成するところはpythonを使用しています。AtCoderで鍛えたアルゴリズム力が役に立ちました。
日替わりで問題を描画するところも、そのままpythonでFlaskを使っていました。Flaskは使ったことがあったのですぐに実装できそうだったからです。
フロントエンド
ゲームをプレイする時の処理はJavaScriptですが、普段触らないのでライブラリとかも全然わからず、とりあえず素のJSをゴリゴリ書きました。以下、詰まったところを書き留めておきます。
✅ JSでcookieを編集できない。
どうやらサーバ側で設定したcookieとブラウザ側で設定したcookieは別々に管理されるようです。それを知らずにかなり手こずりました。↓の記事に出会えなかったら一生解決しなかったかもしれないです。
おかげでcookieの仕様についてちょっとだけ賢くなりました。
公開
Heroku で公開
当初はFlaskを使った動的Webとしていたので、Herokuで動かすことにしました。
Herokuの無料プランは（当時）月1,000時間まで使えたので、1か月丸々使用していてもコスト0円です。
ただし、無料プランでは30分間アクセスがないとスリープしてしまうので、Schedulerで10分おきにアクセスさせて対策します。
GitHub Pages へお引越し
Herokuの運用で満足していたんですが、Herokuから無料プラン廃止の発表がありました。運用コスト0円が信条なので、無料で使える代替サービスを探していましたが、途中で面倒になったので作り直すことにしました。
静的なwebサイトであればGitHub Pagesで無料で公開できることは知っていたので、そちらを利用すべく、Flaskでやっていた問題描画の部分をJSで実装します。ここが一番大変でした。以下、詰まったところを書き留めておきます。
✅ JSでcookieを編集できない。（2回目）
結局はcookieのdomain属性とpath属性の設定を間違えていただけなんですが、そもそもcookieへの理解が足りなかったのでかなり手こずりました。
おかげでcookieの仕様についてさらに少しだけ賢くなりました。
✅ JSでjsonファイルを読み込めない。
実際は読み込みはできているけど、非同期処理が全然わかっていなかったので読み込みが完了する前に問題描画しようとして詰まっていました。
おかげでJavaScriptの同期・非同期処理についてちょっとだけ賢くなりました。
独自ドメイン取得
お引越しが完了しましたが、Heroku時代は独自ドメイン取らずに運用していたためURL変更で余計な手間がかかってしまいました。次の引越しはないと信じたいですが、この機会に独自ドメインの取得について調べてみました。
ここでもコスト0円を絶対としていたので、freenomを選択しました。
ドメインを探すとき、トップレベルドメインまで入力して探す必要がある[1]、というのが分からずにかなりの数のドメインを試して拒否されましたが、やり方がわかってからは一発で取得出来て簡単でした。
おわりに
ちゃんとした技術選定などせずに始めたので回り道した感が満載ですが、なんとか形になってよかったです。
最初は自分が遊びたくて作ったんですが、テストプレイやりすぎてちょっと飽きが来ています。また新しいパズルゲームのネタを考えているので、そちらも報告できるよう精進します。
今回の記事が、私のような個人開発者（特にHerokuの無料プランから追い出された方[2]）の参考になれば幸いです。
最後まで読んでいただきありがとうございます！
追記 (2023-11-26)
freenomのドメインが取得できなくなっていたため、更新もできず失効してました。。。
独自ドメインは一旦あきらめてGitHub Pagesのデフォルトに変更しています。
Discussion