昔Railsで作ったWebサービス「さくせん」をFirebaseで作り直した
最近、FirebaseとTypeScript、React Hooksに触る機会があり、個人でも何か作ってみたいなーと考えていました。
ふと、昔Rails(3!)でドラクエ風の見た目でさくせんをねるWebアプリを作ったな、というのを思い出した。
移植するのにちょうどよさそうなのでやってみることにしました。
Rails版の画面
できたもの
画面はこんな感じです。
以下からアクセスできます。
やったこと
主な仕組みは以下のとおりです。
- Twitterログイン
- さくせんをFirestoreに保存
- Canvasで画像を作りCloud Storageに保存
- og:image付きでシェアできるCloud Functionsの実装
ソースコードを公開していますので、気になる方はGitHubをご覧ください。
テストがなかったり、本来Functionsでやったほうがよさそうな部分をクライアントでやっていたり、コンポーネントでいろいろやりすぎていたり…等々いろいろあるので、ぼちぼち直していきたいと思います。
参考にした情報
Firebase hostingでの「og:image」の実装方法は以下の記事を参考にしました。
また、以下の2冊も読みました。
どちらも良い本でした。イマイチな実装については僕の手抜き or 力不足です。
スタイル
レトロゲーム風の見た目はおなじみのNES.cssを使わせてもらいました。何度使っても大変良いです。
昔Bootstrapで頑張って作ったときにこれがあればもっと楽できたのに…。
感想
正直なところ慣れているRailsの方がさくさく作れるだろうな、という気はしますが、リアルタイム更新の実装の手軽さや、公開作業の楽さなどはじゅうぶん感じることができました。
今後も触っていきたいと思います。
この記事が気に入ったらサポートをしてみませんか?