オリジナルアプリでグループ共有で使えるカレンダーアプリを作成中。
昨日マイページをルートパスに設定しようとしたところ、パラメーターはルートパスに設定するのは難しいと知り、急遽ルートパスの変更を余儀なくされた。
どんなページに遷移させようか考えた末、グループ登録のページをルートパスにしようと思いついた。
やりたいこと
まず実装させたいことは、
①グループの新規作成ボタン(sign_in)
②既存グループで自信が未参加のグループへ参加するボタン(sign_up)
③自信が参加中のグループへログインするボタン
以上3点である。
そこで新たに行き詰まったのは、これらのボタンを実装させるためには、どういったアクションがベストなのか、ということ。
まずこのアプリを作る上で意識していることは「シンプルで使いやすいアプリ」である。
ユーザーにはできるだけクリックする回数や入力の手間を省きたいと考えている。
要は③を実装するにあたり、「eachメソッドを使って参加中のグループを一覧として表示させ、グループ名をクリックするだけで、該当ページへ遷移する」といった実装を行いたいわけである。
上記を踏まえると、indexアクションが妥当か?と思ったが、ユーザーコントローラーのindexアクションだと、なんとなくユーザー一覧の表示というイメージがある。
そこで考えたのは、7つのアクション以外のアクションを定義しようと結論に至った。
アクションを定義する前に
初めての試みなので、いろいろ調べてみると、7つのアクション以外でルーティングを定義する時には、collectionかmemberを使用するということ。
collictionはidが紐つない。
逆にmemberはidを紐つけることができる。
今回はgroup_idが関連してくるので、memberを選択することに。
コードを記述
では、さっそくコードを書いてみる。
ちなみに今回定義したいアクション名はtoppageアクション
ますはconfig/routes.rb
とusers_controller.rb
へ記述する。
Rails.application.routes.draw do
devise_for :users, controllers:{
registrations: 'users/registrations',
sessions: 'users/sessions'
}
root to: "users#toppage"
resources :users, only: [:show, :edit, :create]do #doを追記
member do #追記
patch 'toppage' #追記
end #追記
end #追記
end
class UsersController < ApplicationController
def toppage #追記
end #追記
#以下省略
続いてビューファイル
<%# 共通部分%>
<%= render "share/header" %>
<%# 共通部分ここまで%>
<div class="main">
<div class="hello">
<h1>HELLO!! </h1>
</div>
<div class="message1">
<p>グループを作成、またはグループに参加、</p>
</div>
<div class="message2">
<p>もしくは参加中のグループを選択してください</p>
</div>
<ul class="center-display">
<li><%= link_to "グループを作成する", "#" , class: "create-group" %></li>
<li><%= link_to "グループに参加する", "#" , class: "join-group" %></li>
</ul>
<%# 参加中のグループの有無で表示を変える%>
<div class="created-group">
<div class="joined-group">
<p>参加中のグループ</p>
<%# if current_user.gropus == nil %>
<div class="no-group">
<P>まだ参加していません</p>
</div>
<%# else %>
<div class="your-group">
<div class="groupーlist">
<%# current_user.groups.each do |group| %>
<div class="group">
<%#= link_to group.name, "#", class: "group-name" %>
</div>
<%# end %>
</div>
</div>
<%# end %>
</div>
</div>
参加中のグループの有無で表示を変えるように条件分岐をした。
まだ色々と未実装の部分がおおいが、ひとまず無事に完了!
新しい知識がまた一つ追加された!!