Railsでタグをつけるために bootstrap-tagsinput を導入しようとしています。

Rails のアプリでタグをつけたいので、タグ機能を付けようと Bootstrap-tagsinput を利用しようとおもって
Railsでacts-as-taggable-onを使ってタグ管理を行う
というサイトを参考にしてました。しかし

Bootstrap Tags Inputを使ってユーザーのタグ入力を簡易にする

Bootstrap Tags Inputは、タグ管理のためのjQueryプラグインです。
これを導入することで、タグの入力を次のように簡易にできるようにします。
tood image 3

ここで提示しているリンクを押してもサイトに接続できませんでした。
しかたなくネットでさがして

Githunbのページから src を選択してこのページにとび、bootstrap-tagsinput.css と bootstrap-tagsinput.js の２つをコピーして、それぞれjavascripts フォルダーと stylesheetsフォルダに配置しました。

しかし配置してもうまく起動しません。どのようにすればいいのでしょうか？

users/_form.html.erb

<%= form_for(user) do |f| %>
  <% if user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
      <% user.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>
  
  <div class="field">
    <%= f.label :skill_list, "スキル・特技" %><br>
    <%= text_field_tag 'user[skill_list]', @user.skill_list.join(','), "data-role" => "tagsinput" %>
  </div>
  <div class="field">
    <%= f.label :interest_list, "興味・関心" %><br>
    <%= text_field_tag 'user[interest_list]', @user.interest_list.join(','), "data-role" => "tagsinput" %>
  </div>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

moke

2017/01/31 08:51

application.css application.jsの記述に問題があるかもしれません、そもそも、bootstrapは導入されていますか？

moke

2017/01/31 08:54

一応js関係なのでブラウザのキャッシュを消してみるのもいいでしょう

Ohiirechan

2017/01/31 09:26

あ・・・すみません。bootstrap の導入ができてませんでした・・。まずキャッシュを削除したのですが、変化はしませんでした。bootstrap を入れてなかったせいです。　ありがとうございました。

Ohiirechan

2017/01/31 09:28

あのー、moke さんにベストアンサーをつけたいので、もしよければ回答の投稿をしてくださいm(__)m

moke

2017/01/31 09:39

回答しました。

行動規範の内容に同意します

回答1件

ベストアンサー

問題の切り分けをします。
①一応js関係なのでブラウザのキャッシュを消してみる
②Bootstrap Tags InputはBootstrapの拡張です。
bootstrapが入っているか確認しましょう。
③application.css
application.js
にちゃんと記述はされていますか？

bootstrapの導入はrails-assetsが便利です。

ruby
1Gemfile
2source 'https://rails-assets.org' do
3gem 'rails-assets-bootstrap'
4gem 'rails-assets-bootstrap-timepicker'#今回は関係ないですがおすすめです
5gem 'rails-assets-bootstrap-tagsinput'
6end

と記述して
bundle install
assets:precompile
ですみます。

application.css
application.js
の変更が必要な場合ありますが
*= require bootstrap
*= require bootstrap-timepicker/css/timepicker
*= require bootstrap-tagsinput
//= require bootstrap
//= require bootstrap-timepicker/bootstrap-timepicker
//= require bootstrap-tagsinput
等の記述を追加するだけです。