空飛ぶITコンサルタント

中小企業診断士が「AI」「パン」「補助金」について語ります

そろそろ開発26 CarrierwaveとAmazon S3でお手軽画像アップローダー

1.写真と記事のコンテンツを作りたいと。

そういう事、たまにありますよね。

というわけど、railsで画像を外部StorageにUploadする為に、

paperclipとCarrierwave、迷いましたが、後者で行くことにしました。

 

2.やりたいこと

・画像を、メインのコンテンツに1つ紐付ける事を目標とする

手順:

3.環境準備(gemとか)

4.Carrierwave用の画像Uploader Classを作成する。

5.Parkというモデルに、1つ画像用のカラム(avatar)を追加する。

6.Uploader Classの編集

7.Parkモデルの編集

 

3.環境準備

3-1.まずimagemagicのインストール

$ brew install imagemagick

Homebrewを使えばお手軽、devian使っていて、いろいろ依存関係でやられていた15年前が懐かしい程に。

3-2.gemを準備

gem 'carrierwave'

gem 'rmagick'

gem 'fog'

 

4.Carrierwave用の画像Uploader Classを作成する。

rails g uploader image

create  app/uploaders/image_uploader.rbと言われ、終了。

 

5.Parkというモデルに、1つ画像用のカラム(avatar)を追加する。

$ rails g migration add_avatar_to_parkbscs avatar:string

 

6.Uploader Classの編集

# encoding: utf-8

class ImageUploader < CarrierWave::Uploader::Base

  # Include RMagick or MiniMagick support:

  include CarrierWave::RMagick

  # include CarrierWave::MiniMagick

 

  # Choose what kind of storage to use for this uploader:

  storage :file

  # storage :fog

 

  # Override the directory where uploaded files will be stored.

  # This is a sensible default for uploaders that are meant to be mounted:

  def store_dir

    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"

  end 

  # Process files as they are uploaded:

  # process :scale => [200, 300]

  process :resize_to_limit => [400, 400]

  #

 

  # Create different versions of your uploaded files:

  version :thumb do

     process :scale => [100, 100]

  end

 

  # Add a white list of extensions which are allowed to be uploaded.

  # For images you might use something like this:

  # def extension_white_list

  #   %w(jpg jpeg gif png)

  # end

 

  # Override the filename of the uploaded files:

  # Avoid using model.id or version_name here, see uploader/store.rb for details.

  def filename

    "something.jpg" if original_filename

  end

 

end

7.Park Viewの編集

7-1.画像をUploadする_formに以下を追加

<div class="field">

    <%= f.label :avatar %><br />

    <% if @parkbsc.avatar? %>

      <%= image_tag @parkbsc.avatar.thumb %>

      <%= f.hidden_field :avatar_cache if @parkbsc.avatar_cache %>

    <label><%= f.check_box :remove_avatar %>Remove avatar</label>

    <% end %>

    <%= f.file_field :avatar %><br />

  </div>

7-2.indexの行先頭に、画像のサムネイルを追加するタグを追加。

<td><%= image_tag park.avatar_url(:thumb).to_s if park.avatar? %></td>

 

f:id:yoshidaagri:20140223163631p:plain

あとはネタだなぁ。