落書きノート

ふと自分が気になった事を書いてます

Bing Search APIを使って画像をかき集める

表題の通り。今回、ウェブ検索機能は省略しました。あらかじめBing Search APIでアカウント登録しないといけません。Microsoftのアカウントを取得して無料プランで登録すれば利用できます。

<html>
<head>
    <title>イメージコレクション</title>
    <script src="./jquery-1.11.3.min.js"></script>
    <script src="./image_collection.js"></script>
    <link href="./image_collection.css" rel="stylesheet" type="text/css"></style>
</head> 
<body>

<div id="wrapper">

<form id="my_form">
            <label for="query">検索</label>
            <input id="query" name="query" type="text" size="100" />

            <input id="bt_search" name="bt_search" type="button" value="Search" />
        </form>

        

<div id="results"></div>

    </div>

</body>
</html>
body {
    background-color: #FDF5E6;
    color: #000144;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: smaller;
    margin: 0;
    padding: 0;
}
        
h1 {
    font-size: 130%;
    color: #AA0000;
}   
        
label {
    display: block;
    margin-top: 12px;
    margin-bottom: 4px;
}
        
#wrapper {
    background-color: #fff;
    border: 1px solid #808080;
    font-size: 95%;
    margin: 11px auto;
    padding: 12px;
    text-align: left;
    width: 1000px;
}
$(function () {
    $('#bt_search').click(function (e) {
        e.preventDefault();

        $('#results').empty();

        var query = $('#query').val();

        if(query)
            search(query);
    });

    function search(query){
        var data = { q: query, market: 'ja-jp' };
        
        $.getJSON('proxy.php', data, function(obj){
            if(obj.d !== undefined){
                var items = obj.d.results;
                
                for(var k = 0, len = items.length; k < len; k++){
                    var item = items[k];
                    showImageResult(item);
                }
            }
        });
    }

    function showImageResult(item) {
        var a = document.createElement('a');

        a.href = item.MediaUrl;

        var i = document.createElement('img');

        i.src = item.Thumbnail.MediaUrl;

        $(a).append(i);
        
        $('#results').append(a);
    }
});
<?php $acctKey = 'YourAccountKey'; $rootUri = 'https://api.datamarket.azure.com/Bing/Search'; $query = ($_GET['q']) ? $_GET['q'] : 'sushi'; $serviceOp = 'Image'; $market = ($_GET['market']) ? $_GET['market'] : 'ja-jp'; $query = urlencode("'$query'"); $market = urlencode("'$market'"); $requestUri = "$rootUri/$serviceOp?\$format=json&Query=$query&Market=$market"; $auth = base64_encode("$acctKey:$acctKey"); $data = array( 'http' => array(
            'request_fulluri' => true,
            'ignore_errors' => true,
            'header' => "Authorization: Basic $auth")
    );
    
    $context = stream_context_create($data);
    
    $response = file_get_contents($requestUri, 0, $context);
    
    echo $response;
?>

88ea8fff-1512-f738-1b5f-480294dd863a

画像検索向けに特化してカスタマイズしました。ウェブサイトの横幅はお好みで。気に入らない人はカスタマイズしてみてください。