はじめに
Tiny♪Playerページは、アメバの検索ページと連携して動作します。
Tiny♪Playerページ自体は、youtubeプレーヤーです。そのため、youtube検索するには、新たに、検索機能を追加するか、他のyoutube検索機能と連携するかが考えられます。
今回のTiny♪Playerページは、アメバの検索機能と連携する方法を取っています。ここでは、その連携方法について記載したいと思います。
動作要件
この連携動作では、プラグインが必要です。Chromeウェブストアから、インストールすることができます。
連携AmebaYoutubeListプラグインのインストール
Tiny♪Playerページ
下図は、実際の画面ですが、ボカシ(著作権のため)を入れています。この図を参考に下図の図式モデルをご覧願います。
アメバ ブログ書き出しページ
Tiny♪Playerページリンク
先に、このページを観てから、下記の図式モデルを見ると、連携動作の仕組みがわかると思います。
https://favorite.tecoyan.net/tiny/TinyPlayer_test.php?dnm=%E6%A3%AE%E9%80%B2%E4%B8%80#access
図式モデル
動作の仕組みは下図のようになります。
非常にわかりづらいかもしれませんが、順番に追って説明します。
Tiny♪Playerページからアメバのブログを書きだすページを呼び出して、そこのyoutube検索で、指定のクェリーで検索します。表示されたリストをTiny♪Playerページに表示して、リストの先頭から、再生が始まります。
➀で、クェリーを送信し、②でリストを受信するのが主な流れです。
処理の流れを分解すると
(1) 先に、アメバ検索を選択します。次に、クェリー入力でクェリを入力します。
(2) Ⓐで、クェリー検索をクリックすると、javascriptのイベントリスナーが発火し、
(3) Ⓑを経由して、クェリーへセットします。
(4) 以降は、自動で、検索がスタートし、②のルートで、リストがTiny♪Playerページのリストまで到着します。
(5) そのあと、Ⓒで、Ⓑの監視がスタートし、Ⓒのプレーヤーでリストの先頭から再生します。
ここで、➀と②は、全てプラグインとjavascriptファイルで自動で処理します。
完全な役割分担をしています
Tiny♪Playerページとアメバ検索ページは、役割分担がはっきりしています。
Tiny♪Playerページは、クェリーをアメバ検索ページへ送信すること、アメバ検索ページからリストを受信し、そのリストを再生することです。
アメバ検索ページは、クェリーを受信して、youtube検索を行い、リストをDBへ保存し、リストをTiny♪Playerページへ送信します。
あとがき
この記事は、「アメバと連携したTiny♪Playerサイトのyoutubeプレーヤーを作成しました。」の補足記事です。
連携の仕組みを図式でわかりやすくするための説明記事です。
ページ間の連携の仕組みをプラグインとTiny♪Playerのjavascriptファイルで、クェリーとリストの流れを追っています。
流れは複雑ですが、最初のクェリーを入力して、クェリー検索ボタンを押すだけで、以降の処理は、全て自動実行します。このため、数秒で、youtubeの検索から、リストの再生までを実行します。
見ずらいかもしれませんが、ご容赦願います。