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

こんにちは。KOUKIです。

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

<目次>

実装するもの

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

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

環境構築

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

JavaScriptでアプリ開発 ~環境構築~

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

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

CSS版

CSSで画像取得アプリのスタイリングをしよう!

ページ(HTML)の作成

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Random Image Feed</title>
  </head>
  <body>
    <h1>Random Image Feed</h1>
    <div class="container"></div>

    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Random Image Feed</title>

</head>

<body>

<h1>Random Image Feed</h1>

</body>

</html>

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

スタイル(CSS)を装飾

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

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.title {
  margin: 10px 0 0;
  text-align: center;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1000px;
}

.container img {
  object-fit: cover;
  margin: 10px;
  height: 300px;
  width: 300px;
  max-width: 100%;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {

box-sizing: border-box;

}

body {

font-family: 'Roboto', sans-serif;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

min-height: 100vh;

margin: 0;

}

.title {

margin: 10px 0 0;

text-align: center;

}

.container {

display: flex;

align-items: center;

justify-content: center;

flex-wrap: wrap;

max-width: 1000px;

}

.container img {

object-fit: cover;

margin: 10px;

height: 300px;

width: 300px;

max-width: 100%;

}

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

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

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

JavaScriptの実装

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

要素を取得

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

// 要素の取得
const container = document.querySelector('.container')

1 2	// 要素の取得 const container = document.querySelector('.container')

定数を定義

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

// リクエスト先
const unsplashURL = 'https://source.unsplash.com/random/'
// 行
const rows = 5

// リクエスト先

const unsplashURL = 'https://source.unsplash.com/random/'

// 行

const rows = 5

画像パネル生成処理

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

// 画像パネル生成処理
for(let i = 0; i < rows * 3; i++) {
    const img = document.createElement('img')
    img.src = `${unsplashURL}${getRandomSize()}`
    container.appendChild(img)
}

// 画像パネル生成処理

for(let i = 0; i < rows * 3; i++) {

const img = document.createElement('img')

img.src = `${unsplashURL}${getRandomSize()}`

container.appendChild(img)

}

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

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

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

ランダムのサイズを取得

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

// 画像のサイズをランダムに取得
function getRandomSize() {
    return `${getRandomNr()}x${getRandomNr()}`
}

// ランダムの数値を取得
function getRandomNr() {
    // 300~ 310までのランダムな数値を返す
    return Math.floor(Math.random() * 10) + 300
}

// 画像のサイズをランダムに取得

function getRandomSize() {

return `${getRandomNr()}x${getRandomNr()}`

}

// ランダムの数値を取得

function getRandomNr() {

// 300~ 310までのランダムな数値を返す

return Math.floor(Math.random() * 10) + 300

}

これで、完成です。

おわりに

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

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

それでは、また!

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

const container = document.querySelector('.container')

// リクエスト先
const unsplashURL = 'https://source.unsplash.com/random/'
// 行
const rows = 5

// 画像パネル生成処理
for(let i = 0; i < rows * 3; i++) {
    const img = document.createElement('img')
    img.src = `${unsplashURL}${getRandomSize()}`
    container.appendChild(img)
}

// 画像のサイズをランダムに取得
function getRandomSize() {
    return `${getRandomNr()}x${getRandomNr()}`
}

// ランダムの数値を取得
function getRandomNr() {
    // 300~ 310までのランダムな数値を返す
    return Math.floor(Math.random() * 10) + 300
}

const container = document.querySelector('.container')

// リクエスト先

const unsplashURL = 'https://source.unsplash.com/random/'

// 行

const rows = 5

// 画像パネル生成処理

for(let i = 0; i < rows * 3; i++) {

const img = document.createElement('img')

img.src = `${unsplashURL}${getRandomSize()}`

container.appendChild(img)

}

// 画像のサイズをランダムに取得

function getRandomSize() {

return `${getRandomNr()}x${getRandomNr()}`

}

// ランダムの数値を取得

function getRandomNr() {

// 300~ 310までのランダムな数値を返す

return Math.floor(Math.random() * 10) + 300

}

月	火	水	木	金	土	日
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

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

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得

定数を定義

画像パネル生成処理

ランダムのサイズを取得

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得

定数を定義

画像パネル生成処理

ランダムのサイズを取得

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

Kubernetes(k8s)を学ぼう! ArgoCD編〜最高のデプロイ方法…

[初学者向け]Helmを学ぼう!~Nginxをインストールする~

JavaScriptでパスワードジェネレータを作ろう!

CSSでMovieアプリのスタイリングを学ぼう!

CSSでタグに装飾をしよう！

React~基礎編~Stateパターン

[CSS]プログレスバーのスタイリング!

[React]~Ambassador画面:ソースコードをまとめます!~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル