0
1

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.

refileを使った画像投稿機能導入方法

Last updated at Posted at 2021-02-02

##ターミナルでImageMagickのインストール

terminal
#上から順番に実行する(実行するディレクトリは、どこでもいい。)
sudo yum -y install libpng-devel libjpeg-devel libtiff-devel gcc
cd
wget http://www.imagemagick.org/download/ImageMagick.tar.gz
tar -vxf ImageMagick.tar.gz
ls
cd ImageMagick-x.x.x-xx
./configure
make
sudo make install

##rails側の設定

###gem

gemfile
# 画像投稿用gem
gem "refile", require: "refile/rails", github: 'manfe/refile'
# 画像加工用(サイズ調整など)gem
gem "refile-mini_magick"
terminal
bundle

###データベース
以下のように、画像を保存したいテーブルにimage_idを追加する。

schema.rb
create_table "posts", force: :cascade do |t|
:
:
    #image_idと書いているが、実際は文字列。(後述)
    t.string "image_id" 
:
:
  end

###モデル

Post.rb
attachment :image

###投稿

new.html.erb
:
:
  <%= f.attachment_field :image %>
:
:

とりあえず、rails sで投稿すると以下のような画面が出る。
スクリーンショット 2021-02-02 19.41.34.png
ここに書いているキーをconfigに貼り付ける。

config/initializers/application_controller_renderer
# Be sure to restart your server when you modify this file.

# ActiveSupport::Reloader.to_prepare do
#   ApplicationController.renderer.defaults.merge!(
#     http_host: 'example.org',
#     https: false
#   )
# end

Refile.secret_key = '3238beb2f9945d440d0140ba9a28ace320d1a8a67178697999696c08e6655867768c5b002538b2b5e6ec4f0bbdfb03b06aa0ee7679999bd58bfeb4bdd5ead8a3'

###保存

posts_controller.rb
  def create
    Post.new(post_params).save
  end
:
:
  def post_params
    params.require(:post).permit(:title, :body, :image)
  end

〜参考〜
投稿時、binding.pryでparamsを覗いてみる。

[1] pry(#<PostsController>)> post_params
=> <ActionController::Parameters 
{
"title"=>"aaaa", 
"body"=>"aaaaaa", 
"image"=>#<ActionDispatch::Http::UploadedFile:0x00007fb0b00af588 @tempfile=#<Tempfile:/tmp/RackMultipart20210202-14306-orj859.jpeg (closed)>, @original_filename="54b7e1f981b7df7c817af48d1b96ad5e_400x400.jpeg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"list[image]\"; filename=\"54b7e1f981b7df7c817af48d1b96ad5e_400x400.jpeg\"\r\nContent-Type: image/jpeg\r\n">
} permitted: true>

保存後、SQLでimage_idを覗いてみる。

terminal
rails dbconsole
dbconsole

sqlite> SELECT image_id FROM posts;                        
/* 以下のように画像が文字列で保存されている事がわかる。 */
/* 1枚目(コメント) */
d64ff76c065fc7b98c995e2c07611856ca20b2caae61632c2ac0f201c878
/* 2枚目(コメント) */
c675db59c69164df9a1f487146f676d2f32827943ed346caf443f01e7fa7v
:
:

###表示

show.html.erb
:
:
<%= attachment_image_tag @post, :image, :fill, 300, 300, format: 'jpeg' %>
:
:

以上で画像が表示されるはず。

0
1
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
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?