沢山のフリー画像が投稿されており、検索ができるサイトPixabayが提供している

「Pixabay API」を使って画像を検索できる機能の作成する方法を紹介します。

準備

Pixabay APIを利用するにはまず初めに会員登録（無料）を行う必要があります。

会員登録が完了したら、Pixabay APIにアクセスして「Get Started」をクリックします。

クリックするとAPIについての説明の画面が表示されます。

画面を少しスクロールすると「Parameters」の部分にAPIキーが表示されています。

画像検索を行う

検索を行うには「https://pixabay.com/api/」にパラメータを追加してリクエストを行います。

今回使用するパラメータは、APIキー(必須)とキーワードで検索を行います。

まず、キーワードを入力するフォームとボタンを作成します。

入力フォームに「id=”keyword”」、検索ボタンに「id=”search”」を設定しておきます。

続いてリクエストを行うために必要なURLを作成します。

$("#search_btn").on('click', function(){
    var url = "https://pixabay.com/api/?key=(APIキー)";
    var keyword = $("#keyword").val();
    if(keyword != "") {
        url += "&q=" + encodeURIComponent(keyword);
    }
});

基本となるURL「https://pixabay.com/api/」にkey=(APIキー)でAPIキーを指定し

検索ワードはq=(キーワード)で設定をします。

この時検索ワードはencodeURIComponentでエスケープしておきます。

URLが作成できたらjQueryのAjaxを使ってリスエストを送信します。

$.ajax({
    url: url,
    type: 'GET',
    dataType: 'json',
})
.done(function(data) {
    console.log(data);
});

リクエストが成功すると

このような結果が取得でき、hits配列に検索結果が入っています。

一度で取得できる件数はデフォルトで20件に設定されているので、変更する場合は「per_page」パラメータで3～200件まで変更することが出来ます。

検索結果1件あたりの情報に「previewURL」という値があるのでこれを使って画像のプレビューを表示します。

$.ajax({
    url: url,
    type: 'GET',
    dataType: 'json',
})
.done(function(data) {
    for(var i in data.hits){
        createCard($(".row")[0], data.hits[i]);
    }
}); 

var createCard = function(parent, value) {
    var frame = document.createElement('div');
    var card = document.createElement('div');
    var cardBody = document.createElement('div');
    var img = document.createElement('img');
    var title = document.createElement('h5');
    var p = document.createElement('p');

    frame.classList.add("col-sm-4", "col-md-3");
    card.classList.add("card", "img-thumbnail");
    cardBody.classList.add("card-body", "px-2", "py-3");
    
    img.classList.add("card-img-top");
    img.src = value.previewURL;
    img.width = 286;
    img.height = 286;
    
    p.classList.add("mb-0");

    cardBody.appendChild(p);
    card.appendChild(img);
    card.appendChild(cardBody);
    frame.appendChild(card);
    parent.appendChild(frame);
}

これで画像検索を行い、表示することが出来ます。