Yahoo!画像検索APIでスライドショー (たつをの ChangeLog)

Yahoo!画像検索APIでスライドショー

2006-09-19-1 [YahooHacks]

今回の YahooHacks は、Y!API + Ajax + JSON で、
検索結果画像をスライドショーっぽく表示します。
プレゼンっぽいことができます。
(一時的にデモを置いておきます。そのうち消えます。ご了承ください。
http://chalow.net/misc/yahoohacks-samp/hack_slideshow.html)

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

■■■画像検索結果をスライドショーで表示する

Yahoo!画像検索Webサービスを用いて、
検索結果を順番に提示するスライドショー形式にするハックです。

スライドショーは、
プロキシ CGI とメインページ (HTML + JavaScript) から構成されます。
検索結果の取得・表示にはAjaxによる方法で行っています。
Ajax には prototype.js (http://prototype.conio.net/) を使っています
(原稿執筆時の最新バージョン 1.4.0)。

なお、画像検索結果でスライドショー、プレゼンテーションをするための
本格的なサイトとして、MashStar (http://mashstar.com/) が知られてい
ます。いざというときにオススメです。

■コード

プロキシ CGI は、url encode された UTF-8 の検索キーワードを受け取り、
内部で Yahoo! API で画像検索を行い、画像とサムネイルの URL を JSON
形式で返します。
以下、プロキシ CGI のコードです。
検索結果 XML をハッシュのリストにした後、
objToJson() で JSON に変換しています。

#!/usr/bin/perl -T
use strict;
use warnings;
use LWP::Simple;
use XML::Simple;
use JSON;

my $key = do {no warnings 'uninitialized'; $ENV{'QUERY_STRING'} || ""};
my $url = "http://search.yahooapis.jp/ImageSearchService/V1/"
    ."imageSearch?appid=YahooDemo&query=$key&results=10";

my $r = get_images($url);
my @urls = map {{Url => $_->{Url}, TUrl => $_->{Thumbnail}{Url}}} (@$r);

print "Content-Type: text/javascript; charset=UTF-8\n\n";
print objToJson(\@urls), "\n";

sub get_images {
    my ($url) = @_;
    my $yahoo_response = get($url);
    return [] unless $yahoo_response;
    my $xmlsimple = XML::Simple->new();
    my $yahoo_xml = $xmlsimple->XMLin($yahoo_response);
    if (ref($yahoo_xml->{Result}) eq "ARRAY") { # found: many
        return $yahoo_xml->{Result};
    } elsif (ref($yahoo_xml->{Result}) eq "HASH") { # found: 1
        return [$yahoo_xml->{Result}];
    }
    return []; # not found
}

メインページ側の JavaScript プログラムでは、
prototype.js を使い検索キーワードをプロキシ CGI に投げ、
JSON による検索結果を受け取り、
スライドショーとして表示するよう加工します。
以下、メインページの HTML, JavaScript コードです。
JavaScript 部では、
prototype.js の Ajax.Request でプロキシ CGI へアクセスし、
showResponse() で CGI の出力 (JSON) を配列 images へ格納し、
show_image() で images 内の画像を表示する HTML コードを生成しています。

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="prototype-1.4.0.js" type="text/javascript"></script>
<script><!--
function get_json(key) {
    var url = 'hack_json_image.cgi?' + key; 
    new Ajax.Request (url, {method: 'GET', onComplete: showResponse});
}

var images;
function showResponse(req, json) {
    eval("images = " + req.responseText);
    show_image();
}

var cur = 0;
function show_image() {
    $('show').innerHTML = "<h1>slide " + (cur + 1) + "</h1>";
    if (cur > 0)
         $('show').innerHTML += '<img src="' + images[cur -1].TUrl + '">';
    $('show').innerHTML
         += '<a href="' + images[cur].Url + '"><img src="'
         + images[cur].Url + '"></a>';
    if (++cur >= images.length) cur = 0;
    $('show').innerHTML += '<img src="' + images[cur].TUrl + '">';
}
// --></script>
</head>
<body>
<input type="text" id="key" size="20">
<input type="button" value="start" onclick="get_json($('key').value);">
<input type="button" value="next" onclick="show_image();">
<hr>
<div id="show">Slide Show!</div>
</body>
</html>

■Hack の実行

プロキシCGIとメインページと prototype-1.4.0.js を同じディレクトリ
に置き、ブラウザからメインページにアクセスします。
左上のフォームに検索キーを入力し「start」をクリックすると、
1枚目の画像が表示されます。
「next」をクリックすると次の画像が表示されます。
画像の左右には、前の画像と次の画像のサムネイルも表示されます (下図)。

参考ページ：
- Yahoo!デベロッパーネットワーク
  http://developer.yahoo.co.jp/
- Prototype JavaScript Framework
  http://prototype.conio.net/
- JSON/簡単なテスト:基本
  http://jsgt.org/ajax/ref/test/json/test1.htm
- MashStar | 準備ゼロの最強プレゼンテーション！
  http://mashstar.com/

関連書籍：
- Yahoo! Hacks
- Ajax 実装のための基礎テクニック