Railsで作ったインスタもどきのキャプションにハッシュタグを実装

概要

Rails5でインスタもどきを作ってみたものの肝心の検索とハッシュタグが無いという未完成なものとなっていた。始業前の空き時間を使ってハッシュタグの実装をしたのでコードを貼ってみる。

既存（Tutorial）に加えて準備する必要があるもの

・hashtag用のテーブル
・hashtagとmicropostの中間テーブル

完成した姿

・#記号を判断して次のスペースまでの文字列をハッシュタグとして抽出しDBに保存
・ハイパーリンク化されており、クリックするとハッシュタグのページになる

テーブル準備

ハッシュタグモデルの作成

$ rails g model Hashtag hashname:string

マイグレーションファイル編集

/db/migrate/...create_hashtags.rb

class CreateHashtags < ActiveRecord::Migration[5.2]
  def change
    create_table :hashtags do |t|
      t.string :hashname
      t.timestamps
    end
    add_index :hashtags, :hashname, unique: true
  end
end

中間テーブルの作成

$rails g migration CreateMicropostHashtags micropost_id:references　hashtag_id:references

マイグレーションファイル編集

/db/migrate/...create_micropost_hashtags.rb

class CreateMicropostHashtags < ActiveRecord::Migration[5.2]
  def change
    create_table :hashtags_microposts, id: false  do |t|
      t.references :micropost_id, index: true, foreign_key: true
      t.references :hashtag_id, index: true, foreign_key: true
    end
  end
end

マイグレーション

$rails db:migrate

モデルの編集

マイクロポストモデルに下記を追加

/app/models/micropost.rb

  has_and_belongs_to_many :hashtags

  .
  .
  .

  #DBへのコミット直前に実施する
  after_create do
    micropost = Micropost.find_by(id: self.id)
    hashtags  = self.content.scan(/[#＃][\w\p{Han}ぁ-ヶｦ-ﾟー]+/)
    hashtags.uniq.map do |hashtag|
      #ハッシュタグは先頭の'#'を外した上で保存
      tag = Hashtag.find_or_create_by(hashname: hashtag.downcase.delete('#'))
      micropost.hashtags << tag
    end
  end

  before_update do 
    micropost = Micropost.find_by(id: self.id)
    micropost.hashtags.clear
    hashtags = self.content.scan(/[#＃][\w\p{Han}ぁ-ヶｦ-ﾟー]+/)
    hashtags.uniq.map do |hashtag|
      tag = Hashtag.find_or_create_by(hashname: hashtag.downcase.delete('#'))
      micropost.hashtags << tag
    end
  end

中間テーブルモデル

/app/models/hashtag_micropost.rb

class MicropostHashtag < ApplicationRecord
  belongs_to :micropost
  belongs_to :Hashtag
  validates  :micropost_id, presence: true
  validates  :Hashtag_id,   presence: true
end

ハッシュタグモデル

/app/models/hashtag.rb

class Hashtag < ApplicationRecord
  validates :hashname, presence: true, length: {maximum:99}
  has_and_belongs_to_many :microposts
end

マイクロポストコントローラーにハッシュタグのアクションを追加

/app/controllers/microposts_controller.rb

  def hashtag
    @user = current_user
    @tag = Hashtag.find_by(hashname: params[:name])
    @microposts = @tag.microposts.build
    @micropost  = @tag.microposts.page(params[:page])
    @comment    = Comment.new
    @comments   = @microposts.comments
  end

ここは少しビューの仕様が違うので人によっては不要になる宣言があるかもしれません

マイクロポストヘルパーの編集

/app/helpers/microposts_helper.rb

module MicropostsHelper
  def render_with_hashtags(content)
    content.gsub(/[#＃][\w\p{Han}ぁ-ヶｦ-ﾟー]+/){|word| link_to word, "/post/hashtag/#{word.delete("#")}"}.html_safe
  end 
end

せっかく全角にも対応しようとしたものの、deleteメソッドで複数文字を指定するやり方が分からず断念。。。

ルーティング

/config/routes.rb

get '/post/hashtag/:name', to: "microposts#hashtag"

ビュー

キャプション（ハッシュタグがユーザーによって書かれるところ）

/app/views/microposts/_micropost.html.erb

<%= render_with_hashtags(micropost.content) %>

ページ遷移後のハッシュタグページ

/app/views/microposts/hashtag.html.erb

<% provide(:title, @tag.hashname) %>
<div class="row">
  <div class="col-md-9">
    <div class="block1_hash">
       <%= image_tag("hashtag.png") %>
         <div class="block2_hash">
            <div class="name_hash">
               <%= @tag.hashname %>
            </div>
         <div class="edit_hash">
            <%= render 'users/follow_form' %>
         </div>
        <div class="fllw_hash">
          <%= render 'shared/user_info_default' %>
          <span style="margin-right:15px;"></span>
          <%= render 'shared/stats_default' %>
        </div>
       </div>
     </div>
  </div>
</div>

 <div class="row">
   <div class="posted_content">
     <div class="col-md-8">
       <div class="picture_hash">
         <%= render @micropost %>
       </div><!-- .picture -->
     </div>
   </div>
</div>

基本的にはユーザーページと同じデザインです。

参考VTR

Ruby on Rails - adding hashtags

今月の社内プレゼンのネタができてよかったです。。。
この調子でがんばります。
編集箇所やアドバイス等ありましたらお気軽にお声がけくださいm(_ _)m