Revorite

※ 就活を終えたため当ポートフォリオサイトは公開を停止しました。

Revorite = Review + Favorite.

Revoriteは、「スキ」をレビューすることができるSNSアプリです。
ジャンルを問わず好きな物をおすすめし合うことで、まだ見ぬ誰かの「推し」に出会うことができます。

URL

https://www.revorite.net/ （公開停止済み）
ページ上部の「かんたんログイン」より、ゲスト用アカウントにワンクリックでログインが可能です。
ゲスト用アカウントはアカウント削除を除く全ての機能が使えます。

使用技術

• Ruby 2.7.1
• Ruby on Rails 5.2.4.5
• jQuery 1.12.4
• MySQL 8.0.20
• Nginx 1.18.0
• Unicron 5.8.0
• Rspec 3.10
• Docker 20.10.3
• Capistrano 3.16.0
• AWS
  • IAM
  • VPC
  • EC2（踏み台サーバ、Webサーバ）
  • RDS
  • S3
  • Route 53
  • Amazon SES
  • CloudWatch

ER図

ネットワーク構成図（開発環境、AWS）

機能一覧

• 認証機能（devise）
  • ユーザ登録機能
  • （かんたん）ログイン機能
  • プロフィール変更機能（Active Storage）
  • パスワード再発行機能
• 投稿表示機能
  • タイムライン：フォローしているユーザの投稿を表示
  • みんなの投稿：全てのユーザの投稿を表示
  • 人気の投稿：お気に入りに多く登録されている投稿を表示
• ユーザ情報表示機能
  • 投稿一覧、お気に入り一覧、フォロー・フォロワー一覧
• 投稿機能
  • 複数画像投稿機能（Active Storage）
  • レビュー機能（投稿時にレビュー有無を選択）
  • 星（★）による5段階の評価機能（raty）
• コメント機能
  • 複数画像投稿機能（Active Storage）
• お気に入り機能（Ajax）
• リポスト機能（Ajax）　※フォロワーに向けて他人の投稿を共有する機能
• フォロー機能（Ajax）
• 無限スクロール機能（jScroll、kaminari、MutationObserver）
• モーダルウィンドウでの画像拡大機能（Luminous）
• 画像遅延読み込み機能（lazyload）

テスト

Rspecを利用したテストを実施

• 単体テスト（Model spec）
  • 各モデルのバリデーション、アソシエーション、クラスメソッドについて正常系・異常系の両方を検証
• 機能テスト（Request spec）
  • 各ルーティングに対してのリクエストやページリダイレクト、データ作成の成否を検証
• 統合テスト（System spec）
  • 実際のサービス利用を想定したシナリオを組み、ブラウザ上で実際にフォームを入力したりリンクをクリックするなどして想定通りにアプリが動作するかを検証

また、rubocopによる静的コード解析を適宜実施

こだわりポイント

レビュー機能

当アプリの一番の特徴であるレビュー機能は、星（★）の評価を星の画像をクリックすることで決められるという、UI/UXとしても特徴的なものにすることで印象に残せるように工夫しています。
また投稿したレビューのタイトル横に表示される各種検索サイト（Google、Amazon、楽天、価格.com）のボタンをワンクリックするだけでレビュー対象を別タブで検索できるので、「興味はあるけど今調べるのはちょっと面倒だな」という心理的ハードルをできる限り低くしています。

リポスト機能の実装方式

リポスト機能は、第三者の投稿を自分のフォロワーに向けて共有する（＝自分をフォローしている人のタイムラインに表示させる）ための機能です。そのためタイムラインには、自分の投稿とフォローしている人（＝フォロイー）の投稿に加え、自分またはフォロイーのリポストを表示する必要があります。
ただし投稿が重複して表示されるのを防ぐため、投稿テーブルとリポストテーブルをJOINする際に重複を排除しながら取得する、といった工夫を施しています。結合条件やデータの取得条件が複雑にはなってしまったのですが、上手く実装できたと自負しています。

当アプリで恐らく一番複雑な処理のためここではこれ以上の記述はしませんが、実装の経緯は備忘としてQiita記事にまとめています。
https://qiita.com/345dvl/items/7d4396256105ce1d0382

無限スクロールと画像拡大モーダルウィンドウ

モダンなUI/UXを提供するため、jScrollとkaminariによる無限スクロール、Luminousによる画像拡大モーダルウィンドウを実装しました。
無限スクロールで追加で読み込んだ投稿にもLuminousを適用するために、MutationObserverでDOMの要素の変化を監視しLuminousを適用する、というやり方でうまく実装することができました。

改善点・今後の見込み

就職活動と並行して以下を実施したいと考えています。

• CircleCI/CDによる自動テスト・デプロイの導入
• 通知機能の実装（現状、コメントやお気に入り登録されたことに気付きにくいため）