戻る

Rails5.0


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

  (0)
1,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(8行目)
 
  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 

  validates :title, presence: true, length: { maximum: 50 } 
  validates :video, presence: true 
  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(7,8行目)
   	@next_task = @task.next 
  	@prev_task = @task.prev 



app\controllers\task_controller.rb
 class TaskController < ApplicationController 
	def show 
		project = Project.find(params[:project_id]) 
		@tasks = project.tasks.order(:tag) 
		@task = @tasks.find(params[:id]) 
		@next_task = @task.next 
		@prev_task = @task.prev 
	end 
end 



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


記述更新 app\views\task\show.html.erb
  • 8行目にWistiaプレーヤーの記述を追加。
  • 14行目~18行目に機能ボタンの記述を追加。
  • 31行目~45行目に前へ次へボタンの記述を追加。
  • 98行目からスクリプトの記述を追加

コードをコピーしてファイルの内容を置き換えて下さい。
 
  <section class="section"> 
    <div class="container" data-turbolinks="false"> 
        <div class="col m8"> 
            <div class="card z-depth-2"> 
                <!--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> 
                <div class="card-action grey-text text-darken-4"> 
                    <div class="container"> 
                        <div class="notification"> 
                            <strong><%= @task.title %></strong> 
                        </div> 
                    </div> 
                    <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> 
                    <div class="box"> 
                        <%= markdown(@task.note) %> 
                    </div> 
                    
                </div> 
            </div> 
        </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.note %></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" do %> 
                                                <%= task.title %> 
                                            <% end %>                                                                
                                            </span> 
                                        
                                    </div>                            
                                <% end %> 
                            <% end %> 
                        </div> 
                    </div> 
                </div> 
            </article> 
        </div> 
 
    </div> 
  </section> 
<!-- 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> 



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



タスク詳細ページ






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

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

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

1,000円

動画で学べるサイトを構築するプロジェクトです。プロジェクトを登録し、そのプロジェクトに動画を登録できます。プロジェクトはクレジットカードで購入でき、購入後すぐに動画を見ることができます。写真のアップロード、レビュー機能の実装、Google認証、アマゾンS3の利用方法も解説。ActiveAdminの実装、Gメールの設定、 HEROKUへのデプロイ方法を解説。 フルコードのダウンロード可能。

タスク数: 100