Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
step-to-rails-ex-paperclip
Search
ttwo32
January 09, 2017
Technology
80
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
Android の公式 Skill / Android skills
yanzm
0
150
非エンジニアがClaudeと挑んだ「1ヶ月間プロダクト30本ノック」
askokc
0
600
2026 TECHFRESH 畢業分享會 - AI-Native 重塑軟體工程與虛擬講師
line_developers_tw
PRO
0
1.1k
就職⽀援サービスにおけるキャリアアドバイザーのシフトスケジューリング
recruitengineers
PRO
1
150
GitHub Copilot 最新アップデート – 「一歩先」の実践活用術
moulongzhang
4
1.3k
「エンジニア進化論」2028年の開発完全自動化、エンジニアはどう進化するか
cyberagentdevelopers
PRO
6
5.3k
RAG を使わないという選択肢
tatsutaka
1
250
SONiC Scale-Up Working Group から探る Scale-UpやUltraEthernet機能の実装方法
ebiken
PRO
2
360
日本 Fintech 未来予測レポート 2027〜2028年(オリジナル版)
8maki
0
2.3k
【セミナー資料】Claude Code をセキュアに使うための考え方と設定の勘どころ / Claude Code Webinar 20260616
masahirokawahara
2
380
AIエージェントが名古屋の猛暑からあなたを守る
happysamurai294
0
130
なぜ Platform Engineering の土台に Kubernetes を選ぶのか
r4ynode
2
650
Featured
See All Featured
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
62
54k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.5k
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
170
Why Our Code Smells
bkeepers
PRO
340
58k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.3k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
[SF Ruby Conf 2025] Rails X
palkan
2
1.1k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
250
A Soul's Torment
seathinner
6
2.9k
Google's AI Overviews - The New Search
badams
0
1k
Chasing Engaging Ingredients in Design
codingconduct
0
220
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