Yahoo!API の検索結果を JavaScript で表示 (たつをの ChangeLog)

Yahoo!API の検索結果を JavaScript で表示

2006-09-15-1 [YahooHacks]

今回の YahooHacks は Ajax ネタです。
Yahoo! API による Web 検索結果を JavaScript でパーズして非同期で表示します。XMLと非同期の処理に、川崎ゆうすけさんによる jkl-parsexml.js を使ってみたら、非常に良いっす、スバラシス。
「まるごと Perl Vol.1」のJSON記事でも紹介されてましたね。

(検索サイトのサンプルを一時的に下記URLに置いておきます。
そのうち消えますのでご了承ください。
http://chalow.net/misc/yahoohacks-samp/hack_yjws_js.html)

使用している Web API の提供が終了となったため、現在動作しません。ご了承ください。

■■■Yahoo!APIの検索結果をJavaScriptで表示する

Yahoo! API の Web 検索結果 XML をクライアント側で処理して表示します。
クライアント（ブラウザ）では、JavaScript で XML のパーズ、HTML の生成、
非同期出力を行っています。
XML のパーズと非同期処理は、川崎ゆうすけさんによる
jkl-parsexml.js (http://www.kawa.net/works/js/jkl/parsexml.html)
を使っています。
Perl の XML::Simple のように手軽に XML が扱え、とても便利です。

■プロキシ CGI

直接 Yahoo! API にアクセスして検索結果 XML を取得して加工したいと
ころですが、アクセスに用いる JavaScript の XMLHttpRequest は、
往々にしてリモートのコンテンツを取得できません。
そこで同じディレクトリにプロキシ CGI を置いて対処します。
このプロキシ CGI は、URL encode したキーワードが渡されると、
Yahoo! API にアクセスし、そのキーワードでの検索結果 XML を取得し、
そのまま表示するだけのものです。
以下にプロキシ CGI のコードを示します。

#!/usr/bin/perl -T
use strict;
use warnings;
use LWP::Simple;
print "Content-Type: text/xml; charset=UTF-8\n\n";
no warnings 'uninitialized';
print get("http://search.yahooapis.jp/WebSearchService/V1/webSearch"
          ."?appid=YahooDemo&query=$ENV{'QUERY_STRING'}");

使用例：下記URLのようにパラメタを渡すと、キーワード「デジカメ」の
Yahoo! API 検索結果 XML が得られます。
http://example.com/hack_proxy.cgi?%E3%83%87%E3%82%B8%E3%82%AB%E3%83%A1

■コード

検索ページの HTML ファイルを下記に示します。
上記プロキシ CGI を通して取得した検索結果を処理して表示する
JavaScript のコードも含まれています。

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jkl-parsexml.js"></script>
<script><!--
function yapi_search(key) {
    var ec = encodeURI(key);
    var http = new JKL.ParseXML("hack_proxy.cgi?" + ec);
    var func = function (data) {
        var r = data["ResultSet"]["Result"];
        if (r == undefined) return;
        var num = r.length;
        if (num == undefined) {
            r[0] = r;
            num = 1;
        }
        for (var i = 0; i < num; i++) {
            document.getElementById("results").innerHTML +=
            '<h3><a href="' + r[i]["Url"]+'">' + r[i]["Title"] +
            '</a></h3><p>' + r[i]["Summary"] + '</p>';
        }
    }
    http.async(func);
    http.parse();
}
// --></script>
</head>
<body>
<h1>Y!API Search (JavaScript)</h1>
<form name="search">
<input type="text" name="key" size="20">
<input type="button" value="search"
 onclick="yapi_search(document.forms['search'].key.value)">
<input type="button" value="clear"
 onclick="document.getElementById('results').innerHTML = ''">
</form>
<div id="results"></div>
</body>
</html>

■Hack の実行

jkl-pasexml.js とプロキシ CGI と検索ページ HTML を Web サーバ上の
同じディレクトリに置き、検索ページにアクセスします。
検索実行例を下図に示します。

参考ページ：
- Yahoo!デベロッパーネットワーク
  http://developer.yahoo.co.jp/
- [ajax] JKL.ParseXML／ajax通信処理ライブラリ
  http://www.kawa.net/works/js/jkl/parsexml.html
- 404 Blog Not Found:perl - no warnings 'unintialized'
  http://blog.livedoor.jp/dankogai/archives/50622749.html
  「no warnings 'unintialized'」、使い始めました！

関連書籍：
- Yahoo! Hacks
- まるごとPerl! Vol.1
- Ajax 実装のための基礎テクニック