画像のアップロード:設定一覧

画像のアップロード

Coffeecup header7

0 : この章の目的

 「画像のアップロード」の設定一覧の確認をする


1 : 設定一覧

画像のアップロード」では「Paperclip」というgemを使い、画像をアップロードできるようにしました。

具体的には、
  • 「Paperclip」の導入
  • データベースへの枠組みの追加
  • 画像のデータ操作
  • ページでの画像表示
の3つをやってみます。

 まずは「Paperclip」の導入から


ターミナルで

 ターミナル
 Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
1 brew install imagemagick

をしてPaperclip」を使うのに必要になるツール「imagemagickをインストールします。
※ これでインストールできたので、今後インストールする必要はありません。

これができたらGemfileに下の内容を加え、

 Gemfile
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


32 gem "paperclip"

gemの導入をターミナルでします。

 ターミナル
 Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
1 bundle install

 次は枠組みの追加



まずはターミナルで下の入力をして、枠組みを変更するための設定ファイルを作成します。

 ターミナル
 Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
1 rails g paperclip user image

これでdb > migrate」フォルダに「日時_add_attachment_image_to_users.rbが作成されました。

 日時_add_attachment_image_to_users.rb
1 2 3 4 5 6 7 8 9 10 11 class AddAttachmentImageToUsers < ActiveRecord::Migration def self.up change_table :users do |t| t.attachment :image end end def self.down remove_attachment :users, :image end end

この設定内容を適用させます。

 ターミナル
 Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
1 rake db:migrate

これで Sequel pro images のようにデータベースに枠組みが追加されました。

 データ操作をやってみましょう!



データ操作は
  • 「app > controllers > users_controller.rb」
  • 「app > models > user.rb」
の2つのファイルに設定します。

 users_controller.rb(31行目を変更)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


28 29 30 31 32 33 34 35 36 37 38 def update @user = User.find(params[:id]) if @user.id == current_user.id @user.update(params.require(:user).permit(:first_name, :family_name, :self_introduction, :age, :image)) redirect_to "/users/#{@user.id}/edit" flash[:notice] = "編集が完了しました" else redirect_to "/" flash[:alert] = "無効なユーザー" end end

 user.rb(10〜12行目を追加)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 6 7 8 9 10 11 12 13 14 class User < ActiveRecord::Base # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable and :omniauthable devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable has_many :messages has_many :entries has_attached_file :image, styles: { medium: "300x300>", thumb: "50x50>" } validates_attachment :image, content_type: { content_type: ["image/jpg", "image/jpeg", "image/png", "image/gif"] } end

 最後にページ表示をしましょう



ページ表示は
  • 「app > views > users > edit.html.erb」
  • Chrome messages users 1 edit no image
  • 「app > views > users > show.html.erb」
  • Chrome messages users 1 after upload images
  • 「app > views > rooms > show.html.erb」
  • Chrome messages rooms 1 messages with images
の3つのページで画像の入力欄・表示の設定を加えます。

 show.html.erb(「users」フォルダ)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 6 7 8 9 10 11 12 ... <div class="row"> <div class="col-xs-6"> <h1>ユーザー情報</h1> <hr> <% if @user.image.present? %> <%= image_tag @user.image.url(:medium) %> <br><br> <% else %> <h4>画像はありません</h4> <% end %> <p>名前:<%= @user.family_name %><%= @user.first_name %>さん(<%= @user.age %>歳)</p> <p>自己紹介:<%= @user.self_introduction %></p> <!-- 省略 -->

 edit.html.erb(「users」フォルダ)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 6 7 8 9 10 11 12 13 ... <h1>ユーザー情報を編集する</h1> <hr> <%= form_for @user do |f| %> <p>プロフィール画像</p> <% if @user.image.present? %> <%= image_tag @user.image.url(:medium) %> <br><br> <% else %> <h4>画像はまだ登録されていません</h4> <% end %> <%= f.file_field :image, :class => "form-control my-form" %> <br> <p>名字</p> <!-- 省略 -->

 show.html.erb(「rooms」フォルダ)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 ... <div class="col-xs-9"> <% if @messages.present? %> <% @messages.each do |m| %> <% if m.user_id == current_user.id %> <h4 class="text-right"> <p class="alert alert-success"> <%= m.content %> <br><br> <small><strong><a href="/users/<%= m.user_id %>"><%= m.user.family_name %> <%= m.user.first_name %>さん <%= image_tag m.user.image.url(:thumb) %></a></strong></small> </p> </h4> <% else %> <h4 class="text-left"> <p class="alert alert-info"> <%= m.content %> <br><br> <small><strong><a href="/users/<%= m.user_id %>"><%= image_tag m.user.image.url(:thumb) %> <%= m.user.family_name %> <%= m.user.first_name %>さん</a></strong></small> </p> </h4> <% end %> <% end %> <% else %> <!-- 省略 -->

 ここまでで「Paperclip」の設定ができました。