酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

acts-as-taggable-onでつくるタグクラウド&効率的なタグ管理【Rails4.2 X Ruby2.2】

Railsのサービスを作っていて「タグ付けをしたい」と「タグクラウドを作りたい」という場合に使えるGem『mbleigh/acts-as-taggable-on』を紹介します。「タグ付けやカテゴライズで構造化することはSEO的にもいいらしい」ので、もしチャンスがあればぜひトライしてみてください!

15/11/15 13:00 Rails 4.2 x Ruby 2.2で動作確認

mbleigh/acts-as-taggable-on | GitHub


Gemの導入・設定

Gemfileに以下を追加して、bundle install

1
2
# Manage Tag
gem 'acts-as-taggable-on'

続いてタグ管理用のテーブルのマイグレーションファイルを生成し、migrate。

1
2
rails g acts_as_taggable_on:migration
rake db:migrate

タグクラウドをViewに表示するまでの流れ

続いて実際にタグクラウドをViewに表示させてみます。

まずapp/model/user.rbtagsタグを設置します。

1
2
3
class User < ActiveRecord::Base
  acts_as_taggable # acts_as_taggable_on :tags のエイリアス
end

たったこれだけで、Userモデルはこんな使い方ができるようになります。

1
2
3
4
5
6
7
@user = User.new(:name => "Bobby")
@user.tag_list = "awesome, slick, hefty" # this should be familiar
@user.save

@user.tags # => [<Tag name:"awesome">,<Tag name:"slick">,<Tag name:"hefty">]

@user.tags_count # => [<Tag name:"awesome" count=2>,<Tag name:"slick">,<Tag name:"hefty" count=2>]

続いてapp/controller/users_controller.rbに以下の記述を追加して、tagを取得。

1
2
3
4
5
6
class UsersController < ApplicationController
  def tag_cloud
    # order('count DESC')でカウントの多い順にタグを並べています
    @tags = User.tag_counts_on(:tags).order('count DESC')
  end
end

タグクラウドの表示のために、app/helpers/user_helper.rbに次の記述を追加します。

1
2
3
module Userhelper
  include ActsAsTaggableOn::TagsHelper
end

erbの場合は以下を追記。

1
2
3
<% tag_cloud(@tags, %w(css1 css2 css3 css4)) do |tag, css_class| %>
  <%= link_to tag.name, { :action => :tag, :name => tag.name }, :class => css_class %>
<% end %>

hamlの場合はこちら。

1
2
- tag_cloud(@tags, %w(css1 css2 css3 css4)) do |tag, css_class|
  = link_to tag.name, { action: :tag, tag_name: tag.name }, class: css_class

続いて、cssファイルにはこちら。(任意で変更してください)

1
2
3
4
.css1 { font-size: 1.0em; }
.css2 { font-size: 1.2em; }
.css3 { font-size: 1.4em; }
.css4 { font-size: 1.6em; }

最後にconfig/routes.rbを修正。

1
2
3
4
5
resources :users do
  collection do
    get 'tag/:tag_name'
  end
end

出来上がったタグクラウドはこちら。

fpu_tmp_1355785967.3979_16f667

GitHubには更に詳しい情報が載っているのでよかったら覗いてみてください。

mbleigh/acts-as-taggable-on | GitHub

所感

Rails 4 x Ruby 2.1環境で久々にトライしてみましたが、本当に簡単に導入できました!

[補足] 現在登録済のタグの一覧が欲しい場合

現在登録済のタグの一覧が欲しい場合はこちら。

1
ActsAsTaggableOn::Tag.all

Special Thanks

変更来歴

12/12/18 08:00 新規作成
13/12/31 21:30 Rails 4 x Ruby 2.1で動作確認
15/11/15 13:00 Rails 4.2 x Ruby 2.2.3で動作確認

おすすめの書籍