##はじめに
タイトルの通り、簡易版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
下準備完了です。
##写真投稿ページへのリンクを作成
まず、ルーティングの設定を行います。
Rails.application.routes.draw do
root 'homes#index'
devise_for :users
resources :photos # ←ここ
end
次にホーム画面を編集していきます。
<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を作成し、確認用に下記のように記述してみます。
<h3>写真投稿</h3>
下記のように、ホーム画面から写真投稿のページに遷移できていれば成功です。
##コントローラの設定
rails g controller photosで作成したコントローラに記述していきます。
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は１対多の関係なので、以下のように編集します。
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
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で、画像を表示させる際の記述の仕方が異なります。
<%= image_tag(@photo.image) %>
<% images.count.times do |i| %>
<%= image_tag(@photo.image[i]) %>
<% end %>
has_many_attached :カラム名だと、
imageは配列として格納されるので上記のようになります。
前置きが長くなりましたが、新規投稿画面のviewを編集していきます。
<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 %>
投稿された画像をホーム画面に表示させるようにします。
※とりあえずの確認用なので、後々修正していきます。
<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)