Rails
udemy

Udemyのコース「【作りながら覚える!】 Ruby on Rails を用いたウェブ開発(Airbnbを作ろう!) 」を学ぶ。part 3-3,4,5

More than 1 year has passed since last update.

Udemyのこちらのコースを受けながら、疑問に思ったこと、調べた結果、大事なことをまとめていきます。

part3-3 facebook登録のレイアウトを整える

自己課題

  • facebookログインのテキストに"btn btn-facebook"classを追加。
  • cssを追加。
  • navbarの変更。facebookでログインしているとき,画像と名前が表示、それ以外の時はemailが表示されるようにせよ。

part3-4 プロフィールページの作成

プロフールを表示するために新たなページを作らないといけない。

routes.rbに「resources :user」と追記。

すると、

user_index GET      /users(.:format)                         users#index
           POST     /users(.:format)                         users#create
  new_user GET      /users/new(.:format)                     users#new
 edit_user GET      /users/:id/edit(.:format)                users#edit
      user GET      /users/:id(.:format)                     users#show
           PATCH    /users/:id(.:format)                     users#update
           PUT      /users/:id(.:format)                     users#update
           DELETE   /users/:id(.:format)                     users#destroy

が追加される。

resources :users, only: [:show]

(users 複数形に注意)
とすると、userのshowアクションのみが生成される。

user GET      /user/:id(.:format)                     user#show

ちなみに、ここへのパスは「user_path(current_user)」になる。:idとあるので一人一人分けないといけない。

新しいページを作りたいと思ったら。

routes->controller->viewを作る流れじゃ。

自己課題

  • navbar上のログアウトの上にプロフィールへのリンクを作成。
  • プロフィールを追加したいため、routesにuser resourcesを追加。使用するのは、showだけ。
  • navbarにリンクを追加。
  • userコントローラーファイルを作成。
  • viewを作成。

part3-5 プロフィールページ

facebookの画像を大きくするには?

配布されたshow.html.erbを写す。

すると、画像が荒いのが表示される。自分の場合はfacebookログインが実装できなかったのでエラーが表示。

ここ見れば解決。

文字列の中に変数を入れる時。

  user.image = "http://graph.facebook.com/#{auth.uid}/picture?type=large"

 #{---}の中に入れる。

cssについて

.profile-full {
  width: 30%;
}

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

992px以上の時は、要素の中で100%、それより小さい時は30%の大きさで表示。

自己課題

- show.html.erbを写す。
- 画像がない時の処理を追記。
- cssを写す。