プロフィール関連の基礎づくり その①

今回はプロフィールページを作っていくことに。

とは言ってもアイコン表示させたりとかかなぁ・・ なかなか共用部分のレイアウト考えるのって難しかったりする(ㆀ˘・з・˘)

ひとまず、目指す先としてはこんな感じIMG_20170928_134312079.jpeg

おそらくアイコンの大きさとしては ブラウザ版のツイッターくらいかな?

それにしても無料版の画像加工アプリじゃ雑さが露呈してるなオイ!(`・∀・´)ヒャッハー やっぱフォトショ入れるべきか・・・。 なるべく課金はしたくないんだが←

まぁそんなことは置いといて、ひとまずコーディング。

<%= render 'partial/navbar' %>

最初のあたりはこれまでと同じような感じ。 ただし、一つ今までと違うところ。

@user.image・・。

えっと、これはインスタンス変数で各ユーザのイメージを DBから読み込んで、次のクラス定義でリサイズしてる。 ってことでいいんかな。

その次はpanelのクラスか。

これはbootstrapで標準で搭載されてる(?)機能の一つ。 詳しくはここから参照で。

headingはパネルのヘッダーにあたる部分。 bodyは内容の部分。 varはそれぞれのIDを変数に当ててる・・はず。

しかし、自分で作っといてあれなんだけど 電話番号の部分いるかな・・(;´Д`A 個人で使う場合は載せちゃダメよな・・絶対。。

とりあえず、これでコードとしては完成したので 次にレイアウトを調整するためにCSSをプラス。

@media (min-width: 900px){ .profile-full { width: 60%; } }

apllication.scssの最後の方にプロフィール関連の記述をしたはずなので その直下に書き足す感じでおけまる。

最初の@media以降の部分は ブラウザの最低幅が900ピクセル以下の場合に 適用しなさいよーとかいうものらしい。

ちなみに@mediaについてはここで確認できる。

あとはuserディレクトリのshowを参照にするので show.html.erbをこんな感じにしておく

class UsersController < ApplicationController def show @user = User.find(params[:id]) end end

これでSNSで認証した時に自動で各ユーザのアイコンイメージやらを取得してくれるようになった。

まぁまだこれで完成という訳ではないものの それなりの文字数になってきたので とりあえずはこの辺で。

続きはまた次回にしよう。

 

ではー。

この記事をシェアする