実装イメージ
・〇件投稿しよう！
・〇件いいねをつけよう！
みたいな簡易的なやつです。
ユーザーのマイページに実装します。
項目ごとに完了したら『クリア！』を表示。
オマケで、全部完了したら名前の横の初心者マークが外れてダサくなくなるギミックを付けます。
条件分岐とカラム追加で実装します。
もっとシンプルなやり方があれば教えていただけますと幸いです。
前提
- Rails 5.2.4.4
- ユーザー及び、チュートリアルに含める投稿などのテーブルは既にある
- ユーザーと各種投稿などのアソシエーションも組めている
Userテーブルにカラムを追加
該当のユーザーがチュートリアルクリアしたかどうか？のカラムを追加します。
2択なのでboolean型、カラム名はbeginnerとしてみました。
rails g migration AddColumnToUser beginner:boolean
trueの場合はチュートリアル完了前
falseの場合はチュートリアル完了後という感じにします。
class AddColumnToUser < ActiveRecord::Migration
def change
add_column :users, :beginner, :boolean, default: true, null: false
end
end
デフォルトでtrue(チュートリアル完了前)を指定。
rails db:migrate
Viewにチュートリアル内容と初心者マーク（条件分岐）を記述
今回はユーザーのマイページに記述します。
例えばチュートリアル内容が、
・投稿（tweetモデルとします）を2つ以上、
・tweetにいいね（favoritesモデルとします）を3回以上
であれば…
<!--チュートリアル完了後の場合-->
<% if user.beginner == false %>
<p>チュートリアル完了！</p>
<!--チュートリアル完了前の場合-->
<% else %>
<p>
2つ以上のtweetをしよう！
<% if @user.tweets.count < 2 %>
(<%= @user.tweets.count %> / 2)
<% else %>
クリア！
<% end %>
</p>
<p>
3つ以上のtweetにいいねをしよう！
<% if @user.favorites.count < 3 %>
(<%= @user.favorites.count %> / 3)
<% else %>
クリア！
<% end %>
</p>
<% end %>
こんな感じです（ハイライトがおかしいですが、構文変ですかね…？）。
取り急ぎ、雰囲気は伝わるかと思います。
オマケですが、チュートリアル完了前の場合は
ユーザー名の横に初心者マークを付けます。
その他、ユーザー一覧など、任意の場所につけてください。
<p>
<%= @user.name %>
<% if @user.beginner == true %>
<%= image_tag '初心者マーク.png', :size =>'14x14' %>
<% end %>
</p>
コントローラーに追記（チュートリアル完了でuser.beginnerをfalseに）
チュートリアルが終わっているかどうかのジャッジを、
マイページへ遷移するコントローラーで行います。
今回の場合、showアクションの中に追記します。
# チュートリアルが終わっていればbeginnerをfalseにする
if @user.beginner == true && @user.tweets.count >= 2 && @user.favorites.count >= 3
@user.update(beginner: false)
end
これで、実装完了です。
チュートリアルが完了した状態で、
マイページにアクセスするタイミングで、
beginnerカラムがfalseになり、初心者マークは外れます。
また、チュートリアル内容は消えて、完了のメッセージが表示されるはずです。
補足
beginnerカラムを追加せずとも、Viewの条件分岐のみでも実装可能です。
ただ、その場合、チュートリアル完了後にtweet削除等で2tweetを下回ると
初心者マークが復活してしまいます。
なんかあれなので、このやり方で実装しました。
間違っている点、補足などあればご教示いただけますと幸いです。
よろしくお願いいたします。