プロフィールにタグを表示する

現在投稿系のアプリを作成してまして、その時にプロフィール画面のデザインで結構悩みました
結果としてはあまり欲張りすぎずにシンプルなデザインにすることで見やすいし、実装もし易くなりました。

欲張っていろいろ詰め込んでも見にくいだけですしね笑

それでも完全に手抜きで作るのではなくて自分なりにあったらいいなと思うのを探してみました。

・ユーザーアイコン ・ニックネーム ・自己紹介文 ・好きなものを#で表示 ・編集

正直これくらいしか思いつかなかったです、、、、笑

実装していきます

＃の機能以外はそこまで苦戦しなかったのでコード貼っておきます

使っているgemです

・devise(userのログインとか新規登録とかめっちゃ簡単にできます) ・carrierwave(画像のupするので使いました) ・mini_magick(ユーザーがupした画像のリサイズです)

<div class="text-center">
  <% if current_user.image? %>  #現在ログインしているユーザーのimageカラムに何も入っていなければこちらで用意した[dummy.png]を表示する
    <%= image_tag current_user.image.url, class: "image" %>
  <% else %>
    <%= image_tag "/dummy.png", :size => '100x100' %>
  <% end %>
  <br>

  <div class="text-center fa-2x">　
    <%= current_user.nickname %>
    <hr>
  </div>
</div>

<div class="mt-2">
  <div class="pl-3">
     <%= current_user.profile %>
  </div>
</div>

＊僕はcurrent_userを使っていますが、Userモデルで以下のようにidに対応するユーザーの情報を@userに代入していればcurrent_userを@userに置き換えることもできます＊

@user = User.find_by(id: params[:id])

苦戦したハッシュタグをつける

僕の説明が下手過ぎてどんな機能を付けたいか想像がついてないと思いますので参考になる画像を探してきました これはqiitaのプロフィール画面にあるタグです。 ちょうどこんな機能を付け加えようと思っていたのでデザインを参考にしました。 僕は各タグの先頭に"#"をつけるようにして実装したいと思います 例:(#Javascript) 

具体的な動作

タグを表示してそこから選ぶといった感じの動作が多いと思いますが、今回僕が作る動作は選択肢を作らずにプロフィールの編集画面でtext_fieldにカンマ区切りで記載してもらってそれを識別して一つ一つ#付けて表示する感じです。 説明下手ですみません、、

---

例：編集画面
　　　　text_field
Javascript,html,ruby,rails,

　　プロフィール画面
#Javascript #html #ruby #rails
こんな感じです！

---

カラムを一つずつ取り出すといった動作だと

users_controller

 @users = User.all

application.html.erb

  <% @users.each do |user| %>
    <%= user.name %>
 <% end %>

User.allで情報を全て取得して、それをeachで一つずつ取り出しています。
この場合だと全てのユーザーのnameカラムが表示されます

これを改良していきます。

まずは、mypageで使えるように@usersの部分を定義しないといけません。 今回は好きな飲み物を表示させたいので、@drinksといった変数を定義します。 もちろんこれに対応したカラムも追加します。

"favorites_drinks"
（この中には複数のタグが含まれると思ったので複数系にしましたがカラムに保存されるときはタグじゃなくてテキストとして保存されるので、、、）
これを新しいカラムとして追加しました

まだ何の処理も書いていないのでこの中には入力された文がそのまま入ります。
さきほどの@usersの例に倣うと、@drinksの中に複数のデータを入れればうまくいきそうです。

ここが一番悩みました
xxxxxx,xxxxx,xx,xxx,xxxxxx　といったテキストを指定した文字で区切る場合には
"split"メソッドを使います。
これを使うことによって@drinksに配列で情報が入れられます。
@drinks = ["xxxxxx","xxxxx"]みたいな感じです
後はこれをeach使って一つずつviewで表示すれば良いだけです！

@drinks = favorites_drinks.split(",") *()の中に識別する文字を指定する指定する。スペースや改行も指定できるみたいです

mypage.html.erb

   <% @drinks.each do |drink| %>
     <%= drink %>
   <% end %>

これで一つずつ表示されます。
このままでは味気ないので冒頭で書いた#を付けて表示するようにします
ここで使うのは式展開といった動作です。

mypage.html.erb

   <% @drinks.each do |drink| %>
     <%= "＃ #{drink}" %> 　　＊"#{drink}"の部分が式展開の書き方です＊
   <% end %>

こう書くことで#を先頭に付けてドリンクの種類が表示されます！

間違いとうありましたら教えていただけると幸いです！