モデルを作成していきます。
コマンド
rails g model Subscription project:references user:references
「db\migrate\20200715223129_create_subscriptions.rb」ファイルを編集します。
記述追加 db\migrate\20200715223129_create_subscriptions.rb
9行目に「add_index :subscriptions, [:project_id, :user_id], unique: true」の記述を追加しています。
class CreateSubscriptions < ActiveRecord::Migration[5.0] def change create_table :subscriptions do |t| t.references :project, foreign_key: true t.references :user, foreign_key: true t.timestamps end add_index :subscriptions, [:project_id, :user_id], unique: true end end
コマンド マイグレーション適用
rails db:migrate
「app\models\project.rb」ファイルに以下の記述を追加します。
記述追加 app\models\project.rb(3,4行目)
has_many :subscriptions has_many :users, through: :subscriptions
app\models\project.rb
class Project < ApplicationRecord has_many :tasks has_many :subscriptions has_many :users, through: :subscriptions validates :name, presence: true, length: { maximum: 50 } validates :content, presence: true, length: { maximum: 500 } validates :price, presence: true, numericality: { only_integer: true } has_attached_file :image, styles: { medium: "680x300>", thumb: "170x75>" } validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/ end
「app\models\user.rb」ファイルに以下の記述を追加します。
記述追加 app\models\user.rb(3,4行目)
has_many :subscriptions has_many :projects, through: :subscriptions
app\models\user.rb
class User < ApplicationRecord has_many :subscriptions has_many :projects, through: :subscriptions # アバター画像表示用 include Gravtastic gravtastic # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable devise :database_authenticatable, :registerable, :recoverable, :rememberable, :validatable, :confirmable, :omniauthable #長さ50文字以下 入力必須 validates :full_name, presence: true, length: {maximum: 50} def self.from_omniauth(auth) user = User.where(email: auth.info.email).first if user return user else where(provider: auth.provider, uid: auth.uid).first_or_create do |user| user.email = auth.info.email user.password = Devise.friendly_token[0, 20] user.full_name = auth.info.name # ユーザーモデルに名前があると仮定 user.image = auth.info.image # ユーザーモデルに画像があると仮定 user.uid = auth.uid user.provider = auth.provider end end end end
コントローラを作成していきます。
「app\controllers」フォルダに「charge_controller.rb」ファイルを新規作成します。
app\controllers\charge_controller.rb(新規作成したファイル)
class ChargeController < ApplicationController before_action :authenticate_user! def free project = Project.find(params[:project_id]) current_user.subscriptions.create(project: project) redirect_to project end end
「app\controllers\project_controller.rb」ファイルの編集をします。
１．記述追加 app\controllers\project_controller.rb(10～16行目)
「show()」メソッドの記述を追加しています。
def show @project = Project.find(params[:id]) @tasks = @project.tasks.order(:tag) @joined = false if !current_user.nil? && !current_user.projects.nil? @joined = current_user.projects.include?(@project) end @users = @project.users.order('created_at desc').first(10) end
２．記述追加 app\controllers\project_controller.rb(20～24行目)
新たに「list()」メソッドを追加しています。
def list if !current_user.nil? @projects = current_user.projects end end
app\controllers\project_controller.rb
class ProjectController < ApplicationController def index @projects = Project.all end def show @project = Project.find(params[:id]) @tasks = @project.tasks.order(:tag) @joined = false if !current_user.nil? && !current_user.projects.nil? @joined = current_user.projects.include?(@project) end @users = @project.users.order('created_at desc').first(10) end def list if !current_user.nil? @projects = current_user.projects end end end
「app\controllers\task_controller.rb」ファイルを編集します。
記述変更 app\controllers\task_controller.rb
記述を大幅に変更しているのでコードをコピーしてファイルの内容を置き換えて下さい。
class TaskController < ApplicationController before_action :authenticate_user! def show project = Project.find(params[:project_id]) @tasks = project.tasks.order(:tag) joined = false if !current_user.nil? && !current_user.projects.nil? joined = current_user.projects.include?(project) end if joined @task = @tasks.find(params[:id]) @next_task = @task.next @prev_task = @task.prev else flash[:notice] = "プロジェクトを購入して下さい。" redirect_to project end end end
ルートを設定します。
記述追加 config\routes.rb
16行目に「post '/free' => 'charge#free'」の記述を追加しています。
Rails.application.routes.draw do devise_for :admin_users, ActiveAdmin::Devise.config ActiveAdmin.routes(self) devise_for :users, path: '', path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'}, controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'} # ルートページをapp\views\pages\about.html.erbに設定 root 'pages#about' get 'pages/about' post '/free' => 'charge#free' resources :project do resources :task, only: [:show] end # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html end
ビューを編集します。
「app\views\project\show.html.erb」ファイルを編集します。
記述追加 app\views\project\show.html.erb（103～127行目）
<!-- サブスクリプション --> <% if !@joined %> <div class="center"> <h1 class="tag is-success is-light is-large"><%= @project.price == 0? "無料" : "有料" %></h1> </div> <br/> <div class="card-action center"> <%= form_tag free_path do %> <%= hidden_field_tag 'project_id', @project.id %> <button type="submit" class="button is-fullwidth is-danger">プロジェクトを購入する（<%= number_to_currency(@project.price) %>）</button> <% end %> </div> <% else %> <div class="card-content center"> <span class="tag is-success is-light is-large">購入済みです</span> </div> <div class="card-content center"> <div class="card-content is-horizontal-center is-flex"> <figure class="image is-256x256"> <%= image_tag current_user.gravatar_url, class: "is-rounded" %><br/> </figure> </div> <h5><%= current_user.full_name %></h5> </div> <% end %>
app\views\project\show.html.erb
<section class="section"> <div class="container"> <div class="columns"> <!-- 左側 --> <div class="column is-two-thirds"> <div class="columns is-multiline"> <!-- プロジェクト --> <div class="column is-full"> <div class="card"> <div class="card-content"> <div class="content"> <h1 class="title"><%= @project.name %></h1> <div class="title is-4 has-text-right" style="color: black;"><%= number_to_currency(@project.price) %></div> </div> <hr> <div class="hero-carousel" id="carousel-photo"> <%= image_tag @project.image %> </div> </div> </div> </div> <div class="column"> <div class="card"> <div class="card-content"> <!-- コンテンツ --> <div class="box"> <article class="media"> <div class="media-content"> <div class="content"> <h2 class="subtitle">このプランについて</h2> <hr> <%= @project.content %> </div> </div> </article> </div> <!-- タスク Section --> <div class="box"> <article class="media"> <div class="media-content"> <div class="content"> <div class="collection"> <% @tasks.each do |task| %> <% if task.header %> <br/> <div class="collection-item active"> <span class="tag is-link is-large"> <%= task.title %></span> <span class="tag is-white is-large"> <%= task.note %></span> </div> <br/> <% else %> <div class="collection-item active"> <span class="tag is-light is-medium" style="margin: 3px;"> <%= link_to [task.project, task], class: "collection-item", data: { turbolinks: false} do %> <%= task.title %> <% end %> </span> </div> <% end %> <% end %> </div> </div> </div> </article> </div> </div> </div> </div> </div> </div> <!-- 右側 --> <div class="column"> <div class="columns is-multiline"> <!-- 購入 --> <div class="column is-full"> <div class="card"> <div class="card-content"> <div class="media"> <div class="media-content"> <strong><%= @project.name %></strong> </div> <div class="media-right"> <p class="title is-4" style="color: black;"><%= number_to_currency(@project.price) %></p> </div> </div> <div class="content f-15"> <p class="m-t-30"><%= @project.content %></p> <p class="m-t-30"> <strong>タスク数: <i class="far fa-clock"></i> <%= @tasks.count %></strong> </p> </div> <% if user_signed_in? %> <!-- サブスクリプション --> <% if !@joined %> <div class="center"> <h1 class="tag is-success is-light is-large"><%= @project.price == 0? "無料" : "有料" %></h1> </div> <br/> <div class="card-action center"> <%= form_tag free_path do %> <%= hidden_field_tag 'project_id', @project.id %> <button type="submit" class="button is-fullwidth is-danger">プロジェクトを購入する（<%= number_to_currency(@project.price) %>）</button> <% end %> </div> <% else %> <div class="card-content center"> <span class="tag is-success is-light is-large">購入済みです</span> </div> <div class="card-content center"> <div class="card-content is-horizontal-center is-flex"> <figure class="image is-256x256"> <%= image_tag current_user.gravatar_url, class: "is-rounded" %><br/> </figure> </div> <h5><%= current_user.full_name %></h5> </div> <% end %> <% else %> <button class="button is-fullwidth is-danger" disabled>ログインして下さい</button> <% end %> </div> </div> </div> </div> </div> </div> </div> </section>
ブラウザ確認
http://localhost:3000/project
購入する前にタスクを見ようとすると「購入して下さい」とメッセージが出て見ることができません。
プロジェクトを購入してみます。
もちろんまだ決済はされません。
表示が「購入済みです」に変わりました。
サブスクリプションテーブルを確認します。
これでタスクを見ることができるようになりました。
