###### tags: `rails` `image` # Rails での画像投稿 ## 目次 - [インストールしておくもの](#install) - [画像アップロード用のアップローダ作成](#image_up) - [新規だった場合モデル作成、既存はカラム追加](#db) - [モデル作成](#model) - [カラム追加](#add_column) - [モデルの修正](#modify_model) - [作成したuploaderファイルの設定変更](#setting_up) ## インストールしておくもの<a id="install"></a> - carrierwave - carrierwaveは画像アップロードに必要な機能。 - rmagick - rmagickは画像のリサイズに必要な機能。 上記をGemfileに記載して `bundle install` を行う。 インストール後に以下の作業を行うことで画像投稿機能を実装できる。 ## 画像アップロード用のアップロード作成<a id="image_up"></a> ```bash= rails g uploader image ``` ## 新規だった場合モデル作成、既存はカラム追加<a id="db"></a> ### モデル作成<a id="model"></a> ```bash= rails g model User image:string ``` 今回はimageカラムのみ作成しております。 その他カラムも同時に定義したい場合は、モデル名の後に引数を追加してください。 詳しいモデルの作成に関しては[モデルの作成](https://hackmd.io/j9R-URToT2agBs0XxZ-bWA#make_model)を参考にしてください。 ### カラム追加<a id="add_column"></a> ```bash= rails g migration AddImageToUsers image:string ``` モデル作成もカラム追加も同様ですが、上記コマンド実行後に ` rails db:migrate ` を実行しましょう。 ## モデルの修正<a id="modify_model"></a> [アップローダーの作成](#image_up)で作成したファイルをモデルにマウントするために今回の場合はuser.rb(Userモデル)の修正を下記のように行う。 ```ruby class User < ApplicationRecord mount_uploader :image, ImageUploader end ``` ## 作成したuploaderファイルの設定変更<a id="setting_up"></a> [インストールしておくもの](#install)でし、インストールし、[アップロード作成で実行したコマンドにより](#image_up)以下ファイルが生成されていますので、 画像のサイズなどの設定を行うため、ファイルの編集を行う。 - app/uploader/image_uploader.rb ```ruby= #リサイズ、画像形式を変更に必要 include CarrierWave::RMagick #上限変更 process :resize_to_limit => [700, 700] #JPGで保存 process :convert => 'jpg' #サムネイルを生成 version :thumb do process :resize_to_limit => [300, 300] end # jpg,jpeg,gif,pngのみ def extension_white_list %w(jpg jpeg gif png) end #ファイル名を変更し拡張子を同じにする def filename super.chomp(File.extname(super)) + '.jpg' end #日付で保存 def filename if original_filename.present? time = Time.now name = time.strftime('%Y%m%d%H%M%S') + '.jpg' name.downcase end end ```
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up