今回はrailsで作ったappで
画像をアップロードできるように頑張りたいなと。
画像って便利じゃないですか。
最近知ったんですけど百聞は一見に如かずって言葉があるらしいんですよ。
正直百聞する前に諦めてしまうのであれなんですけど。
なんか頭の悪さが露見している感が否めないので頑張っていきます。
画像をアップロードしなくてもサービス上で画像を見れるようにすることができないわけではないです
例えばgoogle driveを使って撮った写真を一旦そっちに保存して
リンクを取得してそのリンクをサイトに張るようにするとか。
最初は超初期のサービスならこれでもいいかと思ったんですが
そんなクソめんどくさいんだかなんだかのサービス誰が使うんだよ
ゴミだろ。誰だよこんなアイデア考えた奴。◯んで詫びろよ。って言われた気持ちに勝手になったので
(◯は自主規制です。)
今回は1度も使ったことのないCarrierWaveというなんと呼んでいいのか日本語すらままならない僕には読めないgemを使ってみます。
1.とりあえず怖くていきなり実装するのはあれなので新しいappを作ってみる
rails new try_carrierWave -d mysql
#ファイルができたら続けて以下を(DBを作ります)
rake db:create
2.viewとかを作っていくんだけど実装を試すだけのappなので
rails g scaffold photo description:text
#上の奴ができたらできたら
rake db:migrate
description:textの部分は「：」の前がカラム名でtextはデータ型。
なので、この辺は任意で変えていただいて。
だから、なくてもいいし。
ここまではgemを使うために土台を用意しただけ。
ここからgemをインストールしていきます。
gem 'carrierwave'
追記しまして
bundle install
さっき一気にまとめて作ったphotosテーブルにimgのurlを保存するカラムを追加します
rails g migration AddImageToPhotos image:string
#できたら
rake db:migrate
3.アップローダーを作る(アップロード機能を作る)
rails g uploader image
imageのところはなんでもいいけどURLを保存するカラム名にしとくと良い
app/uploader.rbってファイルができていればOK
コードを追記
mount_uploader :image, ImageUploader
4.viewを作る
viewに写真をuploadするためのアレをつけます
<%= f.file_field :image %>
form_tagの場合は
<%= form_tag('/questions', method: :post, :multipart => true) do %>
上記のように「:multipart => true」が必須。
今回はapp/views/photos/_form.html.erbを指定していますが、実際に機能を実装するフォームに書いてください。
今回は一気に土台を作ったのでコントローラーのストロングパラメーターも変更する必要があります
private
# Use callbacks to share common setup or constraints between actions.
def set_photo
@photo = Photo.find(params[:id])
end
# Never trust parameters from the scary internet, only allow the white list through.
def photo_params
params.require(:photo).permit(:description, :image)
end
photo_paramsのpermitに「:image」を追加します
<td><%= image_tag photo.image.url %></td>
これでアップロードした画像をindex.html.erbで出力できるようになった。
これでサイズとか細かいことは置いておいて自分の持っている画像をuploadできて、かつindexで表示できるようになった。
次に、画像をuploadするときに画像のサイズを変更できるようにします。
gem 'rmagick'
を追記
bundle install
include CarrierWave::RMagick
process resize_to_limit: [1200, 900]
version :thumb do
process resize_to_limit: [480, 360]
end
これらを追記します
process resize_to_limit: [1200, 900]
ここでは画像のサイズを1200×900より大きくならない設定をしています。
基本的におそらく大きい方に合うようになっていて、画像の比率自体はおそらく変わらずで、例えば1500×900の画像を上げたとすると1200×720になります。
version :thumb do
process resize_to_limit: [480, 360]
end
下のこの部分では別のサイズ設定をしていて、ページによって画像のサイズを変えたい場合はこのように書くことで別の画像サイズを使うことができるようになります。
view側の変更は「version」を別に設定7ない場合は特に変更は必要なし。
「version」を別に設定している場合は、そのversionを使っている部分のviewのコードを書き換える必要があります
例えばindexの表示でversion:thumbを使う場合
<%= image_tag photo.image.thumb.url %>
thumbを追記することでそのversionの画像サイズを利用することができます。