戻る

Rails6.0


動画学習サイトの構築 Rails6.0

  (0)
2,000円

タスク4-2   プロジェクトビュー

このタスクについて


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




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


コマンド
yarn add bulma-extensions


「app\javascript\packs\application.js」ファイルを以下のように書き換えます。


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



2.書き換え 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 




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

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

動画学習サイトの構築 Rails6.0

2,000円

Rails6.0で作成しています。
動画で学べるサイトを構築するプロジェクトです。
プロジェクトを登録し、そのプロジェクトに動画を登録できます。
プロジェクトはクレジットカードで購入でき、購入後すぐに動画を見ることができます。
写真の複数アップロード、レビュー機能の実装、Google認証、アマゾンS3の利用方法も解説。
管理ダッシュボードtrestleの実装、Gメールの設定、 HEROKUへのデプロイ方法を解説。
質問があればメッセージを送ることができ、リアルタイムで会話表示することができます。
フルコードのダウンロード可能。

タスク数: 128