CarrierWave
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
&tag(CarrierWave);
*目次 [#m00f5025]
#contents
*関連ページ [#xb0b63f5]
*参考情報 [#tc3a51e3]
-[[carrierwaveuploader/carrierwave:https://github.com/car...
-[[Rails 超お手軽な画像アップローダー CarrierWave の使い...
*デモプロジェクトの作成2022年版 [#i2ddbd9e]
**Gemfile [#r4f528c7]
-以下を追加し、bundle updateを実行。記事執筆時carrierwave...
#pre{{
gem 'carrierwave'
gem 'rmagick'
}}
**準備 [#p5aff167]
-アップローダーの生成
#pre{{
$ bundle exec rails g uploader image
}}
-マイグレーションファイル
#pre{{
$ bundle exec rails g migration add_image_to_books image:...
#=> db/migrate/xxxxx_add_image_to_users.rbが生成される。
}}
-マイグレーション実行。Booksテーブルにimageカラムが追加さ...
#pre{{
$ bundle exec rake db:migrate
}}
-Bookモデルにアップローダーをマウント。
#pre{{
class Book < ApplicationRecord
validates :title, :presence => true
# 下記を追加
mount_uploader :image, ImageUploader
end
}}
-controllerを変更。
#pre{{
def book_params
params.require(:book).permit(:title, :author, :summ...
end
}}
** Uploaderの修正 [#u0b82161]
-app/uploaders/image_uploader.rbを編集し、画像サイズや、...
** Viewの編集 [#zc0b238d]
-編集画面。_form.html.erb
#pre{{
<%= form_with(model: book) do |form| %>
(中略)
<div class="field">
<%= form.label :image %>
<%= form.file_field :image %>
</div>
(中略)
<% end %>
}}
-表示画面。show.html.erb。@book.image.urlでアクセス。
#pre{{
<% if @book.image? %>
<%= image_tag @book.image.url %>
<% else %>
画像がありません
<% end %>
}}
-縮小画像を使用したい場合uploaderをカスタムする必要あり。
*デモプロジェクトの作成 [#i2ddbd9e]
**Gemfile [#r4f528c7]
-以下を追加し、bundle updateを実行
#pre{{
gem 'carrierwave'
gem 'rmagick'
}}
**準備 [#p5aff167]
-アップローダーの生成
#pre{{
$ bundle exec rails g uploader image
}}
-マイグレーションファイル
#pre{{
$ bundle exec rails g migration add_image_to_books image:...
#=> db/migrate/xxxxx_add_image_to_users.rbが生成される。
}}
-マイグレーション実行。Booksテーブルにimageカラムが追加さ...
#pre{{
$ bundle exec rake db:migrate
}}
-Bookモデルにアップローダーをマウント。
#pre{{
class Book < ActiveRecord::Base
validates :title, :presence => true
# 下記を追加
mount_uploader :image, ImageUploader
end
}}
-controllerを変更。
#pre{{
def book_params
params.require(:book).permit(:title, :author, :summ...
end
}}
** Uploaderの修正 [#u0b82161]
-app/uploaders/image_uploader.rbを編集し、画像サイズや、...
** Viewの編集 [#zc0b238d]
-編集画面。
#pre{{
<%= form_for(@book) do |f| %>
(...省略...)
<%= f.label :image %>
<%= f.file_field :image %>
(...省略...)
<% end %>
}}
-表示画面。@book.image.<アップローダーで付けた縮小画像の...
#pre{{
<% if @book.image? %>
<%= image_tag @book.image.s.url %>
<% else %>
画像がありません
<% end %>
}}
*Tips [#lbb680c6]
**ちょっとだけ異なるUploaderを作りたい。 [#pa89bc25]
-例えばimage1とimage2でベースとなるファイル名だけ変えたい...
-Uploaderからカラム名などにアクセスできるのでそれを使うの...
--book.rb
#pre{{
class Book < ActiveRecord::Base
validates :title, :presence => true
# 下記を追加
mount_uploader :image, ImageUploader
mount_uploader :image2, ImageUploader
end
}}
--image_uploader.rb。マウントされたカラムによってファイル...
#pre{{
def filename
# "image1.jpg" or "image2.jpg"
"#{mounted_as}.jpg"
end
}}
**縮小すると画質が劣化する [#k3c45421]
-[[How to: Specify the image quality · carrierwaveup...
#pre{{
module CarrierWave
module RMagick
def quality(percentage)
manipulate! do |img|
img.write(current_path){ self.quality = percentag...
img = yield(img) if block_given?
img
end
end
# reduce image noise and reduce detail levels
#
# process :blur => [0, 8]
#
def blur(radius, sigma)
manipulate! do |img|
img = img.blur_image(radius, sigma)
img = yield(img) if block_given?
img
end
end
def unsharp_mask(radius, sigma, amount, threshold)
manipulate! do |img|
img = img.unsharp_mask(radius, sigma, amount, thr...
img = yield(img) if block_given?
img
end
end
end
end
}}
-ImageUploaderで指定する。ImageMagicの縮小オプションだと...
#pre{{
class ImageUploader < CarrierWave::Uploader::Base
version :m do
process :resize_to_limit => [560, 560]
process :quality => 90
process :unsharp_mask => [2, 1.4, 0.5, 0]
end
end
}}
*トラブルシューティング [#pd356661]
**undefined method `quality' [#q05cebb4]
-qualityは標準のメソッドではなくconfig/initializers/carri...
-2022/10/22(土)rmagick5で上記エラーが発生するように。とり...
終了行:
&tag(CarrierWave);
*目次 [#m00f5025]
#contents
*関連ページ [#xb0b63f5]
*参考情報 [#tc3a51e3]
-[[carrierwaveuploader/carrierwave:https://github.com/car...
-[[Rails 超お手軽な画像アップローダー CarrierWave の使い...
*デモプロジェクトの作成2022年版 [#i2ddbd9e]
**Gemfile [#r4f528c7]
-以下を追加し、bundle updateを実行。記事執筆時carrierwave...
#pre{{
gem 'carrierwave'
gem 'rmagick'
}}
**準備 [#p5aff167]
-アップローダーの生成
#pre{{
$ bundle exec rails g uploader image
}}
-マイグレーションファイル
#pre{{
$ bundle exec rails g migration add_image_to_books image:...
#=> db/migrate/xxxxx_add_image_to_users.rbが生成される。
}}
-マイグレーション実行。Booksテーブルにimageカラムが追加さ...
#pre{{
$ bundle exec rake db:migrate
}}
-Bookモデルにアップローダーをマウント。
#pre{{
class Book < ApplicationRecord
validates :title, :presence => true
# 下記を追加
mount_uploader :image, ImageUploader
end
}}
-controllerを変更。
#pre{{
def book_params
params.require(:book).permit(:title, :author, :summ...
end
}}
** Uploaderの修正 [#u0b82161]
-app/uploaders/image_uploader.rbを編集し、画像サイズや、...
** Viewの編集 [#zc0b238d]
-編集画面。_form.html.erb
#pre{{
<%= form_with(model: book) do |form| %>
(中略)
<div class="field">
<%= form.label :image %>
<%= form.file_field :image %>
</div>
(中略)
<% end %>
}}
-表示画面。show.html.erb。@book.image.urlでアクセス。
#pre{{
<% if @book.image? %>
<%= image_tag @book.image.url %>
<% else %>
画像がありません
<% end %>
}}
-縮小画像を使用したい場合uploaderをカスタムする必要あり。
*デモプロジェクトの作成 [#i2ddbd9e]
**Gemfile [#r4f528c7]
-以下を追加し、bundle updateを実行
#pre{{
gem 'carrierwave'
gem 'rmagick'
}}
**準備 [#p5aff167]
-アップローダーの生成
#pre{{
$ bundle exec rails g uploader image
}}
-マイグレーションファイル
#pre{{
$ bundle exec rails g migration add_image_to_books image:...
#=> db/migrate/xxxxx_add_image_to_users.rbが生成される。
}}
-マイグレーション実行。Booksテーブルにimageカラムが追加さ...
#pre{{
$ bundle exec rake db:migrate
}}
-Bookモデルにアップローダーをマウント。
#pre{{
class Book < ActiveRecord::Base
validates :title, :presence => true
# 下記を追加
mount_uploader :image, ImageUploader
end
}}
-controllerを変更。
#pre{{
def book_params
params.require(:book).permit(:title, :author, :summ...
end
}}
** Uploaderの修正 [#u0b82161]
-app/uploaders/image_uploader.rbを編集し、画像サイズや、...
** Viewの編集 [#zc0b238d]
-編集画面。
#pre{{
<%= form_for(@book) do |f| %>
(...省略...)
<%= f.label :image %>
<%= f.file_field :image %>
(...省略...)
<% end %>
}}
-表示画面。@book.image.<アップローダーで付けた縮小画像の...
#pre{{
<% if @book.image? %>
<%= image_tag @book.image.s.url %>
<% else %>
画像がありません
<% end %>
}}
*Tips [#lbb680c6]
**ちょっとだけ異なるUploaderを作りたい。 [#pa89bc25]
-例えばimage1とimage2でベースとなるファイル名だけ変えたい...
-Uploaderからカラム名などにアクセスできるのでそれを使うの...
--book.rb
#pre{{
class Book < ActiveRecord::Base
validates :title, :presence => true
# 下記を追加
mount_uploader :image, ImageUploader
mount_uploader :image2, ImageUploader
end
}}
--image_uploader.rb。マウントされたカラムによってファイル...
#pre{{
def filename
# "image1.jpg" or "image2.jpg"
"#{mounted_as}.jpg"
end
}}
**縮小すると画質が劣化する [#k3c45421]
-[[How to: Specify the image quality · carrierwaveup...
#pre{{
module CarrierWave
module RMagick
def quality(percentage)
manipulate! do |img|
img.write(current_path){ self.quality = percentag...
img = yield(img) if block_given?
img
end
end
# reduce image noise and reduce detail levels
#
# process :blur => [0, 8]
#
def blur(radius, sigma)
manipulate! do |img|
img = img.blur_image(radius, sigma)
img = yield(img) if block_given?
img
end
end
def unsharp_mask(radius, sigma, amount, threshold)
manipulate! do |img|
img = img.unsharp_mask(radius, sigma, amount, thr...
img = yield(img) if block_given?
img
end
end
end
end
}}
-ImageUploaderで指定する。ImageMagicの縮小オプションだと...
#pre{{
class ImageUploader < CarrierWave::Uploader::Base
version :m do
process :resize_to_limit => [560, 560]
process :quality => 90
process :unsharp_mask => [2, 1.4, 0.5, 0]
end
end
}}
*トラブルシューティング [#pd356661]
**undefined method `quality' [#q05cebb4]
-qualityは標準のメソッドではなくconfig/initializers/carri...
-2022/10/22(土)rmagick5で上記エラーが発生するように。とり...
ページ名: