https://d226lax1qjow5r.cloudfront.net/blog/blogposts/create-a-party-with-ruby-on-rails-and-the-vonage-video-api-part-1-building-the-backend-dr/Blog_Ruby_Video-API-Part1_1200x600.png

Ben Greenbergヴォネージの卒業生

ベンはセカンドキャリアの開発者で、以前は成人教育、コミュニティ組織化、非営利団体運営の分野で10年を過ごした。彼はVonageの開発者支援者として働いていた。コミュニティ開発とテクノロジーの交差点について定期的に執筆している。南カリフォルニア出身で、長年ニューヨークに住んでいたが、現在はイスラエルのテルアビブ近郊に在住。

Ruby on RailsとVonage Video APIでパーティーを作ろう Part 1

最終更新日 May 5, 2021

#video-api

#ruby

#ruby-on-rails

所要時間：4 分

私の息子は最近9歳の誕生日を迎えたが、同じ年頃の多くの子供と同じように、誕生日パーティーを何ヶ月も楽しみにしていた。Covid-19が大流行している中、今年は何か違うことをする必要があると思ったので、Vonage Video APIを使って息子用のビデオ視聴パーティーアプリを作った！

Vonage Video API と Ruby on Rails を使えば、あなたにもビデオ視聴パーティ・アプリを作ることができます。この 2 部構成のシリーズでは、フルスタックの Rails アプリケーションを構築する手順を説明します。第 1 回はアプリのバックエンドに焦点を当て、第 2 回はフロントエンドに焦点を当てます。

tl;drこのアプリのデプロイをすぐに始めたい場合は、以下のサイトを参照してほしい。 GitHubにアプリの全コードがあります。.

アプリの機能

アプリケーションのビルドを始める前に、このアプリケーションが何をするのかを少し説明しよう。

このアプリには3つのビューがある：

ランディングページ
パーティービデオチャット
ビデオ鑑賞会

アプリへのエントリーはランディングページからとなる。ランディングページで、参加者は自分の名前とパーティーのパスワードを聞かれる。名前は、テキストチャットで参加者を識別するために使用される。パスワードは、アプリの小さなセキュリティ・レイヤーとなる。

参加者が自分の名前と正しいパーティパスワードを入力すると、[パーティビデオチャット] ビューにリダイレクトされます。このビューでは、各参加者がグリッド形式でお互いを見たり聞いたりできます。また、テキストによるチャットも可能です。ナビゲーションバーには、参加者のリアルタイムカウントが表示されます。パーティの司会者は、「ウォッチモード」をオンにするためのリンクも表示されます。 ウォッチモードのオン/オフ.

司会者がウォッチモードをオンにすると、参加者全員が3つ目の最後のビュー、Video Watch Partyに移動します。このビューでは、モデレーターはページの中央で自分の画面を共有します。司会者の音声も非表示で公開されます。 <div>で公開され、参加者は共有されたVideoから音声を聞くことができます。このビューでは、テキストチャットがコミュニケーション手段となります。参加者全員の音声とビデオのフィードは無効になります。

司会者は、次のボタンを押すことで、パーティービデオチャットモードとビデオウォッチパーティモードの間をいつでも移動できます。 ウォッチモードオン/オフボタンを押すことで、好きなときにパーティービデオチャットとビデオウォッチパーティのモードを切り替えることができます。

さて、何を作るのかがわかったところで、作り始めよう！

前提条件

このアプリには以下が必要です：

Video API アカウントの作成は無料です。アプリを機能させるために不可欠なAPIキーとシークレットを取得するために必要です。

Video API 認証情報

以下の手順で Video APIでアカウントを作成するとでアカウントを作成すると、ダッシュボード・インターフェースが表示されます。API認証情報を取得する最初のステップは、新しいプロジェクトを作成することです。

を選択します。 新規プロジェクトの作成リンクを選択します。
選択 APIどのようなプロジェクトを作成するか尋ねられたら
プロジェクト名を任意で記入
を選択します。 VP8コーデック・オプションを選択します。 (VP8とH.264の違いの詳細は こちら)

これでプロジェクトのAPIキーとシークレットにアクセスできるようになりました。安全な場所に保管してください。

インストール

ターミナルから以下を実行して、新しいRailsアプリケーションを開始する：

rails new video-watch-party --database=postgresql

それが終わったら、プロジェクト・ディレクトリに移動し、好みのコード・エディターでプロジェクトを開く。

ジェムの依存関係

を追加する予定です。 Vonage Video API（旧TokBox OpenTok）を追加します。にRuby SDKを追加します。 Gemfileに追加します。 dotenv-railsgemを追加します：

gem 'opentok'
gem 'dotenv-rails'

これが終わったら、コマンドラインから bundle installをコマンドラインから実行して、依存関係をインストールすることができる。

モデル・ジェネレーション

次に、Videoセッション情報を保持し操作するモデルを生成します。コマンドラインから以下を実行する：

rails g model Session session_id:string expired:boolean

このコマンドは /app/models/とデータベース移行ファイルを /db/migrate/.データベース移行ファイルをコードエディターで開きましょう。移行する前にカラムにデフォルト値を追加する必要があります。

移行ファイルは /db/migrate/フォルダーの中にあります。フォルダ内の唯一のファイルであり、以下のような形をしています：

class CreateSessions < ActiveRecord::Migration[6.0]
  def change
    create_table :sessions do |t|
      t.string :session_id, null: false
      t.boolean :expired, default: false

      t.timestamps
    end
  end
end

が決してNULLにならないようにしたい。 session_idが決してNULLにならないようにしたい。 expiredブール値のデフォルトがfalseになるようにしたい。そのためには、マイグレーション・ファイルに , null: falseと , default: falseを :session_idと :expired行を追加してマイグレーションファイルを修正する。

このデータベース移行をスキーマにコミットするには、コマンドラインから rake db:createをコマンドラインから実行します。このコマンドはPostgreSQLデータベースと sessionsテーブルを session_idと expiredカラムを持つテーブルが作成されます。

ルートの定義

アプリケーションは、アクセスされるHTTPルートを定義し、正しいコントローラメソッドを指す必要があります。アプリケーションの /config/routes.rbファイルを開き、以下を追加します：

Rails.application.routes.draw do
  get '/', to: 'video#landing'
  get '/party', to: 'video#index'
  get '/screenshare', to: 'video#screenshare'
  post '/name', to: 'video#name'
  post '/chat/send', to: 'video#chat'
end

すべてのルートは VideoController.次のステップでコントローラを作成します。

ルートは GETルートルートは #landingアクションに導きます。これはランディングページのルートです。
ルートは GET /screenshareルートは #screenshareアクションを指します。これはウォッチパーティービューのルートです。
ルートは GET /partyルートは #indexアクションを指します。これは Video chat ビューのルートです。
ルートは POST /nameルートは #nameアクションを指します。ランディングページのフォームがデータを送信する場所です。
ルートは POST /chat/sendルートは #chatアクションを指します。これはテキストチャットメッセージが送信される場所です。

最後に、このステップでは VideoController.

コントローラー・ジェネレーション

次のステップでは、コントローラのメソッドを作成します。最後のインストールステップでは、コントローラファイルを生成します。コマンドラインから以下を実行します：

rails generate controller Video landing index screenshare name chat

これは video_controller.rbファイルを作成します。 /app/controllers/フォルダ内にファイルが作成されます。また、アプリの基本的なビュー構造を /app/views/video.

モデルとコントローラメソッドの作成

必要なファイル構造とデータベーススキーマがすべて作成されたので、次はアプリケーションのメソッドを作成します。Video コントローラと Session モデルの両方にメソッドを作成する必要があります。まず Session モデルから始めましょう。

モデルメソッドの定義

各Vonage Videoセッションには、固有のセッションIDがあります。このセッションIDにより、異なる参加者が同じVideoチャットに参加することができます。さらに、Videoチャットの各参加者には、参加するためのセッションIDが付与されます。 tokenを付与されます。トークンには、モデレーション機能などの特別な権限を与えることができます。

モデルの中で Sessionモデルにおいて、新しいセッションIDを作成するか、以前のセッションIDをロードし、各参加者のトークンを生成するために使われる3つのクラスメソッドを作成します。

この Session#create_or_load_session_idメソッドは、すでにセッションIDがあるかどうかをチェックします。もしIDがあれば、そのIDを使用します。ない場合は、新しいIDを生成します。セッションIDは期限切れになることがありますが、このチュートリアルではアクティブなセッションIDのみを扱います：

def self.create_or_load_session_id
  if Session.any?
    last_session = Session.last
    if last_session && last_session.expired == false
      @session_id = last_session.session_id
      @session_id
    elsif (last_session && last_session.expired == true) || !last_session
      @session_id = create_new_session
    else
      raise 'Something went wrong with the session creation!'
    end
  else
    @session_id = create_new_session
  end
end

上記のメソッドは、次のメソッドも参照する。 Session#create_new_sessionという追加メソッドも参照します：

def self.create_new_session
  session = @opentok.create_session
  record = Session.new
  record.session_id = session.session_id
  record.save
  @session_id = session.session_id
  @session_id
end

最後に、各参加者に適切なトークンを割り当てるメソッドを作成します：

def self.create_token(user_name, moderator_name, session_id)
  @token = user_name == moderator_name ? @opentok.generate_token(session_id, { role: :moderator }) : @opentok.generate_token(session_id)
end

モデル定義の先頭で、Vonage Video API (旧名 TokBox OpenTok) SDK のインスタンスをインスタンス化し、インスタンス変数に代入してモデル全体で使用する必要があります。すべて合わせると、ファイルは以下のようになります：

require 'opentok'

class Session < ApplicationRecord
  @opentok = OpenTok::OpenTok.new ENV['OPENTOK_API_KEY'], ENV['OPENTOK_API_SECRET']

  def self.create_or_load_session_id
    if Session.any?
      last_session = Session.last
      if last_session && last_session.expired == false
        @session_id = last_session.session_id
        @session_id
      elsif (last_session && last_session.expired == true) || !last_session
        @session_id = create_new_session
      else
        raise 'Something went wrong with the session creation!'
      end
    else
      @session_id = create_new_session
    end
  end

  def self.create_new_session
    session = @opentok.create_session
    record = Session.new
    record.session_id = session.session_id
    record.save
    @session_id = session.session_id
    @session_id
  end

  def self.create_token(user_name, moderator_name, session_id)
    @token = user_name == moderator_name ? @opentok.generate_token(session_id, { role: :moderator }) : @opentok.generate_token(session_id)
  end
end

これで、アプリのルートを管理するコントローラー・メソッドを構築する準備ができた。

コントローラメソッドの定義

Video コントローラには、各ルート用のメソッドと、サイトを構築するためのヘルパーメソッドをいくつか用意します。最初に作成するメソッドは、後続のすべてのメソッドに Video API 認証情報へのアクセスを提供します。

ファイルを video_controller.rbファイルを開き /app/controllersを開き、クラス定義の後に以下のメソッドを追加する：

def set_opentok_vars
  @api_key = ENV['OPENTOK_API_KEY']
  @api_secret = ENV['OPENTOK_API_SECRET']
  @session_id = Session.create_or_load_session_id
  @moderator_name = ENV['MODERATOR_NAME']
  @name ||= params[:name]
  @token = Session.create_token(@name, @moderator_name, @session_id)
end

後編をご覧いただきたい。パート2で説明するように、これらのインスタンス変数は、バックエンドからサイトのフロントエンドにデータを渡す際にも重要になる。

次に、アプリケーションのルートごとにメソッドを作ります：

def landing; end

def name
  @name = name_params[:name]
  if name_params[:password] == ENV['PARTY_PASSWORD']
    redirect_to party_url(name: @name)
  else
    redirect_to('/', flash: { error: 'Incorrect password' })
  end
end

def index; end

def chat; end

def screenshare
  @darkmode = 'dark'
end

上で見たように #nameメソッドは @name変数の値を代入しています。また、参加者が提供したパスワードが環境変数に設定されたものと一致する場合にのみ、参加者をビデオチャットページにリダイレクトすることで、アプリケーションのための小さなゲートキーピングのレイヤーを提供します。パスワードが一致しない場合、参加者はランディングページにリダイレクトされ、再試行するように求められます。

残りのメソッドは空の定義で、アクション名に対応するビューテンプレートを探し出すための情報をRailsに提供する最低限のものだけです。唯一の例外は #screenshareメソッドです。 @darkmodeインスタンス変数をセットするメソッドで、これはスクリーンシェア表示中にサイトをダークモードのビジュアル設定にするために使われます。

この #nameメソッドは name_paramsを参照します。というプライベートメソッドを作成する必要があります。 name_paramsというプライベートメソッドを作成する必要があります。では、それをやってみましょう：

private

def name_params
  params.permit(:name, :password, :authenticity_token, :commit)
end

この private メソッドで、コントローラを構築しました。まとめると以下のようになります：

require 'opentok'

class VideoController < ApplicationController
  before_action :set_opentok_vars

  def set_opentok_vars
    @api_key = ENV['OPENTOK_API_KEY']
    @api_secret = ENV['OPENTOK_API_SECRET']
    @session_id = Session.create_or_load_session_id
    @moderator_name = ENV['MODERATOR_NAME']
    @name ||= params[:name]
    @token = Session.create_token(@name, @moderator_name, @session_id)
  end

  def landing; end

  def name
    @name = name_params[:name]
    if name_params[:password] == ENV['PARTY_PASSWORD']
      redirect_to party_url(name: @name)
    else
      redirect_to('/', flash: { error: 'Incorrect password' })
    end
  end

  def index; end

  def chat; end

  def screenshare
    @darkmode = 'dark'
  end

  private

  def name_params
    params.permit(:name, :password, :authenticity_token, :commit)
  end
end

ビュー用のERBファイルを作成する前に、サイトに関する情報のソースとなるカスタムの YAMLファイルを定義します。

この情報は、パーティーの名前、ウェルカムメッセージ、サイトの言語や方向性など、サイト上のデータを入力するために使用されます。この情報を一箇所にまとめることで、将来、複数のファイルを修正する必要なく、簡単に変更できるようになります。

カスタムサイト設定の提供

Railsでカスタム設定ファイルを置く場所は /configフォルダの中です。 site_info.ymlファイルを追加してみましょう。このファイルからデータを読み込んで、パーティ名やサイトの言語など、サイトのコンテキストを作成します：

language: en
lang_direction: ltr
landing_page:
  welcome_message:
    text: 'Welcome to the Vonage Video Watch Party!'
  name_form:
    text: 'What is your name and the password for the party?' 
    name_placeholder_text: Your name here   
    password_placeholder_text: Password here
    submit_button_text: Submit
navbar:
  title:
    text: Vonage Video Watch Party 
text_chat:
  submit_button_text: Submit
  placeholder_text: 'Enter text here'

上記の例では、デフォルト値が提供されています。アプリケーションのニーズに応じて自由に編集して変更してください。

この情報を利用するためには、どこかで読み込んで読み込む必要がある。いくつかの設定を :before_action設定を ApplicationControllerにいくつかの設定を追加して、この情報をすべて取り込み、アプリ全体で利用できるようにします。

を開く application_controller.rbファイルを開き /app/controllersディレクトリ内のファイルを開き、以下を追加する：

class ApplicationController < ActionController::Base
  before_action :set_site_lang_options
  before_action :set_site_welcome_options
  before_action :set_welcome_form_options
  before_action :set_site_navbar_options
  before_action :set_site_chat_options
  CONFIG = YAML.load_file("#{Rails.root}/config/site_info.yml")

  def set_site_lang_options
    @lang = CONFIG['language']
    @lang_dir = CONFIG['lang_direction']
  end

  def set_site_welcome_options
    @welcome_message = CONFIG['landing_page']['welcome_message']['text']
  end

  def set_welcome_form_options
    @name_form_text = CONFIG['landing_page']['name_form']['text']
    @name_placeholder_text = CONFIG['landing_page']['name_form']['name_placeholder_text']
    @password_placeholder_text = CONFIG['landing_page']['name_form']['password_placeholder_text']
    @name_form_submit_button_text = CONFIG['landing_page']['name_form']['submit_button_text']
  end

  def set_site_navbar_options
    @navbar_title = CONFIG['navbar']['title']['text']
  end

  def set_site_chat_options
    @submit_button_text = CONFIG['text_chat']['submit_button_text']
    @chat_placeholder_text = CONFIG['text_chat']['placeholder_text']
  end
end

これで site_info.ymlのデータを保持するインスタンス変数は、これから作成するビューファイルの中で使用できるようになります。

ビューの作成

アプリケーションレイアウトの定義

最初に扱うのは、アプリケーションのデフォルト・レイアウトです。このファイルは /app/views/layouts/application.html.erb.このビューの中に、サイトの言語、ダークモードにするかどうかの情報を追加し、Video API JS スクリプトを読み込みます：

<!DOCTYPE html>
<html lang="<%= @lang %>" dir="<%= @lang_dir %>">
  <head>
    <title>Video Watch Party</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
    <script type ="text/javascript">
      var api_key = '<%= @api_key %>';
      var api_secret = '<%= @api_secret %>';
      var session_id = '<%= @session_id %>';
    </script>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body class="<%= @darkmode if @darkmode %>">
    <%= yield %>
  </body>
</html>

上の例でお気づきの興味深い点は、3つのJavaScript変数を <script>タグの中に3つのJavaScript変数を作成したことです。対応するRubyインスタンス変数のデータを、新しくインスタンス化されたJavaScript変数に渡しています。このようにして、バックエンドがフロントエンドと会話するようになりました。

残りのビューファイルは、アプリの特定のビュー、ランディングページ、ビデオチャット、ビデオウォッチビューです。これらのビューを作成する前に、残りのビューで使用するパーシャルを作成しましょう。

パーシャルの定義

パーシャルは、Railsアプリケーションのビュー構造全体でERBコンポーネントを再利用するための素晴らしい方法です。同じコンテンツを何度も定義する代わりに、1つのファイルにまとめておけば、コンテンツを使いたいときにいつでもそのファイルを呼び出すだけです。このアプリケーションには3つのパーシャルがあります: ヘッダー用のパーシャル、テキストチャット用のパーシャル、テキストチャットボタンアイコン用のパーシャルです。

という名前のファイルを作成する。 _header.html.erbファイルを作成し /app/viws/video/というファイルを作成し、そこに以下を追加する：

<h1><%= @navbar_title %></h1>
<p id="participant-count"></p>
<button id="watch-mode">Watch Mode On/Off</button>

ヘッダーパーシャルが @navbar_titleインスタンス変数からデータを読み込みます。空の <p>タグのidが #participant-count.で作成するJavaScriptからデータが入力されます。パート2で作成するJavaScriptからデータが入力されます。最後に、ヘッダーには <button>タグがあり、モデレーターだけが見ることができ、すべての参加者のためにチャットとスクリーンシェアビューを切り替えることができます。

次に、同じフォルダに _button-chat.html.erbという名前の別のファイルを同じフォルダに作成し、以下を追加する：

<button class="btn-chat" id="showChat"><svg viewBox="0 0 512 512"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 496"><path fill="white" d="M392 279.499v-172c0-26.467-21.533-48-48-48H48c-26.467 0-48 21.533-48 48v172c0 26.467 21.533 48 48 48h43.085l.919 43.339c.275 13.021 15.227 20.281 25.628 12.438l73.983-55.776H344c26.467-.001 48-21.534 48-48.001zm-205.74 16a16.003 16.003 0 00-9.632 3.224l-53.294 40.179-.588-27.741c-.185-8.702-7.292-15.661-15.996-15.661H48c-8.822 0-16-7.178-16-16v-172c0-8.822 7.178-16 16-16h296c8.822 0 16 7.178 16 16v172c0 8.822-7.178 16-16 16H186.26zm309.74-88v132c0 26.468-21.532 48-48 48h-43.153l-.852 33.408c-.222 8.694-7.347 15.592-15.994 15.592-6.385 0-2.83 1.107-82.856-49H232c-8.837 0-16-7.163-16-16s7.163-16 16-16c84.866 0 80.901-.898 86.231 2.438l54.489 34.117.534-20.964c.222-8.675 7.317-15.592 15.995-15.592H448c8.822 0 16-7.178 16-16v-132c0-8.822-7.178-16-16-16-8.837 0-16-7.163-16-16s7.163-16 16-16c26.468.001 48 21.533 48 48.001zm-200-43c0 8.837-7.163 16-16 16H112c-8.837 0-16-7.163-16-16s7.163-16 16-16h168c8.837 0 16 7.163 16 16zm-29 70c0 8.837-7.163 16-16 16H141c-8.837 0-16-7.163-16-16s7.163-16 16-16h110c8.837 0 16 7.163 16 16z"/></svg></button>

上記のHTMLは、参加者がテキストチャットボックスを表示または非表示にするためにクリックできるテキストチャットアイコンを生成します。

最後のパーシャルはテキストチャットボックスエリアを保持するファイルで、新しいチャットメッセージを送信するフォームを含みます。

同じディレクトリに _chat.html.erbというファイルを同じディレクトリに作成する：

<header class="chat-header">
  <h2>Chat</h2>
  <button class="btn-close" id="closeChat"><svg viewBox="0 0 47.971 47.971"><path fill="white" d="M28.228 23.986L47.092 5.122a2.998 2.998 0 000-4.242 2.998 2.998 0 00-4.242 0L23.986 19.744 5.121.88a2.998 2.998 0 00-4.242 0 2.998 2.998 0 000 4.242l18.865 18.864L.879 42.85a2.998 2.998 0 104.242 4.241l18.865-18.864L42.85 47.091c.586.586 1.354.879 2.121.879s1.535-.293 2.121-.879a2.998 2.998 0 000-4.242L28.228 23.986z"/></svg></button>
</header>
<div id="history" class="messages"></div>
<%= form_with(url: "/chat/send", method: "post") do %>
  <%= text_field_tag :message, nil, placeholder: @chat_placeholder_text %>
  <%= submit_tag(@submit_button_text) %>
<% end %>

その _chat.html.erbパーシャルの中に、もうひとつ空のタグがあります。 <div>のidを持つ #history.すべてのテキストメッセージは、Signal API 内の Vonage Video API テキストメッセージ機能を使用して自動的にこの領域に入ります。これについてはパート2.

ランディングページの定義

ランディングページは、参加者がアプリケーションを訪れたときに最初に出会う場所です。その目的は、参加者に名前と、サイトに入るためのパーティ・パスワードを尋ねることです。

Landing Page View

の中に新しいファイルを作成する。 /app/views/videoという新しいファイルを作成し landing_html.erbという名前の新しいファイルを作成し、以下を追加する：

<main>
  <div class="landing">
    <h1><%= @welcome_message %></h1>
    <p><%= @name_form_text %></p>
    <%= form_with(url: "/name", method: "post") do %>
      <%= text_field_tag 'name', nil, :placeholder => @name_placeholder_text %>
      <%= password_field_tag 'password', nil, :placeholder => @password_placeholder_text %>
      <%= submit_tag @name_form_submit_button_text %>
      <% flash.each do |type, msg| %>
        <p class="error"><%= msg %></p>
      <% end %>
    <% end %>
  </div>
</main>

パーシャルと同様に、ランディングページビューは ApplicationControllerで作成されたインスタンス変数を利用してウェルカムメッセージとフォームのテキストを生成します。

ビデオチャットビューの定義

ビデオチャットビューは、参加者同士がビデオカメラとマイクを使ってチャットする場所となる。このビューは、スクリーンシェアビューに加えて、アプリケーションの2つの重要な部分です。

Video Chat Page View

このビューを作成するには、同じディレクトリに次のような新規ファイルを作成します。 index.html.erbという名前の新しいファイルを作成する：

<script type ="text/javascript">
  var token = '<%= @token %>';
  var name = '<%= @name %>';
  var moderator_env_name = '<%= @moderator_name %>';

  // reload page to render with variables
  (function() {
    if(window.localStorage) {
      if(!localStorage.getItem('firstLoad')) {
        localStorage['firstLoad'] = true;
        window.location.reload();
    } else
      localStorage.removeItem('firstLoad');
    }
  })();
</script>

<header>
  <%= render partial: 'header' %>
</header>

<main class="app">
  <div class="videos">
    <div class="publisher" id="publisher"></div>
    <div class="subscriber" id="subscribers"></div> 
  </div>

  <aside class="chat">
    <%= render partial: 'chat' %>
  </aside>

  <%= render partial: 'button-chat' %>
</main>

この見方には、特筆すべきいくつかの要素がある。

一つ目は <script></script>タグの内部で起こっていることです。アプリケーションのレイアウトと同様に、新しいJavaScript変数の形で、サイトのフロントエンドにより多くのデータを渡し続けます。これとは別に、JavaScriptが読み込まれた後にサイト内部でこれらの変数を利用するために、ブラウザに初めて読み込まれる場合にページを再読み込みする小さな関数も追加します。

もう1つは、ビューのほとんどが空の <div>タグで構成されています。なぜなら、それらは Video API からの動画によって動的に入力されるからです。フロントエンドの JavaScript は、ID 名によってこれらのタグを探し出し、すべての参加者の動画を #subscribers要素に追加し、あなたの動画を #publisher要素に追加します。

スクリーンシェアビューの定義

アプリケーション用に作成する必要がある最後のビューは、ビデオスクリーンシェア用のビューです。このビューでは、参加者全員が同じ画面を見ながら、テキストチャットボックスを使ってチャットを続けることができます。

Screenshare View

このビューでは <div>要素を提供するだけで、API は 1 つのパブリッシャー、つまりスクリーンシェアビデオと 1 つのオーディオフィードを提供します。スクリーンシェアはそれ自体では音声を含まないため、一緒に Video を見ることが難しくなります。そのため、スクリーンシェアに付随して、モデレーターのコンピュータからの音声フィードも公開します。

同じフォルダ内に screenshare.html.erbというファイルを追加する：

<script type ="text/javascript">
  var token = '<%= @token %>';
  var name = '<%= @name %>';
  var moderator_env_name = '<%= @moderator_name %>';
  // reload page to render with variables
  (function() {
    if(window.localStorage) {
      if(!localStorage.getItem('screenshareFirstLoad')) {
        localStorage['screenshareFirstLoad'] = true;
        window.location.reload();
    } else
      localStorage.removeItem('screenshareFirstLoad');
    }
  })();
</script>

<header>
  <%= render partial: 'header' %>
</header>

<main class="app">
  <div class="videos">
    <div class="screenshare" id="screenshare"></div>
    <div class="audio" id="audio"></div> 
  </div>

  <aside class="chat">
    <%= render partial: 'chat' %>
  </aside>

  <%= render partial: 'button-chat' %>
</main>

この時点で、アプリのバックエンドは準備完了です！おめでとうございます！これでVideo watch partyを作成するためのパート1が終わりました。

次のステップ

第2部パート2では、アプリケーションのフロントエンドを構築します。アプリのバックエンドは主にRubyで書かれ、Vonage Video API Ruby SDKを利用していましたが、フロントエンドはJavaScriptで書かれ、JavaScript SDKを利用します。

JavaScript SDKが必要とするデータを提供する作業は、すでに作成したバックエンドで行われている。あとは、その情報を使って動作するJavaScriptのクラスと関数を構築する必要があります。Railsの進歩とWebpackの組み込みのおかげで、RailsアプリケーションにJavaScriptを組み込むための明確な手順があります。

パート2へ続くパート2に続く。