Ruby on Rails gem "CarrierWave"で画像アップロード機能実装

参考サイト
Rails で画像のアップロード機能を実装する - 30歳からのプログラミング
上記サイトのほぼコピペ。

Gem "CarrierWave"のインストール

[Gemfile]

gem 'carrierwave'

として、$ bundle install

$ rails generation uploader image

で"/app/uploaders/image_uploader.rb"にアップローダが生成される．

Modelの作成

Postモデルとし、name, imageのカラムを作成

$ rails generate model Post name:string image:string
$ rails db:migrate

imageカラムを画像取り扱い用カラムとして設定
[/app/models/post.rb]

class Post < ApplicationRecord
    mount_uploader :image, ImageUploader
end

コントローラと画像投稿フォームの設定

ルーティングを以下のように設定．
[/config/routes.rb]

Rails.application.routes.draw do
    get '/posts', to: 'posts#show'
    post '/posts/create', to: 'posts#create'
end

コントローラの作成

rails generate controller Posts

[app/controllers/posts_controller.rb]

class PostsController < ApplicationController
    def show
        @posts = Post.all
    end

    def create
        @post = Post.new(permit_params)
        @post.save!
        redirect_to action: :show
    end

    private
        def permit_params
            params.require(:post).permit(:name, :image)
        end
end

"private関数のpermit_params"は許可していない項目については変更されないようにするために設定する．

"show.html.erb"を作成してフォームを作成
[/app/view/show.html.erb]

<% @posts.each do |post| %>
  <p>
    <%= post.name %><br>
    <%= image_tag post.image.url %>
  </p>
<% end %>
<hr>
<%= form_for :post, url: 'posts/create'  do |f| %>
  <p><%=f.label "投稿者" %><br><%= f.text_field :name, placeholder: 'ハンドルネーム' %></p>
  <p><%=f.label "画像をアップロード" %><br><%= f.file_field :image %></p>
  <p><%= f.submit value: '投稿' %></p>
<% end %>

データの削除

データの削除は以下でできるらしい。
参考サイト
CarrierWaveでアップロードしているファイルを削除する - Qiita

今度試してみよう。

Ruby on Rails gem "acts_as_list" を使用した項目の並び替え実装

gem "acts_as_list"を使用して一覧表示などをしている項目の並び替えを実装します。各項目ごとにに”↑”、”↓”を表示させてそれぞれ1つ上、１つ下に移動するようにします。
ダミーデータ生成にはgem "gimei" を使用します。

参考サイト
【Rails5】acts_as_listでデータの並び替え機能を実装 - Railsからはじめるプログラミング日記
acts_as_listの使い方 – ABC Blog

gemの準備

scaffoldでUserを生成．

$ rails generate scaffold User name:string address:string

Gemfileに以下を追加しbundle install．

gem 'acts_as_list'
gem 'gimei'

positionカラムの追加

"acts_as_list"はpositionカラムを使用することが決まっているので以下で"position"を追加．

$ rails generate migration AddPositionToUser position:integer
$ rails db:migrate

コンソールで確認するとカラムは以下．"position"カラムが追加されている．

>> User.column_names
=> ["id", "name", "address", "created_at", "updated_at", "position"]

ダミーデータの生成

今回はgem "gimei"を使用してダミーデータを用意します。

以下サイトを参考にさせていただきました。
【Rails】gem 'gimei' で日本語のダミーデータを生成する | RemoNote

[db/seeds.rb]を以下のように編集

50.times do |pos|
  gimei = Gimei.new
  
  User.create(
    name: gimei.name.kanji,
    address: gimei.address.prefecture.kanji,
    position: pos
  )
end

"rails db:seed" を実行し反映させるとダミーデータが生成される。

対象modelの編集

[app/models/user.rb]Userモデルに以下の一文を追加

class User < ApplicationRecord
    acts_as_list #追加
end

actionの設定

[/app/contollers/user_controller.rb] indexアクションの編集およびmove_higher, move_lowerの新規追加を行う．

  def index
    @users = User.all.order(:position) #positionカラムに従いソート
  end
  
  def move_higher
    User.find(params[:id]).move_higher
    redirect_to :action => :index
  end
 
  def move_lower
    User.find(params[:id]).move_lower
    redirect_to :action => :index    
  end

ルーティングの設定

追加したaction達のルーティング設定
[/Book/config/routes.rb]

Rails.application.routes.draw do
  resources :users do
    member do
      get :move_higher
      get :move_lower
    end
  end
end

viewの編集

最後に上下移動用のリンクをビューに設定して完了．
[/app/views/users/index.html.erb]

  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= link_to "↑", {:controller => :users, :action => :move_higher, :id => user} %></td>
        <td><%= link_to "↓", {:controller => :users, :action => :move_lower, :id => user} %></td>  
        <td><%= user.name %></td>
        <td><%= user.address %></td>
        <td><%= link_to 'Show', user %></td>
        <td><%= link_to 'Edit', edit_user_path(user) %></td>
        <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>

最終画面

こんな感じで上下の矢印をクリックすると移動．

before move

↓を押すと

after move