2019年12月1日

デザイン

Unsplash Sourceを使ってみよう!

Unsplash Sourceを使ってみよう!Unsplash Sourceを使ってみよう!

目次

  1. Unsplash Sourceとは?
  2. 実際にUnsplash Sourceを使ってみよう!
  3. 使えるAPIのご紹介
  4. まとめ

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

Unsplash Sourceとは?

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

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

スクリーンショット 2019-11-29 10.58.26.png (1.4 MB)

実際に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}のようにカンマで区切ることで複数語での検索が可能です。

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

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

まとめ

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

1

0

AUTHOR

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

CONTACT PAGE TOP