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