はじめに
youtube動画を再生するには、youtubeサイトで再生できますが、ここでご紹介するプラグインは、一般のWebサイトで再生することができます。例えば、「yahoo ! Japan」のサイトページでも再生ができます。
あらかじめ、プラグインをインストールしておけば、「yahoo ! Japan」のサイトを開いたときに、再生をスタートできます。
プラグインの使い方
このプラグインは、「サムネイルプレーヤープラグインX v1.0」です。Chromeウェブストアからインストールできます。
インストール場所
プラグインの初期設定は、特にありません。パソコンで、Chromeブラウザーを開いた時点で、プラグインはロードされます。あとは、例えば、「Yahoo! JAPAN」サイトを開いたら、ページの左上隅に小さなプレーヤーが表示されます。このプレーヤーを「サムネイルプレーヤー」と呼んでいます。
このプレーヤーには、「サムネイルの選択」と「非表示」ボタンがあります。
(1)「サムネイルの選択」ボタンについて
このボタンをクリックすると、動画をジャンル別に登録した「ジャンルボタン一覧」が表示されます。
ここで、任意の「ジャンル」ボタンをクリックすると、そのジャンルのサムネイル一覧が表示されます。
お好みのサムネイルを選択してクリックすると、プレーヤーで再生することができます。
初回のみ、一時停止していますので、画面中央の▶をクリックすると再生がスタートします。
(2)「非表示」ボタンについて
このボタンは、プレーヤーの非表示/表示を行うトグルスイッチです。プレーヤーが邪魔な場合は非表示にできます。
サンプル画面
このページの左上隅に小さなプレーヤーが表示されています。これが、サムネイルプレーヤーです。小さい理由は、ミュージック専用のプラグインのためです。このプラグインは、バックミュージック用に作成していますので、映像用には作成していません。
(1)ジャンル一覧
ここで、お好みのジャンルボタンをクリックします。
(2)サムネイル一覧
サムネイルリストの中から、お好みのサムネイルをクリックすると、その動画を再生します。
サムネイルのメンテナンスについて
ここで、登録しているサムネイル情報は、youtube検索ページで取得しています。
動画情報の検索にも、プラグインを使用しています。(yyプラグイン＋)
非定期ですが、ジャンル間のサムネイルを移動、削除など行っています。
時間が経つと、動画が削除されたりしていますので、そのような動画のサムネイルは削除するようにしています。
技術的観点から
Chromeのプラグインで実装していますので、使用しているスクリプトは、content.jsとbackground.jsが中心です。それと、サムネイルプレーヤー自体は、別のWebサイトページで作成したhtmlファイルをiframeに挿入することで実現しています。
(1)content.jsの処理概要
プラグインの仕様上、content.jsは、タブごとに実行空間があります。そのため、アクティブタブが変わると、そのタブのcontent.jsが走ります。content.jsがアクセスできるのはそのタブのDOMです。そこで、有効なのがDOMの要素を追加して、そこへポップ画面を表示します。それを使用しているのがサムネイルの選択画面です。サムネイルの選択要素と非表示要素はDOMに追加していますので、content.jsでアクセスできます。
(2)background.jsの処理概要
background.jsは、プラグインの仕様上、すべてのタブにアクセスできますので、content.jsとメッセージ通信できます。必要なデータのやり取りはメッセージ通信で行っています。さらに、もうひとつ、有効な手段があります。それは、タブのスクリプトとメッセージ通信ができます。このことは、サムネイルプレーヤーを動作させているhtmlファイルとjsスクリプトともメッセージ通信ができることです。
このプラグインでは、この仕組みを使用して、プレーヤーの再生経過時間を定期的にbackground.jsへ送信しています。また、音声ボリュームのオンオフ情報もbackground.jsからサムネイルプレーヤーのjsスクリプトへ送信しています。
(3)iframeの処理概要
サムネイルプレーヤーは、iframe要素にyoutubeAPIでプレーヤーを生成しています。
実際には、別サイトで使用しているyoutubeプレーヤーのURLをiframeのsrc属性に埋め込んでいます。htmlファイルとjavascriptファイルがあります。
このjavascriptファイルでyoutubeプレーヤーAPIをコントロールできます。例えば、nplayer.setVolume(0)とかnplayer.setVolume(100)で音量を制御しています。
このプレーヤーはリピートしていますので、再生が終了すると、終了イベントが入り、そこで、リピートを実行しています。このプレーヤーでは、nplayer.loadVideoById(xxxx);で同じ動画を再生しています。xxxxは動画のIdです。
ここで、音量制御をするときに、3秒タイマーのsetInterval()を呼び出しています。アクティブタブでも非アクティブタブでも3秒タイマーを使用していますが、非アクティブタブでは、しばらくすると60秒タイマーになってしまいます。これは、タイマーの仕様だと思います。
(4)音量制御について
ここでの音量制御は、タブ(アクティブ)で再生中のプレーヤーの音量は100%にセットしています。その他のタブでは、0%にセットし、ミュート状態にしています。その処理方法は、ifarmeのプレーヤーのスクリプトから、background.jsへ3秒に一回、再生のカレントタイムを送信し、その応答として、background.jsからは、音量が100%か0%をタブのアクティブ、非アクティブを判断して応答しています。iframeのスクリプトは、その応答結果でプレーヤーの音量をセットしています。
この方法を実現するには、もうひとつ、必要なことがあります。それは、iframeのスクリプトがbackground.jsへメッセージを送信するために、エクステンションIdを知らなくてはなりません。これは、プラグインの識別子です。そのために、タブがアクティブになったときにcontent.jsでサーバーのデータベースにエクステンションIdを保存更新しています。これらの処理で、複数タブの音量制御を行っています。
このDB対応は、次のバージョンで実装します。現行のバージョンでは、エクステンションIdをスクリプトに埋め込んでいます。
プラグインのメリット・デメリット
メリットは、インストールしておけば、どのWebサイトのページでも動作できることです。ただし、デメリットもあります。それは、Chomeウェブストアへ登録した時点で、プラグインのスクリプトを修正できず、次のバージョンで修正することになります。このタイムラグがデメリットになります。しかし、うまく機能分担して、自前のサーバーのスクリプトをプラグインで呼び出して使用する方法をとれば、その影響は受けずに、サーバー側のスクリプト修正である程度は、デメリットをカバーできます。極力この機能分担をうまく切り分ければ、リアルタイムの修正も可能です。
おわりに
このプラグインは、「バックミュージック」用として作成しました。
パソコンでの作業中に、流すことができます。しかも、適宜、サムネイルを選択できますので、動画を簡単に入れ替えられます。
お詫び
ひとつ、お詫びがあります。本来の仕様では、音声はアクティブタブのみのはずでしたが、公開バージョンでは、音声のタブ制御がうまく動作していないことがわかりました。
次のバージョンでは仕様通りになりますので、お待ちください。
再々のお詫び
上記の問題の原因がわかりました。以前にも同様の問題があり、原因はわかっていましたが、今回も同じ轍を踏んでしまいました。原因は、ローカルでテストしていた時の、プラグインのIDを公開向けのIDに切り替えていなかったことです。公開前は、ローカル用のプラグインIDでテストしていますが、このIDをサムネイルプレーヤーのスクリプトで使用しています。このスクリプトはプレーヤーのhtmlファイルがロードされるときにサーバーが送ってきます。そのため、プラグイン内にはなく、外部のサーバから実行時に送られます。早速、サーバーのスクリプトを修正いたしました。
迂闊だったと反省していますが、中々、癖が直りません。ご容赦ください。