第20回　使ってみよう！ Bing API──jQuery編（2）

はじめに

前回に引き続いてBing APIをjQueryにより操作します。今回は画像や動画の検索です。

前回の掲載日（3月15日）がちょうどInternet Explorer 9の正式版のリリース日でした。ただし、日本語版は、東北地方太平洋沖地震の影響を考慮して公開が延期されています。このリリース時期にBingの新機能の公開もあるのではないかといううわさもありましたが、実際には新機能の公開はありませんでした。前回から今回までに大きな機能は追加されておらず[1]⁠、Bing APIにも更新はありません。

今回の内容とは関係がありませんが、Bing Mapsでは震災後、被災地の一部の航空写真が更新されています。また震災前と比較できるMap App（図１）や、通行実績を表示するMap App（図２）が公開されています。

画像の検索

Bing APIで画像を検索してみましょう。APIの呼び出しは、次のようなURLにアクセスします。前回のWebサイト検索の場合と比較すると、Sourcesパラメーターの値がWebからImageに変わり、Web.CountおよびWeb.Offsetパラメーターの代わりにImage.Count、Image.Offsetパラメーターを使用しています。

http://api.bing.net/json.aspx?
  AppId=AppId&
  Version=2.2&
  Market=ja-JP&
  Query=Windows&
  Sources=Image&
  Image.Count=2&
  Image.Offset=0

Image.CountおよびImage.Offsetに指定できる値は、Webサイト検索の場合と同じく最大50と最大1000です。

URLにアクセスすると次のようなJSON形式の結果が得られます。ひとつひとつの画像の結果は、SearchResponse.Image.Results配列に格納されています[2]⁠。各要素は、Thumbnailオブジェクトなど画像検索結果に関したプロパティを持っています。

{
    "SearchResponse": {
        "Image": {
            "Offset": 0, 
            "Results": [
                {
                    "DisplayUrl": "http://windows.microsoft.com/lt-LT/windows7/what-is-windows-live", 
                    "FileSize": 185115, 
                    "Height": 441, 
                    "MediaUrl": "http://res1.windows.microsoft.com/resbox/lt/Windows%207/main/3/1/31ded92b-cc47-41dd-a3ae-1eafaf199e92/31ded92b-cc47-41dd-a3ae-1eafaf199e92.jpg", 
                    "Thumbnail": {
                        "ContentType": "image/jpeg", 
                        "FileSize": 4692, 
                        "Height": 160, 
                        "Url": "http://ts1.mm.bing.net/images/thumbnail.aspx?q=809769770960&id=b7f7d82caa4e866d5a8838a832906dde", 
                        "Width": 148
                    }, 
                    "Title": "Windows Live pagrindinis puslapis yra puiki vieta pradėti, kad ir ką ...", 
                    "Url": "http://windows.microsoft.com/lt-LT/windows7/what-is-windows-live", 
                    "Width": 410
                }, 
                {
                    "DisplayUrl": "http://windows.microsoft.com/nb-NO/windows-vista/Record-TV-in-Windows-Media-Center", 
                    "FileSize": 150777, 
                    "Height": 325, 
                    "MediaUrl": "http://res1.windows.microsoft.com/resbox/nb/Windows%20Vista/Main/7/0/70d4ae6d-6866-437c-a466-5c908dc4ee57/70d4ae6d-6866-437c-a466-5c908dc4ee57.png", 
                    "Thumbnail": {
                        "ContentType": "image/jpeg", 
                        "FileSize": 3593, 
                        "Height": 126, 
                        "Url": "http://ts2.mm.bing.net/images/thumbnail.aspx?q=553917419693&id=ce43aa0c375b042edca53b0681ff9099", 
                        "Width": 160
                    }, 
                    "Title": "Bla gjennom innspilt innhold i Windows Media Center", 
                    "Url": "http://windows.microsoft.com/nb-NO/windows-vista/Record-TV-in-Windows-Media-Center", 
                    "Width": 410
                }
            ], 
            "Total": 186000
        }, 
        "Query": {
            "SearchTerms": "Windows site:microsoft.com"
        }, 
        "Version": "2.0"
    }
}

Image.Results要素（ImageResultオブジェクト）の内容は次の通りです。必ずしもすべてのプロパティが結果に含まれているわけではありません。

名前	説明
FileSize	ファイルサイズ（バイト数）
Title	タイトル
MediaUrl	画像へのURL
Url	画像を含むWebサイトへのURL
DisplayUrl	検索結果のページに表示するURL
Width	画像の横幅（ピクセル）
Height	画像の縦幅（ピクセル）
ContentType	MIMEタイプ（image/jpeg など）
Thumbnail	サムネイルを表すThumbnailオブジェクト Url, ContentType, Width, Height, FileSizeプロパティを持つ

コードの記述

それでは、jQueryを使用してAPIを呼出し、その結果を表示してみましょう。作成するファイルは次の通りです。CSSファイルは前回を参照してください。HTML・JavaScriptファイルも、JavaScriptファイル名を変更した以外は前回と同じ内容です。

HTMLファイル

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title>Bing API Sample</title>
        <link rel="stylesheet" href="default.css" type="text/css" />
        <!-- jQuery ライブラリーの参照 -->
        <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script>
        <!-- Bing API を利用する JavaScript ファイルの参照 -->
        <script src="./iamge.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!-- 検索ボックス -->
        <div id="box"><input type="text" id="query" /><input type="submit" id="search" value="" /></div>
        <div style="clear: left;">
            <!-- ここに検索の件数を表示する -->
            <div id="summary"></div>
            <!-- ここに検索結果のWebサイト情報を表示する -->
            <ul id="list"></ul>
        </div>
    </body>
</html>

JavaScriptファイル（image.js）

$(function () {

    // AppId
    var appId = "AppID";

    // 特殊文字を置換する関数
    var esc = function (str) {
        if (!str) {
            return "";   
        } else {
            return str.replace(/&/g, "&amp;").replace(/\</g, "&lt;").replace(/\>/g, "&gt;");
        }
    }

    // (ここにコードを追記します)

});

検索ボックスのボタンをクリックしたときのAPI呼出し処理は次のようになります。前回のWebサイト検索と比べてBing APIのパラメーター部分が異なっています。

$("#search").click(function() {
    var q = $("#query").val();
    if (!q) {
        // クエリーの入力がない場合は Bing へ移動
        location.href = "http://www.bing.com/"
        return;   
    }
    
    // Bing API の非同期呼び出し
    $.ajax({
        type: "GET",
        url: "http://api.bing.net/json.aspx",
        dataType: "jsonp",
        jsonp: "JsonCallback",
        data: { // Bing API のパラメーター
            AppId: AppId,
            Version: "2.2",
            Market: "ja-JP",
            Query: q,
            Sources: "Image",
            "Image.Count": 10,
            "Image.Offset": 0,
            JsonType: "callback" // ← JSONP 形式の結果を指定
        },
        success: function (data) {
            // 非同期呼出しが成功した場合
            searchCallback(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            // 非同期呼出しに失敗した場合
            alert(errorThrown);
        }
    });
    
});

続いてレスポンスの処理は次の通りです。上記コードの前に記述します。

var searchCallback = function (response) {
    // 結果がエラーの場合
    // (省略 第19回参照)

    var list = $("#list");
    list.empty();

    var summary = $("#summary");
    summary.empty();

    if (response &&
        response.SearchResponse &&
        response.SearchResponse.Image &&
        response.SearchResponse.Image.Results) {
    
        // 結果の一覧表示
        $.each(response.SearchResponse.Image.Results, function () {
            list.append('<li><a href="' + this.Url + '">' + 
                        '<img src="' + this.Thumbnail.Url + '" width="' + this.Thumbnail.Width + '" height="' + this.Thumbnail.Height + '" title="' + esc(this.Title) + '" /></a><br />' +
                        '<span class="dispUrl">' + esc(this.DisplayUrl) + '</span></li>');
        });

        // 件数の表示
        var offset = response.SearchResponse.Web.Offset;
        summary.html((offset + 1) + "-" + (offset + response.SearchResponse.Image.Results.length) + " 件 " +
                    "(" +  response.SearchResponse.Web.Total + "件中) の検索結果");
        
    } else {
        list.append("<li>No results</li>");
    }
}

以上の実行結果は図4のようになります。正しく動作したでしょうか。

フィルタリング

さて、Bingの画像検索を見てみると、図4のような画面構成になっています。検索結果の画像だけでなく、関連キーワードやフィルタリングの項目が表示されています。Bing APIでは、画像検索の関連キーワードの取得はできませんが、フィルタリングの指定は可能です。

フィルタリングの指定は、Image.Filtersパラメーターを使用します。

http://api.bing.net/json.aspx?
  AppId=AppId&
  Version=2.2&
  Market=ja-JP&
  Query=Windows&
  Sources=Image&
  Image.Count=2&
  Image.Offset=0&
  Image.Filters=Size:Samll

指定可能な値はMSDN Libraryを参照してください。複数のフィルタリング項目の指定も可能です。その場合は空白で区切って指定します。

jQueryの非同期呼出し部分に直接指定した場合は次のようになります。

$.ajax({
    type: "GET",
    url: "http://api.bing.net/json.aspx",
    dataType: "jsonp",
    jsonp: "JsonCallback",
    data: { // Bing API のパラメーター
        AppId: AppId,
        Version: "2.2",
        Market: "ja-JP",
        Query: q,
        Sources: "Image",
        "Image.Count": 10,
        "Image.Offset": 0,
        "Image.Filters": "Size:Large Color:Monochrome", // フィルタリング項目の指定
        JsonType: "callback"
    },
    success: function (data) { /* (省略) */ },
    error: function (jqXHR, textStatus, errorThrown) { /* (省略) */ }
});

また、Image.Filtersパラメーターを使用する以外にも、Queryパラメーターに「filterui:color-bw」のようにフィルタリング用のキーワードを指定しても同じように絞り込みが可能です。使用できる値は実際にBingで検索しURLのパラメーターを確認してみてください。

動画の検索

次は動画の検索をしてみましょう。APIの呼び出しは次のようなURLにアクセスします。Sourcesパラメーターの値がVideo、取得する件数とオフセットの値の指定は、Video.Count、Video.Offsetパラメーターを使用します。

http://api.bing.net/json.aspx?
  AppId=AppId&
  Version=2.2&
  Market=ja-JP&
  Query=Windows&
  Sources=Video&
  Video.Count=2&
  Video.Offset=0

Video.CountおよびVideo.Offsetに指定できる値は、最大50と最大1000です。

URLにアクセスすると次のようなJSON形式の結果が得られます。動画検索の場合、ひとつひとつの動画の結果は、SearchResponse.Video.Results配列に格納されています。各要素は、動画の検索結果用のプロパティを持っています。

{
    "SearchResponse": {
        "Query": {
            "SearchTerms": "Windows"
        }, 
        "Version": "2.2", 
        "Video": {
            "Offset": 0, 
            "Results": [
                {
                    "ClickThroughPageUrl": "http://www.bing.com/videos/search?q=Windows&scope=video&docid=863516491784&FORM=SOAPGN", 
                    "PlayUrl": "http://video.ap.org/?f=AP&pid=HqbGANuCLP0Oc_cWJlaVHQths7NMIpj0", 
                    "RunTime": 118282, 
                    "SourceTitle": "AP", 
                    "StaticThumbnail": {
                        "ContentType": "image/jpeg", 
                        "FileSize": 3915, 
                        "Height": 94, 
                        "Url": "http://ts1.mm.bing.net/videos/thumbnail.aspx?q=863516491784&id=41bd8c6dd60ad9d158bbe4d8d3e7a534&bid=mhpnR5m4E0jRqQ&bn=Thumb&url=http%3a%2f%2fvideo.ap.org%2f%3ff%3dAP%26pid%3dHqbGANuCLP0Oc_cWJlaVHQths7NMIpj0", 
                        "Width": 160
                    }, 
                    "Title": "Raw Video: Protest in London Against Cuts"
                }, 
                {
                    "ClickThroughPageUrl": "http://www.bing.com/videos/search?q=Windows&scope=video&docid=527796928524&FORM=SOAPGN", 
                    "PlayUrl": "http://www.5min.com/Video/Windows-7-Touch-Screen-Features-Review-239390015", 
                    "RunTime": 199000, 
                    "SourceTitle": "5min", 
                    "StaticThumbnail": {
                        "ContentType": "image/jpeg", 
                        "FileSize": 3235, 
                        "Height": 88, 
                        "Url": "http://ts1.mm.bing.net/videos/thumbnail.aspx?q=527796928524&id=3ec8e77088f94e3085b096703366c2cb&bid=rZJuqRjbwPakeg&bn=Thumb&url=http%3a%2f%2fwww.5min.com%2fVideo%2fWindows-7-Touch-Screen-Features-Review-239390015", 
                        "Width": 160
                    }, 
                    "Title": "Windows 7 Touch Screen Features Review"
                }
            ], 
            "Total": 606000
        }
    }
}

Video.Results要素（VideoResultオブジェクト）の内容は次の通りです。必ずしもすべてのプロパティが結果に含まれているわけではありません。

名前	説明
Title	タイトル
SourceTitle	動画サイトの名前
RunTime	動画の長さ（ミリ秒）
PlayUrl	動画へのURL
ClickThroughPageUrl	Bingの動画ページのURL
StaticThumbnail	動画のサムネイルを表すThumbnailオブジェクト

コードの記述

jQueryによるAPIの呼び出しや、結果の表示をしてみましょう。内容は画像検索の場合と同じ記述が多いのでポイントだけ示します。

APIの呼び出し部分は次のようになります。

$.ajax({
    type: "GET",
    url: "http://api.bing.net/json.aspx",
    dataType: "jsonp",
    jsonp: "JsonCallback",
    data: { // Bing API のパラメーター
        AppId: AppId,
        Version: "2.2",
        Market: "ja-JP",
        Query: q,
        Sources: "Video",
        "Video.Count": 10,
        "Video.Offset": 0,
        JsonType: "callback"
    },
    success: function (data) { /* (省略) */ },
    error: function (jqXHR, textStatus, errorThrown) { /* (省略) */ }
});

レスポンスの処理は次の通りです。

var searchCallback = function (response) {
    // 結果がエラーの場合
    // (省略 第19回参照)

    var list = $("#list");
    list.empty();

    var summary = $("#summary");
    summary.empty();

    if (response &&
        response.SearchResponse &&
        response.SearchResponse.Video &&
        response.SearchResponse.Video.Results) {
    
        // 結果の一覧表示
        $.each(response.SearchResponse.Video.Results, function () {
            list.append('<li><a href="' + this.PlayUrl + '">' + 
                        '<img src="' + this.StaticThumbnail.Url + '" width="' + this.StaticThumbnail.Width + '" height="' + this.StaticThumbnail.Height + '" alt="' + esc(this.Title) + '" /></a><br />' +
                        '<span class="sourceTitle">' + esc(this.SourceTitle) + '</span><br />' +
                        '<span class="runTime">' + runTimeFormat(this.RunTime) + '</span></li>');
        });

        // 件数の表示
        var offset = response.SearchResponse.Video.Offset;
        summary.html((offset + 1) + "-" + (offset + response.SearchResponse.Video.Results.length) + " 件 " +
                    "(" +  response.SearchResponse.Video.Total + "件中) の検索結果");
    } else {
        list.append("<li>No results</li>");
    }
}

動画の長さ（時間）は、ミリ秒のため、上記コードでは表記を変換する関数を別に用意しています。そのコードは次のようになります。上記のコードの前に追記してください。

// ミリ秒を 0:00 形式に変換する関数
var runTimeFormat = function(runTime) {
    if (!runTime) {
        return "";
    } else {
        var t = runTime / 1000;
        return Math.floor(t / 60) + ":" + ("0" + t % 60).slice(-2);
    }
}

動画サイト名と動画の長さ用のスタイルは前回定義していなかったので、必要に応じて次のようにCSSファイルに追記してください。

.sourceTitle {
    font-size: small;
    color: Green;
}
.runTime {
    font-size: small;
    color: Gray;
}

以上を実行すると図5のようになります。

フィルタリング

Bingの動画検索を見てみると、図6のような画面構成になっています。画像検索と同様に、結果のサムネイルだけでなく、関連キーワードやフィルタリングの項目が表示されています。また、並び替え順を、最も一致する検索結果または最新のふたつから選択できます。

Bingの動画検索では、動画の登録日などの日付情報も表示されているのがわかりますが、残念ながらBing APIでは利用できません。

APIでも利用できる内容は、フィルタリングの指定と、並び順の指定です。指定には、Video.FiltersパラメーターとVideo.SortByパラメーターを使用します。

http://api.bing.net/json.aspx?
  AppId=AppId&
  Version=2.2&
  Market=ja-JP&
  Query=Windows&
  Sources=Video&
  Video.Count=2&
  Video.Offset=0&
  Video.Filters=Duration:Short&
  Video.SortBy=Date

Video.SortByパラメーターに指定可能な値は、Relevance（最も一致する検索結果順）とDate（最新順）です。Video.Filtersパラメーターに指定可能な値はMSDN Libraryを参照してください。複数のフィルタリング項目を指定する場合は空白で区切って指定します。

jQueryの非同期呼出し部分に直接指定した場合は次のようになります。

$.ajax({
    type: "GET",
    url: "http://api.bing.net/json.aspx",
    dataType: "jsonp",
    jsonp: "JsonCallback",
    data: { // Bing API のパラメーター
        AppId: AppId,
        Version: "2.2",
        Market: "ja-JP",
        Query: q,
        Sources: "Video",
        "Video.Count": 10,
        "Video.Offset": 0,
        "Video.Filters": "Duration:Short Aspect:Standard", // フィルタリング項目の指定
        "Video.SortBy": "Date", // または "Relevance" が指定可
        JsonType: "callback"
    },
    success: function (data) { /* (省略) */ },
    error: function (jqXHR, textStatus, errorThrown) { /* (省略) */ }
});

フィルタリングの指定は、Queryパラメーターに「filterui:duration-short」のように指定することでも絞り込みが可能です。Video.Filtersパラメーターでは、動画サイトの指定はできないため、動画サイトを指定する場合はこの方法を使用します。指定できる値は実際のBingで検索しURLのパラメーターを確認してください。

今回はここまでです。いかがでしたでしょうか。次回は、今回までに紹介できていない検索対象やjQueryとJSONの組み合わせ以外での利用も紹介していく予定です。