Upgrade to Pro — share decks privately, control downloads, hide ads and more …

step-to-rails-ex-paperclip

ttwo32
January 09, 2017

 step-to-rails-ex-paperclip

study paperclip

ttwo32

January 09, 2017
Tweet

Other Decks in Technology

Transcript

  1. Paperclipってなに? • 有名なファイルアップロード⽤のgem。⼀応file attachment librariesとのことなので画像以外も添付できるはず。 • Github => https://github.com/thoughtbot/paperclip •

    8282 stars at Jan.6.2017 • 公式サイト? => https://thoughtbot.com/tools • Thoughtbot社(Factory_girlとか作った会社)なのでメンテは続きそ う。
  2. Requirements • Ruby and Rails • Ruby >= 2.1 •

    Rails >= 4.2 • imagemagick 画像処理(多分リサイズやサムネイル作成等)で必要。今回はテーマが画像な ので必須。 • File content_typeのチェックにfileコマンドの機能が必要。Unix系のOSなら特に考 慮する必要なさそう。Windows系はRubyinstallerのdevelopment-kitが必要。
  3. Installation • include rails gems gem "paperclip” bundle install •

    imagimagick • brew install imagemagick *sierraにしたせいかinstallに失敗したけどbrew updateして無事解決。
  4. Quickstart • railsプロジェクト作成。 • rails new picture • 適当にmodel作る。 •

    rails g scaffold user name:string password:string • avatarという名前でpaperclip⽤のカラムを作る。 • rails generate paperclip user avatar • paperclip⽤に以下の4カラムが追加される。 • avatar_file_name • avatar_file_size • avatar_content_type • avatar_updated_at
  5. Quickstart • model修正 class User < ActiveRecord::Base has_attached_file :avatar, styles:

    { medium: "300x300>", thumb: "100x100>" }, default_url: "/images/:style/missing.png" validates_attachment_content_type :avatar, content_type: /\Aimage\/.*\z/ end • _form.html.erbの適当な位置にfile_upload⽤のフィールドを追加 <div class="field"> <%= f.label :avatar %><br> <%= f.file_field :avatar %> </div>
  6. File upload execution • アップロードしたファイルは以下の場所に配置されている。⼀ つのファイルに対して縮⼩画像とサムネイル画像を同時に作る らしい。 public └── system

    └── users └── avatars └── 000 └── 000 └── 001 ├── medium │ └── example_image1.jpg ├── original │ └── example_image1.jpg └── thumb └── example_image1.jpg なお画像以外のファイルでも imagemagickの処理は通るみたいで 同様のフォルダ構成になる。
  7. validation • validationは3種類⽤意(size,content_type,必須)されている。 • validates_attachment_size • validates_attachment_presence • alidates_attachment_content_type •

    ʻvalidates_attachmentʼを使えば複数のチェックを1カラムに まとめて設定することが可能 validates_attachment :avatar, presence: true, content_type: { content_type: "image/jpeg" }, size: { in: 0..10.kilobytes }
  8. resizing • has_attached_fileのstyle optionで指定する class User < ActiveRecord::Base has_attached_file :avatar,

    styles: { medium: "300x300>", thumb: "100x100>" }, default_url: "/images/:style/missing.png" validates_attachment_content_type :avatar, content_type: /\Aimage\/.*\z/ end • view側でそれぞれのサイズを取得するのは下記の通り。 • <%= image_tag @user.photo.url %> • <%= image_tag @user.photo.url(:thumb) %> • <%= image_tag @user.photo.url(:medium) %>
  9. Prevent thumnail generation for invalid uploads. • ʼ before_post_processʼを指定すれば、paperclipの処理(サム ネイル作成処理等)の前に実⾏するチェックして処理を⽌める

    ことも可能。(指定しないとinvalidになってもサムネイル作成 処理が実⾏されるらしい) (ファイルサイズの制限をする時の例) before_post_process :check_file_size def check_file_size valid? errors[:image_file_size].blank? end
  10. 最後に • 導⼊から利⽤開始まで⾮常に簡単。触ったことのない⽅は是⾮⼀度 試して⾒てください。 • ここでは取り上げていませんが、File storageとしてS3をサポート しているみたいです。ちなみにHerokuもFile storageにはS3を推奨 してるっぽいです。

    https://devcenter.heroku.com/articles/paperclip-s3 • Imagemagick optionを使ってサムネイルの最適化もできるようなの で、使い⽅はかなり多岐に渡りそう。 https://github.com/thoughtbot/paperclip/wiki/Thumbnail- Generation#optimizing-thumbnails-for-the-web