最新記事・ニュース


クリエイティブ・コモンズ・ライセンス

このサイトは、次のライセンスで保護されています。 クリエイティブ・コモンズ・ライセンス.

Google AJAX Search API(Beta) - Video Bar -

2007年06月28日 11:56

キーワードで検索した動画をWEBサイトに表示


今回は、Site Alert(サイトアラート)TOPの右カラムに表示している動画の紹介です。せっかくなので導入方法についても簡単に説明したいと思います。

Google社が提供している「Google AJAX Search API」の「Video Bar」を利用しています。Google社では他にもAJAXを利用した様々なAPIを提供していますが、今回は「Video Bar」を利用しました。

これは、Google Video(Youtube)の動画を特定キーワードで検索した結果をWEBサイトの画面に表示及びその場で再生するAPIです。

なお、Site Alert(サイトアラート)上では、「監視」というキーワードで動画検索して表示してあります。

導入方法


導入は極めてカンタンです。

Google AJAX Search API (Beta) Video Bar Wizardをクリックして画面を表示してください。


  1. vertical(垂直)デザインかhorizontal(水平)デザインで表示するかをチェック
  2. Search Expression(検索キーワード)を入力
  3. 「Preview video bar」ボタンを選択して、表示方法を事前確認
  4. 「Site URL」にvideo barを表示したいサイトのURLを入力(ドメインで問題なし)
  5. 「Generate Code」ボタンを選択。

画面内にjavascriptのコードが表示されるので、ホームページにコピー&ペーストして導入完了です。


その他・メモ


よく利用される(と思う)調整方法を記載しますので、WEBデザイン的にそのままでの導入が難しい場合は、以下を参考に生成されたjavascriptのソースコードを修正してみてください。

  • divのidが「videoBar-bar」の箇所に検索結果の動画一覧が表示されます。WEBデザインに合わせて移動させる事ができます。
  • divのidが「videoBar-player」の箇所に「videoBar-bar」に表示された動画が選択された場合に、その動画を再生する場所になるので、同じくWEBデザインに合わせて移動させる事ができます。
  • javascriptのfunction「LoadVideoBar()」のオプション「largeResultSet」をfalse/trueを変更すると、一覧表示する動画の数(true;10個,false4個)を制御できます。
  • CSSの「videoBar-player」のwidthとheightを調整する事で、「videoBar-player」で表示する動画のサイズを調整できます。



ソーシャルブックマークに登録する →  Hatenaブックマークに追加 del.icio.usに追加 livedoorクリップへ追加


トラックバック

トラックバックURL:
http://site-alert.net/mt335/mt-tb-sa.cgi/5