RailsにBootstrap Tags InputのJQueryを導入する

2020 5/22

2019.12.12 2020.05.22

初めに

タグ機能の実装にあたり、見た目があまりに汚かったので、綺麗にタグを編集できないかと思い、色々探し、Bootstrap Tags InputのJQueryを導入してみました。

目的

Bootstrap Tags Inputの導入

Bootstrap 4 Tag Input Plugin With jQuery – Tagsinput.js
https://www.jqueryscript.net/form/Bootstrap-4-Tag-Input-Plugin-jQuery.html

を見て、これめっちゃ良さげだなと思い、導入を決意。

下記のJQueryを導入している様子なので、一応公式ページも置いておきます！

Bootstrap Tags Input
http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

（前提、環境）

使用PCはmac
macOS:Mojave10.14.5

Bootstrap4を導入済み

導入していない方は僕の記事を参照してみてください。
Bootstrap4を導入する

gem "acts-as-taggable-on"を導入済

導入していない方は僕の記事を参照してください。
Rails 5.2でタグ投稿機能の実装のためgem「acts-as-taggable-on」を使ってみた

導入手順

導入するもの一覧

Bootstrap Tags Input

STEP1 Bootstrap Tags Inputをダウンロード

下記のリンクをクリックしてBootstrap Tags Inputをダウンロード。
※心配な方は公式ページからダウンロードしてくださいね！
https://codeload.github.com/bootstrap-tagsinput/bootstrap-tagsinput/zip/latest

Bootstrap-4-Tag-Input-Plugin-jQuery
というディレクトリがダウンロードできたはずです。

STEP2 ダウンロードファイルをアプリへ移動

tagsinput.jsをアプリのapp/assets/javascriptsの配下にセットします。
tagsinput.cssも同様にapp/assets/stylesheetsの配下にセットです。
tagsinput.cssは名前をtagsinputs.scssに変更しておきましょう！

コマンドでの移動はこちら

#tagsinput.jsの移動
mv ~/Downloads/Bootstrap-4-Tag-Input-Plugin-jQuery/tagsinput.js アプリディレクトリ/app/assets/javascripts/

# tagsinput.cssの移動
mv ~/Downloads/Bootstrap-4-Tag-Input-Plugin-jQuery/tagsinput.css アプリディレクトリ/app/assets/stylesheets/
#tagsinput.cssをscssに変更
mv アプリディレクトリ/app/assets/stylesheets/tagsinput.css アプリディレクトリ/app/assets/stylesheets/tagsinput.scss

STEP3 使えるようにセット

application.scssにimportをセット
bootstrapを読み込んでからtagsinputを読み込むので順番に注意です。
JSはそのまま勝手に読み込んでくれます笑

@import "bootstrap";
#追記するのは以下だけ
@import "tagsinput";

STEP4 タグを入力するページにdata-role="tagsinput"をセット

僕の場合は記事投稿のページだったので下記のように記述しました。
htnl.erbファイルに記述を追記しており、link_toなどのようにruby的なコードで記述する部分にはdata-roleのセットはハッシュにして追記する必要がありました！

  <div class="tags">
    <%= f.label :tag_list %>
    <%= text_field_tag 'article[tag_list]', @article.tag_list.join(","), data: {role: "tagsinput"} %>
  </div>

STEP5 投稿後のページのタグの見え方をBootstrapで調整

demoを参照したところ、badge badge badge-infoをつけておくととても綺麗に見えるので、こちらを採用。

<div class="article__tags__box", data-role="tagsinput" >
  <% article.tag_list.each do |tag| %>
    <span class="badge badge badge-info">
      <%= tag %>
    </span>
  <% end %>
</div>