どうも、まさとらん（@0310lan）です！
今回は、完全フリーで利用できる画像共有サイト「Pixabay」が提供しているAPIを使って、簡単な画像検索サイトを作ってみたいと思います。
非常に扱いやすいAPIが用意されており、特にフレームワークなどを使わなくてもピュアなJavaScriptだけでシンプルに構築できるスグレモノです。
【 Pixabay API】
■「Pixabay API」の使い方
それでは、まず最初に「Pixabay API」をどのように使えばいいのかを見ていきましょう！
サイトのトップページにある「Get Started」ボタンをクリックします。
すると、提供されているAPIのドキュメントが表示されるのですが、パラメータ部分に専用の「APIキー」が必要なことが分かります。
これは無料のユーザー登録をすれば誰でも取得できるので、そのまま「Sign up」のリンクをクリックしましょう！
好きな「ユーザー名」と「メルアド」「パスワード」だけですぐに登録可能です！
ユーザー登録を済ませれば、先ほどの箇所には専用の「APIキー」が表示されているはず！
この「APIキー」を使って、膨大なフリー画像をJavaScriptから制御することが出来るようになるわけです。（動画も扱えます…）
まずは、ここまでの作業を済ませれば準備は完了です！
早速「Pixabay API」の機能を試してみましょう。
■「JSON」データを取得しよう！
「Pixabay API」を使って画像を取得するのは簡単です。
次のURL（エンドポイント）にアクセスするだけで、JSONデータを取得することができます！
https://pixabay.com/api/?key=【APIキー】
「key=」のあとに続けて、先ほど取得した英数字の「APIキー」を記述します。
試しに、JavaScriptで「fetch()」を使い「JSONデータ」をコンソールログに表示してみましょう！
var url = 'https://pixabay.com/api/?key=6957465・・・・・'; fetch( url ) .then( function( data ) { return data.json(); //JSONデータとして取得 }) .then( function( json ) { console.log( json ); })
「fetch()」でJSONを取得する場合は、最初に「return data.json()」と記述する点に注意しましょう。
JavaScriptを実行すると、コンソールログにズラッと画像データが取得できているのが分かりますね！
上記の場合、「hits」という配列に20枚の画像データが格納されていることになります。
それぞれの画像データには、さまざまななプロパティが設定されています。
画像サイズ、ダウンロードページのURL、プレビュー用の画像URL、画像に関連するタグ…など、これらのデータを活用することで多彩なWebアプリが作れるわけです。
そこで、「Pixabay API」を使った簡単な「画像検索サイト」を作ってみたいと思います！
■「画像検索サイト」を作ろう！
基本的な画像データの取得方法が分かったところで、早速サンプルデモを作ってみましょう。
検索したい「キーワード」を入力すると、関連する画像が一覧で表示されるというシンプルなデモです。
好きな画像をクリックすると、Pixabayのダウンロードページに遷移するという機能も付けてみましょう。
そこで、まずはサイトの骨組みとなるHTMLを次のように作ります！
<form name="search"> <input name="key" type="text" placeholder="文字を入力してください"> <input name="btn" type="submit" value="ボタン"> </form> <!-- ここに画像の一覧を表示する --> <div id="result"></div>
キーワード入力用のボックスとボタン要素だけの単純なフォームを配置しています。
「pixabay API」で取得した画像の一覧は、div要素内に並べることにしましょう。
次に、JavaScriptで検索サイトの中身をプログラムしていきます！
まずは、キーワードを入力してボタンをクリックするか「エンターキー」を叩くことで、画像を取得する処理を組み立てます。
//ボタンをクリック、またはエンターキーが押されたら document.search.btn.addEventListener('click', function(e) { e.preventDefault(); //画面の更新をキャンセル //JSONデータの取得処理（ fetch() ） })
フォーム要素のname属性を使ってボタンのイベント処理を作っています。
ボタンをクリックすると画面が更新されて画像が表示されなくなるので、「preventDefault()」でキャンセルしておきましょう。
あとは、先ほど試した「fetch()」を使って画像のJSONデータを取得すればOKです！
ただし、今回は入力されたキーワードに関連する画像を取得するのと、取得した画像を画面に表示する処理が必要です。
そこで、分かりやすいように「createURL()」「createImage()」という2つの関数を作成しておきましょう。
fetch( createURL(document.search.key.value) ) .then( function( data ) { return data.json(); }) .then( function( json ) { createImage( json ); })
「createURL()」の引数に、入力されたキーワードを指定するようにしています。
また、最終的に取得できたJSONデータは「createImage()」の引数に指定しました。
あとは、この2つの関数を作成すれば「画像検索サイト」はほぼ完成です！
■画像のJSONデータを表示しよう！
まず最初に、入力されたキーワードを使ってURLを生成する関数「createURL()」を作りましょう。
と言っても内容はシンプルで、APIキーやキーワードなどを組み合わせたURLを返すだけの処理です。
function createURL( value ) { var API_KEY = '6957465・・・・・'; var baseUrl = 'https://pixabay.com/api/?key=' + API_KEY; var keyword = '&q=' + encodeURIComponent( value ); var option = '&orientation=horizontal&per_page=40'; var URL = baseUrl + keyword + option; return URL; }
キーワードは念のためエンコードしたものをURLに追加しておきましょう。
「option」ですが、「Pixabay API」には便利な設定が用意されており、次のようなオプションを付けられます。
（例）
- orientation：画像の水平／垂直方向を均一に揃えられる
- per_page：1回に取得できる画像データの数を変更できる
- page：多数の画像を取得した場合のページ数を指定できる
- image_type：写真・イラスト・ベクターなどの形式を指定できる
- category：画像の区分（カテゴリ）を指定できる
etc...
これらのオプションもURLに付与することで、好みの画像を簡単に抽出できるので便利です。
次に、作成したURLを使って取得したJSONデータから、画像を画面に一覧表示する関数「createImage()」を作りましょう。
function createImage( json ) { var result = document.getElementById('result'); if( json.totalHits > 0 ) { //JSONデータから画像を表示する処理 } else { alert('該当する写真がありません'); } }
JSON内のプロパティに「totalHits」という項目があるのですが、これは検索して該当した画像の枚数が数値で格納されています。
つまり、「0」だと1枚も該当しなかったということになります。
そこで、IF文を使い該当する画像があった場合のみ一覧表示する処理にしています。
画像を表示する処理ですが、データが配列なので「forEach()」を使って1つずつimgタグを生成し表示させていきます。
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 ); //divタグ内に画像を配置 })
「imgタグ」「aタグ」をそれぞれ作成し、以下のURLを代入していきます。
- 「pageURL」：画像ダウンロード用のURLで「aタグ」に使用
- 「previewURL」：画像の一覧表示に使うプレビュー画像のURLで「imgタグ」に使用
これにより、プレビュー用のサムネイル画像が一覧表示に使われて、画像をクリックするとダウンロード用のページに遷移できるようになります。
ここまでプログラムできれば、あとはCSSでスタイルを調整すれば完成です！
実際に実行すると、次のように画像を検索できるようになります。
応用例として、オプションの設定ができるUIを作成したり、複数ページに渡る一覧ページを作成するとさらに利便性が高まるでしょう。
今回、作成したサンプルデモの全ソースコードは以下のリンクから閲覧できますので、ぜひ参考にしてみてください！
■JavaScript講座は完全無料！動画でプログラミングが学べるレッスン
paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニング」を公開しています。
今回記事の中で使用しているJavaScriptが学べる入門講座をはじめに、Python、Java、C言語、PHP、Ruby、SQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください！
特に、今まで有料だった「JavaScript入門編」・「ゲームエンジニア入門編」は先月から【全編無料】となりました！
また、ただいま「Rails入門編」・「ポートフォリオ制作」の有料レッスンを期間限定・連続無料公開いたします。ぜひごらんください！
詳しくは下のリンクからサイトをご確認ください。
■まとめ
今回は、「Pixabay API」の基本的な機能を駆け足でご紹介しました！
このAPIを活用すれば、さまざまなWebアプリやサービスへ簡単に組み込めるので活用範囲はかなり広いと思います。
また、ピュアなJavaScriptだけで構築しましたが、もちろんフレームワークなどを使えばもっと簡単にWebアプリを作成できるでしょう。
ぜひ、みなさんもオリジナルの画像検索アプリに挑戦してみてください！
＜参考＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
