development > Ruby On Rails > acts-as-taggable-onとtag-itでRailsアプリの投稿ページにタグ付け機能を追加する
Ruby On Rails

acts-as-taggable-onとtag-itでRailsアプリの投稿ページにタグ付け機能を追加する

Large?1464704723

Railsでレコードにタグを付ける場合には、

というgemが使えます。このgemは

@user.tag_list = "awesome, slick, hefty"
@user.save
@user.reload
@user.tags
=> [#</p><actsastaggableon::tag id:="" 1,="" name:="" "awesome",="" taggings_count:="" 1="">, #<actsastaggableon::tag id:="" 2,="" name:="" "slick",="" taggings_count:="" 1="">, #<actsastaggableon::tag id:="" 3,="" name:="" "hefty",="" taggings_count:="" 1="">]

こんな感じで動作します。これを投稿画面のUIを通じて行うためにはviewに少し手を入れる必要がありますが、そんな時に便利なのが

です。これを使うと、

こんな感じでタグが入力できるようになります。

インストールする

まずはacts-as-taggable-onをインストールします。

gem 'acts-as-taggable-on'

をGemfileに追記して、

$ bundle install

して、

$ bundle exec rake acts_as_taggable_on_engine:install:migrations

して、

$ bundle exec rake db:migrate

します。

つぎに、tag-itです。GitHubから必要なjsとcssをダウンロードしてきて、vendor/assets配下などに配置します。

また、UIに必要なgemも追加します。

gem 'jquery-ui-rails'
gem 'gon'

を追記してbundle installします。

最後に、javascriptとstylesheetから必要なファイルを読み込みます。

# application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require tag-it
//= require_tree .

# stylesheet
/*
 *= require_tree .
 *= require jquery.tagit
 *= require tagit.ui-zendesk
 *= require_self
*/

これで準備は完了です。

modelの編集

タグ付けを行うモデルに、

class Article < ActiveRecord::Base
  acts_as_taggable
end

を追加してください。

viewファイルの編集

例えばarticles#newやarticles#editに対応する_form.html.hamlであれば、

= form_for @article do |f|
  (省略)
  %label タグ
  %ul#article-tags

とviewに記載しておき、application.jsに

$( document ).ready(function(){
  var i, len, ref, results, tag;
  $('#article-tags').tagit({
    fieldName: 'article[tag_list]',
    singleField: true,
    availableTags: gon.available_tags
  });

  if (gon.article_tags != null) {
    ref = gon.article_tags;
    results = [];
    for (i = 0, len = ref.length; i < len; i++) {
      tag = ref[i];
      results.push($('#article-tags').tagit('createTag', tag));
    }
    return results;
  }
})

と書いておきます。このjavascriptにより、#article-tagsのついたviewの要素がarticle[tag_list]の名前でpostされるようになります。また、既にタグ付けされている記事についてはgonにより予め入力フォームに表示されるようになります。

このgonが動くように、application.html.hamlのhead部分に

= include_gon

と追加しておいてください。

controllerの編集

最後にコントローラーに変更を加えます。まずはstrong paramsにtag_listを追加します。

# Never trust parameters from the scary internet, only allow the white list through.
def article_params
  params.require(:article).permit(:tag_list)
end

次に、gonでタグデータを扱うために

def set_article_tags_to_gon
  gon.article_tags = @article.tag_list
end

def set_available_tags_to_gon
  gon.available_tags = Article.tags_on(:tags).pluck(:name)
end

を追記し、

before_action :set_article_tags_to_gon, only: [:edit]
before_action :set_available_tags_to_gon, only: [:new, :edit]

before_actionにセットします。これで、タグの保存ができるようになりました。

viewで表示する

保存されたタグをviewで表示するには、

- @article.tag_list.each do |tag|
  %li= tag

のようにすればOKです。

Small?1464704723

この記事が気に入ったらいいね!して
9bar の最新記事を受け取りましょう

Thumb?1464704723

9bar の最新記事をお届けします!

新着記事