>>> サンプルアプリケーションはこちらです <<<
今日は Ruby on Rails で画像をアップロード出来るサイトの作り方をご紹介させて頂きます。
OPTIONAL: Bootstrapの開発環境を自動的に作る
まず、ImageMagick をインストールする必要がありますので、ImageMagick のないパソコンならインストールしてください。
Mac OS: brew install imagemagick
Ubuntu: sudo apt-get install imagemagick
では、始めましょう!
1
2
gem 'paperclip'
gem 'fog'
Article というScaffoldを作る:
rails g scaffold Article title content:text
それでpaperclip photo を作る:
rails g paperclip article photo
それとも実際にマイグレーションのファイルを追加してもいいです:
1
2
3
4
5
6
7
8
9
10
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環境
1
2
3
4
5
6
7
8
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) を利用します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 を使う場合:
1
2
3
4
5
6
7
8
9
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 |
1
2
3
4
has_attached_file :photo
validates_attachment :photo,
content_type: { content_type: ["image/png", "image/jpeg", "image/jpg"] },
size: { in: 0..12000.kilobytes }
1
2
3
def article_params
params.require(:article).permit(:title, :content, :photo)
end
1
2
3
4
= form_for @article do |f|
.field
= f.label :photo
= f.file_field :photo, accept: 'image/jpeg, image/jpg, image/png'
画像を表す:
1
2
3
4
= image_tag @article.photo
= image_tag @article.photo(:large)
= image_tag @article.photo(:medium)
= image_tag @article.photo(:thumb)
画像を消す:
1
2
@article.photo = nil
@article.save
画像が保存されるかどうかを確認:
1
2
@article.photo.file?
@article.photo?
jQuery Mobile を使う場合:
1
= form_for @article, html: { multipart: true, 'data-ajax'=>false } do |f|