JavaScriptでPostgreSQLから取得した値をerbに表示したい。

Question

作っているアプリ

YouTubeのURLを投稿してそれを埋め込み動画として表示し、
YouTubeのプレイリストをサイト上で自作できるようにするアプリをRailsで作っています。

仕様・技術・環境・Gemなど

Ruby '2.6.3'
Rails '5.2.4.1'
使用しているdb: Docker経由でのPostgreSQL

https://qiita.com/Kairi_Yasunnde/items/8e931a4670549ba8237e
https://qiita.com/yuichisan65/items/9356a2822fb37e51b3b4

これらの記事を参考にして動画を投稿しindexページでの一覧表示や
showページで単独で表示させることまでは出来ているのですが、
ここから進んで投稿した動画を組み合わせて
動画を連続再生させる方法が無いか模索しているところです。

プレイリストに関しては動画投稿のためのモデルと
それらに設定しているタグのモデルをリレーションで繋ぐことで管理しています。
登録されたタグをプルダウンメニューで一覧画面に表示し、
そこから選択することで登録されたタグを呼び出してプレイリストのように
動画の一覧を表示出来るようにしています。

動画の連続再生の方法としては
YouTubeのiframe Player APIの中にcuePlaylistというものがあり
このコードの中にYouTubeの末尾の11桁を配列として列挙すれば
擬似的にプレイリストが作れ、連続再生も可能であるということまでは分かりました。

function onPlayerReady(event) {
              player.cuePlaylist([
              // このようにYouTubeのURLの末尾11桁を配列として列挙するだけでプレイリストを作ることが出来る
                'BxqYUbNR-c0',
                '0xSiBpUdW4E'
              ]
              );
            }

ただしこのやり方だとindexページに手動であらかじめ列記された分しか再生出来ず
htmlのフォーム上から投稿され、それをDBに登録したものを呼び出して再生する、
といったことが出来ません。

function onPlayerReady(event) {
              player.cuePlaylist([
                '<%= movie.youtube_url %>'
              ]
              );
            }

現状では上記のようにとりあえず動画を表示させるために一時的に

<% movie.youtube_url %>

このコードを挿入しているのですが、これだけではindex.html.erbで表示される最初の動画1つだけを延々とループさせることしか出来ません

分からずに困っている点

PostgreSQLに登録したYouTubeの末尾11桁の値をDBのカラムから
JavaScriptに渡してそれをindexに登録した動画の数分まで配列の中で
JavaScriptでループをさせれば実現出来そうだなと思ったのですが、
JavaScriptの勉強があまり出来ておらず実際のコードの書き方をどのようにすれば良いのか
分からない状態で困っています。

実際のコード

該当しそうなコードだけを列挙していますが、
アドバイスをいただく際に不足していそうなコードがあれば指摘していただければ
追記したします。

<!-- app/views/movies/index.html.erb -->

<p id="notice"><%= notice %></p>

<h1>動画一覧</h1>
<%= form_tag movies_path, method: :get, class: 'boards__searchForm' do %>
<%= select_tag :playlist_id,
        options_from_collection_for_select(Playlist.all, :id, :playlist_name, params[:playlist_id]),
        {
          prompt: 'プレイリストをタグで絞り込み検索',
          onchange: 'submit(this.form);'
        }
      %>
<% end %>
<br>
<%= paginate @movies %>
<div class="container-fluid">
  <div class="row">
    <% @movies.each do |movie| %>
    <div class="col-md-6">
      <div>
        <%= movie.title %>
        <div id="player">
          <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
          <script>
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            var player;
            function onYouTubeIframeAPIReady() {
              player = new YT.Player('player', {
                height: '315',
                width: '560',
                events: {
                  'onReady': onPlayerReady,
                  'onStateChange': onPlayerStateChange
                }
              });
            }
            
            // 該当のコード
            function onPlayerReady(event) {
            // JavaScriptでDBから末尾11桁を取得しその値をループさせて配列を作りたい
              player.cuePlaylist([
                '<%= movie.youtube_url %>'
              ]
              );
            }

            function onPlayerStateChange(event) {
              console.log(event);
            }
          </script>
          <br>
        </div>
        <br>
        <br>
        <%= link_to 'Show', movie %>
        <br>
        <%= link_to 'Edit', edit_movie_path(movie) %>
        <br>
        <%= link_to 'Destroy', movie, method: :delete, data: { confirm: 'Are you sure?' } %>
        <br>
      </div>
    </div>
    <% end %>
  </div>
</div>

<br>

<%= link_to 'New Movie', new_movie_path %>
<%= paginate @movies %>

# app/controllers/movies_controller.rb

class MoviesController < ApplicationController
  before_action :set_movie, only: [:show, :edit, :update, :destroy]
  # before_action :authenticate_user!

  def index
    @movies = params[:playlist_id].present? ? Playlist.find(params[:playlist_id]).movies.page : Movie.page(params[:page])
  end

  def show
    @movie = Movie.find(params[:id])
  end

  def new
    @movie = Movie.new
    @movie.playlists.build
    @movie.movie_playlist_relations.build
  end

  def edit
    @movie.playlists.build
  end

  def create
    @movie = current_user.movies.build(movie_params)
    url = params[:movie][:youtube_url]
    url = url.last(11)
    @movie.youtube_url = url

    respond_to do |format|
      if @movie.save
        format.html { redirect_to @movie, notice: 'Movie was successfully created.' }
        format.json { render :show, status: :created, location: @movie }
      else
        format.html { render :new }
        format.json { render json: @movie.errors, status: :unprocessable_entity }
      end
    end
  end

  def update
    @movie.update(update_movie_params)
    respond_to do |format|
      if @movie.update(movie_params)
        format.html { redirect_to @movie, notice: 'Movie was successfully updated.' }
        format.json { render :show, status: :ok,
        location: @movie }
      else
        format.html { render :edt }
        format.json { render json: @movie.errors, status:
        :unprocessable_entity }
      end
    end
  end

  def destroy
    @movie.destroy
    respond_to do |format|
      format.html { redirect_to movies_url, notice: 'Movie was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private

    def set_movie
      @movie = Movie.find(params[:id])
    end

    def movie_params
      params.require(:movie).permit(:title, :youtube_url, playlist_attributes:[:playlist_name], playlist_ids: [])
    end

    def playlist_params
      params.require(:playlist).permit(:playlist_name)
    end

    def update_movie_params
      params.require(:movie).permit(:title, :youtube_url, playlist_attributes:[:playlist_name], playlist_ids: [])
    end
end

Answer 1

「JavaScriptでDBから取得」というのが回答を難しくしている気がします。

やりたいことを実現するには、自分なら
0. サーバーサイドにRubyでAPIを作る（DBの値を取得し、jsonか何かで返させる）
0. クライアントサイドのJavaScriptからAPIをajaxで呼び出す（jsonを受け取る）
0. 受け取ったjsonからJavaScriptで使う配列を作成する

流れになると思います。
http://html2php.starrypages.net/javascript/ajax

自分はPHPメインなので上記がRubyで可能なのかはわかりませんが、ご参考までに。

Comments

[fleatama]

ressentimentさん、回答ありがとうございます！

自分はRailsを現在勉強していて作りたい動画アプリを模索する中で
JavaScriptが必要になり学び始めたのですが、
Railsもまだしっかりと出来ていない状況だったので
JavaScriptについてはどのように扱うべきなのかがいまいち分からない状態でした。
自分でも質問を書き込みながらそもそもDBからJavaScriptに値を渡すという事自体が
一般的な事なのかも分からず自分のやろうとしていることがおかしいかもしれないとは薄々疑問を感じがらも
他の手段が全く思い浮かばずこのような質問をすることになってしまいました。
検索しても似たようなパターンでの参考になる内容も全く出て来なかったので
自分がやろうとしていた事自体が根本的に間違っていたような気がしています。

自分のやり方がおかしいかもしれない？と感じつつも検索する中で
JSONでデータを取得する方法が一番現実的で理想的かもしれないとも
思っていたのですが、JSONもまだ扱う機会少なく
具体的な使い方の流れのアドバイス非常に助かりました。

RubyからAPIを扱ったりもまだしたことは無い状態なのですが、
せっかくの機会なので勉強してみたいと思います。
なかなか回答を頂くことが出来ず苦悩していたので、
回答を頂けたのが非常に嬉しいです。
おそらく自分の質問の仕方も良くなかったのだろうと思うので今後また良い質問が出せるように
頑張ります。
改めてありがとうございました。