【JavaScript】「Pixabay API」を使ってフリー画像の検索機能を作ってみた
沢山のフリー画像が投稿されており、検索ができるサイトPixabayが提供している
「Pixabay API」を使って画像を検索できる機能の作成する方法を紹介します。
準備
Pixabay APIを利用するにはまず初めに会員登録（無料）を行う必要があります。
会員登録が完了したら、Pixabay APIにアクセスして「Get Started」をクリックします。
クリックするとAPIについての説明の画面が表示されます。
画面を少しスクロールすると「Parameters」の部分にAPIキーが表示されています。
画像検索を行う
検索を行うには「https://pixabay.com/api/」にパラメータを追加してリクエストを行います。
今回使用するパラメータは、APIキー(必須)とキーワードで検索を行います。
まず、キーワードを入力するフォームとボタンを作成します。
入力フォームに「id=”keyword”」、検索ボタンに「id=”search”」を設定しておきます。
続いてリクエストを行うために必要なURLを作成します。
|
1 2 3 4 5 6 7 |
$("#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を使ってリスエストを送信します。
|
1 2 3 4 5 6 7 8 |
$.ajax({ url: url, type: 'GET', dataType: 'json', }) .done(function(data) { console.log(data); }); |
リクエストが成功すると
このような結果が取得でき、hits配列に検索結果が入っています。
一度で取得できる件数はデフォルトで20件に設定されているので、変更する場合は「per_page」パラメータで3～200件まで変更することが出来ます。
検索結果1件あたりの情報に「previewURL」という値があるのでこれを使って画像のプレビューを表示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
$.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); } |
これで画像検索を行い、表示することが出来ます。
