>>> サンプルアプリケーションはこちらです <<<
今日は Ruby on Rails で画像をアップロード出来るサイトの作り方をご紹介させて頂きます。
OPTIONAL: Bootstrapの開発環境を自動的に作る
まず、ImageMagick をインストールする必要がありますので、ImageMagick のないパソコンならインストールしてください。
Mac OS: brew install imagemagick
Ubuntu: sudo apt-get install imagemagick
では、始めましょう!
Gemfile
gem 'paperclip' gem 'fog'
Article というScaffoldを作る:
rails g scaffold Article title content:text
それでpaperclip photo を作る:
rails g paperclip article photo
それとも実際にマイグレーションのファイルを追加してもいいです:
db/migrate/20141124111234_create_articles.rb
def change create_table :articles do |t| t.string :title t.text :content t.timestamps end add_attachment :articles, :photo end
データベースをマイグレート: rake db:migrate
paperclip を設定
development環境
config/environments/development.rb
config.paperclip_defaults = { :use_timestamp => false, :styles => { large: '500x500>', medium: '300x300#', thumb: '120x120!' }, :url => '/:attachment/:class/:id/:basename_:style.:extension', :path => ':rails_root/public:url', :default_url => '/:attachment/errors/missing_:style.png', :default_style => :original }
今、:styles のところを見ると、三つの種類があります。
例えば、画像の元はこれとすると:
'数1x数2>' は画像の広さは数1で、高さは広さに対して変わります。
'数1x数2#' は画像の広さは数1で、高さは数2になります、画像はクロップされます。
'数1x数2!' は画像の人さは数1で、高さは数2になりますが、画像は圧搾されます。
:default_url は画像がない時に、:default_url に書いてある画像が使われます。
production環境
AMAZON WEB SERVER (AWS) を利用します。
config/environments/production.rb
config.paperclip_defaults = { :use_timestamp => false, :styles => { large: '500x500>', medium: '300x300#', thumb: '120x120!' }, :path => ':attachment/:class/:id/:basename_:style.:extension', :default_url => '/:attachment/errors/missing_:style.png', :default_style => :original, :storage => :fog, :fog_directory => ENV['FOG_DIRECTORY'], :fog_credentials => { :provider => :aws, :region => 'ap-northeast-1', :aws_access_key_id => ENV['AWS_ACCESS_KEY_ID'], :aws_secret_access_key => ENV['AWS_SECRET_ACCESS_KEY'] } }
aws-sdk を使う場合:
gem 'aws-sdk', '< 2.0' :storage => :s3, :s3_credentials => { :s3_host_name => 's3-ap-northeast-1.amazonaws.com', :bucket => ENV['S3_DIRECTORY'], :access_key_id => ENV['AWS_KEY'], :secret_access_key => ENV['AWS_SECRET'] }
大体development.rbと同じです、
:fog_directory はAWSのBucket名です。
:regionはBucketのregionによって違います。
region リスト
region名 | コード |
---|---|
US East (N. Virginia) | us-east-1 |
US West (Oregon) | us-west-2 |
US West (N. California) | us-west-1 |
EU (Ireland) | eu-west-1 |
EU (Frankfurt) | eu-central-1 |
Asia Pacific (Singapore) | ap-southeast-1 |
Asia Pacific (Sydney) | ap-southeast-2 |
Asia Pacific (Tokyo) | ap-northeast-1 |
South America (Sao Paulo) | sa-east-1 |
app/models/article.rb
has_attached_file :photo validates_attachment :photo, content_type: { content_type: ["image/png", "image/jpeg", "image/jpg"] }, size: { in: 0..12000.kilobytes }
app/controllers/articles_controller.rb
def article_params params.require(:article).permit(:title, :content, :photo) end
app/views/articles/_form.html.slim
= form_for @article do |f| .field = f.label :photo = f.file_field :photo, accept: 'image/jpeg, image/jpg, image/png'
画像を表す:
= image_tag @article.photo = image_tag @article.photo(:large) = image_tag @article.photo(:medium) = image_tag @article.photo(:thumb)
画像を消す:
@article.photo = nil @article.save
画像が保存されるかどうかを確認:
@article.photo.file? @article.photo?
jQuery Mobile を使う場合:
app/views/articles/_form.html.slim
= form_for @article, html: { multipart: true, 'data-ajax'=>false } do |f|