Vue.js+Firebaseで映画マッチングアプリ(CinemaWith)をリリースしました

#概要

入社して７ヶ月をすぎました。

流行りのVue.js,Firebaseを使って上映中の映画を利用したマッチングアプリ「CinemaWith」のβ版をリリースしたのでその過程を残します。
https://cinemawith.app

#特徴
上映中の映画をお気に入りに登録することで、
その映画を観に行きたい人を探すことができる。
登録からチャットまでが早いため色々な人と関わることができます。

#動機

Sierとして客先で働いているため、やってみたいと思った技術に触れられる機会が少ない。
サーバー構築などはベテランの方がやるので新卒の自分が触れることのできる範囲が限られている。
そんな中で一から十まで自分で作ってみたい、あわよくば儲けたい
という魂胆のもと開始しました。
制作期間は一ヶ月半ほどでほぼ毎日業後に開発を行っていました。

##トップページ

#流れ

##アイデア出し
最初は同期と二人で開発する予定だったのですが、なかなかスケジュールが合わず、結局は自分一人で書くこととなりました。
自分の趣味が映画鑑賞であること、
時々行く一人映画が少し寂しいこと
誰でも使うチャンスがあって(マニアックではない)、気軽に行けて・・・
というサービスを考えたときに思いついたのがこのサービスでした。

##技術選定
自分は普段現場ではJavaScript(JQuery), Javaを使って開発しています。
まずぱっと開発しやすい環境としてrails + webpack + vue.js　というスタックに決定しました。

しかし途中まで実装したはいいものの、チャットの開発になるとrailsのaction cableなど未知の領域で、
個別チャットという利用事例が見つからないことに焦りはじめます。

そんな時に会社の集まりで、先輩に迷ってることを言うと
いろんな方からFirebaseを勧められました。

それまで名前を聞いたことぐらいしかなかったのですが、これが認証やリアルタイム通信に特化したBaaS(Backend as a Service)と言うことで
すぐにこれだ！と思い、土日睡眠時間を削りに削ってなんとか使えるレベルまでに持っていきました。

ちなみにdatabaseはRealtimeDatabaseの方を利用しています。
その理由としては
・Cloud FireStoreに比べて運用年数が長いので、それだけ参考にできる利用事例が多い
・Cloud FireStoreがベータ版であると言うこと
の2点です。
NoSQL未経験からゴリゴリのツリー状データベースを扱うのは結構きつかったし、
最適な設計はできていないと自分でも感じています。
次回開発するときはより使いやすいと聞くCloud FireStoreを使ってみようと思っています。

結果的にVue + Nuxt.js + Firebaseに落ち着き開発を仕切りなおしました。

##実装
###Vue.js
仕事で使っているJQueryの値バケツリレーがvuexやコンポーネント化でほとんどない。
これは使っている最中何度も感動しました。

###Nuxt.js
これも好きになりました。
store,middleware,pagesなど基本的なところしか使っていませんが、
開発部分以外にあまり気を使う必要がなく、集中させてくれる本当に使いやすいフレームワークで
当たり前ですがVueとの相性がすごく心地よかったです。
コミュニティが活発なのかどんどん新しいモジュールが出てくるので今後が楽しみです。

###Firebase
RealtimeDatabaseも当初はRDBの考えで理解できないところばかりで、つまづくことも多かったですが、
それを上回るほどの認証システム、DBとのバインドの恩恵を受けられたので、良い選択だったかなと思っています。
認証にはGoogleのみを採用しています。
その理由はまずFirebaseがGoogle製のため、相性がいいのではないかという楽観的な考えと、最近TwitterのAPIなんかでは外部サービスの締め出しが多いと聞いたからです。
実際に使ってみて使いやすかったし、Googleアカウントを持っていない人はそうそういないと思うのでこれで本決定しました。
またhosting,ドメイン設定もものすごく楽で、流れるようにデプロイできました。

###ログ
エラーログにはsentry、アクセスなどにはgoogle analyticsを利用しました。
どちらもモジュールがコミュニティのプラグインがありとても便利です。

参考
Vue.js + Firebase を使って爆速でユーザ認証を実装する
firestore, vue.jsでリアルタイム同期のチャットを実装してみる [チュートリアル形式]
Sentryでイベントログ収集をしよう！ - Vue.js編 -

###アプリの構成・デザイン
会社の同期にデザインをやっている人がいたので、頼んで色々一緒に考えてもらいました。
僕一人だとどうしても野暮ったいページになってしまうのですが、協力してもらったおかげでなかなかスタイリッシュになっていると思います。
本当に感謝です。
チャットはLINE風にしてみました。

###PWA
今Qiitaをみている人も半分以上はスマホからだと思います。
このアプリも最初は、WEBメインを考えていたのですが、
こんな感じのマッチングアプリが果たしてPCから使われることがあるのか、、、と思いPWA化してみました。
Nuxtで開発していたおかげでPWA対応も驚くほど楽でした。

参考
nuxt.js導入とかPWA化のメモ

##つまりポイント
###1.ドメイン設定
Firebaseのドメイン設定は簡単なはずなのですが、
自分ははまってしまいました。
なぜか最初のログイン画面から動かないのです。
原因はfirebase consoleのauthenticationでも認証許可ドメインを設定してあげなければならなかったからです。
ここに気づかず、つい最近までなぜカスタムドメインでは動かないのか頭を抱えていました。

###2.チャットの仕組み
個別チャットの実装などはあったのですが、友達申請⇨チャットの流れを参考にできるものがなかったため、自力で考えました。

このような仕組みにすると以降該当する友達のルームナンバーからチャットルームを参照して、
storeとバインドすることでうまく動きます。

#気をつけたこと
###著作権系
可能な限り調べて、公式から公開されているもしくはAPIで取得可能な画像を載せているつもりです。
また、文章は色々なものを参考にしながら自分で作成しました。
ご指摘等あればよろしくお願いします。

###バリデーション
実装はフロントメインだったので改ざんされたらどうしようという考えが常にありました。
なので基本は全てきつめにRealtimeDatabase側でバリデーションをかけています。

#最後に
思い出したことは随時更新していくつもりです。
業務で全く使わないようなことばかりで、まず実用段階に持っていくのが大変でしたが、とりあえず形にできて良かったです。

この技術セットは個人開発する場合かなりスピード感を持って開発できると思います。
今後はさらに新しい機能を試していくとともに、ブラックボックス化している部分の理解も進めて行きたいと思います。

今の感想としては、初めてのサービスにしてはうまくできたかなという満足感と、もっとちゃんとできた部分はたくさんあるなあと半分半分くらいです。
協力してくれた同期のメンバーを始め、手伝ってくれた方には感謝でいっぱいです。

次回はAPI側をちゃんと書くかcloudfunctionsで実装するかでもっといいものにしたいと思います。