CarrierWaveを使った画像の投稿②

前回のCarrierWaveを使った画像の投稿①の続きです。

掲示板に画像を投稿するところまで実装ししていきましょう。

読者の皆様に少しでも参考になれば幸いです。

 

画像投稿フォームの作成

app/views/boards/_form.html.erb

<div class="form-group">
<%= f.label :board_image %>
<%= f.file_field :board_image, class: "form-control" %>
<%= f.hidden_field :board_image_cache %>
 
</div>

f.file_fieldによってファイル選択ボックスを作成します。

<%= f.hidden_field :board_image_cache %>この部分ですが、

画像ファイルのアップロードに失敗した際、ファイルが消えないようにしてくれます。

 

画像のプレビュー機能の作成

app/views/boards/_form.html.erb

<div class='mt-3 mb-3'>
<%= image_tag board.board_image.url, id: 'preview', size: '300x200' %>
</div>

これにより、画像を選択した時に、その画像のプレビュー画面が実装されます。

 

app/uploaders/board_image_uploader.

def default_url
'sample.jpg'
end

また、画像を選択していない場合は、デフォルト画像が選択できるように設定します。

 

投稿された画像ファイルの処理

public/uploads/配下に保存される画像は、GitHubにpullする必要がないので、.gitignoreファイルに以下を記載します。Git管理下から除外しましょう。

/public/uploads

 

参考ページ

pikawaka.com

 

最後に

2回に渡ってCarrierWaveの実装方法を解説いたしました。

CarrierWaveを使った画像投稿をぜひマスターしてください。

最後まで読んでいただきありがとうございます。

 

CarrierWaveを使った画像の投稿①

CarrierWaveは、ファイルのアップロードを簡単に追加できるgemです。

 

今回、CarrierWaveを用いて、掲示板の画像投稿を実装しました。その実装内容の備忘録です。読者の皆様に少しでも参考になれば幸いです。

 

gemのインストール

Gemfile
gem 'carrierwave'

gemに記載した後、bundle installします。

インストールしたCarrierWaveを読み込むために、必ずサーバーを再起動させましょう。

 

アップローダークラスの生成

CarrierWaveをインストールすることにより、以下のコマンドが実行できます。

bundle exec rails g uploader アップローダー名

今回は、掲示板の画像投稿を行うので、アップローダー名をBoardImageで実行します。

 

コマンドを実行すると、app/uploaders/board_image_uploader.rbというファイルが作られます。

class BoardImageUploader < CarrierWave::Uploader::Base
# Include RMagick or MiniMagick support:
# include CarrierWave::RMagick
# include CarrierWave::MiniMagick

# Choose what kind of storage to use for this uploader:
storage :file
# storage :fog

# Override the directory where uploaded files will be stored.
# This is a sensible default for uploaders that are meant to be mounted:
def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end

デフォルトで、storage :fileが指定されています。これは、アップロードしたファイルはpublic/配下に保存されるという意味です。

保存されるディレクトリは、store_dirで設定されます。

 

画像投稿のカラムを追加

次に、board_imageカラムを追加し、ここにアップロード画像の情報を保存します。

$ rails g migration add_board_image_to_boards board_image:string

rails db:migrateを実行すると

class AddBoardImageToBoards < ActiveRecord::Migration[5.2]
def change
add_column :boards, :board_image, :string
end
end

が作成されます。

board_imageカラムには、画像のデータではなく、画像のファイル名が保存されます

理由として、画像のデータを保存してしまうと、データーベースに負荷をかけてしまうからです。

 

controllerのstrong parametersにboard_imageを追加

def board_params
params.require(:board).permit(:title, :body, :board_image)
end

 

アップローダークラスとカラムの紐付け

class Board < ApplicationRecord
mount_uploader :board_image, BoardImageUploader
end

 これで画像をアップロードする際にBoardImageUploaderクラスの設定を利用できるようになります。

 

最後に

CarrierWaveのインストールからアップローダクラスとカラムの紐付けまでみてきました。次回は、実際に画像を掲示板で表示させるところまで実装します。

最後まで読んでいただき、誠にありがとうございました。ブログ内の記載に不備があればコメントいただけると幸いです。

content_forでタイトルを動的に

タイトル名をページ遷移するごとに変えたいときに、content_forを使用することで簡単に変えることができます。

 

勉強した内容をアウトプットしていきます。

 

content_forメソッドについて

content_forはRailsに用意されているメソッドです。content_forを用いて、タイトルを動的に変更します。

 

使い方をソースコードで確認

application_helper.rb

module ApplicationHelper
def page_title(page_title = '')
base_title = 'title'
page_title.empty? ? base_title : page_title + ' | ' + base_title
end
end

三項演算子を使って、page_titleが空だった場合はbase_titleのみの表示。

page_titleに何か記載されていたら、page_title | base_titleと表示されます。

条件式 ? 真 : 偽の構文で、条件式の判定メソッドの終わりがempty?という?で終わるメソッドになっているため、1行に?が2つある形になります。

 

application.html.erb

<title><%= page_title(yield :title ) %></title>

デフォルトのタイトルを作成。

コンテンツを名前付きのyieldとしてレンダリングするには、content_forメソッドを使用します。

 

<h1><% content_for(:title, t('.title')) %></h1>sp

 それぞれのページのタイトルをこのように記載することで、コンテンツを名前付きのyieldブロックとしてレイアウトに挿入できます。

タイトルは、I18nで日本語に変換してます。

 

参考ページ

railsguides.jp

 

最後に

Railsガイドを見ると、まだまだ使い方はたくさんあるみたいです。

ブログ内容に不備などありましたら、コメントいただけると幸いです。

最後まで読んでいただきありがとうございます。