RailsでBootstrapを使ってフラッシュメッセージを表示し、自動で消す方法 #Rails

はじめに

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">&times;</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を使用してメッセージが一定時間後に自動的に消えるようにすることで、ユーザー体験を向上させることが可能です。