見出し画像

昔Railsで作ったWebサービス「さくせん」をFirebaseで作り直した

最近、FirebaseとTypeScript、React Hooksに触る機会があり、個人でも何か作ってみたいなーと考えていました。

ふと、昔Rails(3!)でドラクエ風の見た目でさくせんをねるWebアプリを作ったな、というのを思い出した。
移植するのにちょうどよさそうなのでやってみることにしました。

画像1

Rails版の画面

できたもの

画面はこんな感じです。

画像2

以下からアクセスできます。

やったこと

主な仕組みは以下のとおりです。

- Twitterログイン
- さくせんをFirestoreに保存
- Canvasで画像を作りCloud Storageに保存
- og:image付きでシェアできるCloud Functionsの実装

ソースコードを公開していますので、気になる方はGitHubをご覧ください。

テストがなかったり、本来Functionsでやったほうがよさそうな部分をクライアントでやっていたり、コンポーネントでいろいろやりすぎていたり…等々いろいろあるので、ぼちぼち直していきたいと思います。

参考にした情報

Firebase hostingでの「og:image」の実装方法は以下の記事を参考にしました。

また、以下の2冊も読みました。

どちらも良い本でした。イマイチな実装については僕の手抜き or 力不足です。

スタイル

レトロゲーム風の見た目はおなじみのNES.cssを使わせてもらいました。何度使っても大変良いです。

昔Bootstrapで頑張って作ったときにこれがあればもっと楽できたのに…。

感想

正直なところ慣れているRailsの方がさくさく作れるだろうな、という気はしますが、リアルタイム更新の実装の手軽さや、公開作業の楽さなどはじゅうぶん感じることができました。
今後も触っていきたいと思います。


この記事が気に入ったらサポートをしてみませんか?