概要

このサイト(なつかしの曲)は、youtubeの動画を再生するGoogleブログサイトです。ページの中に、youtubeプレーヤーと再生リストを置いています。一つの投稿記事に一つの再生リストを割り当てています。日付毎に再生リストが割り当てあります。リストの選択はブログのアーカイブからも選択できますが、さらに、より簡単にリスト選択出るように目次を作成しています。作成当初は、投稿リストのみでしたが、その後に、リスト選択ボタンとスペシャルリストを追加しました。これについては、後述します。

特長

このブログサイト(なつかしの曲)の特長の一つは、サーチボタンです。このボタンで、youtubeを検索し、再生リストを作成できます。一回のサーチで約100件程の動画の再生リストが作成できます。作成から再生までは、自動化しています。サイトには、すでに5,000件程の再生リストがあります。様々なジャンルの歌や曲を集めています。再生リストの選択は、リスト選択ボタンで行います。他にもいろいろな機能がありますので、以下に記述します。

主な機能

(1)サーチ機能

このブログサイト(なつかしの曲)の大きな特徴です。youtubeの動画検索は、これまでyoutube APIを使っていましたが、ある時点から、一日当たりの検索回数に制限がつくようになりました。ほぼ、最大50回/日でその日の検索はできないようになりました。このサイトは制限を付けずに検索したいため、このAPIでなく、youtubeサイトのサーチ機能を使うように変更しました。この機能であれば、検索回数の制限はなくなりますので、問題ありません。一回のサーチでほぼ100動画のリストを取得したいため、専用の拡張プラグインを作成しました。それが、YouTube連動検索再生プラグイン 3.1です。このプラグインはChrome Web Storeで公開されています。

(2)リスト選択機能

この機能は、あらかじめ、youtubeで検索、作成した再生リストをジャンル別にサーバーのデータベースに保存したものです。ほぼ5000リストが保存されています。それらのリストを選択するボタンです。

(3)スペシャルリスト機能

この機能は、閲覧者が再生リストの作成、再生ができるものです。
4つのボタンがあります。それぞれ、再生、追加、削除、設定ボタンです。

(4)アクセス履歴機能

この機能は、当日のアクセス履歴を表示します。アクセス履歴の中のサムネイルをクリックして再生することができます。

開発環境

(1) IDEツール　

Netbeans 8.2を使用して開発しています。　

(2) 使用言語

ページの作成は以下の言語を使用しています。
・html,css,javascript,jquery,php,mysql

(3) 公開サーバ　

公開サーバ(レンタルサーバ(ドメイン tecoyan.net))には、ブログで使用しているjavascript、phpのスクリプト、データベースがあります。

(4) 外部サーバー

利用しているサーバヘはふたつです。
・Google Blogger
　　 Blogger APIを利用
・youtube
　　サーチurlを利用　　

(5) アカウント

Google,youtube

(6) 使用しているAPI

APIを使用する場合は、Google Cloud PlatformのAPIとサービスでAPIの有効と認証情報の作成が必要です。

(1)Google blogger API

このAPIを使用して、ブログの投稿、更新、取得を行っています。
このAPIを使用する場合は、Gooleの認証が必要です。

(2)youtube API

このAPIは、動画の再生を行っています。

動画再生

player.loadVideoById(vid);

動画の検索は、youtubeサーチを利用しています。APIの検索サービスは使用していません。一日当たりの検索回数に制限があるためです。

youtubeサーチAPI

//動画の検索にこのAPIは使用していません。
url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&q=' + 
encstr + '&maxResults=100&type=video&videoEmbeddable=true&key=' + 
client_id;

//代わりに以下の方法でサーチしています。直接、youtubeサーチへリクエストを出して
//います。
//オープン youtubeページ
window.open("https://www.youtube.com/results?search_query=__" + query_txt);

開発しているプログラム

(1)Webアプリ

Gooleブログのテンプレートを使用してこのサイト(なつかしの曲)を作成しています。
テンプレートページにyoutubeプレーヤーと再生リストをjavascript,jquery,phpを使用してプログラム開発しています。

(2)Chrome拡張機能

サーチ機能を実現するために、拡張機能を作成しています。
現在のバージョンはYouTube連動検索再生プラグイン 3.1です。
Chrome Web Storeで公開しています。
このプラグインは、Webページ「なつかしの曲(ポータル)」
から検索リクエストをyoutubeサーチページへ送り、youtubeサーチ側で約100件の動画を検索して結果をWebページへ返します。
Webページ側では、リストを表示してそのリストの先頭から連続自動再生します。

(3)プラグインの仕組み

ふたつのタブ間でリストデータの送受信を行っています。タブAからタブBへサーチリクエストを出します。タブBのyoutubeサーチページでほぼ100件の動画を収集しています。これは、拡張プラグインのcontent.jsが処理しています。リストの生成が終了すると、専用サーバへリストデータを保存し、同時にbackground.jsへリストを送信します。background.jsは受信したリストデータを親タブの「なつかしの曲(ポータル)」のcontent.jsへ送信します。content.jsは親タブのDOMへアクセスし。受信したリストテータをリスト要素へコピーします。コピーが完了すると親タブはリストの先頭から自動再生します。

あとがき

この記事では、「なつかしの曲(ポータル)」Webサイト開発での問題や対策を逐次記述して行こうと思っています。試行錯誤の連続でやっと見つけた対策などを備忘録とし記録して行きます。