戻る

Rails6.0


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

  (0)
2,000円

タスク4-4   動画(Wistia)

このタスクについて


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




動画プレイヤーにWistiaを導入します。
wistia.com


Freeのアカウントを作成してログインします。


Try for free




ログインしたら「create」ボタンを押してサンプルのビデオを登録して下さい。


サンプルビデオ登録




ビデオを登録したら「Embed&Share」をクリックします。


Embed Share




「Share Link」のタブをクリックして表示されたリンクをコピーします。


リンクをコピー




タスクテーブルのビデオカラムにコピーしたリンクの最後の部分「medias/x0sumiaaz5」の「x0sumiaaz5」だけを格納して下さい。


Video




「app\models\task.rb」ファイルに以下の記述を追加します。


記述追加 app\models\task.rb(12行目)
 
  def next 
  	project.tasks.where("tag > ? AND header = ?", tag, false).order(:tag).first 
  end 

  def prev 
  	project.tasks.where("tag < ? AND header = ?", tag, false).order(:tag).last 
  end 



app\models\task.rb
 
class Task < ApplicationRecord 

  belongs_to :project 

  has_rich_text :description 

  validates :title, presence: true, length: { maximum: 50 } 
  validates :video, presence: true 
  validates :tag, presence: true 
  validates :description, presence: true, length: { maximum: 500 } 
  validates :project, presence: true 

  def next 
  	project.tasks.where("tag > ? AND header = ?", tag, false).order(:tag).first 
  end 
  
  def prev 
  	project.tasks.where("tag < ? AND header = ?", tag, false).order(:tag).last 
  end 
end 



「app\controllers\task_controller.rb」ファイルに以下の記述を追加します。


記述追加 app\controllers\task_controller.rb(9,10行目)
  	@next_task = @task.next 
  	@prev_task = @task.prev 



app\controllers\task_controller.rb
 
class TaskController < ApplicationController 

  before_action :set_task, only: [:show] 

  def show 
  	project = Project.find(params[:project_id]) 
    @tasks = project.tasks.order(:tag) 
    
    @next_task = @task.next 
    @prev_task = @task.prev 
    
  end 

  private 
  
    # コールバックを使用して、アクション間で共通のセットアップまたは制約を共有します。 
    def set_task 
      @task = Task.find(params[:id]) 
    end 

    # 信頼できるパラメータのリストのみを許可します。 
    def task_params 
      params.require(:task).permit(:title, :note, :video, :header, :tag, :project_id, :active, :description) 
    end 
end 



「app\views\task\show.html.erb」ファイルを編集してWistiaプレーヤーと機能ボタンをつけます。


1.5行目にWistiaプレーヤーの記述を追加
 
<!--Wistiaプレーヤー--> 
<div id="wistia_<%= @task.video %>"></div> 
<div class="row"> 
    <div class="container"> 
        <div class="notification"> 
            <!-- Wistia機能ボタン --> 
            <button class="button is-light" onclick="setPlaySpeed(0.75)">0.75x</button> 
            <button class="button is-light" onclick="setPlaySpeed(1)">1x</button> 
            <button class="button is-light" onclick="setPlaySpeed(1.25)">1.25x</button> 
            <button class="button is-light" onclick="setPlaySpeed(1.5)">1.5x</button> 
            <button class="button is-light" onclick="setPlaySpeed(2)">2x</button> 
        </div> 
    </div> 
</div> 



2.31行目に前へ次へボタンの記述を追加。
 
<div class="container"> 
    <div class="notification"> 
        <% if !@prev_task.nil? %> 
            <%= link_to "前のタスク", [@prev_task.project, @prev_task], class: "button is-success"  %> 
        <% else %>	
            &nbsp; 
        <% end %> 
        <% if !@next_task.nil? %> 
            <span class="right"> 
                <%= link_to "次のタスク", [@next_task.project, @next_task], class: "button is-success"  %> 
            </span> 
        <% end %> 
    </div> 
</div> 



3.93行目からスクリプトの記述を追加
 
<!-- Wistia スクリプト--> 
<script src="http://fast.wistia.net/static/E-v1.js"></script> 
<script> 
	wistiaEmbed = Wistia.embed("<%= @task.video %>", { 
		videoQuality: "hd-only", 
		videoFoam: true 
	}); 
	function setPlaySpeed(speed) { 
		wistiaEmbed.playbackRate(speed); 
	} 
</script> 



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

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

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

2,000円

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

タスク数: 128