gem 'carrierwave'
ruby on railsでは、トップページにコンテンツを投稿する機能があります。その際に文字だけでなく画像も投稿できるようにするgemがあります。それが carrierwaveです。
ー完成予想図ー
トップページに画像を投稿できるようにします。
〜完成予想図ートップページ
〜完成予想図ー投稿画面
投稿画面の「ファイルを選択」のボタンから、自分のパソコンにある画像データを選び、投稿できます。
上の場合だと、ワインの画像です。
ープログラミング書き方ー
まず、gemのcarrierwaveをインストールします。
いじるファイル名 Gemfile
gem 'carrierwave'と入力
[ruby] gem 'carrierwave' [/ruby]
ターミナルでbundle installと書き、enterを押します。
いじる場所 ターミナル
bundle installと入力
[ruby] $bundle install [/ruby]
下のようにbundle complete!と出れば成功です。
[ruby] Bundle complete! 29 Gemfile dependencies, 94 gems now installed.
Use 'bundle show [generate]' to see where a bundle_gem is installed. [/ruby]
次に画像の保存形式を指定するためのアップローダーというファイルを作成します。
そのファイルの中で画像の保存形式（jpegやgif等）や画像の大きさの許容範囲を決定できます。
いじる場所 ターミナル
アップローダー作成構文
rails g uploader （任意のファイル名）
ここでは例として、rails g uploader Frontcoverとします。ファイルの最初の文字は大文字にしましょう。
そうすると、create app/uploaders/frontcover_uploader.rbと出て、sublime textの中で、アップローダーファイルが作成されます。このファイルの中で保存形式等をいじることができます。
では次に、テーブルをいじりましょう。テーブルの中に画像を保存するためのカラムを追加しましょう。これがないと画像が保存できません。すでに作ってある場合は追加しなくて大丈夫です。
いじる場所 ターミナル
カラム追加構文
rails g migration add_（任意のカラム名）to（任意のテーブル名）（任意のカラム名）:（任意のカラムの型）
では、ターミナルでrails g migration add_frontcover_to_comic frontcover:stringと書いて、enterを押します。
さらに、次の行でrake db:migrateと書いてenterを押します。
[ruby]$rails g migration add_frontcover_to_comic frontcover:string
$rake db:migrate[/ruby]
上の例だとfrontcoverがカラムでcomicがテーブルです。
そのあと、画像データがあるモデルに以下のように追記しましょう。
今回はfrontcoverというカラムはcomicモデルの中にあります。
いじるファイル名 （任意のモデル名）.rb
アップローダー追加構文
mount_uploader :（任意のカラム）,(任意のカラム名）Uploader
[ruby]mount_uploader: frontcover, FrontcoverUploader[/ruby]
２つ目のカラム名の最初の一文字目は大文字にしましょう。長いカラム名の場合は、上のFrontCoverのように大文字が２つになることもあります。
これで投稿した画像データをテーブルに保存できるようになりました。最後に、画像を投稿する画面と画像をページに出力する画面を作成しましょう。
まずは投稿画面です。
いじるファイル名 new.html.erb
投稿画面はform_forを使います。
[ruby]<%=form_for @comic do |f|%>
<%= f.text_field :title placeholder:"作品タイトル" %>
<%= f.text_field :author placeholder:"著者" %>
<%= f.file_field :front_cover placeholder: "表紙" %>
<%= f.submit "投稿する" %>
<% end %> [/ruby]
上記のように書くと、画像ファイルを選んで投稿という動きができるようになります。
次に、投稿された画像をトップページに表示されるようにしましょう。
基本的にトップページをいじる際は、indexをいじることにになります。
いじるファイル名 index.html.erb
画像表示構文
image_tag （任意のテーブル名）.（任意のカラム名）.to_s
[ruby]<% @comic.each do |comic| %>
<%= image_tag comic.front_cover.to_s %>
<%= comic.title %>
<%= comic.author %>
<% end %>[/ruby]
このようにすることで保存した画像データをトップページに出力することができます。
上記の例では、画像以外にも、タイトルや著者の名前も出すようにしています。
投稿画面で画像をトップページに投稿できるようになります。
