Paperclip&amazon s3て?画像アッフ?ロート?
?
1 like?1,287 views
Ruby on Railsで画像アップロードをする際のポイントを手順を踏まえてまとめてみました！
![実際にコードを書いてみる(下準備1)
② app/con?g/内にs3.ymlを追加
bucket: 自分のつくったバケット名
access_key_id: アクセスキーID
secret_access_key: シークレットキー
s3_host_name: ホスト名
?
まずはpaperclipの事前準備から
③ app/con?g/initializers内にpaperclip.rbを追加
Paperclip::Attachment.default_options[:url] = :自分のつくったバケットのURL'
Paperclip::Attachment.default_options[:path] = '/:class/:attachment/:id_partition/:style/:?lename'
Paperclip::Attachment.default_options[:s3_host_name] = 'ホスト名'
① Gem?leに下記を追加してbundle installをする
gem "paperclip", ' > 4.2'
gem 'aws-sdk', '< 2.0'
$ bundle install](https://image.slidesharecdn.com/paperclipamazons3-150528235529-lva1-app6892/85/Paperclip-amazon-s3-6-320.jpg)
![実際にコードを書いてみる(実装2)
?
まずはModelに画像のアップロード部分の処理を書く
① app/models/newinfo.rbに処理を書く（つづき）
#画像ファイルに関するバリデーション
validates_attachment_content_type :image,
:content_type => ["image/jpg", "image/jpeg", "image/png", image/gif"]
validates_attachment_size :image,
:less_than => 2.megabytes
#S3の画像ファイルURLを取得する
def authenticated_image_url(style)
image.s3_object(style).url_for(:read, :secure => true)
end
end
Amazon S3のファイルパス取得用メソッド
リサイズした画像を表示する際に使用
アップロードするファイルに関するバリデーション
今回は①画像ファイルのみ, ②サイズ2M以内
やっとモデルの設定が終わりました。
あとはControllerとView](https://image.slidesharecdn.com/paperclipamazons3-150528235529-lva1-app6892/85/Paperclip-amazon-s3-10-320.jpg)
![※今後もまたおもしろいネタやTipsがあれば随時紹介はしていく予定ですのでよろしくお願いします！
セッションのまとめ
?
自分のiPhoneアプリのサーバーサイドではじめて使用してみました
ご静聴ありがとうございました！
?
実装に関する部分で参考にしたもの
ノウハウ的なもの
1. [Ruby on Rails]paperclipでつくるS3への画像保存アプリ
http://dev.classmethod.jp/server-side/ruby-on-rails/ruby-on-railspaperclip_s3_image_store/
2. RailsでPaperclipを使ってファイルをアップロードする
http://ruby-rails.hatenadiary.com/entry/20140716/1405443484
?
実際の運用に関する部分についてはまだよくわかっていない部分がある
セキュリティ的にこれで本当によいのかという部分や画像やファイルの管理等のさらに
細かい部分に関してはもう少し突っ込んで調査?検証を続ける予定です。](https://image.slidesharecdn.com/paperclipamazons3-150528235529-lva1-app6892/85/Paperclip-amazon-s3-13-320.jpg)
Paperclip&amazon s3て?画像アッフ?ロート?
- 2. 自己紹介 ? 今までの仕事履歴（本業） 石川県金沢市生まれ?東京（大塚）住まいの30歳 本業はサーバーサイドのプログラマ ※Rails＆PHP使い 26歳～30歳： Ruby / PHPのプログラマ 23歳～25歳：Webデザイナー兼ディレクター Rails歴：独学を含めて1年程度 趣味：シルバーアクセサリー集め?スイーツ作り?開発 女子向けと食べ物系コンテンツのお仕事が多い… http://www.co?re.me/ シンプルにつけられる家計簿アプリ「Co?re」の作者 ? 酒井文也（さかい ふみや）
- 3. herokuとAmazon S3で画像を扱う ?(ここがポイント) ①使用するのはPaperclipとaws-sdkという2つのGem ②上記のGemを使って外部ストレージでファイルを保存 ※herokuも推奨している方法 ? 構成と設計の流れ Rails & herokuの構成を使用する際は比較的有名な方法 heroku Amazon S3 画像ストレージクラウドサーバー ※そして僕が最初にRailsをはじめて挫折してしまった部分 heroku上のアプリケーショ ンでファイルアップロード Amazon S3のバケット 内にファイルを保存 https://devcenter.heroku.com/articles/s3 Using AWS S3 to Store Static Assets and File Uploads?※herokuの公式ドキュメント Paperclip?aws-sdkの2 つのGemをインストール Ruby on Rails フレームワーク 画像アップロードGemをインストール
- 4. 事前準備に必要なものとざっくりした流れ ?(ここがポイント) ①特にNokogiriを使うaws-sdkのインストールははまりやすい ②Amazon S3の設定やアクセス権の設定を忘れずに ? まずは必要なこと 最初に準備しておくものがたくさんありますが、ここを切り抜ければ大丈夫 Amazon S3 画像ストレージ Ruby on Rails フレームワーク ① ImageMagick（画像処理用）※brewでインストールする場合は $ brew install imagemagick ③ paperclip / aws-sdkのgemをインストール ② libxml2のインストール（aws-sdkがNokogiriというGemと依存関係があるため） ① Amazon S3のアカウントを作成 ② 以下のものを取得?準備する アクセスキーID?シークレットキーを取得とAmazon S3でバケットを作成＆アクセス権限設定など
- 6. 実際にコードを書いてみる(下準備1) ② app/con?g/内にs3.ymlを追加 bucket: 自分のつくったバケット名 access_key_id: アクセスキーID secret_access_key: シークレットキー s3_host_name: ホスト名 ? まずはpaperclipの事前準備から ③ app/con?g/initializers内にpaperclip.rbを追加 Paperclip::Attachment.default_options[:url] = :自分のつくったバケットのURL' Paperclip::Attachment.default_options[:path] = '/:class/:attachment/:id_partition/:style/:?lename' Paperclip::Attachment.default_options[:s3_host_name] = 'ホスト名' ① Gem?leに下記を追加してbundle installをする gem "paperclip", ' > 4.2' gem 'aws-sdk', '< 2.0' $ bundle install
- 7. 実際にコードを書いてみる(下準備2) ② ①で作成したSca?oldに対してpaperclip用のマイグレーションファイルを作成 $ rails g migration AddAttachmentImageToNewinfos ? Sca?oldでひな形を作成 ここでのポイントは新しいマイグレーションファイルにpaperclipで使うカラムを追加してあげること ① 今回はNewinfo（最新情報）の想定で作成していきます $ rails g sca?old Newinfo title:string detail:text published:date ?ag:integer $ rake db:migrate $ rails g migration AddAttachmentImageToNewinfos?（これだけだとまだからっぽのまま） 次に新しいマイグレーションファイルでpaperclipで使うカラムを追加する "image_?le_name" varchar(255), "image_content_type" varchar(255), "image_?le_size" integer, "image_updated_at" datetime 追加するカラムの内訳
- 8. 実際にコードを書いてみる(下準備3) ? paperclip用のマイグレーションを作成 ③ マイグレーションファイルの作成 class AddAttachmentImageToNewinfos < ActiveRecord::Migration def self.up change_table :newinfos do ?t? t.has_attached_?le :image end end def self.down drop_attached_?le :newinfos, :image end end 書く内容は下記の通り ④ 再度マイグレーションを実行 $ rake db:migrate この記述をすることによって、 先ほどに書いたpaperclipで使うカラムが追加されます "image_?le_name" varchar(255), "image_content_type" varchar(255) "image_?le_size" integer, "image_updated_at" datetime #ファイル名 #ファイルの種類 #ファイルサイズ #アップロード日
- 9. 実際にコードを書いてみる(実装1) ? まずはModelに画像のアップロード部分の処理を書く ① app/models/newinfo.rbに処理を書く class Newinfo < ActiveRecord::Base #添付ファイルアップロードに関する設定 has_attached_?le :image, :styles => { :thumb => "100x100#", :medium => "200x200#", :large => "640x320#" }, :storage => :s3, :s3_permissions => :private, :s3_credentials => "#{Rails.root}/con?g/s3.yml", :path => ":class/:attachment/:id/:style.:extension" サイズの設定の参考 http://blog.noriaki.me/2014-01-02-rails4-paperclip- imagemagick-thumbnail-styles Amazon S3の設定 前のページの設定とアップロード パスの設定 ここでは、スタイルやストレージに関する設定を行いました。まだまだ続く
- 10. 実際にコードを書いてみる(実装2) ? まずはModelに画像のアップロード部分の処理を書く ① app/models/newinfo.rbに処理を書く（つづき） #画像ファイルに関するバリデーション validates_attachment_content_type :image, :content_type => ["image/jpg", "image/jpeg", "image/png", image/gif"] validates_attachment_size :image, :less_than => 2.megabytes #S3の画像ファイルURLを取得する def authenticated_image_url(style) image.s3_object(style).url_for(:read, :secure => true) end end Amazon S3のファイルパス取得用メソッド リサイズした画像を表示する際に使用 アップロードするファイルに関するバリデーション 今回は①画像ファイルのみ, ②サイズ2M以内 やっとモデルの設定が終わりました。 あとはControllerとView
- 11. 実際にコードを書いてみる(実装3) ? ControllerとViewに画像のアップロード部分の処理を書く ② app/controllers/newinfos_controller.rbに追記 # Never trust parameters from the scary internet, only allow the white list through. def newinfo_params params.require(:newinfo).permit(:title, :detail, :published, :?ag, :image) end end :imageを追記してあげる ここまでで画面から画像をアップロードする処理を書きました。 画面で実際のDemo ③ app/views/newinfos/_form.html.rbに追記 <div class="?eld"> <%= f.label :image %><br> <%= f.?le_?eld :image %> </div> 画像アップロード用のinputタグを出力する
- 12. 体験談：最初の設定つらかった… (自分なりの教訓) AWS S3 と 設定周りの知識 と 英語頑張ります… ※反省と自戒を込めて ? 自分が実際にやってみてハマったポイント ①AWS S3の設定 ②Nokogiriのインストール 自分がパッケージ管理をmacportsを使っていたので、なかなか情報が少なかった ※Nokogiriを使う際はlibxml2/libxsltをインストールする必要がある sudo port install libxslt +universal sudo port install libxml2 libxslt sudo gem install nokogiri -- --use-system-libraries=true --with-xml2-include=/usr/include/libxml2/ http://www.engineyard.co.jp/blog/2012/getting-started-with-nokogiri/ （参考）Nokogiri の基本(翻訳版) （参考）Amazon S3のCORS policyの設定 http://www.blitztheory.com/direct-upload-with-s3_direct_upload/ （参考）Using AWS S3 to Store Static Assets and File Uploads https://devcenter.heroku.com/articles/s3
- 13. ※今後もまたおもしろいネタやTipsがあれば随時紹介はしていく予定ですのでよろしくお願いします！ セッションのまとめ ? 自分のiPhoneアプリのサーバーサイドではじめて使用してみました ご静聴ありがとうございました！ ? 実装に関する部分で参考にしたもの ノウハウ的なもの 1. [Ruby on Rails]paperclipでつくるS3への画像保存アプリ http://dev.classmethod.jp/server-side/ruby-on-rails/ruby-on-railspaperclip_s3_image_store/ 2. RailsでPaperclipを使ってファイルをアップロードする http://ruby-rails.hatenadiary.com/entry/20140716/1405443484 ? 実際の運用に関する部分についてはまだよくわかっていない部分がある セキュリティ的にこれで本当によいのかという部分や画像やファイルの管理等のさらに 細かい部分に関してはもう少し突っ込んで調査?検証を続ける予定です。