アラートをもっと見やすく

アラートをもっと見やすく

例えば、ログイン機能があったとします。その時、パスワードが間違っている為ログイン出来ませんでした、というアラートを見た事がないでしょうか？このように、ユーザーに通知を行いたい内容がある時に、アラートが使われます。

現在Newsableでは、ログインやログアウトをした時などに下の図のようにアラートが出ます。しかし、表示位置がビッグイメージの下になっています。しかもただの文字でなんか味気ないし、ユーザーにはわかりづらいですよね。

これを下図のようにするとどうでしょう？とても良くなった感じがしませんか。位置をナビゲーションバー下にしてデザインも整えて見た目も良くします。こうするとユーザーにもわかりやすくメッセージを伝えることができます。

Bootstrapでは、アラートのテンプレートも用意されています。以下公式サイトのアラートのページです。

https://getbootstrap.com/docs/4.1/components/alerts/

jQueryを導入する

Bootstrapのアラートを使用するには、jQueryを導入する必要があります。jQueryとは、Webサイトに動きを持たせたい場合に使用される言語です。以前のRailsでは標準で入っていましたが、現在はGemでインストールする必要があります。

Rails5でもjQueryをGemで読み込む必要があるので、以下手順で導入して下さい。
※要サーバー再起動

# Gemfile

gem 'metainspector'
gem 'jquery-rails'

# ターミナル

$ bundle install

# application.js

//= require jquery #一番上に追加
//= require rails-ujs
//= require activestorage

アラート実装

では、アラートを実装していきましょう。まず、今まで使っていたnoticeはもう必要ありません。以下部分を削除して下さい。

<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>

そして、application.html.erbのnavのすぐ下に以下を追加して下さい。

</nav>
<% if notice || alert %>
  <div class="alert alert-warning">
    <div class="container">
      <%= notice %>
      <%= alert %>
　</div>
  </div>
<% end %>
<% if current_page?(root_path) %>

次に、デフォルトで設定されている隙間を無くします。style.scssに以下を追加して下さい。

.alert {
  margin-bottom: 0;
}

そして、閉じるボタンの実装を行います。現状は、ユーザーがアラートを確認した後でもアラートが出たままになります。邪魔に感じるユーザーもいるかもしれないので、閉じるボタンを追加しておきます。以下オレンジ部分を追加して下さい。

実際のコードはこちらになります。

<% if notice || alert %>
  <div class="alert alert-warning">
    <div class="container">
      <%= notice %>
      <%= alert %>
      <button type="button" class="close" 
    data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
<% end %>

課題

アラートを完成させてデプロイしましょう。

$ git add . 
$ git commit –m "Add design"
$ git checkout master
$ git merge design-home
$ git push
$ git push heroku master
$ heroku run rails db:migrate

まとめ

この項目では、Bootstrapの使用方法について理解を深めながらデザインの実装を行いました。カードデザインやフッターを作成して、アラートの実装とjQueryの追