画像投稿を可能にするgem carrierwave

ruby on railsでは、トップページにコンテンツを投稿する機能があります。その際に文字だけでなく画像も投稿できるようにするgemがあります。それが carrierwaveです。

ー完成イメージー

トップページに画像を投稿できるようにします。

〜完成イメージートップページ

〜完成イメージー投稿画面

投稿画面の「ファイルを選択」のボタンから画像が投稿できます。

ープログラミング書き方ー

まず、gemのcarrierwaveをインストールします。

いじるファイル名　Gemfile

gem 'carrierwave'と入力

ターミナルでbundle installしましょう。

下のように、緑の文字でBundle complete!と文字が出れば成功です！

次に画像の保存形式を指定するためのアップローダーというファイルを作成します。

そのファイルの中で画像の保存形式（jpegやgif等）や画像の大きさの許容範囲を決定できます。

アップローダー作成構文

rails g uploader （任意のファイル名）

ここではrails g uploader Frontcoverとします。ファイルの最初の文字は大文字にしましょう。

そうすると、create app/uploaders/frontcover_uploader.rbと出て、アップローダーファイルが作成されます。このファイルの中で保存形式等をいじることができます。

では次に、テーブルをいじりましょう。テーブルの中に画像を保存するカラムを追加しましょう。すでに作ってある場合は追加しなくて大丈夫です。

カラム追加構文

rails g migration add_（任意のカラム名）_to_（任意のテーブル名）（任意のカラム名）:（任意のデータの型）

では、ターミナルでrails g migration add_frontcover_to_comic frontcover:stringと書いて、

rake db:migrateしましょう。frontcoverがカラムでproductがテーブルです。

そのあと、画像データが収められるモデルに以下のように追記しましょう。

いじるファイル名　（任意のモデル名）.rb

アップローダー追加構文

mount_uploader :（任意のカラム）,(任意のカラム名）Uploaderです。

二つ目のカラム名の最初の一文字目はは大文字にしましょう。

これで投稿した画像データに保存できるようになりました。最後に、画像を投稿する画面と投稿される画面を作成しましょう。

まずは投稿画面です。

いじるファイル名　new.html.erb

画像データはfile_fieldにすると、ファイルを選んで投稿できるようになります。

次に、投稿されたトップページに表示されるようにしましょう。

いじるファイル名　index.html.erb

画像表示構文

image_tag （任意のテーブル名）.（任意のカラム名）.to_s

このようにすることで保存した画像データをトップページに出すことができます。