Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
step-to-rails-ex-paperclip
Search
ttwo32
January 09, 2017
Technology
83
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
step-to-rails-ex-paperclip
study paperclip
ttwo32
January 09, 2017
Other Decks in Technology
See All in Technology
Podは生きているのにGoだけが落ちる:GOGCとGOMEMLIMITで追うInvisible OOM Killの謎
tkc66buzz
1
710
【技術的負債conf】事業成長に伴う技術的負債の説明責任とAIによるモニタリング、認知的負債について
i35_267
2
940
アプリログインとWeb認証基盤をつなぐ ASWebAuthenticationSession 作法
shimastripe
1
310
AI時代、データエンジニアが一番おもろい
genshun9
0
550
AI 駆動 Terraform 開発/SRE_BizReach_MIXI_2
visional_engineering_and_design
5
2.1k
Screen Lens - 今見てる画面を翻訳する
komagata
0
280
AI時代の「技術的負債」の変質ー概念の終焉と再解釈、エージェントと共に向かう先
nwiizo
0
1.9k
2026-09-10 【Snowflake World Tour Tokyo 2026】dbt Core と Snowflake で実現する多層的なデータガバナンス / Multi-Layered Data Governance Powered by dbt Core and Snowflake
civitaspo
0
390
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
12k
事業課題から技術的負債に向き合う
sansantech
PRO
2
1.3k
品質と信頼性を地続きにする
grimoh
0
230
安心して変更できるWebフロントエンドの作り方
pirosikick
4
2.2k
Featured
See All Featured
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.4k
WCS-LA-2024
lcolladotor
0
830
Art, The Web, and Tiny UX
lynnandtonic
304
22k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
74
42k
Agile that works and the tools we love
rasmusluckow
331
22k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.6k
Building the Perfect Custom Keyboard
takai
2
870
Writing Fast Ruby
sferik
630
63k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8.3k
Transcript
Paperclip @ttwo32 Step-to-Rails-Expert.rb Jan.31th 2016
⾃⼰紹介 • IT系コンサル会社で社内SEやってます。 • ずっとフロントエンド中⼼にやってきた感じです。(Java歴が ⻑くてPHPは少しかじった程度) • Ruby歴は3年くらいです。(結構経ったな・・・) • holidaysっていうgemをメンテしてます。よかったら使ってく
ださいJ
Paperclipってなに? • 有名なファイルアップロード⽤のgem。⼀応file attachment librariesとのことなので画像以外も添付できるはず。 • Github => https://github.com/thoughtbot/paperclip •
8282 stars at Jan.6.2017 • 公式サイト? => https://thoughtbot.com/tools • Thoughtbot社(Factory_girlとか作った会社)なのでメンテは続きそ う。
Requirements • Ruby and Rails • Ruby >= 2.1 •
Rails >= 4.2 • imagemagick 画像処理(多分リサイズやサムネイル作成等)で必要。今回はテーマが画像な ので必須。 • File content_typeのチェックにfileコマンドの機能が必要。Unix系のOSなら特に考 慮する必要なさそう。Windows系はRubyinstallerのdevelopment-kitが必要。
Installation • include rails gems gem "paperclip” bundle install •
imagimagick • brew install imagemagick *sierraにしたせいかinstallに失敗したけどbrew updateして無事解決。
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
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>
File upload execution • アップロードしたファイルは以下の場所に配置されている。⼀ つのファイルに対して縮⼩画像とサムネイル画像を同時に作る らしい。 public └── system
└── users └── avatars └── 000 └── 000 └── 001 ├── medium │ └── example_image1.jpg ├── original │ └── example_image1.jpg └── thumb └── example_image1.jpg なお画像以外のファイルでも imagemagickの処理は通るみたいで 同様のフォルダ構成になる。
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 }
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) %>
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
Hashing • ファイル名にハッシュ値を使うことができる。 defaultではハッシュ 値を使わないので、URLにファイル名がそのまま表⽰される。 <実装> • initializerに以下のファイルを置いてサーバ再起動すればOK. # config/initializers/paperclip_defaults.rb
Paperclip::Attachment.default_options.update({ url: "/system/:class/:attachment/:id_partition/:style/:hash.:extension", hash_secret: Rails.application.secrets.secret_key_base })
最後に • 導⼊から利⽤開始まで⾮常に簡単。触ったことのない⽅は是⾮⼀度 試して⾒てください。 • ここでは取り上げていませんが、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
参考 • https://github.com/thoughtbot/paperclip/wiki • http://qiita.com/kakipo/items/4e70428e46f60c74ea63 • http://ruby- rails.hatenadiary.com/entry/20140716/1405443484