たつをの ChangeLog : 2006-09-15

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 実装のための基礎テクニック

人工知能学会誌、送付先変更

2006-09-15-2
自宅に送られた人工知能学会誌 2006/9 が、クロネコメール便だったので転送されず、返却されたとの連絡。
送付先変更メールを事務局に送った。

ref. 人工知能学会誌 2006/7 のメモ→[2006-07-26-3]

エンジニアマインド！

2006-09-15-3 [Book][仕事]
技術評論社からこんな雑誌が！ 今日発売。

■エンジニアマインド Vol.1


技評のエンジニアマインドのページ
http://www.gihyo.co.jp/magazines/emind/contents によると、
エンジニアマインドでは、設計や見積り、品質管理といった開発工程全体に着目し、どうしたらプロジェクトを成功させることができるのか正面から考えます。そして、エンジニアとして充実した毎日を送っていくための方法を追求していきます。
とのこと。

Perl でのデバグ用のダンプ

2006-09-15-4 [Programming]
「Perl Hacks」よりデバグ用のダンプの話。
Data::Dumper をよく使っていたが、よりデバグに適したモジュール Dumpvalue を知った(p.182, HACK#71)。よさげなので活用するつもり。
以下、自分用メモを兼ねたサンプルコードと実行例：

% cat dumpvalue-test.pl
#!/usr/bin/perl
use strict;
use warnings;
use Dumpvalue;
my $d = Dumpvalue->new();
my @array = ({foo => ["One", "Two"], bar => "Hello"},
             {foo => ["Hi", "Hu", "Mi"]},
             {foo => ["ABCD", "EFG"], bar => "domo"});
$d->dumpValue(\@array);   # => STDOUT
open my $fh, '>dump.out'; # => file 'dump.out'
my $old_fh = select($fh);
$d->dumpValue($array[0]);
close $fh;
select($old_fh);
% ./dumpvalue-test.pl
0  HASH(0x1041fac)
   'bar' => 'Hello'
   'foo' => ARRAY(0x100516c)
      0  'One'
      1  'Two'
1  HASH(0x1071acc)
   'foo' => ARRAY(0x1030954)
      0  'Hi'
      1  'Hu'
      2  'Mi'
2  HASH(0x1071be0)
   'bar' => 'domo'
   'foo' => ARRAY(0x1071bb0)
      0  'ABCD'
      1  'EFG'
% cat dump.out 
'bar' => 'Hello'
'foo' => ARRAY(0x100516c)
   0  'One'
   1  'Two'
この記事に言及しているこのブログ内の記事

たつをの ChangeLog
Powered by chalow