熱血！MULTI web

diary/20080827

ID: 882 | 作成日: 2008/08/27 [Wed] 15:53:00 | 最終更新: 2012/07/08 [Sun] 17:35:36

FrontPage / diary / 20080827

「サグールテレビ API」を試してみました＆サンプル

運営しているコンテンツのひとつに何か検索できる項目増やそうかなぁと、「サグールテレビ」のAPIをちょっと試しました。

結局導入自体は見送ったのですが、この「サグールテレビ検索 Ajax API」そのものはJavaScriptで呼び出すのでサーバ環境は関係ないし、APIの解説ページに書かれているサンプルソースをほとんどそのまま貼り付けるだけで動画検索機能を呼び出せるため、手軽にサイトに導入できていいなぁと。

自分で試す上で情報をとネットで探してみたけどサンプルとかちょっと見つけられなかったので、APIページのサンプルコードとほとんど変わらないですが、自分用メモも兼ねて簡単なサンプルコードを書こうと思います。

「サグールテレビ」は複数の動画共有サイトから検索することができるWebサービスで、再生リストに動画を登録して複数の動画を連続再生といった機能をブラウザ上で行うことができます。

そして「サグールテレビ検索 Ajax API」は、その「複数の動画共有サイト検索機能」を自分のサイトに追加することができるAPIです。

それではまず一番簡単なパターンということで、サイトに検索フォームを表示させます。
以下のものも含めて、このエントリーに書かれているサンプルの文字コードは「UTF-8」でローカル環境で試したものです。

<html>
	<head>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
		<script src="http://sagool.tv/web/js/sagoolTvSearchAjaxApi.js" type="text/javascript"></script>
		<script>
		<!--
			sagool.sagooltv.setClientUrl("サイトのURL");
		//-->
		</script>
	</head>
	<body>
		<div id="sagoolTvSearch">
			ここに動画の検索フォームや検索結果が表示されます。
		</div>
	</body>
</html>

上記を実行すると、「div」の部分に検索フォームや動画の検索結果が表示されます。
デフォルトの設定では、「<div id="sagoolTvSearch">」と「</div>」の間が検索フォームや検索結果の表示部になります。

どういった表示をさせるにしても、まず最低限

<script src="http://sagool.tv/web/js/sagoolTvSearchAjaxApi.js" type="text/javascript"></script>
「script」タグ内の「sagool.sagooltv.setClientUrl("サイトのURL");」
<div id="sagoolTvSearch">～</div>

の部分が記述されている必要があります。
「sagool.sagooltv.setClientUrl」の「サイトのURL」の部分は、APIを利用するサイトのURLに書き換えてください。

続いて、ページが立ち上がった段階から指定した検索ワードによる動画検索結果を表示させます。

<html>
	<head>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
		<script src="http://sagool.tv/web/js/sagoolTvSearchAjaxApi.js" type="text/javascript"></script>
		<script>
		<!--
			sagool.sagooltv.setClientUrl("サイトのURL");
			sagool.sagooltv.setInitialQuery("TEST");
		//-->
		</script>
	</head>
	<body>
		<div id="sagoolTvSearch">
			ここに動画の検索フォームや検索結果が表示されます。
		</div>
	</body>
</html>

サンプルでは「TEST」を検索ワードに動画検索した結果が表示させます。

「sagool.sagooltv.setInitialQuery("検索ワード");」が初期クリエの設定となっており、ここで指定している検索ワード(サンプルでは「TEST」と書かれている部分)による動画検索結果がページが読み込まれたときに表示されるので、初めから検索結果を表示させたい場合はコレを使います。

次は、上のサンプルに若干追加したものです。

<html>
	<head>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
		<script src="http://sagool.tv/web/js/sagoolTvSearchAjaxApi.js" type="text/javascript"></script>
		<script>
		<!--
			sagool.sagooltv.setClientUrl("サイトのURL");
			sagool.sagooltv.setInitialQuery("TEST");
		//-->
		</script>
	</head>
	<body>
		<p>
			<a href="javascript:sagool.sagooltv.search('テスト');">テスト</a>の動画を検索。
			<a href="javascript:sagool.sagooltv.search('てすと');">てすと</a>の動画を検索。
		</p>
		<div id="sagoolTvSearch">
			ここに動画の検索フォームや検索結果が表示されます。
		</div>
	</body>
</html>

サンプルを実行すると、まず検索フォームと「TEST」で動画検索した結果が表示されます。
そして、リンク文字「テスト」をクリックすると「テスト」の検索結果、「てすと」をクリックすると「てすと」の検索結果に切り替わります。

「sagool.sagooltv.search("検索ワード");」で新たに指定キーワードで動画検索した結果を呼び出すことができます。
サンプルだと「a」タグの「javascript:」以降に書かれている部分がそれになります。

他にもいくつかの機能が用意されており、たとえば「sagool.sagooltv.setForm(0);」を「head」の「script」タグの間に追記することで検索フォームが非表示の状態なるので、ページが表示されたときに検索結果のみにしたい場合はコチラを利用します。

通常、複数の動画関連サイトの検索を導入しようと思うと、それぞれのサービスが提供するAPIなり検索結果のRSSなりを呼び出さないといけませんが、サグールテレビAPIなら、これひとつで数十というサイトから一括した検索結果を得ることができます。
現段階では表示件数や結果表示のパターン(サムネイルのみとかテキストのみ等)といった設定の関数が用意されていないのが気になりますが、簡単な手続きでこの機能が利用できるのはいいですね。

やっぱり何かのサイトかコンテンツに使ってみたいかな。