はじめに

タイトルの通り、簡易版instagramのアプリを作っていきます。
下記の工程に分けて記事を執筆していきますので、順を追って読んでいただけたらなと思います。

①アプリ作成〜ログイン機能の実装
②写真投稿機能の実装　←イマココ
③[ユーザーページの実装]
(https://qiita.com/maca12vel/items/c716702b02f977303011)
④[フォロー機能の実装]
(https://qiita.com/maca12vel/items/2760d33f3683fac91de5)
⑤投稿削除機能の実装

Active Storageの導入

Active Storageとは...
ファイルアップロードを行うための機能で、
これを使えばフォームで画像の投稿機能などが簡単に作れます。
※以下、アプリケーションのディレクトリで

ターミナル

rails active_storage:install

続けてphotoモデルを作成します。
photoはuserに紐づいているのでuser:belongs_to
caption: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アクションで
保存に成功すればホーム画面に、
失敗すれば新規投稿画面に戻る（留まる）よう設定しています。

新規投稿画面のviewを編集

その前に、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 :カラム名はモデルに1つの画像を紐づけるときに使います。
複数の画像を紐づけるときは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をクリックで、
以下のように投稿できていればとりあえずはカタチになっているかと思います。

以上です。お疲れ様でした。

次へ → ③[ユーザーページの実装]
(https://qiita.com/maca12vel/items/c716702b02f977303011)