紙一重の積み重ね

35歳のエンジニアがなれる最高の自分を目指して、学んだことをこつこつ情報発信するブログです。

【9章】Ruby on Railsチュートリアル演習まとめ&解答例【9.2 [Remember me] チェックボックス】

はじめに

Ruby on Rails チュートリアル実例を使ってRailsを学ぼう 第4版の 9章 9.2 [Remember me] チェックボックスの演習まとめ&解答例です。

個人の解答例なので、誤りがあればご指摘ください。

9.2 [Remember me] チェックボックス

本章での学び

チェックボックスの作成

ログインフォームにチェックボックスを追加する。 他のラベルやテキストフィールドと同様にヘルパーメソッドで作成できる。 フォームラベルの内側に記載する必要がある。

      <%= f.label :remember_me, class: "checkbox inline" do %>
        <%= f.check_box :remember_me %>
        <span>Remember me on this computer</span>
      <% end %>

bootstrapの2つのclass(checkbox,inline)をincludeしているが、 この状態では表示が崩れてしまう。

image

スタイルを整える

.checkboxはクラスの指定。 class= checkboxの部分のスタイルを整える。 以下、適用対象のHTML。

<label class="checkbox inline" for="session_remember_me">
        <input name="session[remember_me]" type="hidden" value="0"><input type="checkbox" value="1" name="session[remember_me]" id="session_remember_me">
        <span>Remember me on this computer</span>
</label>
  • checkboxクラスの上マージンを-10px取る
  • checkboxクラスの下マージンを10px取る
  • spanタグの左マージンを20px取る
  • spanタグのフォントを標準にする
.checkbox {
  margin-top: -10px;
  margin-bottom: 10px;
  span {
    margin-left: 20px;
    font-weight: normal;
  }
}

#session_remember_meはセレクタの指定。 id=session_remember_meの部分のスタイルを整える。 以下、適用対象のチェックボックス部分のHTML。

<input type="checkbox" value="1" name="session[remember_me]" id="session_remember_me">
  • 幅を状況に応じて自動調整する
  • 左マージンを0にする
#session_remember_me {
  width: auto;
  margin-left: 0;
}

完成。 image

チェックボックスの値の取得

ログインフォームから送信されるparamsハッシュから、チェックボックスの値が取得できる。 オンの場合1、オフの場合0が取得できる。

params[:session][:remember_me]

これは、ログインフォーム内にチェックボックスのvalue="1"と、hidden項目としてvalue="0"があるため。

<input name="session[remember_me]" type="hidden" value="0">
<input type="checkbox" value="1" name="session[remember_me]" id="session_remember_me">

【Controller】createアクションの修正

sessionsコントローラ内のcreateアクションを修正する。 三項演算子を使って、以下の条件分岐を1行で記載できる。

  • value="1"の場合、ユーザ情報を記憶する
  • value="0"の場合、ユーザ情報を削除する
  def create
    user = User.find_by(email: params[:session][:email].downcase)
    if user && user.authenticate(params[:session][:password])
      #ユーザログイン後にユーザ情報のページヘリダイレクトする
      log_in user
      #チェックされていたらユーザを記憶する
      params[:session][:remember_me] == '1' ? remember(user) : forget(user)
      redirect_to user

演習1

ブラウザでcookies情報を調べ、[remember me] をチェックしたときに意図した結果になっているかどうかを確認してみましょう。

remember meをチェックしてログインする。 image

cookiesの値を確認する。 image

ブラウザを閉じて、再度アプリにアクセスする。 ログイン状態が保持され、remember_tokenの値が変わっていないことを確認。 image

演習2

コンソールを開き、三項演算子を使った実例を考えてみてください (コラム 9.2)。

DB内のユーザ数を調べて、1人の場合とそれ以外でメッセージを出し分ける。

>> User.count == 1 ? "ユーザ数は1人です" : "複数のユーザが登録されています"
   (0.4ms)  SELECT COUNT(*) FROM "users"
=> "ユーザ数は1人です"

おわりに

9.1章に比べるとボリュームも少なく、楽にできました。

RailsはHTMLが自動生成されるので、 CSSの装飾も完成後のHTMLを意識して書くと良いかもしれません。

あと、三項演算子便利ですね。 DRYな書き方ができるように精進します。