IMG 0572 (1)

#web1weekに参加しました。

Crientさんで行われている1週間でWebサービスを作るイベント、#web1weekに参加しました！

イベントのリンクはこちら。

お題は「Like」ということで、「自分の好きなもの」×「Likeを無制限に押せるSNS」をテーマに、プロトタイプレベルではありますが5/18からの1週間、仕事と育児との合間を縫って開発しました。

アプリ名はDogs 'n Dachsです。Eggs 'n Thingsさんから多分に影響を受けたネーミングです。はい。

Dogs 'n Dachs はこちらから https://dogs-n-dachs.woodsatweb.com/

Twitterなんかで「いいね100回押したい」という要望、たまにありますよね。

このアプリでは 好きなだけいいね できます。

使った技術

  • Nuxt.js
  • Vuetify
  • TypeScript
  • Firebase
    • Cloud Firestore
    • Cloud Functions
    • Firebase Hosting
  • Figma(ワイヤーフレーム、faviconのデザイン用)

Firebase Hostingで静的ファイルをホスティング、Cloud Functionsでサーバーサイドレンダリングを行っています。

コンポーネント分割はAtomic Designに則って行いました。

TypeScriptは使えるコンポーネントは使って、型定義がしんどいところはJSにする方針としました。TS使うならReactの方がいいんだろうな...

作ったページ・機能

/ トップページ
/home タイムラインページ
/upload 新規投稿ページ
/post/_id 各投稿ページ（ここからLikeが押せる）
/redirect 投稿後クッション用ページ

Likeをいくらでも押せる機能の実現

IMG 0571 (1)
Likeボタン（❤︎、★）が押される都度Firestoreに書き込みに行ってはクラウド破産まっしぐらです笑

そこで、beforeDestroyのフックにDBのアップデート処理のトリガーを持たせて、画面遷移時に押された回数分アップデートをかける、という形にしています。

ただ1点難点があり、Likeボタンを押してから「ブラウザを閉じ」られてしまうと更新が反映されないという課題が、、

何か解決策がないか今後検討してみようと思います。

SSR実装していてハマったこと

Firebase HostingとCloud FunctionsでのSSR実装で、nuxt generateをしてからデプロイしたのですが、全ページがデプロイされてしまったことによってタイムラインページに表示しているLikeの表示件数が固定値になってしまいました。

解決策として、nuxt generate後に以下のシェルを実行、publicディレクトリ配下のファイルをデプロイすることにしました。

generate.sh

rm -rf public
mkdir public
cp -R dist/index.html public
cp -R dist/_nuxt public
cp -R dist/200.html public
cp -R dist/favicon.ico public

Firestoreの更新でハマったこと

asyncDataでFirestoreからデータを取ってきているのですが、Like更新後にタイムラインに戻ったときに先のbeforeDestroyをトリガーとする仕様上、タイムライン表示上はまだLikeの件数が更新されていないという事象が起きていました。

そのため、「ホームに戻る」の処理で一度投稿後のクッションとしてredirectページへの遷移を挟むことで、更新とのラグを吸収、タイムラインページにLike件数更新後の値が表示されるようにしました。

今後やりたいこと

時間切れだったので、以下は見送っています。
今回はプロトタイプとして、時間があるときに拡張していければと思います。

  • storeでFirestoreとのデータをやり取りするようリファクタリング
  • Firebase Authenticationsを使った認証・認可
  • 投稿の写真サムネイル表示
  • 投稿内容の編集
  • コメント機能
  • ユーザーページの作成（Likeをつけた一覧などの表示）

終わりに

テーマを決めて1週間で開発する、といった試みは初めてだったのでいい経験になりました。
特に、どこまで作りどこからは削るといった取捨選択が大事だな、というところとハマった時のリカバリー(本当はstoreの設定くらいしたかったけど断念)などを考えることができました。
また次回があれば勉強中のReactで何か作りたいなと思います！

最後に、ダックスはかわいい！！

Dogs 'n Dachs はこちらから https://dogs-n-dachs.woodsatweb.com/

ソースコードはこちら
https://github.com/gengineer18/dogs-n-dachs