戻る

Rails5.0


民泊サイトの構築 Rails5.0

  (0)
2,000円

タスク3-5   写真アップロード(paperclip)

このタスクについて


タスクの内容を一部抜粋します。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてこのアプリケーションのフルコードをダウンロードすることが可能になります。




ImageMagickをインストールします。


ダウンロードは以下のサイトからできます。
ww.npackd.appspot.com


インストールは以下の手順でお願いします。
途中、「install legacy utilities」と「install development」にチェックを入れて下さい。
mrradiology.hatenablog.jp


続いてGnuWinのインストールを行います。
ダウンロードは以下のサイトからできます。
sourceforge.net


インストールは以下の手順でお願いします。
mrradiology.hatenablog.jp




記述追加 GemFile(66行目)
gem 'paperclip', '~> 5.1.0'



GemFile
 
source 'https://rubygems.org' 
git_source(:github) do |repo_name| 
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/") 
  "https://github.com/#{repo_name}.git" 
end 
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' 
gem 'rails', '~> 5.0.7', '>= 5.0.7.1' 
# Use postgresql as the database for Active Record 
gem 'pg', '>= 0.18', '< 2.0' 
# Use Puma as the app server 
gem 'puma', '~> 3.0' 
# Use SCSS for stylesheets 
gem 'sass-rails', '~> 5.0' 
# Use Uglifier as compressor for JavaScript assets 
gem 'uglifier', '>= 1.3.0' 
# Use CoffeeScript for .coffee assets and views 
gem 'coffee-rails', '~> 4.2' 
# See https://github.com/rails/execjs#readme for more supported runtimes 
# gem 'therubyracer', platforms: :ruby 
# Use jquery as the JavaScript library 
gem 'jquery-rails' 
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks 
gem 'turbolinks', '~> 5' 
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder 
gem 'jbuilder', '~> 2.5' 
# Use Redis adapter to run Action Cable in production 
# gem 'redis', '~> 3.0' 
# Use ActiveModel has_secure_password 
# gem 'bcrypt', '~> 3.1.7' 
# Use Capistrano for deployment 
# gem 'capistrano-rails', group: :development 
group :development, :test do 
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console 
  gem 'byebug', platform: :mri 
end 
group :development do 
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code. 
  gem 'web-console', '>= 3.3.0' 
end 
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem 
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] 

#bootstrap 
gem 'bootstrap-sass', '~> 3.4.1' 

#デバイス 
gem 'devise', '~>4.2' 

#Gravatar 
gem 'gravtastic' 

#フラッシュメッセージ 
gem 'toastr-rails', '~> 1.0' 

#日本語化 
gem 'rails-i18n' 

#画像アップロード 
gem 'paperclip', '~> 5.1.0' 



コマンド
bundle


記述追加 config\environments\development.rb(3行目)
Paperclip.options[:command_path] = "C:\Program Files\ImageMagick-7.0.10-Q16;C:\Program Files (x86)\GetGnuWin32\bin"



config\environments\development.rb
 
Rails.application.configure do 

  #画像アップロード 
 Paperclip.options[:command_path] = "C:\Program Files\ImageMagick-7.0.10-Q16;C:\Program Files (x86)\GetGnuWin32\bin" 

  # Settings specified here will take precedence over those in config/application.rb. 
  # In the development environment your application's code is reloaded on 
  # every request. This slows down response time but is perfect for development 
  # since you don't have to restart the web server when you make code changes. 
  config.cache_classes = false 
  # Do not eager load code on boot. 
  config.eager_load = false 
  # Show full error reports. 
  config.consider_all_requests_local = true 
  # Enable/disable caching. By default caching is disabled. 
  if Rails.root.join('tmp/caching-dev.txt').exist? 
    config.action_controller.perform_caching = true 
    config.cache_store = :memory_store 
    config.public_file_server.headers = { 
      'Cache-Control' => 'public, max-age=172800' 
    } 
  else 
    config.action_controller.perform_caching = false 
    config.cache_store = :null_store 
  end 
  # Don't care if the mailer can't send. 
  # trueに変更 
  config.action_mailer.raise_delivery_errors = true 
  config.action_mailer.perform_caching = false 
  # Print deprecation notices to the Rails logger. 
  config.active_support.deprecation = :log 
  # Raise an error on page load if there are pending migrations. 
  config.active_record.migration_error = :page_load 
  # Debug mode disables concatenation and preprocessing of assets. 
  # This option may cause significant delays in view rendering with a large 
  # number of complex assets. 
  config.assets.debug = true 
  # Suppress logger output for asset requests. 
  config.assets.quiet = true 
  # Raises error for missing translations 
  # config.action_view.raise_on_missing_translations = true 
  # Use an evented file watcher to asynchronously detect changes in source code, 
  # routes, locales, etc. This feature depends on the listen gem. 
  # config.file_watcher = ActiveSupport::EventedFileUpdateChecker 

  config.action_mailer.default_url_options = { host: 'localhost', port: 3000 } 

  #Gメールの設定 
  config.action_mailer.delivery_method = :smtp 

  config.action_mailer.smtp_settings = { 
    address: "smtp.gmail.com", 
    port: 587, 
    enable_starttls_auto: true, 
    authentication: "plain", 
    user_name: 'win.rails.learn@gmail.com', 
    password: 'vusopllqzbyvvahk' 
  } 
end 



「config\initializers」フォルダに「paperclip_media_type_spoof_detector_override.rb」ファイルを新規作成します。


config\initializers\paperclip_media_type_spoof_detector_override.rb(新規作成したファイル)
 
require 'paperclip/media_type_spoof_detector' 
module Paperclip 
  class MediaTypeSpoofDetector 
    def spoofed? 
        false 
    end 
  end 
end 



コマンド
写真モデルを作成します。
rails g model Photo room:references


コマンド
rails g paperclip photo image


更新
db\migrate\20200628021623_add_attachment_image_to_photos.rb
1行目に[5.0]の記述を追加して下さい。
 
class AddAttachmentImageToPhotos < ActiveRecord::Migration[5.0] 

  def self.up 
    change_table :photos do |t| 
      t.attachment :image 
    end 
  end 

  def self.down 
    remove_attachment :photos, :image 
  end 
end 



コマンド マイグレーション適用
rails db:migrate


app\models\room.rb
「has_many :photos」の記述を追加します。(3行目)
 
class Room < ApplicationRecord 

  belongs_to :user 

  has_many :photos 

  validates :home_type, presence: true 
  validates :room_type, presence: true 
  validates :accommodate, presence: true 
  validates :bed_room, presence: true 
  validates :bath_room, presence: true 
end 



記述追加 app\models\photo.rb(4・5行目)
 
class Photo < ApplicationRecord 

  belongs_to :room 

  has_attached_file :image, styles: { medium: "300x300>", thumb: "100x100>" } 

  validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/ 
end 



記述追加 config\routes.rb
「resources :photos, only: [:create, :destroy]」の記述を追加してます。(19行目)
 
  resources :rooms, except: [:edit] do 
    member do 
      get 'listing' 
      get 'pricing' 
      get 'description' 
      get 'photo_upload' 
      get 'amenities' 
      get 'location' 
    end 
    resources :photos, only: [:create, :destroy] 
  end 



config\routes.rb
 
Rails.application.routes.draw do 

  #ルートをpages#homeに設定 
  root 'pages#home' 

  get 'pages/home' 

  resources :users, only: [:show] 

  resources :rooms, except: [:edit] do 
    member do 
      get 'listing' 
      get 'pricing' 
      get 'description' 
      get 'photo_upload' 
      get 'amenities' 
      get 'location' 
    end 
    resources :photos, only: [:create, :destroy] 
  end 

  devise_for :users, 
  path: '', 
  path_names: {sign_in: 'login', sign_out: 'logout', edit: 'profile', sign_up: 'registration'}, 
  controllers: {registrations: 'registrations'} 

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html 
end 



「app\controllers」フォルダに「photos_controller.rb」ファイルを新規作成します。


app\controllers\photos_controller.rb(新規作成したファイル)
 
class PhotosController < ApplicationController 

    def create 
      @room = Room.find(params[:room_id]) 
  
      if params[:images] 
        params[:images].each do |img| 
          @room.photos.create(image: img) 
        end 
  
        @photos = @room.photos 
        redirect_back(fallback_location: request.referer, notice: "保存しました。") 
      end 
    end 
  
end 



更新 app\controllers\rooms_controller.rb
「photo_update()」メソッドに「@photos = @room.photos」追加したり(37行目)、「before_action :is_authorised」に「:photo_upload」を追加(4行目)しています。
また、「is_authorised」メソッドの記述(65行目)により部屋登録者以外はアクセスできないようにしています。
内容をそのまま置き換えてください。
 
class RoomsController < ApplicationController 

  before_action :set_room, except: [:index, :new, :create] 
  before_action :authenticate_user!, except: [:show] 
  before_action :is_authorised, only: [:listing, :pricing, :description, :photo_upload, :amenities, :location, :update] 

  def index 
     @rooms = current_user.rooms 
  end
 
  def new 
    @room = current_user.rooms.build 
  end
 
  def create 
    @room = current_user.rooms.build(room_params) 
    if @room.save 
      redirect_to listing_room_path(@room), notice: "保存しました。" 
    else 
      flash[:alert] = "問題が発生しました。" 
      render :new 
    end 
  end
 
  def show 
  end
 
  def listing 
  end
 
  def pricing 
  end
 
  def description 
  end
 
  def photo_upload 
      @photos = @room.photos 
  end
 
  def amenities 
  end
 
  def location 
  end
 
  def update 
    new_params = room_params 
    new_params = room_params.merge(active: true) if is_ready_room 
    if @room.update(new_params) 
      flash[:notice] = "保存しました。" 
    else 
      flash[:alert] = "問題が発生しました。" 
    end 
    redirect_back(fallback_location: request.referer) 
  end
 
  private 
    def set_room 
      @room = Room.find(params[:id]) 
    end
 
    def is_authorised 
      redirect_to root_path, alert: "権限がありません。" unless current_user.id == @room.user_id 
    end
 
    def is_ready_room 
      !@room.active && !@room.price.blank? && !@room.listing_name.blank? && !@room.photos.blank? && !@room.address.blank? 
    end
 
    def room_params 
      params.require(:room).permit(:home_type, :room_type, :accommodate, :bed_room, :bath_room, :listing_name, :summary, :address, :is_tv, :is_kitchen, :is_air, :is_heating, :is_internet, :price, :active) 
    end
 
end 



更新 app\views\rooms\photo_upload.html.erb
ファイルを置き換えてください。
 
<div class="row"> 
  <div class="col-md-3"> 
    <%= render 'room_menu' %> 
  </div> 
  <div class="col-md-9"> 
    <div class="panel panel-default"> 
      <div class="panel-heading"> 
       お写真 
      </div> 
      <div class="panel-body"> 
        <div class="container"> 
          <div class="row"> 
            <div class="col-md-offset-3 col-md-6"> 
              <!-- PHOTOS UPLOAD GOES HERE --> 
              <%= form_for @room, url: room_photos_path(@room), method: 'post', html: {multipart: true} do |f| %> 
                <div class="row"> 
                  <div class="form-group"> 
                    <span class="btn btn-default btn-file text-babu"> 
                      <i class="fa fa-cloud-upload" aria-hidden="true"></i> 
                      写真を選択 
                      <%= file_field_tag "images[]", type: :file, multiple: true %> 
                    </span> 
                  </div> 
                </div> 
                <div class="text-center"> 
                  <%= f.submit "写真追加", class: "btn btn-normal" %> 
                </div> 
              <% end %> 
            </div> 
          </div> 
          <div id="photos"><%= render 'photos/photos_list' %></div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div> 





この続きはプロジェクトを購入していただくことで見ることができます。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてプロジェクトを購入するとこのアプリケーションのフルコードをダウンロードすることができます。

まだレビューはありません。

民泊サイトの構築 Rails5.0

2,000円

民泊サイトを構築します。
ホストは部屋を登録し、ゲストは宿泊予約できます。
ゲストはクレジットカードで支払いをし、ホストには料金の80%が自動で口座に振り込まれます。
Googleマップによる表示、AJAX検索、日付カレンダーによる予約、フルカレンダーによる部屋管理ができます。
リアルタイムメッセージにより連絡がとれます。
予約確認メールの送信も可能。
写真のアップロード機能、アマゾンS3の利用方法も解説。
レビュー機能の実装、電話番号認証の実装方法解説。
HEROKUへのデプロイ方法を解説。
フルコードのダウンロード可能。

タスク数: 136