U2B PlayerをUpgrade、リスティング広告追加

先日気まぐれに作ってみたU2B Player（ユーチューブプレイヤーと読む）ですが、satokotoさんの「ブログパーツを探せ」をはじめ、こことかこことかこことかで紹介して頂いたり、色んなところで使って頂いたりしているようです。ありがたい。で、気が向いたのでちょっとUpgradeしてみました。既に気付いている方は気付いていると思いますが、今週からU2B Playerの下にリスティング広告（アサマシ）が表示されるようになっています。となると、アフィリエイトIDやらカテゴリーやらさらにパラメータを指定しなきゃならないので、貼り付け補助用のツール（ページ）も作ってみました。下記がそれです。

U2B Player Option Tools

指定するパラメータの解説は以下の通り。

Play Mode	3つのモードを指定可能。 top：YouTube.comのトップページで紹介されているビデオ25個を表示する。 favorite：「ID」で指定したユーザーのお気に入りビデオを表示する。お気に入りが25個以上の場合は26個目以降は表示しない。ID指定必須。 uploaded：「ID」で指定したユーザーが投稿したビデオを表示する。投稿ビデオ25個以上の場合は26個目以降は表示しない。ID指定必須。
User ID	modeが「favorite」「uploaded」のとき、ユーザーIDを指定する。
Affiliate ID	AmazonのアソシエイトIDを入れる。何も入れないと私のIDになります。デフォルト設定では私のIDになっています。
Category	Amazonの商品のカテゴリーから選んでください。デフォルトはDVDです。

「Show U2B Player!」ボタンを押すと画面の左側でプレビューします。アソシエイトIDがデフォルトで私のIDになっているということは何も指定しないと私にアフィリエイト口銭が落ちるわけで、無料でツール配っておいて自分の収益源にするとはふてえ野郎だ、詐欺じゃねえかって声も聞かれそうですが、それってGoogle皇帝陛下のビジネスモデルじゃん？なので、こちらで把握できた利用者様のブログにはTrack Backを貼って御連絡しておきます（本記事中にて各々の記事への言及はしておりません、すいません）。適宜皆様のアソシエイトIDに変更願います。

今回は技術的にもちょっとグダグダ述べたいところがあるのでもうちっとだけ続くんじゃ（亀仙人・談）。
リスティング広告の検索の仕組みは「YouTubeの動画をブログに貼ってAmazonアフィリエイト」と同じ。「TEDDY-G脅威のテクノロジー」を使って動画に付けられたタグの重み付けをして、重要度の高いタグによるAmazonの検索結果を表示しているだけ。TEDDY-G脅威のテクノロジーは、前回と違ってJavaScriptなのでソース見るとネタバレしますが、そっとしておいてあげてください。
さて、今回それよりも大事なのは、JavaScriptによる外部スクリプトの読み込み。いつもの通り、Amazon検索にはawsearch.jsを使ってるわけですが、JavaScriptには外部スクリプトの読み込み機能がありません。そこで、PerlのUse、PHPのinclude/requireみたいなことをするには、Scriptタグを動的に生成してappendChildするのですが、本ブログでも何度もReferしている最速インターフェース研究会さんの「JSAN構想とリモートデータの取得とUser JavaScript」にある通り、JavaScriptでは読み込み終了後に処理再開したり、読み込み完了のイベントを取得して処理したりすることができません。そこで、Google Suggestや拙作Bidders検索やU2Bplayerその他諸々のJSONネタではあらかじめ関数を var hoge=function(data) {...} の形で設定しておき、読み込まれる側のスクリプトを hoge(data)={...} の形で吐き出すことで、読み込み完了と同時に関数hogeを実行するようにしてあります。しかし、awsearch.jsのようなライブラリを読み込んで実行するにはライブラリ側に hoge(data)={...} を追加で書き込んでやる必要が生じ、あまり美しくありません。そもそも、折角のライブラリの汎用性が損なわれてしまいます。この点を先の「JSAN構想とリモートデータの取得とUser JavaScript」のサンプルスクリプトでは、setTimeoutを利用して、定期的に読み込みが完了したかチェックする関数wait()を作成し、随時監視する方法を取られています。こんな感じです。

var wait=function(func) {
    try {
        eval('check=' + func);
        if (check) {
            //読み込み完了
        } else {
            setTimeout(wait(func),100);
        }
    catch (e) {
    };
}
wait ('hoge()');

然しながら、これをそのままパクッたところ、「too much recursion」と叱られてしまいました。散々悩んだ結果、setTimeoutの代わりにsetIntervalを使うことで問題解決しました。こんな感じです。

afterLoaded=setInterval ( function () {
    try {
        X=hoge();
        //読み込み完了後に実行したい処理
        clearInterval(afterLoaded);
    } catch (e) {
    }
},100);

実際のコードの方では、ムービーやらサムネイルやらを制御するオブジェクトplayU2Bのメソッド（プロパティ）playAds()を、まずは内容空のfunctionとして定義しておき、setIntervalで指定する関数の中でputAds()をawsearch.jsを使って検索結果を取得して表示するメソッドとしてoverwriteしています。putAds()はサムネイルクリックのたびに実行するよう指定しているので、awsearch.js読み込み完了までは何も起きず、読み込みが完了すると広告が表示されるようになっています。この仕組みをうまく使うと、外部JavaScriptを一発読み込むだけでprototype.jsやscriptaculous.jsなんかも同時に読み込んで色々できるんじゃないでしょうか。

色々御託を並べましたが、U2B Playerのユーザーの方で「こういう機能が欲しい！」とか言うご要望があれば、熱が冷めないうちは対応させて戴きますので、Trackback、コメント等お寄せ下さい。ちなみに、動画をDownloadできるボタン/リンクというのは考えたんだけども面白くなさそうだからつけるのやめた。

【追記】ページ内でLightBoxのように動画をオーバーレイさせて表示させる機能を追加しました。詳細解説はこちらです。
【追記2】U2B Player読み込み完了後に、ページ内のすべてのYouTubeへのリンクを、ページ内での動画オーバーレイ表示させる機能（Link2B）を追加しました。詳細解説はこちらです。

ブログを書くならBlogWrite