Recipegram

概要

Instagramのクローンアプリで、画像付きのレシピを投稿するSNSです。
通知、検索、無限スクロール、タグ機能などがあり、RSpecでテストコードを書いていて、400件近くのexampleがあります。

https://recipegram-kwtuku.herokuapp.com/
アプリのURLはこちらです。ゲストログインというボタンから簡単にログインできます。
HerokuにデプロイしていますがGASで定期的にアクセスをしているので表示は早いです。

【プログラミング入門】Ruby on Railsでウェブアプリを作ってみよう - YouTubeで作成したアプリを拡張しました。
拡張前のアプリはユーザーとレシピのCRUD機能があり、ローカル環境で動くものでした。

各ページのスクリーンショットと機能の概要

ログイン前のトップページ	ログイン後のトップページ
ログインをしていなくてもランダムなレシピがフィードとして表示され、無限スクロールできます。ユーザーもランダムに表示されます。表示されるフィードとユーザーはキャッシュされます。	フォローしている人と自身の投稿のフィードとまだフォローしていないユーザーがランダムで表示されます。表示されたユーザーのフォロワーの内、自身がフォローしているユーザーの数もわかるようになっています。表示されるユーザーはキャッシュされます。

フィードの無限スクロールの様子	新規登録ページ
無限スクロールできます。	目のアイコンをクリックすることで入力中のパスワードを表示、AJAXで既存のusernameと一致しないように自動生成することができます。

ユーザーの詳細ページ	アカウント削除確認ページ
ユーザーのURLのパラメーターにはidではなくusernameカラムを使用しています。ユーザーが投稿、コメント、いいねしたレシピは無限スクロールできます。	アカウントを削除時はパスワードの入力を求めるようになっています。

レシピの詳細ページ	レシピの詳細ページのモーダル
投稿者の他のレシピも表示されます。	画像をクリックするとモーダルで画像を画面中央に表示することができます。

レシピの詳細ページのコメント一覧	レシピ投稿ページ
コメントの表示件数を1件もしくは全件に切り替えることができます。	アップロードする画像のプレビューが表示でき、文字数がカウントされ、テキストエリアはリサイズされます。

レシピ編集ページ	タグ入力時のサジェスト機能
アップロードする画像のプレビューが表示でき、文字数がカウントされ、テキストエリアはリサイズされます。	タグを入力するとサジェストされます。レシピに紐付けられるタグの数のバリデーションも設定しています。

通知一覧ページ	タグの詳細ページ
投稿したレシピにいいねまたはコメントがついたとき、フォローされたときに通知が作成されます。コメントしたレシピに他のユーザーがコメントしたときにも通知が作成されます。	タグ付けされているレシピが一覧で表示され、無限スクロールできます。URLのパラメーターにはidではなくnameカラムを使用していて、日本語にも対応しています。

レシピ名の検索結果ページ	レシピ名の検索結果をいいねが多い順でソートしたときのページ
一度に複数のテーブルのカラムを検索できます。	レシピ名と作り方の検索結果はいいねの多い順やコメントの多い順でソートできます。

ニックネームの検索結果ページ	ニックネームの検索結果をフォロワーが多い順でソートしたときのページ
ページが遷移しても検索ワードがリセットされないようになっています。	ニックネームとプロフィールの検索結果はフォロワーの多い順や投稿したレシピが多い順にソートできます。

拡張、工夫したこと

実際のSNSにある機能を追加

実際のSNSにある通知、検索、無限スクロール、タグ、コメント、いいね、フォロー機能を実装しています。
無限スクロール、いいね、フォロー機能はAJAXで動きます。

通知機能

ポリモーフィック関連付けを使用しています。
投稿したレシピにいいね、コメントされたとき、コメントしたレシピに他のユーザーがコメントしたとき、フォローされたときに通知が作成されます。
Notificationsテーブルを作成するメソッドはNotificationモデルにクラスメソッドとして定義しています。
自身のレシピにコメントやいいねをした場合は、通知が作成されないようにもしてあります。

検索機能

Ransackを使用しています。
ユーザーとレシピとタグを検索できます。
GitHubの検索機能を参考にし、GitHubの検索機能のように一度に複数のテーブルのカラムを検索できます。
半角または全角スペース区切りでAND検索することもできます。
いいねの多い順やフォロワーの多い順といった、関連付けられているレコードの数で検索結果をソートすることもできます。
ページが遷移しても検索対象のカラムとキーワードがリセットされないようになっています。

無限スクロール機能

ユーザーとレシピが複数表示されるページでは無限スクロールすることができます。
AJAXで動き、読込中はアニメーションが表示されます。

タグ機能

ActsAsTaggableOnとTagifyを使用しています。
タグの入力時にサジェストされます。
タグのnameカラムをURLのパラメーターに使用していて、そのためのバリデーションを設定し、日本語にも対応しています。
レシピに紐付けられるタグの数のバリデーションも設定しています。

ユーザーのURLのパラメーターにusernameカラムを使用

実際のSNSのように、ユーザーのURLのパラメーターにはidではなくusernameカラムを使用するようにしています。
usernameは他のルーティングと一致しないように、使用できない単語のバリデーションを設定してあります。
ワンクリックで既存のusernameと一致しないように自動生成することもできます。AJAXで動きます。

RSpecでテストをコード化

RSpecでテストコードが書いてあり、Model specが92件、Request specが197件、System specが58件、その他25件の合計372件のexampleがあります。
Model specではバリデーションと定義したメソッドをテストしています。 Request specではHTTPレスポンスステータスやボディ内容、レコード数の増減と更新、アクセス権限をテストしています。 System specでは正常に一連の操作をした場合のテストをしています。 他にはCarrierWaveのUploaderもテストしています。

実際のSNSのように導線を追加

レシピの詳細ページでは投稿者の他のレシピも表示されます。
トップページではInstagramのようにフィードの他に、まだフォローしていないユーザーが表示されます。
無限スクロールでフィードを全て読み込み終えてしまった場合はランダムな投稿が読み込まれるようにしています。

UXの向上

入力中のパスワードを表示することができます。
入力中の文字数がカウントされます。
テキストエリアが自動でリサイズされます。
アップロードする画像のプレビューを見ることができます。
レシピが複数表示されているページでは、Instagramのように画像の上にマウスカーソルを重ねると、いいねとコメント数が表示されます。
アイコンだけのリンクや末尾が省略されている文字のリンクはtitle属性を付与してリンク先がわかるようになっています。
バリデーションエラーが発生したカラムの入力欄は赤く囲われ、その下にエラーメッセージが表示されます。

その他

他ユーザーの詳細ページではTwitterのように、他ユーザーのフォロワーの内、自身がフォローしているユーザーが表示されます。
Deviseをカスタマイズして、アカウントを削除するのにパスワードの入力を求めるようにしています。
各フォームで文字が入力されていないときや空文字だけのときはサブミットボタンを押すことができないようにしています。
Cloudinaryの使用容量を減らすために、画像が更新されるときは更新前の画像をCloudinaryから削除した後に新しい画像がアップロードされるようにしています。
Cloudinaryによってブラウザごとに最適なフォーマットの画像が表示されます。
各ページでN+1問題に配慮しています。
全てのページがレスポンシブ対応しています。
開発環境にDockerを使用しています。
HerokuのDynoがスリープして初回アクセスの表示に時間がかからないようにGASで定期的にアクセスがされるようにしています。
Googleフォームでお問い合わせフォームを作成しています。
Googleアナリティクスを導入しています。

ER図

https://dbdiagram.io/d/61fd1f7b85022f4ee53c2835

使用技術

開発環境

• Windows 10 Home
• Docker
• Docker Compose

フロントエンド

• HTML
• SCSS
• JavaScript
• Node.js 14.18.1
• Yarn 1.22.10
• 主要Package
  • Bulma
  • ESLint
  • Jest
  • Prettier
  • Sortable
  • Swiper
  • Tagify

バックエンド

• Ruby 2.7.3
• Ruby on Rails 6.1.3.1
• 主要Gem
  • ActsAsTaggableOn
  • Brakeman
  • Bullet
  • CarrierWave
  • counter_culture
  • Devise
  • ERB Lint
  • Kaminari
  • Pundit
  • rails_best_practices
  • Ransack
  • RSpec
  • RuboCop

DB、インフラなど

• CircleCI
• Cloudinary
• Heroku
• PostgreSQL 13.3
• Puma
• Redis 6.2.6