ホーム画面
ホーム画面で確認できるもの
- ユーザー名
ユーザー登録した際の名前が表示される
名前を変更したい場合は、登録変更画面で可能（下記記述） - ユーザーアイコン
登録時のログインでは、アイコンはない
登録変更画面にて自身のフォルダから選択することができる（別記事にて詳細予定） - ユーザーのお気に入りジャンル（お選びのジャンルだよ(´∀｀)）
お気に入りにしたジャンル名のみを表示する
（ジャンルをお気に入りする方法は別記事にて詳細予定）
なお、このジャンル名はリンクになっており、クリックすればジャンルページに飛ぶ - ユーザーの所属チャットグループ（所属チャットグループだよ(*^ω^*)）
所属しているチャットグループのグループ名を表示
（チャットグループに関しては別記事にて詳細予定）
なお、このグループ名はリンクになっており、クリックすればグループページに飛ぶ
ホーム画面でリンクされているもの
-
お気に入りジャンル
お選びのジャンル枠内のジャンル名からそのジャンルページに飛ぶ -
ジャンル作成・検索画面
「ジャンルを探す」ボタンから飛べる -
所属チャットグループ
所属チャットグループ枠内のグループ名からそのグループページに飛ぶ -
ユーザー登録変更画面
リストアイコンをhoverすることで出現するリンク「登録変更」から飛ぶ -
グループ希望画面
リストアイコンをhoverすることで出現するリンク「グループ希望」から飛ぶ -
ログアウト
リストアイコンをhoverすることで出現するリンク「ログアウト」を押すことで、ログアウトする
コード記述
app/views/homes/index.html.haml
.page-header
.page-header__user
.page-header__user__image
-if @user.icon.file.nil? # もし、userテーブルの指定レコードのiconカラムがnil（空）だったらcameraアイコンを表示
=icon "fas","camera fa-3x", class: "page-header__user__image__icon"
-else # そうでない場合は、iconカラムの画像を表示
= image_tag @user.icon.url,:size =>'125x125'
.page-header__user__name
.page-header__user__name__box
お名前：
= current_user.name
.page-header__list
.page-header__list__icon
=icon("fas", "list-ul fa-5x", id: "list__icon")
.page-header__list__icon__box
%ul.page-header__list__icon__box__list
%li.page-header__list__icon__box__list__li
=link_to "登録変更",edit_user_registration_path,id:"icon__li"
%li.page-header__list__icon__box__list__li
=link_to "グループ希望",homes_path,id:"icon__li"
%li.page-header__list__icon__box__list__li
=link_to "ログアウト",destroy_user_session_path, method: "delete",id:"icon__li"
.page-main
.page-main__genru
%h1.page-main__genru__title
お選びのジャンルだよ( ´∀｀)
.page-main__genru__list
.page-main__genru__list__top
- current_user.genrus.each do |genru| # ログインユーザーと紐づいているジャンル（複数）を一つ一つ取り出す
.page-main__genru__list__top__name
=link_to genru_path(genru.id),id: "genru-name" do # ジャンル名をリンクにする
= genru.name
.page-main__genru__list__bottom
= link_to "ジャンルを探す",new_genru_path,id: "genru-bottom"
.page-main__chat
%h1.page-main__chat__title
所属チャットグループだよ(*^ω^*)
.page-main__chat__list
.page-main__chat__list__top
- if @groups # もしユーザーに所蔵しているグループ(@groups)があれば↓を表示
- @groups.each do |g|
.page-main__chat__list__top__name
= link_to genru_group_path(genru_id: "{Group.find(g.group_id).genru_id}",id: g.group_id),id: "group-name" do
=Group.find(g.group_id).name
.page-footer
app/controllers/homes_controller.rb
class HomesController < ApplicationController
def index
@user = User.find(current_user.id)
@groups = @user.users_groups
# ＠groupsは@userに紐づいている中間テーブル（のレコード）を取り出している
# users_groupsはusersテーブルとgroupsテーブルの中間テーブル
end
end
私の注意点
link_toを使う且つ文字列以外をリンクにする場合はlink_to ~ doにしなければいけないのをよく忘れていました
ただ文字列をリンクにする場合
= link_to "ジャンルを探す",new_genru_path,id: "genru-bottom"
文字列以外をリンクにする場合
=link_to genru_path(genru.id),id: "genru-name" do # ジャンル名をリンクにする
= genru.name
ホーム画面については、これくらいです。
次は、登録変更画面について記事にしたいと思います