Unsplash Sourceを使ってみよう！

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay1です！

Unsplash Sourceとは？

フロントエンド デザイナーのやまかわたかしです。今回は無料画像素材サイトUnsplashが提供している画像API「Unsplash Source」についてご紹介します。

Unsplashはご存知の通り、おしゃれな無料画像素材を探すのにとても便利なサイトで、普段からお世話になっている方も多いのではないかと思います。
そのUnsplashが提供しているUnsplash Sourceを使うことでAPIを叩くだけで条件にあった画像を表示してくれる便利なAPIとなっています。

実際にUnsplash Sourceを使ってみよう！

使い方はとても簡単で<img>タグのsrcにAPIのURLを入力するだけで表示ができます。

こちらはランダムに画像を表示するAPIを叩いています。
（ブラウザリロードで画像が変更されます）

Unsplash Sourceを使うことで特定の画像だけでなく、条件にあった画像を表示することもできます。
例えばページの背景は毎回違うイメージで表示させたい時や、まだ正確なイメージが決まっていないので仮置きで配置したいときなどにも使えそうです。

様々な条件に合わせたAPIを叩くことができます。一つづつご紹介していきます。

使えるAPIのご紹介

Unsplash SourceのAPIの内容はとてもシンプルで
https://source.unsplash.com/の末尾に条件が書かれている形式になります。
またどの表示形式でも画像サイズを指定することができ/800x600など横x縦でサイズを指定することもできます。

特定の画像を表示するAPI

まずは一番基本となる特定の画像を表示するAPIです。URL末尾に画像IDを追加します。画像IDとはUnsplashで検索したときにURLに表示されているphotos/の後ろに表示されている文字列になります。

https://unsplash.com/photos/bIhpiQA009k

例えば上記のURLの画像を使用したいと思ったら
画像IDはbIhpiQA009kになるので、APIは

https://source.unsplash.com/bIhpiQA009k

となります。

ランダム表示

画像をランダムに表示させたい時は末尾に/randomを追加します。

https://source.unsplash.com/random

特定のユーザの投稿画像をランダム表示

誰か特定のユーザを指定してそのユーザの投稿した画像をランダムに表示することも可能です。
その場合には末尾に/user/(ユーザID)を入力します。

例えばPacific Office Interiors @pacificofficeinteriorsさんの画像をランダムで表示したい時は下記のようになります。

https://source.unsplash.com/user/pacificofficeinteriors

検索結果からランダム表示

Unsplashで検索をしたときの一覧からランダムに表示することも可能です。
検索をする際は末尾に/?{キーワード}を入力します。2語以上で検索したい時は/?{キーワード1},{キーワード2}のようにカンマで区切ることで複数語での検索が可能です。

例えば下記の例だとyellowとfoodを検索にかけているので黄色と食べ物を複数検索した結果を表示すると言うことになります。

https://source.unsplash.com/?food,yellow

まとめ

今回はUnsplash Sourceについてご紹介しました。紹介したAPIは一例で、まだ他にも公式サイトにて紹介されています。Unsplashを使用する時は一度活用されてみてはいかがでしょうか？