Deviseの上にacts-as-taggable-on を使ったタグ機能 自分メモ

gemインストール

gem 'acts-as-taggable-on', '~> 6.0'
bundle install

テーブル作成

$ rake acts_as_taggable_on_engine:install:migrations
$ rake db:migrate

タグ保存
タグを付けたいモデルに以下のように追記する。(今回は Post モデルにタグを付けたかったので post.rb に記述)
modelフォルダから

class Post < ApplicationRecord
  acts_as_taggable
end

registration editで以下を追加

  <div class="field">
    <%= f.label :tag_list %><br />
    <%= f.text_field :tag_list, value: @user.tag_list.join(","), class:"form-control" %>
  </div>

スペースなどで区切りたい場合は、config/initializers/ に acts_as_taggable_on.rb を作成して、以下のように記述する。

ActsAsTaggableOn.delimiter = ' '

users show.html.erb も以下にしておく

<% @user.tag_list.each do |tag| %>
  <span class="badge badge-primary mr-1 p-2"><%= tag %></span>
<% end %>

もしくは

<% @post.tag_list.each do |tag| %>
  <span style="background-color: #e9e9e9; border-radius: 5px;"><%= tag %></span>
<% end %>

application.controllerにも以下をついか

devise_parameter_sanitizer.permit(:account_update, keys:[:tag_list])

追加情報
当たり前ですが、色んなメソッドが用意されている

find_related_skills　　同じタグに関連するタスクが表示される
taggings_count　メソッドではないですが、該当のタグの使用回数が表示されている
tag_counts　全てのタグデータを取得できる
などなど.....他にもまだありました。

使い方等はリファレンスを参照してください。

同じ名前で登録したタグの場合は、同じIDになるようになっている
例：Railsと別々のタスクで登録しても同じidになる

参考URL
https://qiita.com/ddgg7755/items/e1caa8b73d118822a0a2
https://qiita.com/daigou26/items/e67e61bbec338329ffac
https://qiita.com/kazuhj/items/31d3b1751d9c957b789f

Tag-itを使いたい場合

# Gemfile
gem "jquery-ui-rails"

bundle install

以下をvendor/assetsに追加

https://github.com/aehlke/tag-it


curl https://raw.githubusercontent.com/aehlke/tag-it/master/js/tag-it.js -o vendor/assets/javascripts/tag-it.js

curl https://raw.githubusercontent.com/aehlke/tag-it/master/css/jquery.tagit.css -o vendor/assets/stylesheets/jquery.tagit.css

curl https://raw.githubusercontent.com/aehlke/tag-it/master/css/tagit.ui-zendesk.css -o vendor/assets/stylesheets/tagit.ui-zendesk.css

application.js

//= require jquery
//= require rails-ujs
//= require jquery-ui
//= require tag-it
//= require activestorage
//= require turbolinks
//= require_tree .

app/assets/stylesheets/application.css
*= require_tree .
*= require jquery-ui
*= require jquery.tagit
*= require tagit.ui-zendesk
*= require_self

おそらく必要

gem 'jquery-rails', '4.3.1'

edit.html

  <!-- #taggable　#tag-itにて追加 -->
  <div class="field",id: "user_tag_list>
    <%= f.label :リスト %>
    <%= f.text_field :tag_list, value: @user.tag_list.join(","), class:"form-control" %>
  </div>

<%= javascript_tag do %>
var myProject = {
  all_tag_list: <%= raw @all_tag_list %>
};
<% end %>

js

$(document).on 'ready page:load', ->
  $('#article_tag_list').tagit
    singleField: true,
    availableTags: myProject.all_tag_list

オートコンプリートとか以下参照
https://qiita.com/tyamagu2/items/75eeaa8ef208385aa341
http://rochefort.hatenablog.com/entry/2016/10/16/165139