Paperclip&AmazonS3で画像アップロード～ 初めてつかってみた体験談と主な設定方法など ～

自己紹介

✦ 今までの仕事履歴（本業）

石川県金沢市生まれ・東京（大塚）住まいの30歳本業はサーバーサイドのプログラマ ※Rails＆PHP使い

26歳～30歳： Ruby / PHPのプログラマ 23歳～25歳：Webデザイナー兼ディレクター

Rails歴：独学を含めて1年程度

趣味：シルバーアクセサリー集め・スイーツ作り・開発

女子向けと食べ物系コンテンツのお仕事が多い…

http://www.coffre.me/シンプルにつけられる家計簿アプリ「Coffre」の作者

✦ 酒井文也（さかい ふみや）

herokuとAmazon S3で画像を扱う

　(ここがポイント) ①使用するのはPaperclipとaws-sdkという2つのGem ②上記のGemを使って外部ストレージでファイルを保存 ※herokuも推奨している方法

✦ 構成と設計の流れRails & herokuの構成を使用する際は比較的有名な方法

heroku Amazon S3画像ストレージクラウドサーバー

※そして僕が最初にRailsをはじめて挫折してしまった部分

heroku上のアプリケーションでファイルアップロード

Amazon S3のバケット内にファイルを保存

https://devcenter.heroku.com/articles/s3Using AWS S3 to Store Static Assets and File Uploads　※herokuの公式ドキュメント

Paperclip・aws-sdkの2つのGemをインストール

Ruby on Railsフレームワーク

画像アップロードGemをインストール

事前準備に必要なものとざっくりした流れ

　(ここがポイント) ①特に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でバケットを作成＆アクセス権限設定など

Paperclipに関する解説

※ Githubのページにも英語ですが丁寧な解説がコード付きで掲載されています

　(ここがポイント) ①インストールは苦労したけどそのあとは結構コードが書きやすかった ②Githubのドキュメントが本当に参考になった

✦ 画像をはじめとするファイルのアップロードのGem

※ PHPでもlaravelというフレームワークでpaperclipにインスパイアされて作られたライブラリがある

※作者のURL https://thoughtbot.com/open-source

※GithubのURL https://github.com/thoughtbot/paperclip

実際にプログラムを書いてみての雑感 ・画像以外のファイルも可能！ ・リサイズやアスペクト等の画像に関する処理 　もしてくれるので便利！ ・コードがわかりやすい！

実際にコードを書いてみる(下準備1)

② app/config/内にs3.ymlを追加

bucket: 自分のつくったバケット名 access_key_id: アクセスキーID secret_access_key: シークレットキー s3_host_name: ホスト名

✦ まずはpaperclipの事前準備から

③ app/config/initializers内にpaperclip.rbを追加

Paperclip::Attachment.default_options[:url] = ‘:自分のつくったバケットのURL' Paperclip::Attachment.default_options[:path] = '/:class/:attachment/:id_partition/:style/:filename' Paperclip::Attachment.default_options[:s3_host_name] = 'ホスト名'

① Gemfileに下記を追加してbundle installをする

gem "paperclip", '~> 4.2' gem 'aws-sdk', '< 2.0'$ bundle install

実際にコードを書いてみる(下準備2)

② ①で作成したScaffoldに対してpaperclip用のマイグレーションファイルを作成

$ rails g migration AddAttachmentImageToNewinfos

✦ Scaffoldでひな形を作成

ここでのポイントは新しいマイグレーションファイルにpaperclipで使うカラムを追加してあげること

① 今回はNewinfo（最新情報）の想定で作成していきます

$ rails g scaffold Newinfo title:string detail:text published:date flag:integer $ rake db:migrate

$ rails g migration AddAttachmentImageToNewinfos　（これだけだとまだからっぽのまま）次に新しいマイグレーションファイルでpaperclipで使うカラムを追加する

"image_file_name" varchar(255), "image_content_type" varchar(255), "image_file_size" integer, "image_updated_at" datetime

追加するカラムの内訳

実際にコードを書いてみる(下準備3)✦ paperclip用のマイグレーションを作成

③ マイグレーションファイルの作成

class AddAttachmentImageToNewinfos < ActiveRecord::Migration def self.up change_table :newinfos do |t| t.has_attached_file :image end end def self.down drop_attached_file :newinfos, :image end end

書く内容は下記の通り

④ 再度マイグレーションを実行

$ rake db:migrate

この記述をすることによって、 先ほどに書いたpaperclipで使うカラムが追加されます

"image_file_name" varchar(255), "image_content_type" varchar(255) "image_file_size" integer, "image_updated_at" datetime

#ファイル名 #ファイルの種類 #ファイルサイズ #アップロード日

実際にコードを書いてみる(実装1)✦ まずはModelに画像のアップロード部分の処理を書く

① app/models/newinfo.rbに処理を書く

class Newinfo < ActiveRecord::Base #添付ファイルアップロードに関する設定 has_attached_file :image, :styles => { :thumb => "100x100#", :medium => "200x200#", :large => "640x320#" }, :storage => :s3, :s3_permissions => :private, :s3_credentials => "#{Rails.root}/config/s3.yml", :path => ":class/:attachment/:id/:style.:extension"

サイズの設定の参考 http://blog.noriaki.me/2014-01-02-rails4-paperclip-imagemagick-thumbnail-styles

Amazon S3の設定 前のページの設定とアップロードパスの設定

ここでは、スタイルやストレージに関する設定を行いました。まだまだ続く

実際にコードを書いてみる(実装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

実際にコードを書いてみる(実装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, :flag, :image) end end

:imageを追記してあげる

ここまでで画面から画像をアップロードする処理を書きました。

画面で実際のDemo

③ app/views/newinfos/_form.html.rbに追記

<div class="field"> <%= f.label :image %><br> <%= f.file_field :image %> </div>

画像アップロード用のinputタグを出力する

体験談：最初の設定つらかった…

(自分なりの教訓) 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

※今後もまたおもしろいネタや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

✦ 実際の運用に関する部分についてはまだよくわかっていない部分がある

セキュリティ的にこれで本当によいのかという部分や画像やファイルの管理等のさらに 細かい部分に関してはもう少し突っ込んで調査・検証を続ける予定です。