【Rails】Bootstrap 4 Tag Input Plugin With jQueryを使ってタグの見た目をよくする

タグ入力後の見た目をよくしよう

題名通りBootstrap 4 Tag Input Plugin With jQueryを用いてタグ入力後の見た目をよくしていきます。
（２回目の）初投稿なので誤字や脱字など至らない点はあると思いますが、よろしくお願いいたします。

完成形

現在のタグ入力機能は下のような感じですが、このままだと殺風景なので

---

↓のように入力後にきれいに装飾されるようにしてみましょう。
またエンターキーでもタグの登録ができるようになります

##前提
Rails 6.0.3.5
Bootstrap 4.5
jQuery導入済み
タグ機能を実装済み

##Bootstrap 4 Tag Input Plugin With jQueryの導入

Bootstrap 4 Tag Input Plugin With jQueryの公式サイト

上の公式ページからダウンロードしてきましょう。

---

解凍すると
Bootstrap-4-Tag-Input-Plugin-jQueryというディレクトリができます。
ディレクトリ内の
tagsinput.js
を
app/javascripts
に
tagsinput.css
を
tagsinput.scss
に名前を変えて
app/javascripts/stylesheets
にいれましょう。

---

tagsinput.jsを読み込めるように記述します。

application.js

require('jquery')
require('tagsinput') //←これを追加します

tagsinput.scssを読み込むための記述もします。

application.scss

@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import 'tagsinput'; //←これを追加します。

導入はこれで終わりです。

データをdata-roleで送ってtagsinputを起動させよう。

タグの入力フォームにdata-roleを追加します。

new.html.erb

<div class="tags">
  <%= f.label :tag_list %>
  <%= text_field_tag 'post[tag_list]', @post.tag_list, data: {role: "tagsinput"} %>   # ←を追加  
</div>

これで

のようにタグ入力後に装飾されるようになりました！

少し設定を変えてみましょう

現状だとタグが無限に登録できてしまします。

追加できるタグの数と最大文字数を設定しましょう。
tagsinput.jsの中身を少しみてみましょう。

tagsinput.js

    maxTags: undefined,
    maxChars: undefined,

こちらを見るとタグの文字数の縛りもないことがわかりますね！！！
こちらを変えていきましょう。

tagsinput.js

    maxTags: 4,
    maxChars: 8,

タグの最大数４と最大文字数８と設定できました。

---

↑半角英数ならいいのですが、全角入力時に入力画面にずれがでてしまいます。
こちらを直していきましょう。

tagsinput.js

    this.inputSize = Math.max(1, this.placeholderText.length);

こちらを

tagsinput.js

    this.inputSize = Math.max(20, this.placeholderText.length);

にかえてみましょう。

いい感じになりましたね！！！

最後に

導入にするにあたっていろいろなエラーと戦いましたorz
[bootstrap-tagsinput]
(https://github.com/bootstrap-tagsinput/bootstrap-tagsinput)

最初はこちらを導入しようとしたのですが、古いためかなかなかうまく行かずorz
またTag itの導入もうまくいかずorz
いろいろ探し求めてこちらにたどり着きました。

またBootstrap 4 Tag Input Plugin With jQueryについての日本語の文献がなく、オプションなどについて英語の公式を参考にしました。
英語だからといって苦手意識を持たない。しっかりと読むことの大切さを知りました（遅い）
ついでにgifのマークダウン記法があるのを初めて知りました（遅い）

---

以上となります。拙い文章ですがご拝読いただきありがとうございました。