概要
BootstrapのAlertsは、様々なテキストメッセージを表示するのに適したコンポーネントです。
hobbycartでは以下のように使っています。
Ruby on Railsには、ユーザーへのメッセージを表示するflashという仕組みがあります。
本記事では、これらを組み合わせて、flashにメッセージを突っ込むと、BootstrapのAlertsで表示されるような仕組みを実装を考えます。
ControllerでFlashメッセージを挿入する処理
Alertのタイプは、Bootstrapでは
- primary
- secondary
- success
- danger
- warning
- info
- light
- dark
の8種類があります。
flashはHashのようにキーを指定して値を代入する扱い方ができるので、例えばsuccessメッセージを表示したいのであれば、
def create # ... なんらかの処理 flash[:success] = '商品が追加されました' end
このように書くことで実現できます。
View
Bootstrap alertsが指定するhtmlの形式は、以下の構造です。
<div class="alert alert-success" role="alert"> 内容 </div>
この構造になるようにテンプレートエンジンを記述します。
_flashes.html.erb
<% flash.each do |type,msg| %> <div class="alert alert-<%=type %>" role="alert"><%= msg %></div> <% end %>
erbで記述しましたが、slim・hamlをお使いの方は適宜読み替えてください。
flashが複数セットされている場合でも、この記述ですべて表示することができます。
このview templateを、メッセージを表示したい箇所でrenderすると完成です!
hobbycartでは、application.html.erbの共通部分にこのパーシャルを配置することで、個別ページではflashの存在を意識しなくてもよいような構造にしています。
参考
- Alerts・Bootstrap(https://getbootstrap.com/docs/4.1/components/alerts/)