はじめに
前回 に引き続いてBing APIをjQueryにより操作します。今回は画像や動画の検索です。
前回の掲載日(3月15日)がちょうどInternet Explorer 9の正式版のリリース日でした。ただし、日本語版は、東北地方太平洋沖地震の影響を考慮して公開が延期されています。このリリース時期にBingの新機能の公開もあるのではないかという うわさもありましたが、実際には新機能の公開はありませんでした。前回から今回までに大きな機能は追加されておらず[1] 、Bing APIにも更新はありません。
今回の内容とは関係がありませんが、Bing Mapsでは震災後、被災地の一部の航空写真が更新されています。また震災前と比較できるMap App (図1 )や、通行実績を表示するMap App (図2 )が公開されています。
図1 Japan Earthquake Map App
図2 Road Status Japan 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" />
<script src = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type = "text/javascript" ></script>
<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>
<ul id = "list" ></ul>
</div>
</body>
</html>
JavaScriptファイル(image.js)
$ ( function () {
var appId = " AppID " ;
var esc = function ( str ) {
if (! str ) {
return "" ;
} else {
return str . replace ( /&/ g , "&" ). replace ( /\</ g , "<" ). replace ( /\>/ g , ">" );
}
}
});
検索ボックスのボタンをクリックしたときのAPI呼出し処理は次のようになります。前回のWebサイト検索と比べてBing APIのパラメーター部分が異なっています。
$ ( "#search" ). click ( function () {
var q = $ ( "#query" ). val ();
if (! q ) {
location . href = "http://www.bing.com/"
return ;
}
$ . ajax ({
type : "GET" ,
url : "http://api.bing.net/json.aspx" ,
dataType : "jsonp" ,
jsonp : "JsonCallback" ,
data : {
AppId : AppId ,
Version : "2.2" ,
Market : "ja-JP" ,
Query : q ,
Sources : "Image" ,
"Image.Count" : 10 ,
"Image.Offset" : 0 ,
JsonType : "callback"
},
success : function ( data ) {
searchCallback ( data );
},
error : function ( jqXHR , textStatus , errorThrown ) {
alert ( errorThrown );
}
});
});
続いてレスポンスの処理は次の通りです。上記コードの前に記述します。
var searchCallback = function ( response ) {
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 のようになります。正しく動作したでしょうか。
図3 画像の検索
フィルタリング
さて、Bingの画像検索を見てみると、図4 のような画面構成になっています。検索結果の画像だけでなく、関連キーワードやフィルタリングの項目が表示されています。Bing APIでは、画像検索の関連キーワードの取得はできませんが、フィルタリングの指定は可能です。
図4 Bing画像検索
フィルタリングの指定は、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 : {
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 : {
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 ) {
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>" );
}
}
動画の長さ(時間)は、ミリ秒のため、上記コードでは表記を変換する関数を別に用意しています。そのコードは次のようになります。上記のコードの前に追記してください。
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 のようになります。
図5 動画の検索
フィルタリング
Bingの動画検索を見てみると、図6 のような画面構成になっています。画像検索と同様に、結果のサムネイルだけでなく、関連キーワードやフィルタリングの項目が表示されています。また、並び替え順を、最も一致する検索結果または最新のふたつから選択できます。
図6 Bing動画検索
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 : {
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" ,
JsonType : "callback"
},
success : function ( data ) { },
error : function ( jqXHR , textStatus , errorThrown ) { }
});
フィルタリングの指定は、Queryパラメーターに「filterui:duration-short」のように指定することでも絞り込みが可能です。Video.Filtersパラメーターでは、動画サイトの指定はできないため、動画サイトを指定する場合はこの方法を使用します。指定できる値は実際のBingで検索しURLのパラメーターを確認してください。
今回はここまでです。いかがでしたでしょうか。次回は、今回までに紹介できていない検索対象やjQueryとJSONの組み合わせ以外での利用も紹介していく予定です。