先日あげた記事で紹介した書籍「プロになるためのWeb技術入門」のなかで、「HTTPリクエスト」や「リダイレクト」の仕組みについて学んでおりました。
一方で今日は「Flashメッセージ」という技術を学びました。
これは簡単にいうと、リダイレクト先にメッセージを一時的に保存することができる機能です。
この二つの学習がちょうどリンクして、きちんと腑に落ちた感覚がありましたので、まとめたいと思います。
１. リダイレクトとは
定義
リダイレクトとは、「ブラウザからのリクエストに対して、要求されたURLとは異なるURLに誘導すること」を言います。
具体例
例えばログイン認証の流れを考えてみます。
ログインフォームにIDとパスワードを入力してログインボタンを押し、認証されると、商品一覧ページに遷移するような流れです。
まず、クライアントがブラウザ上のフォームにパラメータを入力してログインボタンを押します。
するとPOSTメソッドによってHTTP通信によるリクエストが、アプリケーション側のログインの判定をするスクリプトに向けて送られます。これが最初のリクエストです。
アプリケーション側では、その認証情報が一致したので、ステータス「３０２Found」によってレスポンスを返し、商品一覧ページに誘導します。
これを受けて、ブラウザは改めてGETメソッドによって、誘導されたURLへリクエストを送り、アプリケーション側からステータス「200 OK」とレスポンスすることで画面が遷移します。
このように、最初はログインチェックをしてくれとリクエストしていたのに、最終的に商品ページに誘導されています。
これがリダイレクト、ということになります。
ポイント
ごちゃごちゃと書きましたが、重要なことはHTTPプロトコルによる通信はステートレスなので、
①ログインチェックしてくれというリクエスト
②商品一覧へのリクエスト
この二つのリクエストの間でパラメータを保存しておくことができないということです。
そのため、例えばこういったログインという状態であったり、redirect元の変数だったりをリダイレクト先にも渡そうと思うと工夫が必要というわけです。
その方法がcookieであり、セッションでした。
２, Flashメッセージ
Flashメッセージとは
Flashメッセージとは、「リダイレクト先にエラーメッセージなどを表示できる機能」のように見えますが、本質的にはちょっと違います。
Flashとはハッシュのようなもので、keyとvalueを設定し、ユーザーの「セッション」に保存できるという変数です。
ただし、保存できるのは、「その値が次に参照されるまで」という期限がついています。一度Flashメッセージが表示された画面を再読み込みすると、メッセージが消えてしまうのは、一度参照したことによって消去されるからです。
セッションに保存することができるため、リダイレクト先においてもkeyとvalueを保持することができています。
そしてリダイレクト先でメッセージのように表示されるというのは、リダイレクト先がviewで、htmlの中でFlash変数の値が出力されているからです。
使い方
下記のとおりcontrollerでkeyとvalueを設定します。
# 変数として定義する場合
flash[:key] = '出力したいvalue'
# redirect_toに続けて１行で書く場合
redirect_to url, flash: {key1: "表示したいvalue1", key2: "表示したいvalue2"}
そしてviewで出力します。
<%= flash[:key] %>
bootstrapを使う場合
bootstrapを使う場合、bootstrapのcssのクラスをFlashメッセージのkeyとすることで、文字色を変更できます。
success => 緑色
info => 青色
warning => 黄色
danger => 赤色
例えば、view側で、エラーがある場合に赤文字でエラーメッセージを表示する実装の例はこのようになります。
<% if flash[:error_messages] %>
<div class="alert alert-danger"> # bootstrapのclass
<ul>
<% flash[:error_messages].each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>