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

スポンサーリンク

初めに

タグ機能の実装にあたり、見た目があまりに汚かったので、綺麗にタグを編集できないかと思い、色々探し、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>

結果

タグがめちゃ綺麗に登録できるようになりました!

終わりに

導入自体は楽に見えますが、コードの中身を見ていくと複雑で最初はとても時間がかかりました汗
しかし、リファレンスを読むのは時間がかかる。。

未経験者から最強のRailsエンジニアになるためのロードマップ
webアプリエンジニアになるためにどの程度学習すべきかをまとめた記事です。
タイトルとURLをコピーしました