はじめに

個人で動画サイトを運営してみたくないですか？そんな夢をGoogle先生が叶えてくれました。

Google AJAX Search APIというのはGoogleが提供するプログラミングが出来なくてもGoogleの便利な機能がたくさん使えるオープンソースのようなものです。

Google AJAX Search API では、
JavaScript を使用して自分のウェブページに Google 検索を組み込むことができます。
ウェブページにシンプルで動的な Google 検索ボックスを埋め込んで検索結果を
表示したり、検索結果をプログラムで革新的な方法で使用したりできます。

今回は、サイトにGoogleで検索して表示される動画の表示の仕方を説明していきます。

ステップ１

Google AJAX Search API にアクセスします。

すると、マルチメディア検索というリンクがすぐに見つかるかと思いますのでそこをクリックします。

ステップ２

すると動画バーというリンクが上から２番目に出てきますので選んでクリックして下さい。

ここから英語になりますが、落ち着いてください。

このようなリンクがついていますので、Start with the Wizardをクリックしてください。

ステップ３

まず、①でブログ等に表示させるカスタマイズ方式を選びます。

Orientationは垂直（vertical）か水平（horizontal）かを選択します。

Popular Video Feedsは動画の種類を選びます。

上から

全ての動画（Most Viewed Videos）
人気の動画（Top Rated Videos）
トップニュース動画（Top News Videos）
最新動画（Recently Featured Videos）

となっているので選択します。ここでは複数選択できます。

YouTube ChannelsはYoutubeのチャンネルを指定できます。

Search Expressionsは検索ワードを指定できます。例えばcatでねこ動画を表示したりとか。

次に②でコードを表示のボタンを押すとHTMLソースを取得できます。

↓こんな感じ。これをブログやサイトに貼りつけます。

<!-- ++Begin Video Bar Wizard Generated Code++ -->
  <!--
  // Created with a Google AJAX Search Wizard
  // http://code.google.com/apis/ajaxsearch/wizards.html
  -->

  <!--
  // The Following div element will end up holding the actual videobar.
  // You can place this anywhere on your page.
  -->
  <div id="videoBar-bar">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>

  <!-- Ajax Search Api and Stylesheet
  // Note: If you are already using the AJAX Search API, then do not include it
  //       or its stylesheet again
  -->
  <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vbw"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/css/gsearch.css");
  </style>

  <!-- Video Bar Code and Stylesheet -->
  <script type="text/javascript">
    window._uds_vbw_donotrepair = true;
  </script>
  <script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/solutions/videobar/gsvideobar.css");
  </style>

  <style type="text/css">
    .playerInnerBox_gsvb .player_gsvb {
      width : 320px;
      height : 260px;
    }
  </style>
  <script type="text/javascript">
    function LoadVideoBar() {

    var videoBar;
    var options = {
        largeResultSet : !true,
        horizontal : true,
        autoExecuteList : {
          cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
          cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
          executeList : [
"ytfeed:most_viewed.this_week",
"ytfeed:top_rated.this_week",
"ytfeed:google_news",
"ytfeed:recently_featured",
"cat"]
        }
      }

    videoBar = new GSvideoBar(document.getElementById("videoBar-bar"),
                              GSvideoBar.PLAYER_ROOT_FLOATING,
                              options);
    }
    // arrange for this function to be called during body.onload
    // event processing
    GSearch.setOnLoadCallback(LoadVideoBar);
  </script>
<!-- ++End Video Bar Wizard Generated Code++ -->

簡単でしょ？

Google APIを使って作るサイト

○Google APIを使って、特定のジャンルに特化した動画サイトを作る
○最新ニュース情報を逐一チェック出来るニュース配信サイトを作る

などなど

他にもいろいろ使えるかと思いますので良いアイデアがあればコメント等で教えて下さい^^/

ねこねこ動画というねこ好きによるねこ好きのための現代の癒しサイトも運営していますのでそちらも是非よろしくお願いしますー。