画像取得WEBAPI PixabayAPIお試し #JavaScript

Pixabay公式

アカウント作ってAPIキーを取得する。特に障壁なし。

per_pageで取得画像枚数を設定できる。3枚が最低限

サンプル Codepen

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Pixabay API サンプルデモ</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <form name="search">
      <input name="key" type="text" placeholder="文字を入力してください">
      <input name="btn" type="submit" value="ボタン">
    </form>

    <div id="result"></div>


    <script src="app.js"></script>

  </body>
</html>

Css

form {
  margin: 25px 0;
  text-align: center;
}
form input[type="text"] {
  width: 80%;
  border: none;
  outline: none;
  padding: 5px 0;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #aaa;
}
form input[type="submit"] {
  padding: 5px 10px;
  border: 1px solid #aaa;
  outline: none;
  color: #000;
  background-color: #fff;
}
form input[type="submit"]:hover {
  color: #fff;
  background-color: #aaa;
  cursor: pointer;
}

img:hover {
  opacity: 0.5;
}

#result {
  width: 90%;
  margin: auto;
  padding: 30px;

}

(function() {

'use strict';


//フォームのボタンがクリックされたら、またはエンターキーが押されたら
document.search.btn.addEventListener('click', function(e) {
  e.preventDefault();  //画面更新をキャンセル


  fetch( createURL(document.search.key.value) )
  .then( function( data ) {
    return data.json();  //JSONデータとして取得する
  })
  .then( function( json ) {

    createImage( json );

  })
})



//リクエスト用のURLを生成する
function createURL( value ) {
  var API_KEY = '*******';
  var baseUrl = 'https://pixabay.com/api/?key=' + API_KEY;
  var keyword = '&q=' + encodeURIComponent( value );
  var option = '&orientation=horizontal&per_page=3';
  var URL = baseUrl + keyword + option;

  return URL;
}


//画像のJSONデータを画面に表示する
function createImage( json ) {
  var result = document.getElementById('result');

  result.innerHTML = '';  //検索するごとに画面をリセットする

  //該当する画像があれば
  if( json.totalHits > 0 ) {
    json.hits.forEach( function( value ) {
      var img = document.createElement('img');
      var a = document.createElement('a');

      a.href = value.pageURL;  //ダウンロード用のサイトURL
      a.target = '_blank';
      img.src = value.previewURL;  //プレビュー用の画像URL

      a.appendChild( img );
      result.appendChild( a );
    })
  }
  else {
    alert('該当する写真がありません');
  }
}

})();