Rails6 BootStrap モーダルを追加してクオリティUP!!

はじめに

今回はtwitterウェブ版にあるような「新しい投稿」ボタンをクリックしたときにフォームがポップアップで表示されるような実装をします

完成イメージ

開発環境、前提条件

• AWS Cloud9
• Ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x86_64-linux]
• Rails 6.1.7.3
• Deviseのインストールが完了していて、ユーザーの新規登録やログインができる状態
• 投稿機能が実装済み(モデル、コントローラ含め)
• jQueryがインストール済み
• BootStrapがインストール済み
• FontAwesomeがインストール済み
• 投稿に関するモデルやコントローラは作成ずみ

使い回せるようにパーシャル化しちゃいましょう。

投稿関連フォルダにnewファイルを作成

• 新規投稿ボタン
  例）app/views/...../_new_posts.html.erb

• 投稿フォーム
  例）app/views/...../_form.html.erb

ビューの記述。

app/views/_new_posts.html.erb

# Button trigger modal
<h2><%= link_to raw('<i class="fas fa-plus-circle"></i> 新しい投稿'), "#newPostModal", class: "btn btn-custom-posts", data: {toggle: "modal"} %></h2>

# Modal
<div class="modal fade" id="newPostModal" tabindex="-1" role="dialog" aria-labelledby="newPostModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="newPostModalLabel">新しい投稿</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <%= render 'posts/form', post: @post %>
      </div>
    </div>
  </div>
</div>

app/views/_form.html.erb

<%= form_with(model: post, local: true, html: {class: "form"}, scope: :post) do |f| %>
  <div class="form-group">
    <%= f.label :投稿内容, class: "form-label" %>
    <%= f.text_area :content, class: "form-control-posts", placeholder: "1~140文字以内" %>
  </div>

  <div class="form-group">
    <%= f.label :画像, class: "form-label" %>
    <span class="btn btn-default btn-file">
      <i class="fas fa-images fa-lg"></i>
      <%= f.file_field :image, class: "form-control" %>
    </span>
  </div>

  <div class="actions">
    <%= f.submit "投稿", class: "btn btn-primary" %>
  </div>
<% end %>

jQueryを読み込ませるよ

app/javascript/packs/application.js

import $ from 'jquery';　  #追加

これで、ボタンをクリックしたときにモーダルウィンドウでフォームが表示されるようになります。

レイアウトを整えよう

app/assets/stylesheets/application.scss

.form-group {
  margin: 1.5rem;
}

.form-control-posts {
  border-radius: 0.25rem;
  width: 100%;
  height: 150px;
  &:focas {
    box-shadow: 0 0 0 0.2rem rgba(255, 156, 91, 0.25);
    border-color: #ff9c5b;
  }
}

.input-group-text {
  background-color: #ff9c5b;
  border-color: #ff9c5b;
  color: white;
}

.submit-btn {
  background-color: #ff9c5b;
  color: white;
  &:hover {
    background-color: #ff7e33;
    color: white;
  }
}

.btn-file {
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100%;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}

.btn-custom-posts {
  background-color: #ff9c5b;
  color: white;
  border-radius: 30px;
  padding: 10px 20px;
  font-weight: bold;

   &:hover {
     background-color: #ff7e33;
     color: white;
     text-decoration: none;
   }
}

以上で実装の完了です！！
簡単でしたね。
コメント、いいねお待ちしてます！！