【Rails】Deviseユーザーをフォローする機能を作成する

rails follow ajax devise

RailsTutorialを参考に、DeviseユーザーでTwitterライクなフォロー機能を作りました。Deviseのルーティングやメソッドなどを使っています。

環境はこちらです

Relationshipモデルの作成

複合キーインデックスは、follower_idとfollowed_idの組み合わせを必ずユニークにし、あるユーザーが同じユーザーを2回以上フォローすることを防いでいます。

UserとRelationshipの関連付け

app/models/relationship.rb

仮想的にUserモデルを2つに分けるためにactive_relationshipsとpassive_relatoinshipsというふうに別名をつけています。following, followersはそれぞれsourceから名前を上書きしています。followingによる関連付けを使ってfollow、unfollow、following?メソッドを作成します。ここではUserは2つとなるのでselfではなくother_userを使います。

app/models/user.rb

ルーティング

本記事ではdevise_scopeでルーティングを設定しましたが、showページの代わりとしてprofileを作っています。そして、フォローユーザー一覧のfollowingと、フォロワー一覧のfollowersを設定します。また、relationshipsリソースを追加して、リレーションシップの作成(create)、削除(destroy)をできるようにします。

config/routes.rb

必要なテンプレートの作成

フォロワーの統計情報を表示するパーシャルの作成です。idのfollowingとfollowersはのちにajaxリクエストに使うものです。

app/views/devise/shared/_stats.html.erb

次の記述では上記の統計情報の表示と、follow/unfollowのボタンを表示させるものですが、ログインしているユーザーのみにとしています。

app/views/devise/registrations/profile.html.erb

次のパーシャルでfollowとunfollowのパーシャルに分岐しています。

app/views/devise/shared/_follow_form.html.erb

followボタンとunfollowボタンとなるパーシャルは、それぞれremote:trueでajaxリクエストします。

app/views/devise/shared/_follow.html.erb

app/views/devise/shared/_unfollow.html.erb

followingアクションとfollowersアクション

次の2つのアクションをshow_followページ一つで読み込むようにしています。

app/controllers/users/registrations_controller.rb

app/views/devise/registrations/show_follow.html.erb

RelationshipsコントローラでAjaxリクエストに対応

app/controllers/relationships_controller.rb

これらのアクションが呼び出すjs.erbファイルを作成します。

app/views/relationships/create.js.erb

app/views/relationships/destroy.js.erb

以上で完成です!最後までご覧いただきありがとうございました!もし、間違っている点などありましたらご指摘いただけると幸いです。

【Rails5】ajaxでcheck_boxのboolean値を切り替える

rails boolean ajax

チェックボックスのboolean値をajaxリクエストでデータベース更新を手軽にするやり方です。

準備

Gemfile

bundle install します

assets/javascripts/application.js

サンプルとしてscaffoldでユーザーを作ります。

Boolean型のカラムにデフォルト値と、null: falseを追加します。

db/migrate/20xxxxx_create_users.rb

$ rails db:migrate を実行します。

Routes

post送信するためのルートを追加します

config/routes.rb

Controllers

特にrenderの記述はしなくても勝手にやってくれます。後からカラムを追加した方はprivateをストロングパラメータに追加することを忘れないように

app/controllers/users_controller.rb

Views

app/views/users/show.html.erb

remote: trueを指定します。これでajaxリクエストになりますね。

アクションと同名のjs.erbファイルをレンダーしてくれます。

app/views/users/user_private.js.erb

分かりやすくするためにクラスをつけています。

app/views/users/private_boolean.html.erb

app/assets/stylesheets/users.scss

以上です。間違っていたら教えていただけるとありがたいです。