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

かなり前にGoogle AJAX Search APIを使ってビデオ検索を設置してみるということで紹介しましたが、今回これをカスタマイズしてみます。
まず基本形を設置してみるとこんな感じになります。
Loading...
で、今回この基本形をカスタマイズしていきます。まずはこちらのページで基本形のコードを取得しましょう。 以下のように入力画面になるので

video-search2.png

以下の手順で入力します。
  1. 最初から表示しておくキーワードを入力します。今回の場合「中村俊輔」「oasis」「片山晋吾」「FatboySlim」となっています。各キーワードはカンマで区切ります。
  2. 次に設置するサイトのURLを入力します
  3. 最後に「Generate code」をクリックするとコードが表示されます。
以上の手順でコードが表示されます。そして、それをカスタマイズするわけですがポイントは以下の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
で、色々カスタマイズしたものがこのようになります。
Loading...
どこがちがうかというと
  1. タグは「中村俊輔」だけど表示されている検索結果は「中村俊輔 フリーキック」
  2. プレーヤーのサイズが480px x 380px
  3. 再生終了が「再生を終了します」になっている
  4. 表示する検索結果が8つ
他にもカスタマイズできますが今回は使えそうなもののみ紹介しました。設置自体は簡単なのでブログパーツ気分で設置してみてはどうでしょうか。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
このコメントは管理人のみ閲覧できます
【2011/03/08 23:47】 | - # | [edit]
こんにちは。
当ブログをご利用いただきありがとうございます。

分かるかどうか分かりませんが見させていただきますよ~

サイトを公開しているのであればURLの欄にアドレスを入れていただいたらそこからのぞきますよ~
【2011/03/10 23:22】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加