データベースを使ったアプリ作成 3 (Ruby on Rails の利用)

gem ライブラリを用いた機能拡張

今回は carrierwave を用いてファイルのアップロード機能を実装する．

準備

既存の books テーブルに string 型の picture カラムを増やす．

$ cd ~/my_web_app/book_app

$ rails g migration AddPictureToBooks picture:string
$ rails db:migrate

画像 upload 機能を持つライブラリ carrierwave gem を追加する． gem を追加する場合は Gemfile へ追記する． bundle install コマンドを実行すると，Gemfile に書かれた gem がインストールされる． 但し，本演習では gem は Debian パッケージを使っているので， /usr/bin/bundle2.7 を指定している．

$ vi Gemfile

  gem "carrierwave"    <-- この 1 行をファイル末尾に追加

$ sudo /usr/bin/bundle2.7 install

carrierwave を利用可能にするために，carrierwave が提供する rails g uploader Picture コマンドを実行して必要なファイルを作成する．

$ rails g uploader Picture

  create  app/uploaders/picture_uploader.rb 

モデルの変更

モデルから carrierwave を利用して画像を扱えるように編集する．

$ vi app/models/book.rb

  以下のように class 内に行を追加

  class Book < ApplicationRecord
    mount_uploader :picture, PictureUploader
  end

コントローラの変更

コントローラの Strong Parameter の部分に picture も追加する．

$ vi  app/controllers/books_controller.rb

   def book_params
     # params.require(:book).permit(:title, :author, :memo, :company)
       params.require(:book).permit(:title, :author, :memo, :company, :picture)
   end

ビューの修正

フォームのパーシャルファイルを変更し，pictureの欄を追加する．

$ vi app/views/books/_form.html.erb

  以下を適当な場所に追加

   <div>
      <%= form.label :picture, style: "display: block" %>
      <%= form.file_field :picture %>
   </div>

詳細表示画面を修正する．

$ vi app/views/books/_book.html.erb

  以下を適当な場所に追加

  <p>
     <strong>Picture:</strong>
     <%= image_tag(book.picture_url) if book.picture.present? %>
  </p>

動作確認

$ rails s -b 0.0.0.0