そういやsinatraでもつくったことあったな
懐かしい(
環境
要件
せっかくだし前回同様にしてみる
- 画像を投稿できて一覧表示できるようにする
- 画像投稿には必ず「画像の題」が必要
- 一覧表示に負荷がかからないよう、各画像にサムネイルと縮小版の画像も自動生成
Starting
rails new gazo -TB
Gemfileに以下追記してbundle
gem "slim-rails" gem 'carrierwave' gem 'rmagick'
骨組みの作成
面倒だしscaffoldでいいや
rails g scaffold post title image
画像を管理するモデルも自動生成
rails g uploader image
ちゃんとrake db:migrate
すること
フォームの作成
つってもRailsたんがすでに作ってくれてるので画像うpする所だけtext_field
からfile_field
に変更
.field = f.label :image = f.file_field :image
これでもう画像投稿はできるようになった
画像を表示したい
= image_tag post.image
だけ
設定は基本的にapp/uploaders/image_uploader.rbに記述する
サムネイルとか縮小画像欲しい
resize_to_limit
縦横比を維持したままリサイズ。ただし元画像の解像度が指定したpxを下回る場合はそのまま
# 高さを最大 300px、横 を最大 200 pxに調整 process resize_to_limit: [300, 200]
resize_to_fill
指定解像度でくり抜きを行う
# 縦横100pxで中央から切り抜き # 第三引数は 'NorthWest', 'North', 'NorthEast', 'West', 'Center', 'East', 'SouthWest', 'South', 'SouthEast'のいずれか(デフォルトはCenter) process resize_to_fill: [100, 100, "Center"]
resize_to_fit
縦横比を維持したままリサイズ。ただし元画像の解像度が指定したpxを下回る場合はその解像度まで拡大される
# 高さを最大 300px、横 を最大 200 pxに調整 process resize_to_limit: [300, 200]
resize_and_pad
resize_to_limit
同様に縦横比を維持したままリサイズ。ただし足りなかった余白部分は塗りつぶされる。つまり必ず指定した解像度になる。
# 高さを最大 300px、横 を最大 200 pxに調整 # 第三引数で塗りつぶす色、第四引数で余白が発生した場合の画像の配置を指定 process resize_to_limit: [300, 200, "#ffffff", "Center"]
ランダムなファイル名が欲しい
下手に自作するより公式ドキュメントのコピペしたほうが早い
class PhotoUploader < CarrierWave::Uploader::Base def filename "#{secure_token(10)}.#{file.extension}" if original_filename.present? end protected def secure_token(length=16) var = :"@#{mounted_as}_secure_token" model.instance_variable_get(var) or model.instance_variable_set(var, SecureRandom.hex(length/2)) end end