Rails6.0 | 動画学習サイトを作成| 26 | プロジェクトビュー - 学生向けプログラミング入門

[25]プロジェクトコントローラー　<<　[ホームに戻る]　>> [27]Markdown関数

写真をカルーセル表示できるようにします。

コマンド
yarn add bulma-extensions

「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（15行目）

$(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.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\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';

プロジェクトに登録した画像の最初だけを表示するためのヘルパーメソッドを追加します。

何でも良いので「icon_default_image.jpg」ファイルを「app\assets\images」フォルダにコピーして下さい。

「app\helpers\application_helper.rb」ファイルを編集します。

記述追加　app\helpers\application_helper.rb(13行目)

    def project_cover(project)
        if project.images.attached?
            url_for(project.images[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 project_cover(project)
        if project.images.attached?
            url_for(project.images[0])
        else
            ActionController::Base.helpers.asset_path('icon_default_image.jpg')
        end
    end       

end

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

app\views\project\index.html.erb

<div class="box">
  <article class="media">
    <div class="column">
        <div class="columns is-multiline">
            <% if @projects.count > 0 %>
                <% @projects.each do |project| %>
                    <%= link_to project do %>
                        <div class="column is-one-third">
                            <div class="card">
                               
                                <div class="card-image">
                                    <%= link_to project_path(project) do %>
                                        <figure class="image is-4by3">
                                            <%= image_tag project_cover(project) %>
                                        </figure>
                                    <% end %>
                                </div>
                                <div class="card-content p-t-5 p-b-5">
                                    <h4 class="title is-4" style="color: black; margin: 10px;"><%= project.name %></h4>
                                </div>
                                <div class="card-content p-t-5 p-b-5">
                                    <%= link_to users_path(project.user.id), class: "tootip" do %>
                                        <figure class="image is-48x48">
                                            <%= image_tag avatar_url(project.user), class: "is-rounded" %>
                                            <span class="tag is-light"><%= project.user.full_name %></span>
                                        </figure>
                                    <% end %>
                                </div>
                                <div class="card-content p-t-5 p-b-5">
                                    <span class="tag is-danger is-large" style="margin-top: 10px; margin-bottom: 10px;"><%= number_to_currency(project.price) %></span>
                                </div>
                                <footer class="card-footer">
                                    <h4 style="margin: 20px;"><%= project.description %></h4>
                                </footer>  
                                
                            </div>
                        </div>
                    <% end %>
                <% end %>
            <% else %>
                <div class="column is-one-third">
                    <div class="card">
                        <div class="card-content p-t-5 p-b-5">
                            <p class="subtitle is-6 m-b-5">表示できるプロジェクトはありません。</p>
                        </div>
                      
                    </div>
                </div>
            <% end %>
      </div>
    </div>
  </article>
</div>

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

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

app\views\project\show.html.erb

<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">
                                    <h1 class="title"><%= @project.name %></h1>
                                    <div class="title is-4 has-text-right" style="color: black;"><%= number_to_currency(@project.price) %></div>
                                </div>
                                <hr>
                                <!-- 画像カルーセル表示 -->
                                <div class="hero-carousel" id="carousel-photo">
                                    <% @project.images.each do |photo| %>
                                        <div class="carousel-item has-background image is-16by9">
                                            <%= image_tag url_for(photo), class: "is-background", width: "100%" %>
                                        </div>
                                    <% end %>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="column">
                        <div class="card">
                            <div class="card-content">
                                <!-- コンテンツ -->
                                <div class="box">
                                    <article class="media">
                                        <div class="media-content">
                                            <div class="content">
                                                <h2 class="subtitle">このプランについて</h2>
                                                <hr>
                                                <%= @project.description %>
                                            </div>
                                        </div>
                                    </article>
                                </div>
                                <!-- タスク Section -->
                                <div class="box">
                                    <article class="media">
                                        <div class="media-content">
                                            <div class="content">
                                                <div class="collection">
                                                    <% @tasks.each do |task| %>
                                                        <% if task.header %>
                                                            <br/>
                                                            <div class="collection-item active">
                                                                <span class="tag is-link is-large"> <%= task.title %></span>
                                                                <span class="tag is-white is-large"> <%= task.description %></span>
                                                            </div>
                                                            <br/>
                                                        <% else %>
                                                            <div class="collection-item active">
                                                                &nbsp;&nbsp;&nbsp;&nbsp;<span class="tag is-light is-medium" style="margin: 3px;">
                                                                    <%= link_to [task.project, task], class: "collection-item", data: { turbolinks: false} do %>
                                                                        <%= task.title %>
                                                                    <% end %>                                                                
                                                                 </span>
                                                                
                                                            </div>                            
                                                        <% end %>
                                                    <% end %>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                </div>
 
                            </div>
                        </div>                        
                    </div>
                </div>
            </div>
            <!-- 右側 -->
            <div class="column">
                <div class="columns is-multiline">
                    <!-- 購入 -->
                    <div class="column is-full">
                        <div class="card">
                            <div class="card-content">
                                <div class="media">
                                    <div class="media-content">
                                        <strong><%= @project.name %></strong>                                                                                                        
                                    </div>
          
                                    <div class="media-right">
                                        <p class="title is-4" style="color: black;"><%= number_to_currency(@project.price) %></p>
                                    </div>                                                
                                </div>
                                <div class="card-content p-t-5 p-b-5">
                                    <%= link_to users_path(@project.user.id), class: "tootip" do %>
                                        <figure class="image is-48x48">
                                            <%= image_tag avatar_url(@project.user), class: "is-rounded" %>
                                            <span class="tag is-light"><%= @project.user.full_name %></span>
                                        </figure>
                                    <% end %>
                                </div>                     

                                <div class="content f-15">
                                    <p class="m-t-30"><%= @project.content %></p>
                                    <p class="m-t-30">
                                        <strong>タスク数: <i class="far fa-clock"></i> <%= @tasks.count %></strong>                                                    
                                    </p>
                                </div>
                                <% if user_signed_in? %>
                                    <button type="submit" class="button is-fullwidth is-danger">購入する</button>
                                <% else %>
                                    <button class="button is-fullwidth is-danger" disabled>ログインして下さい</button>  
                                <% end %>
                            </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>