はじめに
私のオリジナルサービスの画像投稿機能にrefileを使用したので、簡単にまとめておきたいと思います。
つまづいたところとかも記載しておくので、参考になれば幸いです。
refileの導入
gem
いくつかQiitaやブログなどで参考記事はありますが、gemをinstallできないもののいくつか見受けられました。
githubに記載されている github/refile
gem "refile", require: "refile/rails"
gem "refile-mini_magick"
↑この記述方法ではbundle install できませんでした。（環境によっては変わるのか？）
なので、私はこの記事(refile使い方)を参考にして、
gem "refile", require: "refile/rails", github: 'manfe/refile'
gem "refile-mini_magick"
としました。そして
$ bundle install
で追加したgemをインストールします。
次にgithubを参考にしていくと
We're requiring both Refile's Rails integration and image processing via the MiniMagick gem, which requires ImageMagick (or GraphicsMagick) to be installed. To install it simply run:
と書かれており、ImageMagickをインストールする必要があると言われているので、
$ sudo apt-get install imagemagick
とします。
(僕の場合、 apt-get を yum に直して、 imagemagick を ImageMagick に変更するとインストールできました。ちなみにAWSのcloud9で開発しています。)
model
インストールが終わったら、次は画像投稿機能を追加したいmodelに
class User < ActiveRecord::Base
attachment :image_id
end
attachment :画像を入れたいカラム名 + _id を追記します。
_idの説明についてはまた後でしますので、ひとまずつけておいてください。
カラムの追加
カラムの追加は rails g migration add_(追加したいカラム名+_id)_to_追加するモデル名 (追加したいカラム名+_id):型 とします。
$ rails generate migration add_image_id_to_users image_id:string
ポイントは (追加したいカラム名+_id) ←これです。
refileの決まりで、先ほどの attachment : くっつけるカラムには _idが必要になります。
なので、さきほどのmodelでも出てきましたが、カラム名には _idをつけてあげてください。
View
次は画像投稿用のフォームを作成します。 <%= form.attachment_field :カラム名 %> で投稿用のフォームが完成します！
ややこしいですが、ここでのカラム名には _idはいりません。
<%= form_for @user do |form| %>
<%= form.attachment_field :profile_image %>
<% end %>
Controller
次はストロングパラメータに先ほど追加したカラムをpermit（許可）してあげないといけません。
ここでも _idは必要なし。
def user_params
params.require(:user).permit(:name, :email, image ←これを追加)
end
View
これで最後です。画像を表示したいところに
<%= image_tag attachment_url(@user, :image, :fill, 300, 300, format: "jpg") %>
のように追記してあげるだけです！ここでも _idは必要なし。
この :fill, 300, 300 の部分で縦横幅を決めれます。（が、レスポンシブ対応にするならCSSとかで指定した方がいいかも？）
これで投稿した画像が表示されるはずです！
まとめ
実際、なにもわからない時に画像投稿機能をつけたいな〜と思いながらQiitaの記事を漁ってましたが、ほとんど分からずにかなり苦戦しました…。
なので、初心者の方にもわかるようにできるだけ詳しく解説してみました。
ポイントはなんども出てきた _id かな〜と個人的には思います。
参考記事
正直どんな記事よりもうるぞーさんのyoutubeを見るのが手っ取り早いです。ほんと神。
ほとんどこの動画を参考にしてました。ありがとうございます。