2019年12月1日
デザイン
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を使用する時は一度活用されてみてはいかがでしょうか?
この記事は
参考になりましたか?
1
0
関連記事
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー

Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ デザイナー
WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。
Miu マーケター
ドイツでWEBマーケティングしています。
しんのき エンジニア
主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。
furuya エンジニア
サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
うえまつゆい エンジニア
サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

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

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

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