0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

はじめに

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?