kz’s blog

興味のあることについて書いていきます。

Nuxt.js と Firebase で SNS チックな個人開発サービスを公開した

はじめに

2018年の中頃に色々な個人開発の記事を見ていたら触発されたので作ってみました。

作業時間は、平日は2~3時間、休日は4~5時間で大体2ヶ月くらいかかりました。

使用した技術や、サービスの概要などを簡単にご紹介できればと思います。

使用した技術

Nuxt.js

SPA

Nuxt.js を使用しておりますが、とりあえず SPA モードで作成しております。

PWA

Nuxt.js を使用した場合、PWA の対応が秒で終わるのでおススメです。

しかしながら、ログイン認証を外部サービスの OAuth を使用しているため、 iOS での PWA としての使用が厳しい状態です。

(外部サービスにリダイレクトする際、Safari 等のブラウザが立ち上がるのですが、復帰したときに状態がリセットされてしまうので、認証ができない)

これにつきましては、Apple の対応を待つしかないのかと思います。

vuetify

デザイン面でお世話になりました。 ドキュメントが非常に充実しているのでおススメです。

Firebase

Authentication

ログイン認証に使用しております。 Twitter, Google のアカウントがあれば登録・ログインすることができます。

特に Google でのログイン認証は一瞬で実装できるので、Firebase の他のサービスを利用しない場合でも利用する価値はあると思います。

Firestore

データの永続化に使用しております。

ルール定義で、データ更新系は基本的に本人のデータのみ許可するようにしております。

Storage

画像を保存するために使用しております。

Hosting

ホスティングは色々迷いました。

特に Google App Engine だと簡単に SSR 対応できるっぽいので迷ったのですが、 Firestore 等の認証の問題で苦労しそうだったのでとりあえず Firebase Hosting にしました。 (ここら辺勉強不足です)

Functions

Firestore のルール上、自分のデータ以外は更新できないので、ユーザーごとのフォロー・フォロワー数、 タイトルごとの登録数を Functions で更新しています。

Firestore では SQL のようにカウントのクエリが組めないので、あらかじめデータとして持っておくのが良いそうです。

ソース管理の話

ソース管理は最終的に Bitbucket を使用しました。

最初は Github の公開リポジトリを使用していたのですが、非公開にしたかったので移行しました。

(Github で非公開リポジトリが作成できるようになったことを知って「まじか」ってなりましたw)

Bitbucket でメインに利用しているのは、ソースと課題とWikiです。

特にコミット時に課題の番号(#1とか)をメッセージに指定すると自動的にリンクが張られて便利でした。

サービスのコンセプト

今まで遊んだゲームを履歴として残し、ゲーマー同士で繋がることができるサービスです。

もしかしたら昔遊んだ懐かしいゲームに再会できるかもしれません。

検索

タイトル毎に検索項目をいくつか用意しており、範囲検索をすることが可能となっております。

例えば、とあるゲームのランクが 500 ~ 800 のユーザーを探すことができたりします。

登録

自分が今までに遊んだことのあるタイトルを登録することができます。

登録可能なタイトルは随時追加していく予定です。

繋がる

気になったユーザーを発見した場合、フォローすることができます。

また、プロフィールに URL を載せることができるようになっているので、外部の SNS 等が登録されていたら積極的に繋がりに行くことができます。

やらないこと

ユーザー同士のメッセージ等のやりとり

Twitter 等の外部 SNS を通してやりとりして頂くスタンスです。

複数項目での検索

複数項目で検索できるようにしようすると、Firestore のインデックスを大量に用意しなければならず、 現実的ではないので諦めました。

今後の課題

データ取得が極端に遅いときがある

Firestore からのデータの取得が極端に遅いときがあります。

普通は1秒くらいで取得できるのですが、遅いときは30秒くらいかかります。

発生条件としては、しばらくアクセスがない状態でアクセスすると遅くなる気がします。

遅くなるのは、トップページの1部だけで、読み込みが早い箇所もあるので、アプリケーションの問題かと思うのですが、現在調査中です。

SSR 対応する

初回読み込み時間や、SEO 等改善していきたいので、対応していきたいと思っています。

タイトルを増やす

対応タイトルがまだ10種類ほどしかないので、今後増やしていく予定です。

ただ、一人で運営しており、自分が遊んだゲームくらいしか網羅できないので、追加のご要望をお待ちしております。

ユーザーを増やす

まだ僕一人しか登録がないので今後増えていったら嬉しいです。

サイトURL

ge-reki.com

おわりに

まだまだ課題・改善点等あると思いますが、ひとまずリリースまでこぎつけることができました。

Nuxt.js や Firebase は初めて利用した技術なのですが、公式ドキュメントが非常に充実しているのと、ブログ等で発信して下さっている方が多いので、なんとか実装することができました。

個人開発サービスを公開すること自体も初めてのことで、めちゃくちゃ勉強になりました。

何よりも自分の考えで色々決めたりできるので、仕事でシステム作っている時と比べてめちゃくちゃ楽しかったです。

楽しみながら技術を習得できる個人開発サイコー!!!