プロフィール関連を作ってみる

さて、前回でfacebookとようやく仲良く連携できるようになったので そのまま続きでプロフィールをいじるために設定画面を作ってみる。

とりあえず、ログインした後にルーティングでホームに戻って来たら アドレスが表示されるようにしているので その横に今度はアイコンとアカウント名も表示できるようにする。

とは言ってもわりかし簡単で

①<% if current_user.provider %> <!-- SNSログインしてる時 --> ②<%= image_tag current_user.image, class:"img-circle profile-s" %> ③<%= current_user.name %> <% else %> ④<% current_user.email %> <% end %>

SNSでログインしてるか判断するif文を作る ②ユーザイメージ(アイコン)を取得して円形で表示 ③アカウント名を取得 ④SNSを利用してない場合はメールアドレスを表示

とするとIMG_20170928_134312079.jpeg

こんな具合で表示してくれるように。 ※実名晒してしまってるため一部加工してます。

ただし、CSSで大きさを調整しているので 見た目的には綺麗になってるものの、設定してないと 結構大きく表示されてしまってアイコンと文字列のバランスが悪くなってしまう。

そこでアイコンサイズは3段階で分けるようにして 今回は一番小さいサイズを使用。

//アイコンサイズ .profile-s { width: 25px; height: 25px; } .profile-m { width: 50px; height: 50px; } .profile-l { width: 100px; height: 100px; }

application.scssに追加することで、クラス指定するときに追加でサイズも調整してくれるようになった。

次に設定ページを作成。

これはプルダウンのリストに配置したいので

<ul class="dropdown-menu"> <li><%= link_to "設定", user_path(current_user) %></li> <li><%= link_to "ログアウト", destroy_user_session_path, method: :delete %></li> </ul>

こんな感じでパスを指定する。

しかし、user_pathなんかどこを指定してんねん。。って話なんだけれども ここは一手間かけるだけでできるらしい。

まずは、contorollerフォルダの配下にuser_controller.rbというファイルを作成して

class UsersController < ApplicationController def show end end

こんな感じで書いておく。細かいことは今は気にしない。

んでもって、もちろんshowを取得するためのhtmlファイルも必要なので これはviewフォルダの配下にusersフォルダを作成してshow.html.erbの名称でファイルを作成。

とりあえず、今の所は中身までさわれないので

<h1>profile</h1>

一旦適当に中身を作っておく。

あとはrouteファイルに

resources :users, only: [:show]

ユーザのリソースをどこで使用するか指定する文を書いておけば

スクリーンショット 2017-10-03 15.17.28.png

プルダウンで設定が出現し、ここをクリックすると

IMG_20170928_134312079.jpeg

現状、質素すぎる設定ページに飛んでくれるようになった。

それでなんで設定画面のファイルをshowにしたのかというと ターミナルでrake routesと叩けば全てのルーティング先が表示されるのだが その中の一部で

user GET      /users/:id(.:format)                    users#show (ファイルパス  URLパス      参照先ファイル)

こんな形で表示されているはず。

これもresourcesで指定したものと同じで このファイル名にしないとうまくルーティングで飛んでくれなくなってしまうのを避けるため。

フォルダを新しくusersで作成したのもパスやらファイルやらの参照ができなくなるのも関係してるはず・・(詳しくは知らない)

まぁなんにせよ、これで下準備はできたので 次回は基礎的な編集項目を作れるようにしたいなぁ。

ってことで今回はこの辺で

ではー。

この記事をシェアする