Google AJAX Search APIを使ったビデオ検索をカスタマイズ

まず基本形を設置してみるとこんな感じになります。 で、今回この基本形をカスタマイズしていきます。まずはこちらのページで基本形のコードを取得しましょう。 以下のように入力画面になるので

以下の手順で入力します。 以上の手順でコードが表示されます。そして、それをカスタマイズするわけですがポイントは以下のJavaScriptの部分となります。

<script type="text/javascript">
  function LoadVideoSearchControl() {
    var options = {
      twoRowMode : true
    };
    var videoSearch = new GSvideoSearchControl(
                              document.getElementById("videoControl"),
                              [{ query : "ユベントス"}, { query : "oasis"}, { query : "片山晋吾"}, { query : "FatboySlim"}], null, null, options);
    }
    // arrange for this function to be called during body.onload
    // event processing
  GSearch.setOnLoadCallback(LoadVideoSearchControl);
</script>

まずは最初の「var options」の部分について説明します。初期状態では「twoRowMode」のみ定義されていますが他に「twoRowMode」や「largeResultSet」というものもあります。複数定義する場合はカンマを忘れないようにしましょう。

var options = {
  string_allDone : "再生終了します", 
    // 再生終了のリンクの文字を変更する場合に。

  twoRowMode : true ,
    // 検索結果を2列で表示する。スペースに合わせて表示数が変わります。

  largeResultSet : true
    // trueで8つ、falseで4つ検索結果を表示します。
    // 2列表示にしていて表示しきれない場合は表示できるだけしか表示されません。
 };

また、以下の赤の部分と

document.getElementById("videoControl")

取得したコードの上の方にある以下の部分を同じようにしましょう。複数設置する場合はどちらを変更しなくてはならないので注意しましょう。

<div id="videoControl">
  <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>

次に検索結果ですが以下のようにすることもできます。

{ query : "中村俊輔　フリーキック", label : "中村俊輔" }

どういうことかというと表示されるタグは「中村俊輔」ですが、表示されている検索結果は「中村俊輔　フリーキック」ということです。検索キーワードが長くなったときなどに便利かも。

最後に再生するプレーヤーのサイズの変更方法です。これについてはCSSで変更します。

<style type="text/css">
  @import url("http://www.google.com/uds/solutions/videosearch/gsvideosearch.css");
</style>

上のコードの下に以下のコードを挿入するだけです。この順番を必ず守りましょう。

<style type="text/css">
.playerBox_gsvsc .player_gsvsc {
    width : 320px;
    height : 260px;
}
</style>

プレーヤーのサイズは以下の4種類です。

1. 180px x 135px - small player
2. 260px x 95px - medium player
3. 320px x 260px - large player
4. 480px x 380px - extra large player

で、色々カスタマイズしたものがこのようになります。 どこがちがうかというと

1. タグは「中村俊輔」だけど表示されている検索結果は「中村俊輔　フリーキック」
2. プレーヤーのサイズが480px x 380px
3. 再生終了が「再生を終了します」になっている
4. 表示する検索結果が8つ

他にもカスタマイズできますが今回は使えそうなもののみ紹介しました。設置自体は簡単なのでブログパーツ気分で設置してみてはどうでしょうか。