タグ入力後の見た目をよくしよう
題名通り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を読み込めるように記述します。
require('jquery')
require('tagsinput') //←これを追加します
tagsinput.scssを読み込むための記述もします。
@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import 'tagsinput'; //←これを追加します。
導入はこれで終わりです。
データをdata-roleで送ってtagsinputを起動させよう。
タグの入力フォームにdata-roleを追加します。
<div class="tags">
<%= f.label :tag_list %>
<%= text_field_tag 'post[tag_list]', @post.tag_list, data: {role: "tagsinput"} %> # ←を追加
</div>
これで
のようにタグ入力後に装飾されるようになりました！
少し設定を変えてみましょう
現状だとタグが無限に登録できてしまします。
追加できるタグの数と最大文字数を設定しましょう。
tagsinput.jsの中身を少しみてみましょう。
maxTags: undefined,
maxChars: undefined,
こちらを見るとタグの文字数の縛りもないことがわかりますね！！！
こちらを変えていきましょう。
maxTags: 4,
maxChars: 8,
タグの最大数４と最大文字数８と設定できました。
↑半角英数ならいいのですが、全角入力時に入力画面にずれがでてしまいます。
こちらを直していきましょう。
this.inputSize = Math.max(1, this.placeholderText.length);
こちらを
this.inputSize = Math.max(20, this.placeholderText.length);
にかえてみましょう。
いい感じになりましたね！！！
最後に
導入にするにあたっていろいろなエラーと戦いましたorz
bootstrap-tagsinput
最初はこちらを導入しようとしたのですが、古いためかなかなかうまく行かずorz
またTag itの導入もうまくいかずorz
いろいろ探し求めてこちらにたどり着きました。
またBootstrap 4 Tag Input Plugin With jQueryについての日本語の文献がなく、オプションなどについて英語の公式を参考にしました。
英語だからといって苦手意識を持たない。しっかりと読むことの大切さを知りました（遅い）
ついでにgifのマークダウン記法があるのを初めて知りました（遅い）
以上となります。拙い文章ですがご拝読いただきありがとうございました。