JavaScriptでUnsplash APIから画像取得処理を実装しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、Unsplash Sourceが提供するAPIを使って、画像取得処理を実装します。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次は、ページにスタイルをつけます。

ここまで実装すると以下のようになります。

先ほどと変わりませんね^^

画像を取得したらスタイルが適用されるはずです。

JavaScriptの実装

Unsplash Developersのドキュメントを参考に実装していきましょう。

要素を取得

最初に、画面操作に必要な要素を取得します。

定数を定義

アプリケーションに必要になる定数を定義しておきます。

画像パネル生成処理

次に画像パネルを生成する処理を実装します。

仕様を見ると「https://source.unsplash.com/random/800×600」のように「横x縦」の画像サイズを指定できるようです。

そして、画像サイズ付きのURLをimg要素のsrcに追加することで画像を表示します。

getRandomSize関数は、これから作成します。

ランダムのサイズを取得

画像のサイズをランダムに取得する関数を実装します。

これで、完成です。

おわりに

今回のJavaScriptは簡単な処理でしたが、Unsplash Sourceのサービスを知ることができたのは良いですね。

Webサイトやポートフォリオを作成するときに、適当な画像を探すことがあると思いますが、このサービスを利用すれば簡単に画像が取得できていい感じですね^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す