ジャンル別に投稿・チャットできるようなアプリ作ってみた〜ホーム画面〜

12976 ワード
Ruby2.5.1 haml rails5.2 haml テキストリンク

ホーム画面

ホーム画面で確認できるもの

  • ユーザー名
    ユーザー登録した際の名前が表示される
    名前を変更したい場合は、登録変更画面で可能（下記記述）
  • ユーザーアイコン
    登録時のログインでは、アイコンはない 登録変更画面にて自身のフォルダから選択することができる（別記事にて詳細予定）
  • ユーザーのお気に入りジャンル（お選びのジャンルだよ(´∀｀)）
    お気に入りにしたジャンル名のみを表示する
    （ジャンルをお気に入りする方法は別記事にて詳細予定） なお、このジャンル名はリンクになっており、クリックすればジャンルページに飛ぶ
  • ユーザーの所属チャットグループ（所属チャットグループだよ(*^ω^*)）
    所属しているチャットグループのグループ名を表示
    （チャットグループに関しては別記事にて詳細予定） なお、このグループ名はリンクになっており、クリックすればグループページに飛ぶ

ホーム画面でリンクされているもの

  • お気に入りジャンル
    お選びのジャンル枠内のジャンル名からそのジャンルページに飛ぶ

  • ジャンル作成・検索画面
    「ジャンルを探す」ボタンから飛べる

  • 所属チャットグループ
    所属チャットグループ枠内のグループ名からそのグループページに飛ぶ

  • ユーザー登録変更画面
    リストアイコンを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


ホーム画面については、これくらいです。
次は、登録変更画面について記事にしたいと思います