[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"> <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>
ブラウザ確認
http://localhost:3000/project/1
↓↓クリックして頂けると励みになります。
