0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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を写す。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?