Help us understand the problem. What is going on with this article?

基礎Ruby on Rails #23 Chapter13 複数画像のアップロード/順番の入れ替え

More than 1 year has passed since last update.

基礎Ruby on Rails #22 Chapter13 ファイルのアップロード
基礎Ruby on Rails #24 Chapter13 クラウドスレレージサービス(Amazon S3)の利用

ブログ画像のアップロード

EntryImageクラスの作成

  • Active Storageにはモデルと複数個のファイルを結びつけるためのクラスメソッドhas_many_attachedが用意されているが、ファイルの一部を差し替えたり、順番を入れ替えたりできないという制約がある。
  • そこで、個々のブログ写真を添付するためのモデルEntryImageを作成する。(1つのEntryレコードに、複数のEntryImageレコードがぶら下がる)
$ bin/rails g model entry_image
      invoke  active_record
      create    db/migrate/20181020120055_create_entry_images.rb
      create    app/models/entry_image.rb
  • 作成されたマイグレーションスクリプトを以下のように3項目追加する。
db/migrate/20181020120055_create_entry_images.rb
class CreateEntryImages < ActiveRecord::Migration[5.2]
  def change
    create_table :entry_images do |t|
      t.references :entry     # 外部キー
      t.string :alt_text, null: false, default: ""    # 代替テキスト
      t.integer :position     # 表示位置

      t.timestamps
    end
  end
end
  • マイグレーションを実行する。
$ bin/rails db:migrate
== 20181020120055 CreateEntryImages: migrating ================================
-- create_table(:entry_images)
   -> 0.0021s
== 20181020120055 CreateEntryImages: migrated (0.0024s) =======================
  • EntryImagesと、プロフィール画像が登録できるMemberモデルと比較すると以下の部分が異なる。
    • 削除のチェックボックスとその項目がない→レコードごと削除するので不要
    • 空禁止のバリデーションがある(createのみ)→プロフィール画像は空も可で、対してこちらは不要なときはレコードごと削除するため空で登録することがない。createのみなのは代替テキストのみ変更する場合があるため。
    • 削除処理をコントローラーのdestroyに書き、こちらに書かないため保存するのがシンプル。
  • EntryImageモデルを以下のように書き換える。
app/models/entry_image.rb
class EntryImage < ApplicationRecord
  belongs_to :entry
  has_one_attached :data

  attribute :new_data

  validates :new_data, presence: { on: create }

  validate if: :new_data do
    if new_data.respond_to?(:content_type)
      unless new_data.content_type.in?(ALLOWED_CONTENT_TYPES)
        errors.add(:new_data, :invalid_image_type)
      end
    else
      errors.add(:new_data, :invalid)
    end
  end

  before_save do
    self.data = new_data if new_data
  end
end
  • Entryモデルに、一対多であるhas_manyを追加する。
  • entry.imagesでブログ記事の写真一覧が取得できる。
app/models/entry.rb(一部)
  has_many :images, class_name: "EntryImage"

画像のアップロードと削除

ルーティングの設定

  • ブログ画像は1つのブログに結び付けられるので、ネストしたルーティングとして登録する。
  • 以下のように、controllerオプションを用いると、リソース名とコントローラ名の間を自由に関連付けることができる。
config/routes.rb(一部)
  resources :entries do
    resources :images, controller: "entry_images"
  end
アクション パス HTTPメソッド パスを返すメソッド
index /entries/123/images GET entry_images_path(entry)
show /entries/123/images/1 GET entry_image_path(entry,image)
new /entries/123/images/2/new GET new_entry_image_path(entry)
edit /entries/123/images/2/edit GET edit_entry_image_path(entry,image)
create /entries/123/images POST entry_images_path(entry)
update /entries/123/images/3 PATCH entry_image_path(entry,image)
destroy /entries/123/images/4 DELETE entry_image_path(entry,image)

コントローラの実装

  • コントローラとビューを生成する。
$ bin/rails g controller entry_images index new edit
      create  app/controllers/entry_images_controller.rb
      invoke  erb
      create    app/views/entry_images
      create    app/views/entry_images/index.html.erb
      create    app/views/entry_images/new.html.erb
      create    app/views/entry_images/edit.html.erb
  • EntryImagesControllerのソースを以下のように書き換える。
class EntryImagesController < ApplicationController
  before_action :login_required

  before_action do
    @entry = current_member.entries.find(params[:entry_id])
  end

  def index
    @images = @entry.images.order(:id)
  end

  def show
    # 編集フォームにリダイレクト
    redirect_to action: "edit"
  end

  def new
    @image = @entry.images.build
  end

  def edit
    @image = @entry.images.find(params[:id])
  end

  def create
    @image = @entry.images.build(image_params)
    if @image.save
      redirect_to [@entry, :images], notice: "画像を作成しました。"
    else
      render "new"
    end
  end

  def update
    @image = @entry.images.find(params[:id])
    @image.assign_attributes(image_params)
    if @image.save
      redirect_to [@entry, :images], notice: "画像を更新しました。"
    else
      render "edit"
    end
  end

  def destroy
    @image = @entry.images.find(params[:id])
    @image.destroy
    redirect_to [@entry, :images], notice: "画像を削除しました。"
  end

  # ストロングパラメータ
  private def image_params
    params.require(:image).permit(
        :new_data,
        :alt_text
    )
  end
end

ブログ記事に添付された画像の一覧

  • フッターに、画像のへのリンク<%= menu_link_to "画像", [entry, :images] %>を追加する。
app/views/entries/_footer.html.erb(一部)
    <% if current_member == entry.author %>
      <%= menu_link_to "編集", [:edit, entry] %>
      <%= menu_link_to "画像", [entry, :images] %>
      <%= menu_link_to "削除", entry, method: :delete, data: { confirm: "本当に削除しますか?" } %>
    <% end %>
  • 画像一覧画面を追加する。
    • <%= menu_link_to "画像の追加", [:new, @entry, :image] %>の第2引数は、シンボルとモデルオブジェクトを要素とする配列を指定する。<%= menu_link_to "画像の追加", new_entry_image_path(@entry, image) %>と書くこともできる。
app/views/entry_images/index.html.erb
<% @page_title = "ブログ記事の画像" %>
<h1><%= @page_title %></h1>
<h2><%= @entry.title %></h2>

<ul class="toolbar">
  <%= menu_link_to "ブログ記事に戻る", @entry %>
  <%= menu_link_to "画像の追加", [:new, @entry, :image] %>
</ul>

<% if @images.present? %>
  <table class="list">
    <thead>
      <tr>
        <th>番号</th>
        <th>画像</th>
        <th>代替テキスト</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <% @images.each_with_index do |image, index| %>
        <tr>
          <td><%= index + 1 %></td>
          <td>
            <%= image_tag image.data.variant(resize: "100x>"),
              alt: image.alt_text %>
          </td>
          <td>
            <%= image.alt_text %>
          </td>
          <td>
            <div>
              <%= link_to "編集", edit_entry_image_path(@entry, image) %> |
              <%= link_to "削除", entry_image_path(@entry, image),
                method: :delete, data: { confirm: "本当に削除しますか?" } %>
            </div>
          </td>
        </tr>
      <% end %>
    </tbody>
  </table>
<% else %>
  <p>画像がありません。</p>
<% end %>

画像追加と画像編集

  • 画像追加画面
app/views/entry_images/new.html.erb
<% @page_title = "ブログ記事への画像追加" %>
<h1><%= @page_title %></h1>
<h2><%= @entry.title %></h2>

<% url = entry_images_path(@entry, @image) %>
<%= form_for @image, as: "image", url: url do |form| %>
  <%= render "form", form: form %>
  <div><%= form.submit %></div>
<% end %>
  • 画像編集画面
app/views/entry_images/edit.html.erb
<% @page_title = "ブログ記事の画像編集" %>
<h1><%= @page_title %></h1>
<h2><%= @entry.title %></h2>

<% url = entry_image_path(@entry, @image) %>
<%= form_for @image, as: "image", url: url do |form| %>
  <%= render "form", form: form %>
  <div><%= form.submit %></div>
<% end %>

  • 部分テンプレート
app/views/entry_images/_form.html.erb
<%= render "shared/errors", obj: @image %>

<table class="attr">
  <tr>
    <th><%= form.label :new_data %></th>
    <td><%= form.file_field :new_data %></td>
  </tr>
  <tr>
    <th><%= form.label :alt_text %></th>
    <td><%= form.text_field :alt_text, size: 40 %></td>
  </tr>
</table>
  • 部分テンプレートで使用する日本語ラベルとロケールテキストに追加する。
config/locales/ja.yml(一部)
ja:
  activerecord:
    attributes:
#(省略)
      entry_image:
        new_data: 画像ファイル
        alt_text: 代替テキスト
  • ブログ画面から画像リンクをクリックして、画像の追加をクリックすると、画像追加画面が表示された。

image.png

  • 画像一覧に登録した画像が表示された。

image.png

画像の表示

  • ブログ記事に画像を表示する。1枚目は本文の前に、2枚目以降は本文の下に表示する。
  • views/entries/showを修正する。
app/views/entries/show.html.erb(一部)
<% @page_title = @entry.title + " - " + @entry.author.name + "さんのブログ" %>
<h1><%= @entry.author.name %>さんのブログ</h1>

<h2><%= @entry.title %></h2>

<%= the_first_image(@entry) %>
<%= simple_format(@entry.body) %>
<%= other_images(@entry) %>
<%= render "footer", entry: @entry %>

- 上記で使用したヘルパーメソッドthe_first_imageother_imagesを実装する。

app/helpers/entries_helper.rb
module EntriesHelper
  # ブログのトップイメージ
  def the_first_image(entry)
    # 0番目のイメージを取得する
    image = entry.images.order(:id)[0]

    render_entry_image(image) if image
  end

  # ブログの2番目以降のイメージ
  def other_images(entry)
    buffer = "".html_safe
    # 2番目以降すべての画像を取得する。空の配列の場合はnilを返すため、ぼっち演算子&.が必要。
    entry.images.order(:id)[1..-1]&.each do |image|
      buffer << render_entry_image(image)
    end

    buffer
  end

  private def render_entry_image(image)
    content_tag(:div) do
      # 横が530ピクセルよりも大きい場合は、530ピクセルに画像を縮小する。
      image_tag image.data.variant(resize: "530x>"),
                alt: image.alt_text,
                style: "display: block; margin: 0 auto 15px"
    end
  end
end
  • ブログ画面に複数の画像が表示された。

image.png

表示位置の入れ替え

準備作業

Gemパッケージacts_as_listの導入

  • モデルオブジェクトの並び順を維持したり、順番を入れ替えたりするにはGemパッケージgem 'acts_as_list'を利用する。
Gemfile
gem 'acts_as_list'
$ bundle install

モデルクラスにacts_as_listを導入

  • acts_as_list scope: :entryを追加。belongs_toに指定されているシンボル:entryを追加する。
app/models/entry_image.rb(一部)
class EntryImage < ApplicationRecord
  belongs_to :entry
  has_one_attached :data
  acts_as_list scope: :entry  # 追加
  • ブログ記事の添付画像を全て削除するため、データベースの再構築を行う。
$ bin/rails db:rebuild

ルーティングの設定

  • do patch :move_higher, :move_lower, on: :member endを追加する。
config/routes.rb(一部)
  resources :entries do
    resources :images, controller: "entry_images" do
      patch :move_higher, :move_lower, on: :member
    end
  end
  • この2つのアクションはいずれもPATCHメソッドを呼び出す。これにより、次の2つのURLパターンが認識される。
    • /entries/123/images/99/move_higher
    • /entries/123/images/99/move_lower
  • これらのパターンに沿ったURLパスを生成するメソッド呼び出しは、次のようなものになる。
    • move_higher_entry_image(entry, image)
    • move_lower_entry_image(entry, image)

機能の実装

表示位置を入れ替えるアクションの実装

  • 並び順を制御するために、order(:id)order(:position)にする。
app/controllers/entry_images_controller.rb(一部)
  def index
    @images = @entry.images.order(:position)
  end
  • 表示位置を上下するアクションmove_highermove_lowerを実装する。
  • redirect_backメソッドは、アクションの呼び出し元のURLパスにリダイレクションを行う。
    • 呼び出し元はHTTPヘッダーに書かれいているリファラで判定する。
    • fallback_locationオプションはリファラに書かれていない場合のリダイレクション先を指定する。このオプションは省略できない。
app/controllers/entry_images_controller.rb(一部)
  def move_higher
    @image = @entry.images.find(params[:id])
    @image.move_higher
    redirect_back fallback_location: [@entry, :images]
  end

  def move_lower
    @image = @entry.images.find(params[:id])
    @image.move_lower
    redirect_back fallback_location: [@entry, :images]
  end

ヘルパーメソッドの変更

  • 並び順を制御するために、order(:id)となっている部分をorder(:position)にする。
app/helpers/entries_helper.rb(一部)
    image = entry.images.order(:position)[0]

    entry.images.order(:position)[1..-1]&.each do |image|

HTMLテンプレートの変更

  • 以下のように、削除リンクの横に、「上へ」「下へ」のリンクを追加する。
app/views/entry_images/index.html.erb(一部)
            <div>
              <%= link_to_if index > 0, "上へ",
                move_higher_entry_image_path(@entry, image),
                method: :patch %> |
              <%= link_to_if index < @images.size - 1, "下へ",
                move_lower_entry_image_path(@entry, image),
                method: :patch %>
            </div>
  • 一番上の、「下へ」リンクをクリックすると

image.png

  • 順番が変わることを確認した。

image.png

まとめ

  • 複数の画像を登録するには、has_manyのクラスであるentries_imageを追加する。
  • acts_as_listというGemパッケージを使うと、リストの並び替えを変更したりできる。

参考
改訂4版 基礎 Ruby on Rails (IMPRESS KISO SERIES)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした