動画プレイヤーにWistiaを導入します。
wistia.com
Freeのアカウントを作成してログインします。
ログインしたら「create」ボタンを押してサンプルのビデオを登録して下さい。
ビデオを登録したら「Embed＆Share」をクリックします。
「Share Link」のタブをクリックして表示されたリンクをコピーします。
タスクテーブルのビデオカラムにコピーしたリンクの最後の部分「medias/x0sumiaaz5」の「x0sumiaaz5」だけを格納して下さい。
「app\models\task.rb」ファイルに以下の記述を追加します。
記述追加 app\models\task.rb(10行目)
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 :tag, 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 %> <% 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"> <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
ナビゲーションバーのリンクを更新します。
記述追加 app\views\shared\_navbar.html.erb
35行目に「<%= link_to "プロジェクト", project_index_path, class: "navbar-item" %>」のリンクを追加
<nav class="navbar is-link" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/"> <h1>テストサイトGakushuu</h1> </a> <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-end"> <a class="navbar-item"></a> <a class="navbar-item"></a> <!-- もしログインしていなかったら--> <% if (!user_signed_in?) %> <div class="navbar-item"> <div class="buttons"> <%= link_to "新規ユーザ登録", new_user_registration_path, class: "button is-info" %> <%= link_to "ログイン", new_user_session_path, class: "button is-light" %> </div> </div> <!-- ログインしていたら --> <% else %> <div class="navbar-item has-dropdown is-hoverable" style="margin-right: 100px;"> <a class="navbar-item"> <%= image_tag current_user.gravatar_url, class: "img-circle avatar-small" %> <%= current_user.full_name %><i class="fas fa-angle-down"></i> </a> <div class="navbar-dropdown"> <%= link_to "プロジェクト", project_index_path, class: "navbar-item" %> <%= link_to "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %> <hr class="navbar-divider"> <%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "navbar-item" %> </div> </div> <% end %> </div> </div> </nav> <script> $(document).ready(function() { // navbar burgerアイコンでクリックイベントを確認する $(".navbar-burger").click(function() { // 「navbar-burger」と「navbar-menu」の両方で「is-active」クラスを切り替えます $(".navbar-burger").toggleClass("is-active"); $(".navbar-menu").toggleClass("is-active"); }); }); </script>
