戻る

Rails6.0


お仕事売買サイトの構築 Rails6.0

  (0)
3,000円

タスク3-10   仕事の表示

このタスクについて


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




ナビゲーションバーにリンクを追加します。


記述追加 app\views\shared\_navbar.html.erb
77行目に「<%= link_to 'お仕事を登録する', new_gig_path, class: "navbar-item" %>」のリンクを追加しています。
 
<nav class="navbar is-danger" role="navigation" aria-label="main navigation"> 
    <div class="navbar-brand"> 
        <a class="navbar-item" href="/"> 
            <h1>テストサイトOshigoto</h1> 
        </a> 
        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> 
            <span aria-hidden="true"></span> 
            <span aria-hidden="true"></span> 
            <span aria-hidden="true"></span> 
        </a> 
    </div> 
    <div id="navbarBasicExample" class="navbar-menu"> 
        <div class="navbar-start"> 
            <div class="navbar-item"> 
                <div class="field has-addons"> 
                    <div class="control"> 
                        <input class="input" type="text" placeholder="どんなお仕事を?"> 
                    </div> 
                    <div class="control"> 
                        <a class="button is-success">検索</a> 
                    </div> 
                </div> 
            </div> 
        </div> 
        <div class="navbar-end"> 
            <a class="navbar-item"></a> 
            <a class="navbar-item"></a> 
            <!-- もしログインしていなかったら--> 
            <% if (!user_signed_in?) %> 
                <div class="navbar-item"> 
                    <div class="buttons"> 
                        <%= link_to  "新規ユーザ登録", new_user_registration_path, class: "button is-primary" %> 
                        <%= link_to  "ログイン", new_user_session_path, class: "button is-light" %> 
                    </div> 
                </div> 
            <!-- ログインしていたら --> 
            <% else %> 
                <div class="navbar-item has-dropdown is-hoverable"> 
                     <a class="navbar-link"> 
                        <figure class="image is-48x48 m-r-5"> 
                            <div style="margin-top: 0.6rem;"> 
                                <%= image_tag avatar_url(current_user), class: "is-rounded" %> 
                            </div> 
                        </figure> 
                        <%= current_user.full_name %> 
                    </a> 
                    <div class="navbar-dropdown"> 
                        <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> 
                        <%= link_to  "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %> 
                        <hr class="navbar-divider"> 
                        <%= link_to  "ログアウト", destroy_user_session_path, method: :delete, class: "navbar-item" %> 
                    </div> 
                </div> 
            <% end %> 
        </div> 
    </div> 
</nav> 
<% if (user_signed_in?) %> 
    <nav class="navbar has-shadow" style="z-index: 5;"> 
        <div class="container"> 
            <div class="navbar"> 
                <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> 
                <div class="navbar-item has-dropdown is-hoverable"> 
                    <a class="navbar-link">お仕事を売る人</a> 
                    <div class="navbar-dropdown"> 
                        <%= link_to 'お仕事を登録する', new_gig_path, class: "navbar-item" %> 
                        <a class="navbar-item"></a> 
                    </div> 
                </div> 
                <div class="navbar-item has-dropdown is-hoverable"> 
                    <a class="navbar-link">お仕事を買う人</a> 
                    <div class="navbar-dropdown"> 
                        <a class="navbar-item"></a> 
                        <a class="navbar-item"></a> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </nav> 
<% end %> 
<script> 
$(document).ready(function() { 
  // navbar burgerアイコンでクリックイベントを確認する 
  $(".navbar-burger").click(function() { 
      // 「navbar-burger」と「navbar-menu」の両方で「is-active」クラスを切り替える 
      $(".navbar-burger").toggleClass("is-active"); 
      $(".navbar-menu").toggleClass("is-active"); 
  }); 
}); 
</script> 



ブラウザ確認
http://localhost:3000/dashboard




リンク確認



ダッシュボードを更新します。


記述追加 app\views\users\dashboard.html.erb(178行目)
 
<!-- 新しいお仕事を登録 --> 
<div class="column is-one-third has-text-centered"> 
    <%= link_to new_gig_path do %> 
        <div class="card"> 
            <div class="card-image card-content is-horizontal-center is-flex "> 
                <figure class="image is-128x128 "> 
                    <%= image_tag 'icon_add.png' %> 
                </figure> 
            </div> 
            <div class="card-content"> 
                <strong>お仕事を新規登録する</strong> 
            </div>    
        </div> 
    <% end %> 
</div> 
<!-- 登録したお仕事 --> 
<% current_user.gigs.each do |gig| %> 
    <div class="column is-one-third"> 
        <div class="card"> 
            <div class="card-image"> 
                <%= link_to edit_gig_path(gig) do %> 
                    <figure class="image is-4by3"> 
                        <%= image_tag gig_cover(gig) %> 
                    </figure> 
                <% end %> 
            </div> 
            <div class="card-content p-t-5 p-b-5"> 
                <p class="subtitle is-6 m-b-5"><%= link_to gig.title, gig_path(gig) %></p> 
                <span class="star-review"><i class="fa fa-star"></i> 
                    4.8 <span class="has-text-primary">(23)</span> 
                </span>                                        
            </div> 
            <footer class="card-footer"> 
                <% basic_price = gig.pricings.find{ |p| p.pricing_type == 'basic' } %> 
                <a class="has-text-danger is-block card-footer-item has-text-right"> 
                    <% if !basic_price.nil? %> 
                        <span class="small-title">最低価格</span> 
                        <strong><%= number_to_currency(basic_price.price) %></strong>                                            
                    <% else %> 
                        <strong> 
                            <span class="small-title has-text-dark">まだ価格がありません</span> 
                        </strong> 
                    <% end %> 
                </a> 
            </footer>  
            
        </div> 
    </div> 
<% end %> 



app\views\users\dashboard.html.erb
 
<section class="section"> 
    <div class="container"> 
        <div class="columns"> 
        
            <!-- 左パネル --> 
            <div class="column is-one-third"> 
                <div class="columns is-multiline"> 
                    <!-- 上部 --> 
                    <div class="column is-full"> 
                        <div class="card"> 
                            <!-- アバター --> 
                            <div class="card-content is-horizontal-center is-flex"> 
                                <figure class="image is-256x256"> 
                                    <%= image_tag avatar_url(current_user), class: "is-rounded" %> 
                                </figure> 
                            </div> 
                            
                            <div class="card-content"> 
                                <!-- 画像アップロードボタン --> 
                                <div class="content has-text-centered"> 
                                    <p class="title is-5"> 
                                        <%= current_user.full_name %> 
                                    </p> 
                                    <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post do |f| %> 
                                        <div class="file"> 
                                            <label class="button is-primary is-outlined is-fullwidth"> 
                                                <%= f.file_field :avatar, class: "file-input", onchange: "this.form.submit();" %> 
                                                <i class="fas fa-upload"></i>&nbsp;&nbsp;&nbsp; アバター画像アップロード 
                                            </label> 
                                        </div> 
                                    <% end %>                               
                                </div> 
                                <hr class="h-10"> 
                                
                                <!-- アカウント情報 --> 
                                <article class="media"> 
                                    <div class="media-content">アカウント登録日</div> 
                                    <div class="media-right"> 
                                        <strong><%= I18n.l(current_user.created_at, format: :full_date) %></strong> 
                                    </div> 
                                </article> 
                                <hr class="h-10"> 
                                
                                <!-- 出身地 --> 
                                <article> 
                                    <div class="media"> 
                                        <div class="media-content">出身地</div> 
                                        <div class="media-right"> 
                                            <strong><%= current_user.from %></strong> <i class="toggle far fa-edit" aria-controls="user-from"></i> 
                                        </div> 
                                    </div> 
                                    <div class="content"> 
                                        <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-from', class: 'is-hidden'} do |f| %> 
                                            <div class="field"> 
                                                <%= f.text_field :from, autofocus: true, autocomplete: 'form', class: 'input'%> 
                                            </div> 
                                            <a class="toggle button is-light" aria-controls="user-from">キャンセル</a> 
                                            <%= f.submit "保存", class: "button is-danger" %> 
                                        <% end %> 
                                    </div> 
                                </article>                                
                                <hr class="h-10"> 
                                <!-- オンラインステータス --> 
                                <article> 
                                    <div class="media"> 
                                        <div class="media-content">ステータス</div> 
                                        <div class="media-right"> 
                                            <strong><% if current_user.status %> オンライン <% else %> オフライン <% end %></strong> <i class="toggle far fa-edit" aria-controls="user-status"></i> 
                                        </div> 
                                    </div> 
                                    <div class="content"> 
                                        <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-status', class: 'is-hidden'} do |f| %> 
                                            <div class="field"> 
                                                <%= f.select(:status, options_for_select([["オンライン", true], ["オフライン", false]]), {}, {class: "select is-fullwidth"}) %> 
                                            </div> 
                                            <a class="toggle button is-light" aria-controls="user-status">キャンセル</a> 
                                            <%= f.submit "保存", class: "button is-danger" %> 
                                        <% end %> 
                                    </div> 
                                </article> 
                            </div> 
                        </div> 
                    </div> 
                    <!-- 下部 --> 
                    <div class="column is-full"> 
                        <div class="card"> 
                            <div class="card-content"> 
                                <!-- アカウント詳細 --> 
                                <article> 
                                    <div class="media"> 
                                        <div class="media-content"> 
                                            <p> 
                                                <strong>自己紹介</strong> 
                                                <br> 
                                                <%= current_user.about %> 
                                            </p> 
                                        </div> 
                                        <div class="media-right"> 
                                            <i class="toggle far fa-edit" aria-controls="user-about"></i> 
                                        </div> 
                                    </div> 
                                    <div class="content"> 
                                        <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-about', class: 'is-hidden'} do |f| %> 
                                            <div class="field"> 
                                                <%= f.text_area :about, autofocus: true, autocomplete: 'form', class: 'input'%> 
                                            </div> 
                                            <a class="toggle button is-light" aria-controls="user-about">キャンセル</a> 
                                            <%= f.submit "保存", class: "button is-danger" %> 
                                        <% end %> 
                                    </div> 
                                </article> 
                                <hr class="h-10"> 
                                <!-- 言語 --> 
                                <article> 
                                    <div class="media"> 
                                        <div class="media-content"> 
                                            <p> 
                                                <strong>言語</strong> 
                                                <br> 
                                                <%= current_user.language %> 
                                            </p> 
                                        </div> 
                                        <div class="media-right"> 
                                            <i class="toggle far fa-edit" aria-controls="user-language"></i> 
                                        </div> 
                                    </div> 
                                    <div class="content"> 
                                        <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-language', class: 'is-hidden'} do |f| %> 
                                            <div class="field"> 
                                                <%= f.text_field :language, autofocus: true, autocomplete: 'form', class: 'input'%> 
                                            </div> 
                                            <a class="toggle button is-light" aria-controls="user-language">キャンセル</a> 
                                            <%= f.submit "保存", class: "button is-danger" %> 
                                        <% end %> 
                                    </div> 
                                </article> 
                                <hr class="h-10"> 
                                
                                <!-- アカウント連携 --> 
                                <article class="media"> 
                                    <div class="content"> 
                                        <p> 
                                            <strong>アカウント連携</strong><br/> 
                                            <% if current_user.provider %> 
                                                <span class="has-text-success">Facebookでログイン中</span> 
                                            <% else %> 
                                                <span class="has-text-danger">アカウント連携していません。</span> 
                                            <% end %> 
                                        </p> 
                                    </div> 
                                </article> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
            <!-- 右側 --> 
            <div class="column"> 
                <div class="columns is-multiline"> 
                    <!-- 新しいお仕事を登録 --> 
                    <div class="column is-one-third has-text-centered"> 
                        <%= link_to new_gig_path do %> 
                            <div class="card"> 
                                <div class="card-image card-content is-horizontal-center is-flex "> 
                                    <figure class="image is-128x128 "> 
                                        <%= image_tag 'icon_add.png' %> 
                                    </figure> 
                                </div> 
                                <div class="card-content"> 
                                    <strong>お仕事を新規登録する</strong> 
                                </div>    
                            </div> 
                        <% end %> 
                    </div> 
                    <!-- 登録したお仕事 --> 
                    <% current_user.gigs.each do |gig| %> 
                        <div class="column is-one-third"> 
                            <div class="card"> 
                                <div class="card-image"> 
                                    <%= link_to edit_gig_path(gig) do %> 
                                        <figure class="image is-4by3"> 
                                            <%= image_tag gig_cover(gig) %> 
                                        </figure> 
                                    <% end %> 
                                </div> 
                                <div class="card-content p-t-5 p-b-5"> 
                                    <p class="subtitle is-6 m-b-5"><%= link_to gig.title, gig_path(gig) %></p> 
                                    <span class="star-review"><i class="fa fa-star"></i> 
                                        4.8 <span class="has-text-primary">(23)</span> 
                                    </span>                                        
                                </div> 
                                <footer class="card-footer"> 
                                    <% basic_price = gig.pricings.find{ |p| p.pricing_type == 'basic' } %> 
                                    <a class="has-text-danger is-block card-footer-item has-text-right"> 
                                        <% if !basic_price.nil? %> 
                                            <span class="small-title">最低価格</span> 
                                            <strong><%= number_to_currency(basic_price.price) %></strong>                                            
                                        <% else %> 
                                            <strong> 
                                                <span class="small-title has-text-dark">まだ価格がありません</span> 
                                            </strong> 
                                        <% end %> 
                                    </a> 
                                </footer>  
                                
                            </div> 
                        </div> 
                    <% end %> 
                </div> 
            </div> 
            
        </div> 
    </div> 
</section> 



「app\helpers\application_helper.rb」ファイルに以下のメソッドを追加します。


記述追加 app\helpers\application_helper.rb(13行目)
 def gig_cover(gig) 
    if gig.photos.attached? 
        url_for(gig.photos[0]) 
    else 
        ActionController::Base.helpers.asset_path('icon_default_image.jpg') 
    end 
end    



app\helpers\application_helper.rb
 module ApplicationHelper 

    def avatar_url(user) 
        if user.avatar.attached? 
            url_for(user.avatar) 
        elsif user.image? 
            user.image 
        else 
            ActionController::Base.helpers.asset_path('icon_default_avatar.jpg') 
        end 
    end    

    def gig_cover(gig) 
        if gig.photos.attached? 
            url_for(gig.photos[0]) 
        else 
            ActionController::Base.helpers.asset_path('icon_default_image.jpg') 
        end 
    end    
end 



「app\javascript\packs\application.js」ファイルの14行目を以下の記述に書き換えます。


書き換え app\javascript\packs\application.js(14行目)
$(document).on('turbolinks:load', () => {



app\javascript\packs\application.js
 
// This file is automatically compiled by Webpack, along with any other files 
// present in this directory. You're encouraged to place your actual application logic in 
// a relevant structure within app/javascript and only use these pack files to reference 
// that code so it'll be compiled. 

require("@rails/ujs").start() 
require("turbolinks").start() 
require("@rails/activestorage").start() 
require("channels") 

window.Noty = require("noty") 
window.Dropzone = require("dropzone") 

$(document).on('turbolinks:load', () => { 
    $('.toggle').on('click', (e) => { 
        e.stopPropagation(); 
        e.preventDefault(); 
        $('#' + e.target.getAttribute('aria-controls')).toggleClass('is-hidden'); 
    }) 
}) 

// Uncomment to copy all static images under ../images to the output folder and reference 
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) 
// or the `imagePath` JavaScript helper below. 
// 
// const images = require.context('../images', true) 
// const imagePath = (name) => images(name, true) 

require("trix") 
require("@rails/actiontext") 



ブラウザ確認
http://localhost:3000/dashboard




ダッシュボード



登録したお仕事の詳細表示ができるようにします。


コマンド
画像をカルーセル表示できるようにします。
yarn add bulma-extensions


「app\assets\stylesheets\application.scss」ファイルに以下の記述を追加します。


記述追加 app\assets\stylesheets\application.scss(19行目)
@import 'bulma-extensions/bulma-carousel/dist/css/bulma-carousel.min';



app\assets\stylesheets\application.scss
 
/* 
 * This is a manifest file that'll be compiled into application.css, which will include all the files 
 * listed below. 
 * 
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's 
 * vendor/assets/stylesheets directory can be referenced here using a relative path. 
 * 
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the 
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 
 * files in this directory. Styles in this file should be added after the last require_* statement. 
 * It is generally better to create a new file per style scope. 
 * 
 *= require_tree . 
 *= require_self 
 */ 
 
 @import 'bulma'; 
 @import 'bulma-extensions'; 
 @import 'bulma-extensions/bulma-carousel/dist/css/bulma-carousel.min'; 
 @import 'noty/lib/noty'; 
 @import 'noty/lib/themes/sunset'; 
 @import 'dropzone/dist/basic.css'; 
 @import 'dropzone/dist/dropzone.css'; 



「app\javascript\packs\application.js」ファイルに以下の記述を追加します。


記述追加 app\javascript\packs\application.js(13行目)
window.BulmaCarousel = require("bulma-extensions/bulma-carousel/dist/js/bulma-carousel")



app\javascript\packs\application.js
 
// This file is automatically compiled by Webpack, along with any other files 
// present in this directory. You're encouraged to place your actual application logic in 
// a relevant structure within app/javascript and only use these pack files to reference 
// that code so it'll be compiled. 

require("@rails/ujs").start() 
require("turbolinks").start() 
require("@rails/activestorage").start() 
require("channels") 

window.Noty = require("noty") 
window.Dropzone = require("dropzone") 
window.BulmaCarousel = require("bulma-extensions/bulma-carousel/dist/js/bulma-carousel") 

$(document).on('turbolinks:load', () => { 
    $('.toggle').on('click', (e) => { 
        e.stopPropagation(); 
        e.preventDefault(); 
        $('#' + e.target.getAttribute('aria-controls')).toggleClass('is-hidden'); 
    }) 
}) 

// Uncomment to copy all static images under ../images to the output folder and reference 
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) 
// or the `imagePath` JavaScript helper below. 
// 
// const images = require.context('../images', true) 
// const imagePath = (name) => images(name, true) 

require("trix") 
require("@rails/actiontext") 



「app\controllers\gigs_controller.rb」ファイルの「show()」メソッドを以下のように編集します。


記述追加 app\controllers\gigs_controller.rb(83行目)
   def show 
    @categories = Category.all 
  end 



app\controllers\gigs_controller.rb
 
class GigsController < ApplicationController 
 
  protect_from_forgery except: [:upload_photo] 

  before_action :authenticate_user!, except: [:show] 
  before_action :set_gig, except: [:new, :create] 
  before_action :is_authorised, only: [:edit, :update, :upload_photo, :delete_photo] 
  before_action :set_step, only: [:update, :edit] 

  def new 
    @gig = current_user.gigs.build 
    @categories = Category.all 
  end 

  def create 
    @gig = current_user.gigs.build(gig_params) 
    if @gig.save 
      @gig.pricings.create(Pricing.pricing_types.values.map{ |x| {pricing_type: x} }) 
      redirect_to edit_gig_path(@gig), notice: "保存しました" 
    else 
      redirect_to request.referrer, flash: { error: @gig.errors.full_messages } 
    end 
  end 

  def edit 
    @categories = Category.all 
  end 

  def update 
    if @step == 2 
      gig_params[:pricings_attributes].each do |index, pricing| 
        if @gig.has_single_pricing && pricing[:pricing_type] != Pricing.pricing_types.key(0) 
          next; 
        else 
          if pricing[:title].blank? || pricing[:description].blank? || pricing[:delivery_time].blank? || pricing[:price].blank? 
            return redirect_to request.referrer, flash: {error: "価格が無効です"} 
          end 
        end 
      end 
    end 
    if @step == 3 && gig_params[:description].blank? 
      return redirect_to request.referrer, flash: {error: "詳細を空白にすることはできません"} 
    end 
    if @step == 4 && @gig.photos.blank? 
      return redirect_to request.referrer, flash: {error: "写真がありません"} 
    end 
    if @step == 5 
      @gig.pricings.each do |pricing| 
        if @gig.has_single_pricing && !pricing.basic? 
          next; 
        else 
          if pricing[:title].blank? || pricing[:description].blank? || pricing[:delivery_time].blank? || pricing[:price].blank? 
            return redirect_to edit_gig_path(@gig, step: 2), flash: {error: "価格が無効です"} 
          end 
        end 
      end 
      if @gig.description.blank? 
        return redirect_to edit_gig_path(@gig, step: 3), flash: {error: "詳細を空白にすることはできません"} 
      elsif @gig.photos.blank? 
        return redirect_to edit_gig_path(@gig, step: 4), flash: {error: "写真がありません"} 
      end 
    end 
    if @gig.update(gig_params) 
      flash[:notice] = "保存しました" 
    else 
      return redirect_to request.referrer, flash: {error: @gig.errors.full_messages} 
    end 
    if @step < 5 
      redirect_to edit_gig_path(@gig, step: @step + 1) 
    else 
      redirect_to dashboard_path 
    end 
  end 

  def show 
    @categories = Category.all 
  end 

  def upload_photo 
    @gig.photos.attach(params[:file]) 
    render json: { success: true } 
  end 

  def delete_photo 
    @image = ActiveStorage::Attachment.find(params[:photo_id]) 
    @image.purge 
    redirect_to edit_gig_path(@gig, step: 4) 
  end 

  private 
  def set_step 
    @step = params[:step].to_i > 0 ? params[:step].to_i : 1 
    if @step > 5 
      @step = 5 
    end 
  end 

  def set_gig 
    @gig = Gig.find(params[:id]) 
  end 

  def is_authorised 
    redirect_to root_path, alert: "あなたには権限がありません。" unless current_user.id == @gig.user_id 
  end 

  def gig_params 
    params.require(:gig).permit(:title, :video, :description, :active, :category_id, :has_single_pricing, 
                                pricings_attributes: [:id, :title, :description, :delivery_time, :price, :pricing_type]) 
  end 
end 



「app\views\shared」フォルダに「_categories.html.erb」ファイルを新規作成します。


app\views\shared\_categories.html.erb(新規作成したファイル)
 <nav class="navbar has-shadow" style="z-index: 3"> 
    <div class="container"> 
        <div class="navbar"> 
            <% @categories.each do |item| %> 
              <%= link_to "#{item.name}", root_path, class: "navbar-item" %> 
            <% end %> 
        </div> 
    </div> 
</nav> 



「app\views\gigs\show.html.erb」ファイルを以下のように編集します。


app\views\gigs\show.html.erb
 
<%= render 'shared/categories' %> 
<section class="section"> 
    <div class="container"> 
        <div class="columns"> 
            <!-- 左側 --> 
            <div class="column is-two-thirds"> 
                <div class="columns is-multiline"> 
                    <!-- 画像カルーセル表示 --> 
                    <div class="column is-full">   
                        <div class="card"> 
                            <div class="card-content"> 
                                <div class="content"> 
                                    <p class="title is-4"><%= @gig.title %></p> 
                                </div> 
                                <hr> 
                                <div class="hero-carousel" id="carousel-photo"> 
                                    <% @gig.photos.each do |photo| %> 
                                        <div class="carousel-item has-background image is-16by9"> 
                                            <%= image_tag url_for(photo), class: "is-background", width: "100%" %> 
                                        </div> 
                                    <% end %> 
                                    <% if @gig.video.present? %> 
                                        <div class="video-container"> 
                                            <iframe src="https://www.youtube.com/embed/<%= @gig.video %>" allowfullscreen></iframe> 
                                        </div> 
                                    <% end %> 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
                    <!-- お仕事の内容 --> 
                    <div class="column"> 
                        <div class="card"> 
                            <div class="card-content"> 
                                <article class="media"> 
                                    <div class="media-content"> 
                                        <p><strong>このお仕事について</strong></p> 
                                        <hr> 
                                        <%= @gig.description %> 
                                    </div> 
                                </article> 
                            </div> 
                        </div>                        
                    </div> 
                    
                </div> 
            </div> 
            <!-- 右側 --> 
            <div class="column"> 
                <div class="columns is-multiline"> 
                    <!-- 価格プラン --> 
                    <div class="column is-full"> 
                        <div class="tabs is-fullwidth" id="tabs"> 
                            <ul> 
                                <% Pricing.pricing_types.each do |key, value| %> 
                                    <li class="tab <%= 'is-active' if value == 0 %> " 
                                                data-tab="<%= key %>" style="<%= 'display: none' if @gig.has_single_pricing && value != 0 %>"> 
                                        <a> 
                                            <% if value == 0 %> 
                                                ベーシック 
                                            <% elsif value == 1 %> 
                                                スタンダード 
                                            <% else %> 
                                                プレミアム 
                                            <% end %> 
                                        </a> 
                                    </li> 
                                <% end %> 
                            </ul> 
                        </div> 
                        <div class="tabs-content"> 
                            <% @gig.pricings.each do |p| %> 
                                <div class="tab-content" id="tab-<%= p.pricing_type %>" style="<%= 'display: none' if !p.basic? %>"> 
                                    <div class="card"> 
                                        <div class="card-content"> 
                                            <div class="media"> 
                                                <div class="media-content"> 
                                                    <strong><%= p.title %></strong>                                                                                                        
                                                </div> 
                                                <div class="media-right"> 
                                                    <p class="title is-4"><%= number_to_currency(p.price) %></p> 
                                                </div>                                                
                                            </div> 
                                            <div class="content f-15"> 
                                                <p class="m-t-30"><%= p.description %></p> 
                                                <p class="m-t-30"> 
                                                    <strong><i class="far fa-clock"></i> 期日: <%= p.delivery_time %>日</strong>                                                    
                                                </p> 
                                            </div> 
                                            <% if (!user_signed_in? && @gig.active) || (user_signed_in? && @gig.active && @gig.user_id != current_user.id) %> 
                                                <button class="button is-fullwidth is-danger">購入する (<%= number_to_currency(p.price) %>)</button>  
                                            <% else %> 
                                                <button class="button is-fullwidth is-danger" disabled>ご利用できません</button>  
                                            <% end %> 
                                            
                                        </div> 
                                    </div> 
                                </div> 
                            <% end %> 
                        </div> 
                    </div> 
                    <!-- プロフィール --> 
                    <div class="column"> 
                        <div class="card"> 
                            <div class="card-content is-horizontal-center is-flex"> 
                                <figure class="image is-256x256"> 
                                    <%= image_tag avatar_url(@gig.user), class: "is-rounded" %> 
                                </figure> 
                            </div> 
                            <div class="card-content f-15"> 
                                <div class="content has-text-centered"> 
                                    <p class="title is-5"><%= @gig.user.full_name %></p> 
                                    <button class="button is-black is-outlined is-fullwidth">メッセージを送る</button> 
                                </div> 
                                <article class="media"> 
                                    <div class="media-content"> 
                                        <i class="fas fa-user m-r-5"></i> アカウント登録日 
                                    </div> 
                                    <div class="media-right"> 
                                        <%= I18n.l(@gig.user.created_at, format: :full_date) %> 
                                    </div> 
                                </article> 
                                <article class="media"> 
                                    <div class="media-content"> 
                                        <i class="fas fa-map-marker-alt m-r-5"></i> 出身地 
                                    </div> 
                                    <div class="media-right"> 
                                        <%= @gig.user.from %> 
                                    </div> 
                                </article> 
                                <article class="media"> 
                                    <div class="media-content"> 
                                        <%= @gig.user.about %> 
                                    </div> 
                                </article> 
                            </div> 
                        </div> 
                    </div> 
                    
                </div> 
            </div> 
            
        </div> 
    </div> 
</section> 
<script> 
    BulmaCarousel.attach('#carousel-photo', { 
        slidesToScroll: 1, 
        slidesToShow: 1 
    }); 
    $(document).ready(function() { 
        $('#tabs li').on('click', function() { 
            var type = $(this).data('tab'); 
            $('#tabs li').removeClass('is-active'); 
            $(this).addClass('is-active'); 
            $('.tab-content').hide(); 
            $('#tab-' + type).show(); 
        }) 
    }) 
</script> 



ブラウザ確認
http://localhost:3000/gigs/1


ナビゲーションバーにカテゴリーが表示され、お仕事の詳細を見ることができます。




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

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

お仕事売買サイトの構築 Rails6.0

3,000円

フリーランスの方がお仕事を登録し、仕事を探している人が探して買うことができます。
お仕事を探している人がリクエストを出してお仕事をしてくれる人を募集する事もできます。
お仕事が売れると売上の80%が自動で指定口座に振り込まれます。
お仕事の購入はクレジットカードで決済します。
質問があればメッセージを送ることができ、リアルタイムで会話表示することができます。
検索機能、写真のアップロード、レビュー機能の実装、Facebook認証、アマゾンS3の利用方法も解説。
HEROKUへのデプロイ方法を解説。
フルコードのダウンロード可能。

タスク数: 146