読者です 読者をやめる 読者になる 読者になる

ちーくんのブログ

プログラミング備忘録

carrierwaveの便利な機能の使い方(part2)

こんにちは。本日は前回の続きでcarrierwaveの便利な機能(part2)です。

今回もcarrierwaveでよく使ういくつかの機能を紹介していきたいと思います。


※前回のpart1はこちら
chi-kun.hatenablog.com

バージョン

Ruby '2.2.1'
Rails '4.2.1'


バリデーション時に画像を表示

画像を投稿した際、もしも他のバリデーションに引っかかった場合(名前とか内容が空だったり)でcarrierwaveはデフォルトでは画像のキャッシュが残りません。

なのでバリデーションに引っかかった時に再度投稿フォームが表示されますが、投稿したはずの画像はフォーム上に表示されません。

これだとユーザーがちょっと戸惑ってしまうと思うのですが、carrierwaveでは簡単に画像のキャッシュの設定ができます。


まずcontrollerのストロングパラメーターの箇所でcacheを受け取るように追加します。

# posts_controller.rb

  private

  def post_params
    params.require(:post).permit(:picture, :title, :content, :picture_cache)
  end

そして該当のフォームにimage_tagとhidden_fieldを書きます。ここにバリデーションに引っかかった場合に画像が表示されます。

# _form.html.erb

  <div class="field">
    <!-- ここから追加 -->
    <%= image_tag @post.picture.url(:thumb) if @post.picture? %>
    <!-- ここまで追加 -->    
    <%= f.label :picture %>
    <%= f.file_field :picture %>
    <!-- ここから追加 -->
    <%= f.hidden_field :picture_cache %>
    <!-- ここまで追加 -->
  </div>

では実際に投稿してみましょう。
今回はあえてバリデーションに引っかかってみます。

f:id:chi_kun:20160516154851p:plain

すると一度投稿した画像がきちんと表示されているとおもいます。

拡張子の種類を指定する

投稿した画像の拡張子を保存するときに指定した拡張子にすることができます。
やり方は簡単でアップローダーファイルに記載します。

# picture_uploader.rb

  process :convert => 'jpg'

この場合は投稿した画像が保存された時に "jpg" に拡張子を変えてくれます。

画像が横回転するのを防ぐ

「画像が横回転する?どういうこと?」と思った方がいると思うのですが実際に例を見てみましょう。

f:id:chi_kun:20160516160752p:plain

これは画像を普通に投稿して成功した場合です。なぜか画像が横向きになってしまいます。投稿時だけでなく編集時にも同じ現象が発生します。

これを解消するためにアップローダーファイルに全ての画像を縦回転(横向きではなく)になるように編集を加えます。

# picture_uploader.rb
  <!-- 画像の横回転を防ぐ -->
  process :fix_rotate
  def fix_rotate
    manipulate! do |img|
      img = img.auto_orient
      img = yield(img) if block_given?
      img
    end
  end

これで投稿時や編集時に画像が横になることがなく、きちんと縦になります。

それでは実際に投稿して見ましょう。

f:id:chi_kun:20160516162011p:plain

きちんと画像が縦向きになりましたね!
(もちろん上記と同じ画像です。)



本日は以上です。