はじめに

長いことかかりましたが、ようやく動作するようになった自前のyoutubeプレーヤーができましたので、ご紹介したいと思います。また、このようなyoutubeプレーヤーを作成したいと考えている方の参考になればと思い、その動作の仕組みをご説明したいと思います。

特徴

このyoutubeプレーヤーの特徴は、再生リストにあります。youtubeプレーヤー自体は、ネットにサンプルがたくさんあり、そのコードを使って簡単に動作させることができます。問題は、再生リストをどう作成するかです。
その前に、前提として、Googleのアカウントとアメバのアカウントは取得しておきます。ここではGoogleのyoutube Data APIは使用しませんので、使用するための認証手続きは必要ありません。以前は、Youtube Data APIを使用して、再生リストの作成を行っていたのですが、使用制限があり、一日当たりの検索回数が少なかったために使用を断念しました。

再生リストの作り方

そこで、どのように再生リストを作るかということになります。以前はyoutubeの検索サイトを利用してそこで検索した結果をもとに自前の再生リストを作成していました。
今は、アメバの検索結果を利用しています。そこで、それらの2つの作り方をご説明します。

(1)youtubeの検索ページを利用して作成
プラグインを作成して、そこで、youtubeの検索ページのDOMへアクセスして、検索結果を取得して作成していました。DOMで取得するデータはサムネイルとタイトル、それとdurationデータ位です。ここで、この方法だと、そのままではページに表示されている検索数しかリストデータを取得できません。もっと多く取得するにはページを下方向へスクロールしなければ取得できません。それを自動でスクロールさせるため、1秒毎にスクロールさせるスクリプトを追加しています。そうしながら指定の検索数まで続けます。指定の検索数まで到達したら、そこで、リストの作成を行います。それをデータベースへ保存します。欠点は、スクロールさせる時間がかかることです。

(2)アメバの検索結果を利用して作成
こちらの方法は、アメバでyoutube動画の埋め込みを行うサイドバーにある検索ボタンを使う方法です。そこで、検索するクェリーを入力して検索ボタンをクリックするとリストが表示されます。50件の動画リストが表示されます。ここで、自制のプラグインが動作しそのDOMデータからリストを作成してデータベースへ保存します。こちらの方法は、アメバの編集画面で行います。クェリーを入力して検索ボタンをクリックすればあとは保存するまで自動で実行します。
こちらの方が(1)の方法よりもシンプルだと思います。

単に、検索して、再生リストを保存して行くだけであれば、アメバの「ブログを書く」ボタンをクリックして、まっさらの状態で、右端にあるyoutubeボタンを使うだけで、リストを保存できます。検索キーを入力して検索、これを連続的に実行するだけで、いくつもの再生リストを作成して保存できます。

自前のyoutubeプレーヤー動作の仕組み

ここで、今回の自作のプレーヤーのwebページを見ながら動作の仕組みをご説明します。
まず、プレーヤーを見てください。

See the Pen Untitled by tecoyan (@okpzwnyh-the-vuer) on CodePen.

スタートボタンをクリックすると、別タブで、自作のyoutubeプレーヤーページが開きます。

画面の上半分が主画面です。そこにプレーーと再生リストが表示されています。
下半分はおまけです。

はじめに、URLを見ると、?lnm=.....とあります。これがGETパラメータです。ここで、再生リストの検索キーを指定しています。
アメバで再生リストを作成したときに使用した検索キーです。データベースには、このキーで再生リストのデータとペアで保存しています。

ボタン

最上位の右に一覧とランダムのボタンがあります。このボタンで再生リストを選択します。

一覧ボタン

このボタンをクリックすると、検索キーの一覧が表示されます。アメバで再生リストを作成したときの検索キーです。その一覧が表示されます。その一覧の検索キーを選択してクリックします。すると、その再生リストが表示され、リストの先頭から再生が始まります。

ランダムボタン

こちらのボタンは、データベースに保存されている再生リストからランダムに選択した再生リストが表示されます。表示と同時にリストの先頭から再生が始まります。

現状のリストについて

今はまだ、230件ほどのリストが登録されていますが、今後は、増えることを期待しています。登録には、プラグインが必要となりますので、以下にそのボタンを用意します。
これは、chromeの拡張機能です。パソコンのchromeブラウザーで動作します。

プラグインのダウンロード

どんなリストが登録されているかを確認するには、一覧ボタンをクリックするとみることができます。検索キーの一覧が表示されます。それが再生リストの名前になります。

再生リストの新規登録と更新方法

検索キーは、ユニークなキーの場合は新規登録になります。逆に同じキーの場合は更新登録になります。現状はこの2種類です。ただし、検索キーが不適切と判断される場合は、こちら側で削除することもあります。

あとがき

一通りのテストは済ませていますが、まだ、不具合が残っている可能性もあります。その場合は、逐次、修正してゆきます。
また、アラーム、ステータスメッセージが表示されることがあります。これは動作確認のためで、最終的には削除する方向です。