前回のレクチャーに戻る 完了して次のレクチャーへ  

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

このパートではプロフィールページを作成します。実装する流れとしてはルーティングを設定して、コントローラーのアクションの定義をしたあとに見た目を整えていきます。

この章で学べること


- resourcesを使ったルーティングの設定
- コントローラーの作成
- Gravatarを使ったデフォルトアイコンの設定
- データベースのリセット
- パスワードなしでアカウント情報を変更する実装

学習キーワード


- resources
- findメソッド
- viewport
- container
- Gravatar
- rails db:reset

プロフィールページのルーティングを追加


まずプロフィールページ用のルーティングを作成します。config/routes.rbに以下のコードを追加してください。

config
└── routes.rb

resourcesはRESTfulなルーティング(index, new, create, show, edit, update, destroy)7つを作成します。今回はonlyを使って生成されるルーティングをshowアクションに絞り込んでいます。

参考)Rails のルーティング

なので上記のコードはusersコントローラーのshowアクションのルーティングを追加しています。

実際に追加されたかコマンドで、rails routesで確認してみます。

$ rails routes
                  Prefix Verb   URI Pattern                    Controller#Action
                    root GET    /                              pages#home
        new_user_session GET    /users/sign_in(.:format)       devise/sessions#new
            user_session POST   /users/sign_in(.:format)       devise/sessions#create
    destroy_user_session DELETE /users/sign_out(.:format)      devise/sessions#destroy
       new_user_password GET    /users/password/new(.:format)  devise/passwords#new
      edit_user_password GET    /users/password/edit(.:format) devise/passwords#edit
           user_password PATCH  /users/password(.:format)      devise/passwords#update
                         PUT    /users/password(.:format)      devise/passwords#update
                         POST   /users/password(.:format)      devise/passwords#create
cancel_user_registration GET    /users/cancel(.:format)        devise/registrations#cancel
   new_user_registration GET    /users/sign_up(.:format)       devise/registrations#new
  edit_user_registration GET    /users/edit(.:format)          devise/registrations#edit
       user_registration PATCH  /users(.:format)               devise/registrations#update
                         PUT    /users(.:format)               devise/registrations#update
                         DELETE /users(.:format)               devise/registrations#destroy
                         POST   /users(.:format)               devise/registrations#create
                    user GET    /users/:id(.:format)           users#show

一番最後の行をみると、

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

追加されてるのが分かります。

resourcesメソッドに関しては以下のリンクを参照してください。

参考)Rails のルーティング

usersコントローラーを作成する


usersコントローラーのshowアクションのルーティングは追加したので、次にusersコントローラーを作成します。作成するには以下のコマンドを実行します。

$ rails g controller users
Running via Spring preloader in process 23379
      create  app/controllers/users_controller.rb
      invoke  erb
      create    app/views/users
      invoke  test_unit
      create    test/controllers/users_controller_test.rb
      invoke  helper
      create    app/helpers/users_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/users.coffee
      invoke    scss
      create      app/assets/stylesheets/users.scss

これでusersコントローラーは作成されました。

usersコントローラーにshowアクションを追加する


showアクションを追加します。以下のコードをapp/controllers/users_controller.rbに追加してくだだい。

app
└── controllers
    └── users_controller.rb

findメソッドはデータベースからデータを検索するメソッドです。詳細は下記のリンクを参考にしてください。

参考)Active Record クエリインターフェイス

application.html.erbを修正する


app/views/layouts/application.html.erbを以下のコードのように編集してください。

app
└── views
    └── layouts
        └── application.html.erb

追加したviewportでスマートフォンのスクリーンでの拡大・縮小に関する設定ができます。 initial-scale でズーム倍率の初期値を設定します。initial-scale=1 とすることで1倍の拡大率、つまり拡大も縮小もしない画面を見せることができます。

containerクラスは固定幅で、Bootstrapでコンテンツやグリット・システムを収容する際にコンテナ要素を必要とします。詳細はこちらのリンクを参考にしてください。

参考)コンテナ

上記のコードを追加すると、以下の画面のように、見た目が真ん中よりになります。

usersテーブルにprofile_photoカラムを追加する


プロフィール画像を表示させるためにusersテーブルにprofile_photoカラムを追加します。以下のコマンドを実行してください。

$ rails g migration AddProfilePhotoColumnToUsers profile_photo:string
Running via Spring preloader in process 35097
      invoke  active_record
      create    db/migrate/20180810113920_add_profile_photo_column_to_users.rb

すると、マイグレーションファイルが作成されるので、その作成されたマイグレーションファイルを実行します。

$ rails db:migrate
== 20180810113920 AddProfilePhotoColumnToUsers: migrating =================================
-- add_column(:users, :profile_photo, :string)
   -> 0.1689s
== 20180810113920 AddProfilePhotoColumnToUsers: migrated (0.1690s) ========================

これでusersテーブルにimageカラムが追加されました。

usersテーブルのprofile_photoカラムに何もない場合、デフォルトのアイコンが表示されるようにされる


usersテーブルにprofile_photoカラムが追加されました。

しかしすでに作ったユーザーにはprofile_photoカラムには何もありません。このまま表示させようとするとエラーを起こしてしまいます。

なのでprofile_photoカラムに何もないときはデフォルトのアイコンを表示するようにしましょう。

今回は「Gravatar」というメールアドレスにアイコンを登録することができるサービスを用います。何もなければデフォルトのアイコンを返してくれます。今回はこちらを使って見ましょう。

アイコンはユーザー詳細画面でも表示するものですので今回はテンプレートのどこでも呼べるように app/helpers/application_helper.rbにメソッドを用意しておきましょう。avatar_urlというメソッドを追加します。app/helpers/application_helper.rbに以下のコードを追加してください。

app
└── helpers
    └── application_helper.rb

これでviewで<%= image_tag avatar_url(@user) %>とコードを書いてあげれば、もしusersテーブルのprofile_photoに値があればそちらを参照して、なければGravatarからアイコンを持ってくるようになりました。

プロフィールページの作成


まず、app/views/users/のなかにshow.html.erbというファイルを作成します。 作成したら、app/views/users/show.html.erbに以下のコードを追加してください。

app/views/users
└── show.html.erb

次にcustom.scssに以下のコードを追加してください。

app
└── assets
    └── stylesheets
        └── custom.scss

上記のコードを追加できたら、rails db:resetというコマンドを実行してください。rails db:resetというコマンドはデータベースをリセットします。(データベースをリセットする理由としては、ユーザー名を登録せずに、ユーザーを作成したレコードがあるからです)

参考)データベースをリセットする

$ rails db:reset

上記のコマンドを実行できたら、サーバーを再起動して、http://localhost:3000/users/sign_up にアクセスしてユーザーを登録してください。

登録ができたら、http://localhost:3000/users/1 を開いて下記の画面のようになっていたら、問題なく動作しています。

Navbarにプロフィールページに飛ぶリンクを追加する


次にプロフィールページに飛ぶためのリンクを追加します。

app/views/partial/_navbar.html.erbを以下のように編集してください。

app
└── views
    └── partial
        └── _navbar.html.erb

上記のコードを追加したら、http://localhost:3000/ にアクセスしてください。

下記の画像のようにnavbarからプロフィールページに飛ぶように動作していたら大丈夫です。

以上で今回のパートは終了です。

議論
3 質問