Rails API + Reactで画像プレビュー機能を作る（Rails編）
この記事の目的
Rails APIとReactを使ったSPAアプリの画像プレビュー機能を解説していきたいと思います。
イメージはサムネの感じです。
画像プレビュー機能というのは、React側で実装するFormの中で画像ファイルを指定したら画面にその画像が表示されるというものです。
そして、投稿、画像アップロードするところまで解説したいと思います。
Rails APIとReactを使った画像アップロードも結構ややこしい部分があるのでわかりやすく解説したいと思います。
今回はRails API編です。ReactのFormから画像をアップロードするまでの実装を解説します。
開発環境
Ruby 2.6.6
Rails 6.1.4
開発手順
画像アップロードをするためのRails APIの開発手順は以下のようになります。
プロジェクト作成
任意のディレクトリ上でおなじみのrails newコマンドをapiモードで実行しましょう。
$ rails new api --apiモデル作成
画像をアップロードするためのモデルを作成していきましょう。
今回は画像だけでなく投稿という形でPostモデルを作成します。
$ rails g model Post content:text image:string マイグレーションファイルはこんな感じになります。
db/migrate/日付_create_posts.rb
class CreatePosts < ActiveRecord::Migration[6.1]
def change
create_table :posts do |t|
t.text :content
t.string :image
t.timestamps
end
end
endこのままテーブルを作成しましょう。
以下のコマンドを実行しないとテーブルが作成されないので忘れないようにしましょう。
$ rails db:migrateこれで、テーブルが作成されました。
db/schema.rb
ActiveRecord::Schema.define(version: 2022_01_02_160457) do
create_table "posts", force: :cascade do |t|
t.text "content"
t.string "image"
t.datetime "created_at", precision: 6, null: false
t.datetime "updated_at", precision: 6, null: false
end
endコントローラー作成
次にpostsコントローラーを作成して、APIコントローラーを作りましょう。
まずは以下のコマンドでコントローラーファイルを作成します。
$ rails g controller api/v1/posts 今回の目的は画像アップロードをして、画面に一覧表示することなのでcreateとindexのアクションのみ作ろうと思います。
以下のように記述していきましょう。
ここでは詳しくは解説しませんが、indexアクションで、投稿一覧を、createアクションでpostsテーブルのcontentカラムとimageカラムの投稿作成をAPI通信で設定しています。
app/controllers/api/v1/posts_controller.rb
class Api::V1::PostsController < ApplicationController
def index
posts = Post.all.order(created_at: :desc)
render json: posts
end
def create
post = Post.new(post_params)
if post.save
render json: post
else
render json: post.errors, status: 422
end
end
private
def post_params
params.require(:post).permit(:content, :image)
end
end ルーティング設定
作ったコントローラーを基にルーティング設定しましょう。
postsコントローラーのindexアクションとcreateアクションのみをresourcesで設定していきます。
config/routes.rb
Rails.application.routes.draw do
namespace :api do
namespace :v1 do
resources :posts, only: [:create, :index]
end
end
endAPI通信設定
次にAPI通信を設定してReactからの通信を可能にしましょう。
まずはGemfileにコメントで記述されているgem 'rack-cors'のコメントを外します。
このgemによってAPI通信設定のcors.rbを使うことができます。
Gemfile
gem 'rack-cors'$ bundle installこれでgemが追加できたので、cors.rbでAPI設定をしていきましょう。
config/initializers/cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins 'localhost:3000'
resource '*',
headers: :any,
methods: [:get, :post, :put, :patch, :delete, :options, :head]
end
endここでoriginsにlocalhost:3000を設定しているのはReactのポート番号を設定しています。
今回はReactの3000番のポート番号を設定して、localhost:3000からの通信を許可するのでこのように設定しています。
画像アップロード設定
Railsの設定の最後に画像アップロード設定をしましょう。
まずは、画像アップロードのためのgemを追加しましょう。
画像アップロードのためのgemは'carrierwave'なので以下のようにGemfileに設定して追加していきます。
Gemfile
gem 'carrierwave'$ bundle installこれで画像アップロードのgemが追加できたので、postsテーブルのimageカラムをuploaderに追加する設定をしていきます。
まずアップローダーの作成をします。
$ rails g uploader Image作成された「app/uploaders/image_uploader.rb」の中に画像アップロードの設定をしていきます。
app/uploaders/image_uploader.rb
class ImageUploader < CarrierWave::Uploader::Base
# 画像ファイルがRailsアプリに保存される
storage :file
def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
# 受け付け可能なファイルの拡張子を指定
def extension_allowlist
%w(jpg jpeg png)
end
end今回のこの設定では、画像をアップロードした時にRailsの「app/public/uploads」ディレクトリに画像が追加されるようになります。
最後にpostモデルのimageカラムにImageUploaderを設定します。
このアップローダー指定は、先程のコマンド生成された「app/uploaders/image_uploader.rb」の中のクラス名を指定しましょう。
今回はImageUploaderを指定していきます。
app/models/post.rb
class Post < ApplicationRecord
mount_uploader :image, ImageUploader
endこれでRails側の設定が終わりました。
今回の実装により、React側で画像を投稿することが可能になりました。
次回のReact編で、本題となる画像プレビュー機能と画像投稿を実装していきたいと思います。