🍋

【Ruby on Rails】ユーザーバッジ機能の実装

2024/07/26に公開

Rails

ユーザーバッジ機能

tech

はじめに

現在Ruby on Railsにて技術記事投稿アプリを開発しています。
その中でユーザーの記事投稿数に応じて、バッジを付与する機能を作成しましたので記事を書きました。
簡単な条件分岐で作成できたので記事にするか迷いましたが、Railsを使用してユーザーバッジを付与するという内容の記事はなかったため書いております。
参考になりましたら幸いです。

環境

Rails 7.1.3.4

実装手順

今回、ユーザーの記事投稿数（1,3,5記事）により、ユーザーへバッジが付与されるよう実装しました。
下記が実装手順になります。

マイページ上にユーザーバッジページを作成。
-> usersルーティング配下にコレクションルーティングを使用し、get :my_badgesを追加
usersコントローラーに、my_badgesアクション追加。
user.rbに、usersコントローラーで使用したpublishedを定義するメソッドを追加。
usersビューに、my_badges.html.erb追加。
my_badges.html.erbで、投稿された記事があればカラー画像、なければ白黒画像を表示させるよう条件分岐させる。

実装の詳細

マイページ上にユーザーバッジページを作成するため、usersルーティング配下にcollectionルーティングで、get :my_badgesを追加
この記事でcollectionルーティングに関する記載を載せております。今回、ユーザーバッジもマイページ上に作成したかったため、usersルーティング配下に、collectionルーティングを使用しget :my_badgesを追加しました。

config/routes.rb

  resources :users, only: %i[new create] do
    collection do
      get :my_articles
      get :my_favorites
      get :my_badges
    end
  end

usersコントローラーに、my_badgesアクション追加
先ほどroutes.rbを設定したため、usersコントローラに、my_badgesアクションを追加しました。
コントローラーでは其々のpublishedに関するロジックは記載せず、users.rbに記載しております。

def my_badges
    @first_article = current_user.first_published
    @third_article = current_user.third_published
    @fifth_article = current_user.fifth_published
  end

user.rbに、usersコントローラーで使用したpublishedを定義するメソッドを追加
app/models/user.rbへ、usersコントローラーで使用したpublishedを定義するメソッドを追加しました。
記事の投稿数によってバッジ付与するタイミングを分けたかったので、下記メソッドにしました。
もっとわかりやすく端的なロジックの書き方があるかと思いますが、一旦下記にしております。

def first_published
    articles.count >= 1
  end

  def third_published
    articles.count >= 3
  end
    
  def fifth_published
    articles.count >= 5
  end

usersビューに、my_badges.html.erb追加
app/views/users/my_badges.html.erbに、記事が⚪︎数以上投稿されたら、色付きの画像を表示、そうでなければデフォルトの画像を表示するという形でビューを出し分けました。

<% if @first_article%>
<%= render 'users/first_color_badge' %>
<% else %>
<%= render 'users/first_badge' %>
<% end %>

<% if @third_article%>
<%= render 'users/first_color_badge' %>
<% else %>
<%= render 'users/first_badge' %>
<% end %>

<% if @fifth_article%>
<%= render 'users/first_color_badge' %>
<% else %>
<%= render 'users/first_badge' %>
<% end %>

render先のファイルでは、其々カラー画像・白黒画像が表示されるよう記載しています。

最後に

簡単ではありますが、ユーザーバッチ付与機能の簡単な実装方法を記載しました。
作成に時間がかかるかと思いましたが、タスク分解し何をどう実装していけばいいのかを確認することで実装できました。

今後バッジが付与されたタイミングで、アプリ内で通知される機能も作成する予定なので、よりユーザーが使いやすい機能を整えたいと思います。
ありがとうございました。

はじめに

環境

実装手順

実装の詳細

最後に

Discussion