地図パズルで遊べるウェブサービスを作った話
半年前にウェブサービスをリリースしたので、遅くなってしまいましたが記事にしてみました。
リリースしたウェブサービス
地図のパズルで遊べるウェブサービスを作ってみました。一般的な地図パズルというと、「遊びながら勉強する」という感じですが、こちらの地図パズルは「遊ぶ」という感じです。ということで、あまり勉強にはなりません(笑)
※下の画像は地理院タイルを加工して利用しています。
※上の画像は地理院タイルを加工して利用しています。
はじめての方は、ぜひこちらを挑戦してみてください。想定時間は30分です。10分以内でできたら上級者です。10分以内を目指してやってみてください！
※きれいにはまったと思っても、海のピースの位置が違うことがあります。
現在100近くの地図パズルがあります。都道府県は全て制覇しています。ぜひ今後の更新を楽しみにしてください。
利用した技術
いくつかの技術を使って作ってみたものの、正直なところあまり詳しくないので、簡単にまとめていきます。
Firebase
インフラは Firebase にお任せすることにしました。Firebase はなんといっても値段が安いのが魅力です。先月までは Firebase Hosting だけを使っていたので、当然運用費用は0円です。それに、Firebase は自動でスケールしてくれます。このパズルがたくさんの人に使ってもらえることを夢見ている私にはうってつけです(笑) それに、デプロイもコマンド一つでできて簡単です。ウェブサイトを個人開発される方は、まず Firebase を使ってみるのもいいと思います。
今後はログイン機能やランキング機能なども付けたいので、 Cloud Firestore や Firebase Authentication も使用していきたいと思います。
React + Next.js
クライアントサイドのライブラリと言えば、皆さんご存じ React、Vue、Angular が有名です。最近は Svelte も人気になってきてます。新しい技術を勉強したいという気持ちもあったのですが、今回は私が使い慣れている React を使ってみました。
それと、React に加えて Next.js を使ってみました。最近は React を使うときは Next.js をセットで使うことが一般的になっているようです。そして、今回のサイトは一般向けのサイトですので、SEO も考えないといけませんが、そのためには、SSR や SG することができる Next.js が必須という感じなようです。Firebase Hosting では SSR はできないので、SG を利用しています。
Cloud Domains
ドメインの取得、管理は GCP の Cloud Domains を利用しました。Firebase が Google 系なので、同じ Google 系の Cloud Domains にしたのですが、Firebase にドメインを登録するときに、ドメインの所有確認がなかったような気がします。これは Firebase が Google 系だからでしょうか？ということで、Firebase でカスタムドメインを利用するときは、Cloud Domains を利用すると一手間省けそうです。
ちなみに、今回は chizu-puzzle.com というドメインを購入しましたが、お値段は一年間で税抜き 1,500円 でした。お名前.com だと、最初の一年間は 1円～ だと聞いているので、Cloud Domains はちょっと高いでしょうか。
全体のコスト
全体のコストは Firebase 0円、ドメイン 1,500円/年 ということで、合計 1,500 円/年 になりました。今後 Firebase のいろいろな機能を使っていくと、いくらか値段が高くなってくると思いますが、一気にユーザ数が増える予定もないので(笑)、今年は 3,000円以内で運用できるのではないかと思っています。
最後に
地図パズル製作所は個人開発で作ったのですが、今は会社の仕事としてメンテナンスしています。今後も本業の合間に機能追加やパズルを追加していきます。よろしくお願いします！
それと、アメブロもはじめました。よろしくお願いします！
Discussion