rails 独学して軽くにちゃんまとめつくる

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

rails独学して軽く2ちゃんまとめビルダーをつくる。

rails tutorial読破→2chまとめビルダー作成→アメリカでインターンシップ→恋活SNSを作成・・・・・→音で感触をつくり感触をあつめたライブラリをつくる

railsに画像アップロード機能をつける

画像アップロードとその表示、画像の検証の2工程に分かれている。

 

画像アップロードでは、アップローダーを作成し、マイグレーションでpictureカラムを付け加える。モデルにアップロード機能を追加した旨を記述し、コントローラーのストロングパラメーターで画像を要求し、フォームで画像アップロードボタンを加え、一覧画面に画像を表示させる。

 

 

画像の検証は_micropost_form.htmlでサイズと拡張子の検証、micropost.rbでサイズの検証をしている。ビューではクライアント側、モデルではサーバー側での制御と考える。

 

 

 

gem 'carrierwave', '0.10.0'
gem 'mini_magick', '3.8.0'
gem 'fog', '1.36.0'

 を追加して bundle install する

 

 

 これで画像をリサイズするImageMagic というプログラムをダウンロードしておく。

 

 

アップローダーを作成

ターミナル

$ rails generate uploader Picture

$ sudo apt-get update

$ sudo apt-get install imagemagick --fix-missing

アップローダーの設定

app/uploaders/picture_uploader.rb

class PictureUploader < CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick
#最大サイズは400にする process resize_to_limit: [400, 400] #本番環境のための設定 if Rails.env.production? storage :fog else storage :file end # アップロードファイルの保存先ディレクトリは上書き可能 # 下記はデフォルトの保存先 def store_dir "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}" end # アップロード可能な拡張子のリスト def extension_white_list %w(jpg jpeg gif png) end end

 

マイグレーション

ターミナル

$rails generate migration add_picture_to_microposts picture:string

$  rake db:migrate

 

 USerモデルを編集

models/user.rb

usersテーブルに追加したカラムの名前をmount_uploaderに指定する。

  mount_uploader :picture, PictureUploader

 ここで一旦Railsサーバーを再起動させる必要があります

 

 

アップローダーボタンを追加する

app/views/shared/_micropost_form.html.erb

 

<%= form_for(@micropost, html: { multipart: true }) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
  <div class="field">
    <%= f.text_area :content, placeholder: "Compose new micropost..." %>
  </div>
  <%= f.submit "Post", class: "btn btn-primary" %>
  <span class="picture">
    <%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %>
  </span>
<% end %>

 

このとき、html: { multipart: true } は、画像をアップロードする際に必要なオプションである。<script>内部ではクライアント側での画像サイズの制御をしている。サーバー側ではモデルでバリデーションを使って制御する。2つから制御して安全が保たれているのである。

 

ストロングパラメーターで :picture を追加する

app/controllers/microposts_controller.rb

 

 private
    def micropost_params
      params.require(:micropost).permit(:content, :picture)
    end

 

 

アップロードした画像を表示する

app/views/microposts/_micropost.html.erb

 

    <%= image_tag micropost.picture.url if micropost.picture? %>

 

 

モデルでのサイズの検証

app/models/micropost.rb

 

validate :picture_size

private
    # アップロード画像のサイズを検証する
    def picture_size
      if picture.size > 5.megabytes
        errors.add(:picture, "should be less than 5MB")
      end
    end

 自分でバリデーションを作成したときはvalidats ではなく validate にする。

 

ビューでのサイズと拡張子の検証

app/views/shared/_micropost_form.html.erb

  <%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %>

 と下のほうに

 

<script type="text/javascript">
  $('#micropost_picture').bind('change', function() {
    var size_in_megabytes = this.files[0].size/1024/1024;
    if (size_in_megabytes > 5) {
      alert('Maximum file size is 5MB. Please choose a smaller file.');
    }
  });
</script>