【YouTube API】【JavaScriptでYouTube APIを使う方法】【ソース公開】

  【リンクフリー】 私設研究所ネオテックラボ Neo-Tech-Lab.co.uk
【記載者】 東京工業大学 ソリューション研究機構 (特任教授) 上田智章
【掲載日】2011年05月17日
 
ここにチェックボックス型外部コンテンツ・メニューが入ります。

【はじめに】

 YouTubeの動画を自分のサイトのBGM代わりに使おうと思ったのだが、簡単な埋め込み型プレーヤー(Embedded Player)は1曲だけしか演奏できずとても不便だ。再生リストを自分で作って再生させる方法もあるが、コントロールに制約があり、画面にテロップも流せない。YouTubeにありがちな事なのだが、選択した動画が削除されてしまう事もある。
 そこで、いろいろ試行錯誤してサイト側で動画情報と削除の有無を巡回管理するBGM player Version1.00を製作したのだが、YouTube側のアクセスピークの影響、度重なるフォーマット変更、Web Agentの負荷増大等のいろいろな問題が生じてしまう。
 今回、2011年4月にYouTubeの動画ページのHTMLがJavaScriptを実行しないHTTP GETでは得られなくなってしまった。直ぐにInternet Explorerを起動してページをアクセス後にドキュメントのinnerHTMLを読む方法に変更したが、その方法だと動画ページ巡回中は10~30Mbpsもの帯域を使ってしまう。
 そう言う理由で、developer申請を行い、SWFobjectを使ったJavaScriptコントロールのPlayer APIと動画情報を得るためのData APIを使った新BGM playerの製作にチャレンジしてみた。

【まずはDeveloperとして申請してみる】

 『Google YouTube API』をキーワードにGoogle検索を行うと、『YouTube の API とツール』ページが検索トップに見つけられるはずだ。
 Data APIかPlayer APIのどちらをクリックしても左欄にスタートガイドのメニューがあるページに遷移する。左欄のメニューに『ディベロッパーキーの登録』というリンクがあるのでクリックすると、YouTubeアカウントでのログインを要求してくるはずだ。ログインするとそこがディベロッパー登録のページだ。
 私の場合、個人サイトで表示利用するBGM playerを製作したいだけなのだが、まあ広い意味でのディベロッパーということになるのだろう。まぁ、全ソースを公開すれば問題ないだろう。
 ディベロッパー登録のページは英語だが、速い話、【Name欄】に製作するソフトウェアモジュール名称を書いて、【Website欄】にそれを利用するサイトのURLを書き、【Description欄】にそれは一体何に使うのか書いておけばよい。
 私は2009年7月頃にわけもわからず、New Product(新規製品)のResister(登録)だけして放置していたので、初期画面がどのように表示されるのかはわからない。
 登録したらDeveloper KeyとClient IDが表示されるが、かなり長いDeveloper Keyだけ、メモ帳にでもコピペして保存すればいい。以前はClient IDも必要だったそうだが、現在は不必要だと書かれていた。
 このディベロッパーキーはSWFobjectを利用する際に使う。


【SWFobjectをダウンロードしよう】

Googleのswfobjectのcode配布サイトでSWFobjectをダウンロードしよう。左欄にDownloadsと書かれた項目があり、『swfobject_2_2.zip』のダウンロードができる。zipファイルを解凍すると、swfobject.jsがあるはずだ。このファイルを自分のサイト内にコピーすれば良い。この機能を使うには、アクセスする際にディベロッパーキーを使い、HTTPサーバー下でブラウザによるアクセスを行う必要がある。

【Player API (SWFobject)の使い方】

【コードサンプル:骨格構造】

まず、HTMLの中にBGM playerのフレーム(骨格)を定義するためのdivタグを1つ用意しておく。
  例:  <div id='youtube'></div>
例えば、下記のような関数CreateFrame()を定義して、主要なdivタグ構造を作成する。
  使用例:  CreateFrame('youtube');
これによって、主要な骨格構造ができあがる。

   //*****************************************************
   //【指定IDのdivタグ内にBGM playerのFrameを構成する】
   //*****************************************************
   function CreateFrame(tagID) {
      var frm  = "<div style='position:relative;top:0px;left:0px;z-index:0;'>"; //【z-indexの1~9までは未使用】
          frm += "<div style='position:absolute;top:0px;left:0px;z-index:10;width:585px;height278px;'>";
          frm +=   "<img border='0' src='" + NTL_WallPaperBG + "' width='585px' height='278px' />"; //【概ね横585px縦278pxの壁紙】
          frm += "</div>";
          frm += "<div style='position:absolute;top:278px;left:0px;z-index:10;width:585px;height:70px;'>";
          frm +=   "<img border='0' src='" + NTL_ThumbnailBG + "' width='585px' height='70px' />";  //【概ね横585px縦70pxのサムネールバー】
          frm += "</div>";
          frm += "<div id='NTL_FrmMedium' style='position:absolute;top:0px;left:0px;z-index:11;width:330px;height:278px;'></div>"; //【YouTube動画MediumSize】
          frm += "<div id='NTL_FrmInfo'   style='position:absolute;top:0px;left:325px;z-index:11;width:260px;height:278px;'></div>"; //【YouTube動画情報欄】
          frm += "<div id='NTL_StopMovie' style='position:absolute;top:250px;left:0px;z-index:12;width:30px;height:30px;'>";
          frm +=   "<a title='" + NTL_StopComment + "' href='javascript:void(0);' onclick='StopMovie();' />";  //【】
          frm +=     "<img border='0' src='" + NTL_StopButton + "' width='30px' height='30px' />";  //【横30px縦30pxのpng形式透明画像】
          frm +=   "</a>";
          frm += "</div>";  //【YouTube動画停止ボタン】
          frm += "<div id='NTL_MessageL1' style='position:absolute; top:0px;  left:0px;z-index:12;width:330px;height:40px;'></div>"; //【メッセージ1行目】
          frm += "<div id='NTL_MessageL2' style='position:absolute; top:35px; left:0px;z-index:12;width:330px;height:40px;'></div>"; //【メッセージ2行目】
          frm += "<div id='NTL_MessageL3' style='position:absolute; top:70px; left:0px;z-index:12;width:330px;height:40px;'></div>"; //【メッセージ3行目】
          frm += "<div id='NTL_MessageL4' style='position:absolute; top:105px;left:0px;z-index:12;width:330px;height:40px;'></div>"; //【メッセージ4行目】
          frm += "<div id='NTL_MessageL5' style='position:absolute; top:140px;left:0px;z-index:12;width:330px;height:40px;'></div>"; //【メッセージ5行目】
          frm += "<div id='NTL_MessageL6' style='position:absolute; top:175px;left:0px;z-index:12;width:330px;height:40px;'></div>"; //【メッセージ6行目】
          frm += "<div id='NTL_MessageL7' style='position:absolute; top:207px;left:0px;z-index:12;width:330px;height:40px;'></div>"; //【メッセージ7行目】
          frm += "<div id='NTL_FrmLarge'  style='position:absolute;top:0px;left:0px;z-index:20;width:600px;height:400px;'></div>";   //【YouTube動画LargeSize】
          frm += "<div id='NTL_WebAgent1' style='position:absolute;top:55px;left:315px;z-index:3;width:350px;height:700px;'></div>"; //【エージェント1】
          frm += "<div id='NTL_WebAgent2' style='position:absolute;top:55px;left:315px;z-index:3;width;350px;height:700px;'></div>"; //【エージェント2】
          frm += "<div id='NTL_Thumbnails' style='position:absolute; top:278px; left:0px; z-index:19;' width='585px' height='70px'></div>"; //【RollingThumbnails】
          frm += "<div id='NTL_Remarks'    style='position:absolute; top:350px; left:0px; z-index:10; bgcolor=lightgray; width:585px; height:50px;' ></div>"; //【RollingThumbnails】
          frm += "<div id='NTL_Voice'      style='position:absolute; top:0px;   left:585px; z-index:0; visibility:hidden;' width='350px' height='100px'></div>"; //【Google翻訳TTS】
          frm += "</div>"; //【relative】
      document.getElementById(tagID).innerHTML = frm;
      document.getElementById("NTL_Remarks").innerHTML = NTL_fmtRemarks;
   } 

【コードサンプル:SWFobject】

上記で用意したNTL_FrmMediumの中にBGM player(SWFobject)を入れるための『vidoedevice』と名付けたdivタグを用意する。
わざわざ『vidoedevice』を用意するのは、何曲も再生する場合に1度SWFobject内で深刻なエラーが発生すると手の着けようがないので、
NTL_FrmMediumと名付けたdivタグ内をnullにすることで、SWFobjectごと消去できるからだ。
さらに動画表示画面上にテキストやイメージ画像の表示を可能にするためにwmodeを'transparent' 'true'に設定している。
フルスクリーン表示(fs=1)と自動スタート(autoplay=1)も重要だ。
マニュアルを全く読まない性格のため、paramsやURLオプションの付け方が正しいのかどうかは保障できません。
Player APIを実行するためには、ディベロッパーキーをオプション(key=)で指定する必要があるようです。
また、このSWFobjectを正常動作させるためには、Apacheサーバーの管理下でブラウザによるアクセスを行う必要があります。
変数NTL_Movieに0を入れて、loadPlayer();を実行すると、動画ID配列の1曲目の再生がスタートします。
SWFobjectの準備が完了すると、関数onYouTubePlayerReady(playerId)がcallbackされる仕組みのようです。
ここでPlayerのスクリプト操作を行うためのオブジェクトを変数PlayerObjに引き継ぎます。
さらに、この関数内で再生時間や動画情報を更新表示するためのタイマーNTL_MovieTimerを設定し、
500ミリ秒後に関数DisplayVideoInfo()が呼び出されるようにしています。

   var NTL_MovieTimer; //【YouTube動画タイマー】動画情報を表示更新するためのタイマー
   var NTL_MovieList = ["6GkZrr5LAl4", "dmOhHmn3wj0", "qJFBkOTiJqA", "CleQxLRpV-I", "QF_bLVsJLlY", "UGP_hoQpLZQ", "0WfVWB5rr3I", "g6bXz88rvHg" ,"hAkQ1zZJI1c", "Q2yEVyGWpI4", "6hlADpxjj0s", "iCOfYnPdOcI", "zEwPq73rKkw"];
   var NTL_Movie = 0;  //【動画番号】上記動画ID配列(NTL_MovieList)の要素番号
   var NTL_MovieID;    //【動画ID】  YouTubeの動画ID
   var PlayerObj;      //【Player APIによる操作を行う為のオブジェクト】


   //*****************************************************
   // The "main method" of this sample. Called when someone clicks "Run".
   //*****************************************************
   //【My Developper Key】: 'AI39si5VJgipMTHsm7_tR4eEbioJpCKUS5ApbRfZoS17VE7WrpFN-f8y5Zd-uS6Aa0PNxFrk623g9Lv3zwMnsb0Tr2VfowZDpw'
   function loadPlayer() {
      document.getElementById('NTL_FrmLarge').style.zIndex = 0; //【FrmLargeの奥行きを変更】
      document.getElementById('NTL_FrmMedium').innerHTML = "<div id='videodevice'></div>";
      NTL_MovieID = NTL_MovieList[ NTL_Movie ]; // The video to load
      var params = { allowScriptAccess: "always", allowFullScreen: "true", wmode: "transparent" };  //
      var atts = { id: "ytPlayer" };
      var URL = "http://www.youtube.com/v/" + NTL_MovieID + "&enablejsapi=1&playerapiid=ytPlayer&fs=1&rel=0&autoplay=1&wmode=transparent&key=AI39si5VJgipMTHsm7_tR4eEbioJpCKUS5ApbRfZoS17VE7WrpFN-f8y5Zd-uS6Aa0PNxFrk623g9Lv3zwMnsb0Tr2VfowZDpw";
      swfobject.embedSWF(URL, "videodevice", "320", "278", "8", null, null, params, atts);
      RequestYouTubeMovieRecord(NTL_MovieID); //【JSONデータ要求】
      document.getElementById('NTL_MessageL1').innerHTML = NeoTechLab; //【Neo-Tech-Lab.comのロゴ】
   }

   function onYouTubePlayerReady(playerId) {
      PlayerObj = document.getElementById("ytPlayer");
      NTL_MovieTimer = setTimeout('DisplayVideoInfo()', 500);
   }

【コードサンプル:動画情報の表示】

特に工夫点はありません。JSONデータの受取が、要求発行順には来ない非同期通信なので、基本的に待たないで一定時間ごとに表示処理を繰り返す構造にしています。
ランダム再生させる場合のサンプルを下に示します。再生時刻が記録時間に一致したら次の動画を再生するようにしています。

   //*****************************************************
   //【動画情報の表示】
   //*****************************************************
   function DisplayVideoInfo() {
      clearTimeout(NTL_MovieTimer);
      PlayerObj = document.getElementById("ytPlayer");
      var ct = PlayerObj.getCurrentTime();
      var tl = PlayerObj.getDuration();
      var rem = "";
      rem += "<a title='YouTubeの動画ページに遷移します。' href='http://www.youtube.com/watch?v=" + NTL_MovieID + "' target='_blank'><img border='0' src='http://i1.ytimg.com/vi/" + NTL_MovieID + "/default.jpg' width='90px' height='70px' /></a><br>";
      rem += "【動画ID】<a title='YouTubeの動画ページに遷移します。' href='http://www.youtube.com/watch?v=" + NTL_MovieID + "' target='_blank'>" + NTL_MovieID + "</a><br>";
      rem += "【動画所有者】<a title='YouTubeの所有者のチャンネルに遷移します。' href='http://www.youtube.com/user/" + YT_AuthorName + "' target='_blank'>" + YT_AuthorName +"</a><br>";
      rem += "【アップロード日時】<br> " + YT_Published +"<br>";
      rem += "【タイトル】<a title='YouTubeの動画ページに遷移します。' href='http://www.youtube.com/watch?v=" + NTL_MovieID + "' target='_blank'>" + YT_Title +"</a><br>";
      rem += "【再生回数】" + YT_ViewCount +"<br>";
      rem += "Current Time = " + ct + " [sec]<br>Total Time = " + tl + " [sec]<br>"; //
      document.getElementById('NTL_FrmInfo').innerHTML = rem;
      if (ct == tl) {
         var pastMovie = NTL_Movie;
         while ( pastMovie == NTL_Movie ) { NTL_Movie = Math.floor( Math.random() * (NTL_MovieList.length - 1) ); }
         if ( NTL_Movie == NTL_MovieList.length ) { NTL_Movie = 0; }
           loadPlayer();
      } else {
         NTL_MovieTimer = setTimeout('DisplayVideoInfo()', 500);
      }
   }

【Data APIの使い方】

Google Data APIにはいろいろな形式があるが、JavaScriptでクロスドメインでデータを受け取るのに適したJSON形式を用いた。
まず、ブラウザのアドレス欄に『http://gdata.youtube.com/feeds/api/videos?alt=json&q=【動画ID】』と打ち込んでみてほしい。
【動画ID】とは、各動画ページのURL(例:http://www.youtube.com/watch?v=RvDLOeK5HRc&feature=feedrec_grec_index)の『watch?v=』の後に付いている11桁の半角英数字の事だ。
試しに、『http://gdata.youtube.com/feeds/api/videos?alt=json&q=RvDLOeK5HRc』と打ち込んでみる。
すると、テキストで
{"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$media":"http://search.yahoo.com/mrss/","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$yt":"http://gdata.youtube.com/schemas/2007","id":{"$t":"http://gdata.youtube.com/feeds/api/videos"},"updated":{"$t":"2011-05-18T05:29:35.586Z"},"category":[{"scheme":"http://schemas.google.com/g/2005#kind","term":"http://gdata.youtube.com/schemas/2007#video"}],"title":{"$t":"YouTube Videos matching query: RvDLOeK5HRc","type":"text"},"logo":{"$t":"http://www.youtube.com/img/pic_youtubelogo_123x63.gif"},"link":[{"rel":"alternate","type":"text/html","href":"http://www.youtube.com"},{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http://gdata.youtube.com/feeds/api/videos"},{"rel":"http://schemas.google.com/g/2005#batch","type":"application/atom+xml","href":"http://gdata.youtube.com/feeds/api/videos/batch"},{"rel":"self","type":"application/atom+xml","href":"http://gdata.youtube.com/feeds/api/videos?alt\u003djson&q\u003dRvDLOeK5HRc&start-index\u003d1&max-results\u003d25"}],"author":[{"name":{"$t":"YouTube"},"uri":{"$t":"http://www.youtube.com/"}}],"generator":{"$t":"YouTube data API","version":"2.0","uri":"http://gdata.youtube.com/"},"openSearch$totalResults":{"$t":1},"openSearch$startIndex":{"$t":1},"openSearch$itemsPerPage":{"$t":25},"entry":[{"id":{"$t":"http://gdata.youtube.com/feeds/api/videos/RvDLOeK5HRc"},"published":{"$t":"2010-09-01T16:37:13.000Z"},"updated":{"$t":"2011-03-28T12:41:30.000Z"},"category":[{"scheme":"http://schemas.google.com/g/2005#kind","term":"http://gdata.youtube.com/schemas/2007#video"},{"scheme":"http://gdata.youtube.com/schemas/2007/categories.cat","term":"Music","label":"Music"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"VOCALOID"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"ゆうゆP"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"マクー"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"はるよ"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"深海少女"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"ミクオリジナル曲"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"VOCALOID新曲リンク"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"初音ミク"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"VOCALOID-PV"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"うん、深いな"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"underwater diving"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"scuba"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"widescreen"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"synthesized singing"},{"scheme":"http://gdata.youtube.com/schemas/2007/keywords.cat","term":"anime music"}],"title":{"$t":"【初音ミク】 深海少女 【オリジナル】[HD1080p]","type":"text"},"content":{"$t":"【初音ミク】 深海少女 【オリジナル】 NICONICODOUGA 2010年09月01日 ゆうゆ さんwww.nicovideo.jp 【作者のコメント】 Music : ゆうゆ(user/325945) Vocal : 初音ミクIllust : はるよ(mylist/3540872) Bg&Movie : マクー(mylist/12715161) 深海少女、どこまで沈む? ▼カラオケ音源はこちらです ⇒tsubu.ath.cx ■この度、日本クラウン様からアルバム「四季彩の星」を出していただける事になりまんた ⇒yuu-yu.jp","type":"text"},"link":[{"rel":"alternate","type":"text/html","href":"http://www.youtube.com/watch?v\u003dRvDLOeK5HRc&feature\u003dyoutube_gdata"},{"rel":"http://gdata.youtube.com/schemas/2007#video.responses","type":"application/atom+xml","href":"http://gdata.youtube.com/feeds/api/videos/RvDLOeK5HRc/responses"},{"rel":"http://gdata.youtube.com/schemas/2007#video.related","type":"application/atom+xml","href":"http://gdata.youtube.com/feeds/api/videos/RvDLOeK5HRc/related"},{"rel":"http://gdata.youtube.com/schemas/2007#mobile","type":"text/html","href":"http://m.youtube.com/details?v\u003dRvDLOeK5HRc"},{"rel":"self","type":"application/atom+xml","href":"http://gdata.youtube.com/feeds/api/videos/RvDLOeK5HRc"}],"author":[{"name":{"$t":"Miraclemilktea3"},"uri":{"$t":"http://gdata.youtube.com/feeds/api/users/miraclemilktea3"}}],"gd$comments":{"gd$feedLink":{"href":"http://gdata.youtube.com/feeds/api/videos/RvDLOeK5HRc/comments","countHint":1}},"media$group":{"media$category":[{"$t":"Music","label":"Music","scheme":"http://gdata.youtube.com/schemas/2007/categories.cat"}],"media$content":[{"url":"http://www.youtube.com/v/RvDLOeK5HRc?f\u003dvideos&app\u003dyoutube_gdata","type":"application/x-shockwave-flash","medium":"video","isDefault":"true","expression":"full","duration":218,"yt$format":5},{"url":"rtsp://v4.cache4.c.youtube.com/CiILENy73wIaGQkXHbniOcvwRhMYDSANFEgGUgZ2aWRlb3MM/0/0/0/video.3gp","type":"video/3gpp","medium":"video","expression":"full","duration":218,"yt$format":1},{"url":"rtsp://v2.cache7.c.youtube.com/CiILENy73wIaGQkXHbniOcvwRhMYESARFEgGUgZ2aWRlb3MM/0/0/0/video.3gp","type":"video/3gpp","medium":"video","expression":"full","duration":218,"yt$format":6}],"media$description":{"$t":"【初音ミク】 深海少女 【オリジナル】 NICONICODOUGA 2010年09月01日 ゆうゆ さんwww.nicovideo.jp 【作者のコメント】 Music : ゆうゆ(user/325945) Vocal : 初音ミクIllust : はるよ(mylist/3540872) Bg&Movie : マクー(mylist/12715161) 深海少女、どこまで沈む? ▼カラオケ音源はこちらです ⇒tsubu.ath.cx ■この度、日本クラウン様からアルバム「四季彩の星」を出していただける事になりまんた ⇒yuu-yu.jp","type":"plain"},"media$keywords":{"$t":"VOCALOID, ゆうゆP, マクー, はるよ, 深海少女, ミクオリジナル曲, VOCALOID新曲リンク, 初音ミク, VOCALOID-PV, うん、深いな, underwater diving, scuba, widescreen, synthesized singing, anime music"},"media$player":[{"url":"http://www.youtube.com/watch?v\u003dRvDLOeK5HRc&feature\u003dyoutube_gdata_player"}],"media$thumbnail":[{"url":"http://i.ytimg.com/vi/RvDLOeK5HRc/0.jpg","height":240,"width":320,"time":"00:01:49"},{"url":"http://i.ytimg.com/vi/RvDLOeK5HRc/1.jpg","height":90,"width":120,"time":"00:00:54.500"},{"url":"http://i.ytimg.com/vi/RvDLOeK5HRc/2.jpg","height":90,"width":120,"time":"00:01:49"},{"url":"http://i.ytimg.com/vi/RvDLOeK5HRc/3.jpg","height":90,"width":120,"time":"00:02:43.500"}],"media$title":{"$t":"【初音ミク】 深海少女 【オリジナル】[HD1080p]","type":"plain"},"yt$duration":{"seconds":"218"}},"gd$rating":{"average":5.0,"max":5,"min":1,"numRaters":15,"rel":"http://schemas.google.com/g/2005#overall"},"yt$recorded":{"$t":"2010-09-02"},"yt$statistics":{"favoriteCount":"34","viewCount":"7128"}}]}}
のように表示されたはずだ。これがJSONデータだ。
 JavaScriptにはこのデータを構造体データとして受け取る仕組みが用意されていて、URLの後ろに『&callback=関数名』を付けておくと、データが返送されてきた時にその関数が呼ばれ、引数に構造体データとして値が引き渡される。下にコードサンプルを示す。使い方は簡単で、関数 RequestYouTubeMovieRecord('RvDLOeK5HRc'); を実行すれば、GetYouTubeMovieRecord(Feed)がcallbackされる。
 サンプルでは引数FeedにJSONデータを代入している。どんなデータがあるのかは、Internet Explorer9に標準で装備されたF12 開発者ツール(L)を用いて、ブレークポイントを設定して、watch機能でFeedを登録して、階層構造を調べた。なので、Googleさんの仕様書は殆ど全く読んでおりませんのでご容赦ください。

【コードサンプル】

   //【Public変数の登録】
   var YT_AuthorName; //【動画所有者名】    = Feed.feed.entry[0].author[0].name.$t;
   var YT_Published;  //【アップロード日時】= Feed.feed.entry[0].published.$t;
   var YT_Title;      //【題名】            = Feed.feed.entry[0].title.$t;
   var YT_ViewCount;  //【再生回数】        = Feed.feed.entry[0].yt$statistics.viewCount;


   //*******************************************************
   //【Get YouTube Movie Record】【callback】
   //*******************************************************
   function RequestYouTubeMovieRecord(id) {   
      YT_AuthorName = ""; //【要求するデータの全項目をクリアする】
      YT_Published  = ""; //
      YT_Title      = ""; //
      YT_ViewCount  = 0;  //
      var STag = document.createElement("script"); //【scriptタグ要素を用意してJSONを要求するURLをsrcとする】
      STag.charset = "utf-8";                      // エンコードをutf-8とし、型をテキスト/JavaScriptとする
      STag.type = "text/javascript";               // JSONデータ受取の為のfunction[GetYouTubeMovieRecord]をcallbackで定義する
      STag.src = "http://gdata.youtube.com/feeds/api/videos?alt=json&q=" + id + "&callback=GetYouTubeMovieRecord";
      document.body.appendChild(STag);             //【上記JSONデータを要求する要素をbodyにappendする】
   }

   function GetYouTubeMovieRecord(Feed) {          //【Googleから返送されたJSONデータを構造体データとして引き数Feedで受け取る】
      YT_AuthorName = Feed.feed.entry[0].author[0].name.$t;       //【動画所有者名】YouTubeチャンネルの名称
      YT_Published  = Feed.feed.entry[0].published.$t;              //【アップロード日時】
      YT_Title      = Feed.feed.entry[0].title.$t;                //【題名】
      YT_ViewCount  = Feed.feed.entry[0].yt$statistics.viewCount; //【再生回数】  (他に評価や動画説明等のデータもある。)
   }