11. 画像

各学生の顔写真を表示できるようにしよう。

モデルの各データに対して、ファイルをアップロードして添付することができる。

11.1. Active Storage の準備

Active Storage が使用するデータベースを作成する。

# rails active_storage:install
# rails db:migrate

アップロードしたファイルは、サーバのディスクに保存することもできるし、Amazon S3 などのクラウドサービスに保存することもできる。ここでは、デフォルトの config/storage.ymllocal という名前で書いてある設定を使う。

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>
  • アプリケーションディレクトリの中の storage というディレクトリに保存する。

config/environments/development.rb の中に config/storage.yml で書いた設定のどれを使うかを書く。デフォルトで既に local と書いてあるので、何もしなくてよい。

config.active_storage.service = :local

11.2. アプリケーションを変更する

11.2.1. モデル

各学生について写真は1枚だけとし、添付ファイルの名前を photo にする。

app/models/student.rb の中の Student クラスに次の行を書き加える。

has_one_attached :photo

11.2.2. 入力フォーム

学生のデータを入力するフォーム( app/views/students/_form.html.erb )に、写真をアップロードするためのフィールドを加える。

<div class="field">
  <%= form.label :photo %>
  <%= form.file_field :photo %>
</div>

11.2.3. コントローラ

フォームのパラメータで photo を受け取れるように student_params を修正。

def student_params
  params.require(:student).permit(:name, :faculty_id, :grade, :photo)
end

11.2.4. 画像の表示

学生の詳細ページ( app/views/students/_student.html.erb )で写真を表示する。

<p>
  <% if student.photo.attached? %>
    <%= image_tag url_for(student.photo), height: 100 %>
  <% else %>
    No Image
  <% end %>
</p>
  • 添付ファイルが存在しないと url_for がエラーになるので、 attached? メソッドでチェックしている。

11.3. 今日のまとめ

ここまでのソースコードはこちら