개요

산열 표기 기능을 어떻게 실현하는지 총결하다.

인용하다

https://glodia.jp/blog/3936/
https://qiita.com/Naoki1126/items/4ea584a4c149d3ad5472
나는 이 두 문장의 정보를 조합하여 실현했다.
정말 감사합니다.

완료 이미지

이번에는 사진 투고 앱을 소재로 사진의 설명에 해시 라벨을 도입하는 방법을 설명한다.

사진 상세 화면의 설명에 링크가 있는 해시 라벨을 기재하고 클릭하면 해시 라벨의 페이지를 표시합니다.

개발 환경

macOS Catalina 10.15.7

ruby 2.6.5

Rails 6.0.3.4

설치 프로세스

다양한 모델 및 마이그레이션 파일 준비

모델에 해시 태그 저장 및 업데이트 작업

추가

라우팅 설정

보조 방법 만들기

컨트롤러에hashtag 동작 만들기

뷰 편집

이번 코드

코드는 필요한 부분 이외에 생략하여 기재한다.

1. 다양한 모델 및 마이그레이션 파일 준비

hashtag 모델 만들기

%rails g model hashtag

중간 테이블 만들기

%rails g model photo_hashtag_relation

마이그레이션 파일 편집

테이블의 열을 설정합니다.
create_hashtags.rb

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

create_photo_hashtag_relations.rb

class CreatePhotoHashtagRelations < ActiveRecord::Migration[6.0]
  def change
    create_table :photo_hashtag_relations do |t|
      t.references :photo, index: true, foreign_key: true
      t.references :hashtag, index: true, foreign_key: true
      t.timestamps
    end
  end
end

모델 편집

검증 및 연관을 설정합니다.
hashtag.rb

class Hashtag < ApplicationRecord
  validates :hashname, presence: true, length: { maximum:99}
  has_many :photo_hashtag_relations
  has_many :photos, through: :photo_hashtag_relations
end

photo_hashtag_relation.rb

class PhotoHashtagRelation < ApplicationRecord
  belongs_to :photo
  belongs_to :hashtag
  with_options presence: true do
    validates :photo_id
    validates :hashtag_id
  end
end

옮기다

%rails db:migrate

2. 모델에 해시 태그 저장 및 업데이트 작업 추가

포토 모델에 다음 코드를 추가합니다.
현재, 사진이 발표되고 편집될 때, 산열 표시는hashtags 테이블에 저장됩니다.
photo.rb

# 省略

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

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

end

라우팅 구성

포토스 컨트롤러에서hashtag 동작을 정의하고 get에 모든 해시 태그 페이지를 표시합니다.
URL 끝에 해시 태그가 표시됩니다.:name의 값을 보조 방법으로 설정합니다.
예를 들어 #거북이라는 꼬리표라면 URL
.../거북이
하계.
route.rb

get '/photo/hashtag/:name', to: "photos#hashtag"

보조 객체 작성 방법

photos_helper.rb에 다음 코드를 기재합니다.
photos_helper.rb 파일이 없으면 직접 만드십시오.
helper에 대해서는 https://www.sejuku.net/blog/28563 등을 참조하십시오.
이 보조 객체 방법을 사용하면 링크 해싱 태그가 있는 설명을 작성할 수 있습니다.
코드에서 해시 태그 이름을 포함하는 URL을 만들고 해시 태그를 클릭할 때 링크 대상으로 설정합니다.
해시태그 서명 전에 URL에 route가 있었어요.rb에 쓰인 URL입니다.
photos_helper.rb

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

컨트롤러에서hashtag 동작 만들기

라벨과 연결된 사진을 @photos 대입하여hashtag 보기에서 사용하고 표시합니다.
photos_controller.rb

  def hashtag
    @user = current_user
    @tag = Hashtag.find_by(hashname: params[:name])
    @photos = @tag.photos
  end

뷰 편집

방금 작성한 보조 방법render_with_hashtags을 기록함으로써 사진 상세 화면에 링크가 있는 산열 라벨에 대한 설명을 표시합니다.
show.html.erb

# 省略

<%= render_with_hashtags(@photo.caption) %>

해시 태그 화면에서hashtag 동작에 설정된 @photos 을 꺼내 해시 태그와 관련된 사진을 표시합니다.
hashtag.html.erb

<h2>ハッシュタグ #<%= @tag.hashname %></h2>
  <ul>
    <% @photos.each do |photo| %>
      <li>
        <%= link_to photo_path(photo.id) do %>
          <%= image_tag photo.image.variant(gravity: :center, resize:"640x640^", crop:"640x640+0+0"), if photo.image.attached? %>
        <% end %>
      </li>
    <% end %>
  </ul>

끝내다

이상은 이번에 진행된 해시태그 기능 설치 방법입니다.
뜻을 이해하지 못하는 코드가 많지만 천천히 이해했으면 좋겠어요.
초보자이기 때문에 오류가 있으면 m(__)m