instagram의 클론 앱 만들기②

소개

제목대로, 간이판 instagram의 앱을 만들어 갑니다.
아래의 공정으로 나누어 기사를 집필해 나가므로, 순서를 쫓아 읽어 주셨으면 합니다.

① 앱 만들기 ~ 로그인 기능 구현
② 사진 게시 기능 구현 　← 이마코코
③ 사용자 페이지 구현
④ 팔로우 기능 구현
⑤ 투고 삭제 기능 구현

Active Storage 배포

Active Storage란 무엇입니까?
파일 업로드를 위한 기능으로,
이것을 사용하면 양식으로 이미지 게시 기능 등을 쉽게 만들 수 있습니다.
※이하, 어플리케이션의 디렉토리로

터미널

rails active_storage:install

계속 photo 모델을 만듭니다.photo 는 user 에 묶여 있기 때문에 user:belongs_tocaption:text 라고 하는 것으로, text형의 컬럼도 작성

터미널

rails g model photo user:belongs_to caption:text

그리고

터미널

rails db:migrate

마지막으로 컨트롤러를 작성합니다.

터미널

rails g controller photos

아래 준비 완료입니다.

사진 게시 페이지에 대한 링크 만들기

먼저 라우팅을 설정합니다.

routes.rb

Rails.application.routes.draw do
  root 'homes#index'

  devise_for :users

  resources :photos # ←ここ
end

다음으로 홈 화면을 편집합니다.

app/views/homes/index.html.erb

<h3>home</h3>

<div>
  <%= link_to 'logout', destroy_user_session_path, method: :delete %>
</div>

<div>
  <%= link_to '写真投稿', new_photo_path %>
</div>

new_photo_path는 rails routes의 Prefix에서 확인


photos 모델에 new.html.erb 를 작성해, 확인용으로 아래와 같이 기술해 보겠습니다.

app/views/photos/new.html.erb

<h3>写真投稿</h3>

아래와 같이 홈 화면에서 사진 투고 페이지로 전환할 수 있으면 성공입니다.

컨트롤러 설정

rails g controller photos 로 작성한 컨트롤러에 기술해 갑니다.

photos_controller.rb

class PhotosController < ApplicationController
  before_action :authenticate_user!

  def new
    @photo = current_user.photos.new
  end

  def create
    @photo = current_user.photos.new(photo_params)

    if @photo.save
      redirect_to :root
    else
      render :new
    end
  end

  private

  def photo_params
    params.require(:photo).permit(:caption, :image)
  end
end

before_action :authenticate_user! 에서,
로그인한 사용자만 게시할 수 있도록 설정했습니다.
createアクション 에서 인수 (photo_params)private 아래에 (photo_params) 를 정의하고 있습니다.

또한 createアクション저장에 성공하면 홈 화면에,
실패하면 신규 투고 화면으로 돌아가도록 설정하고 있습니다.

새 게시 화면의 뷰 편집

그 전에, userモデル 와 photosモデル 의 어소시에이션을 확인합니다.
user와 photos는 일대다 관계이므로 다음과 같이 편집합니다.

user.rb

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

  has_many :photos # ←ここ
end

photo.rb

class Photo < ApplicationRecord
  belongs_to :user # ← rails g model photo時に記述済み

  has_one_attached :image # ←ここ
end

has_one_attached :カラム名 는 모델에 하나의 이미지를 연결할 때 사용합니다.
여러 이미지를 연결할 때는 has_many_attached :カラム名 입니다.

이번은 1개의 이미지이므로 has_one_attached 라고 하고 있습니다.
덧붙여서 one과 many로, 화상을 표시시킬 때의 기술의 방법이 다릅니다.

has_one_attached

<%= image_tag(@photo.image) %>

has_many_attached

<% images.count.times do |i| %>
  <%= image_tag(@photo.image[i]) %>
<% end %>

has_many_attached :カラム名 그렇다면,
image는 배열로 저장되므로 위와 같습니다.

전치가 길어졌습니다만, 신규 투고 화면의 view를 편집해 갑니다.

app/views/photos/new.html.erb

<h3>写真投稿</h3>

<%= form_with model: @photo, local: true do |f| %>
  <div>
    <%= f.file_field :image %>
  </div>
  <div>
    <%= f.text_area :caption %>
  </div>
  <%= f.submit %>
<% end %>

게시된 이미지를 홈 화면에 표시하도록 합니다.
※일단의 확인용이므로, 나중에 수정해 갑니다.

app/views/homes/index.html.erb

<h3>home</h3>

<div>
  <%= link_to 'logout', destroy_user_session_path, method: :delete %>
</div>

<div>
  <%= link_to '写真投稿', new_photo_path %>
</div>

<% current_user.photos.each do |photo| %>
  <div>
    <p><%= photo.caption %></p>
    <%= image_tag photo.image %>
  </div>

each 문으로 모든 게시물을 표시하도록하고 있습니다.

신규 투고 페이지에서 ファイル選択 , caption入力 , Create Photo아래와 같이 투고 할 수 있으면 우선은 형태가 되어 있을까 생각합니다.


이상입니다. 수고하셨습니다.

다음 → ③ 사용자 페이지 구현