14
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Rails]refileの使い方を初心者がまとめてみた。[refile]

Last updated at Posted at 2020-04-01

#はじめに
私のオリジナルサービスの画像投稿機能にrefileを使用したので、簡単にまとめておきたいと思います。
つまづいたところとかも記載しておくので、参考になれば幸いです。

#refileの導入
##gem
いくつかQiitaやブログなどで参考記事はありますが、gemをinstallできないもののいくつか見受けられました。
githubに記載されている github/refile

Gemfile
gem "refile", require: "refile/rails"
gem "refile-mini_magick"

↑この記述方法ではbundle install できませんでした。(環境によっては変わるのか?)

なので、私はこの記事(refile使い方)を参考にして、

Gemfile
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に

画像投稿機能をつける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は必要なし。

users.controller
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を見るのが手っ取り早いです。ほんと神。
ほとんどこの動画を参考にしてました。ありがとうございます。

14
22
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?