TAGGY Search APIを利用して、自分のページ内に検索結果（記事の検索結果）を表示させてみましょう。ここではCarというキーワードで検索を行い、記事のタイトルを表示させてみます。
TAGGY Search APIは検索結果をXMLではなくJSON形式で返します。また、JSON形式とJSONP形式 (JavaScript Object Notation with Padding) が選択できるようになっています。callbackパラメータを指定しないとJSON形式、指定するとJSONP形式となります。JSONP形式の場合はcallbackパラメータで指定された名前の関数が呼び出されます。
まず、単純にCarで検索された結果をそのまま表示させてみます。（サンプルを
実行する）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript"><!--
if (window.addEventListener) window.addEventListener("load", loadScript, false);
if (window.attachEvent) window.attachEvent("onload", loadScript);
function loadScript(){
var script = document.createElement("script");
script.charset = "utf-8";
script.src = "http://taggy.jp/user/media/new/jsonp.do?encoding=UTF-8&callback=dataProc&limit=10&offset=0&media=video&query=Car";
document.body.appendChild(script);
}
// JSONPの場合のデータ処理
function dataProc(data){
document.getElementById("result").innerText = data;
document.getElementById("result").textContent = data;
}
// --></script>
<title>Sample</title>
</head>
<body>
<h1>TAGGY Search APIサンプル</h1>
<div id="result"></div>
</body>
</html>
画面上には[object Object]と表示されます。これが表示されているということはJSON形式で正しく読み込まれたことになります。このままでは記事が表示されないので、一番最初の記事のタイトルだけ表示してみます。APIドキュメントを見ると最初の階層のEntry配列に各種情報が格納されており、配列内のtitleプロパティが記事のタイトルになっています。これは「data.Entry[0].title」とすると記事のタイトルを読み出す事ができます。dataはJSONPで呼び出された関数の引数名です。以下のサンプルはエントリーの最初の記事のタイトルを表示します。（サンプルを
実行する）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript"><!--
if (window.addEventListener) window.addEventListener("load", loadScript, false);
if (window.attachEvent) window.attachEvent("onload", loadScript);
function loadScript(){
var script = document.createElement("script");
script.charset = "utf-8";
script.src = "http://taggy.jp/user/media/new/jsonp.do?encoding=UTF-8&callback=dataProc&limit=10&offset=0&media=video&query=Car";
document.body.appendChild(script);
}
// JSONPの場合のデータ処理
function dataProc(data){
document.getElementById("result").innerHTML = data.Entry[0].title;
}
// --></script>
<title>Sample</title>
</head>
<body>
<h1>TAGGY Search APIサンプル (最初の記事のタイトルを表示)</h1>
<div id="result"></div>
</body>
</html>
全ての記事のタイトルを表示するにはEntry配列の数だけ繰り返せばよいことになります。これはfor()命令を使えば手軽に処理することができます。（サンプルを
実行する）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript"><!--
if (window.addEventListener) window.addEventListener("load", loadScript, false);
if (window.attachEvent) window.attachEvent("onload", loadScript);
function loadScript(){
var script = document.createElement("script");
script.charset = "utf-8";
script.src = "http://taggy.jp/user/media/new/jsonp.do?encoding=UTF-8&callback=dataProc&limit=10&offset=0&media=video&query=Car";
document.body.appendChild(script);
}
// JSONPの場合のデータ処理
function dataProc(data){
for (var i=0; i<data.Entry.length; i++){
document.getElementById("result").innerHTML += data.Entry[i].title +"<br>";
}
}
// --></script>
<title>Sample</title>
</head>
<body>
<h1>TAGGY Search APIサンプル (読み込まれた記事のタイトルを全て表示)</h1>
<div id="result"></div>
</body>
</html>
記事のタイトルが表示されただけではイマイチです。そこで、今度は記事のタイトルにリンクを張ってみます。リンクはEntry配列内のlinkプロパティを参照します。これをaタグのhref属性に指定しページ上に出力します。（サンプルを
実行する）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript"><!--
if (window.addEventListener) window.addEventListener("load", loadScript, false);
if (window.attachEvent) window.attachEvent("onload", loadScript);
function loadScript(){
var script = document.createElement("script");
script.charset = "utf-8";
script.src = "http://taggy.jp/user/media/new/jsonp.do?encoding=UTF-8&callback=dataProc&limit=10&offset=0&media=video&query=Car";
document.body.appendChild(script);
}
// JSONPの場合のデータ処理
function dataProc(data){
for (var i=0; i<data.Entry.length; i++){
var aLink = '<a href="'+data.Entry[i].link+'">';
document.getElementById("result").innerHTML += aLink + data.Entry[i].title +"</a><br>";
}
}
// --></script>
<title>Sample</title>
</head>
<body>
<h1>TAGGY Search APIサンプル (記事にリンクする)</h1>
<div id="result"></div>
</body>
</html>
[
第23章 検索総数を表示するへ]
[
目次へ]
(2007.5.15)