はじめに
Railsのアプリケーションにおいて、ユーザー操作に対するフィードバックは非常に重要です。この記事では、Bootstrapを利用してフラッシュメッセージをスタイリッシュに表示し、JavaScriptを使用して一定時間後に自動的に消去する方法を紹介します。
必要なもの
- Rails 6.0 以上
- Bootstrap 4.5.2
- Webpacker(JavaScriptの管理に)
実装手順
1. Bootstrapのセットアップ
まずは、BootstrapをRailsプロジェクトに導入します。以下のコマンドでBootstrapとその依存ライブラリをインストールします。
yarn add bootstrap@4.5.2 jquery popper.js
2. スタイルシートの設定
app/assets/stylesheets/application.css
を application.scss
にリネームし、Bootstrapのスタイルシートをインポートします。
@import 'bootstrap';
3. ヘルパーメソッドの定義
app/helpers/application_helper.rb
にフラッシュメッセージのためのBootstrapクラスを割り当てるヘルパーメソッドを定義します。
module ApplicationHelper
def bootstrap_class_for_flash(flash_type)
case flash_type.to_sym
when :notice then 'alert-info'
when :success then 'alert-success'
when :error then 'alert-danger'
when :alert then 'alert-warning'
end
end
end
4. フラッシュメッセージのパーシャル
app/views/layouts/_notice.html.erb
にフラッシュメッセージのパーシャルを作成します。このパーシャルでは、JavaScriptを使ってフェードアウト後にメッセージをDOMから削除します。
<% flash.each do |type, message| %>
<% if message.present? %>
<div class="container mt-4">
<div class="alert <%= bootstrap_class_for_flash(type) %> alert-dismissible fade show" role="alert">
<%= message %>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<% end %>
<% end %>
<style>
@keyframes fadeOut {
to {
opacity: 0;
height: 0;
padding-top: 0;
padding-bottom: 0;
}
}
.fadeOut {
animation: fadeOut 5s forwards; /* 5秒間でフェードアウト */
animation-delay: 5s; /* 表示後5秒でアニメーション開始 */
overflow: hidden; /* 高さが0になる際に内容がはみ出さないようにする */
}
</style>
5. メインレイアウトにパーシャルを含める
app/views/layouts/application.html.erb
で、作成したパーシャルを読み込みます。
<!DOCTYPE html>
<html>
<head>
<title>ABCアプリケーション</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_importmap_tags %>
</head>
<body>
<%= render 'layouts/notice' %>
<%= render 'layouts/sidebar' %>
<%= yield %>
</body>
</html>
まとめ
この方法で、RailsアプリケーションにBootstrapを使った美しいフラッシュメッセージを実装できます。さらに、JavaScriptを使用してメッセージが一定時間後に自動的に消えるようにすることで、ユーザー体験を向上させることが可能です。