[27]Markdown関数 << [ホームに戻る] >> [29]サブスクリプション
動画プレイヤーにWistiaを導入します。
wistia.com
Freeのアカウントを作成してログインします。
ログインしたら「create」ボタンを押してサンプルのビデオを登録して下さい。
ビデオを登録したら「Embed＆Share」をクリックします。
「Share Link」のタブをクリックして表示されたリンクをコピーします。
タスクテーブルのビデオカラムにコピーしたリンクの最後の部分「medias/x0sumiaaz5」の「x0sumiaaz5」だけを格納して下さい。
「app\models\task.rb」ファイルに以下の記述を追加します。
記述追加 app\models\task.rb(13行目)
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プレーヤーと機能ボタンをつけます。
１．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>
２．31行目に前へ次へボタンの記述を追加。
<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>
３．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>
記述更新 app\views\task\show.html.erb
<section class="section"> <div class="container"> <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="row"> </div> <div class="card-action grey-text text-darken-4"> <div class="container"> <div class="notification"> <%= @task.title %> </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"> <span class="tag is-white is-large"> <%= @task.description %></span> </div> <% if !@task.note.blank? %> <div class="box"> <%= markdown(@task.note) %> </div> <% end %> </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.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" 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
40行目と61行目に「<%= 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>テストサイトGakushuu6</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;"> <figure class="image is-48x48 m-r-5"> <div style="margin-top: 0.6rem;"> <%= image_tag avatar_url(current_user), class: "is-rounded" %> </div> </figure> <a class="navbar-item"><%= current_user.full_name %> <i class="far fa-caret-square-down"></i> </a> <div class="navbar-dropdown"> <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> <%= 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> <% if (user_signed_in?) %> <nav class="navbar has-shadow" style="z-index: 5;"> <div class="container"> <div class="navbar"> <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link">メニュー</a> <div class="navbar-dropdown"> <a class="navbar-item"></a> <hr class="navbar-divider"> <%= link_to "プロジェクト", project_index_path, class: "navbar-item" %> <%= link_to "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %> </div> </div> </div> </div> </nav> <% end %> <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>
↓↓クリックして頂けると励みになります。
