URLに横×縦のサイズを指定するだけで、お目当ての大きさの画像が取得出来るサービス「unsplash.it」の紹介です。
Webサイトを作っていく上で、レイアウトの関係で開発中に画像が必要なケースは多々あります。
例えば、「ヘッダーのバックグラウンドは長方形、ニュース系ならTOP画像が入って、この部分に正方形の画像が入るはサムネイルを作成して、、」等、使う場所によって必要になる画像の形やサイズも変わってきます。
指定サイズ分の枠を取るだけなら「holder.js」という動的に画像を作成するjavascrip製のライブラリも存在しますが、マウスホバー時に画像上にテキストを表示するオーバーレイ等が噛んできたりすると、話しは変わってきます。
開発時に、上記の様なことを気にせずに使えそうなサービスが「unsplash.it」です。
このサービス「Unsplash」という画像投稿サービスと連携しており、URLにサイズを渡すと、指定したサイズの画像を取得できます。
" unsplash.it " はURLベースで画像を取得するので、専用のライブラリを読み込む必要もありません。
" https://unsplash.it/横幅/縦幅 " で画像を取得できます。
( * 画像の読み込みはサーバーに依存するので、時間が多少掛かる時もあります )
例えば 横500 × 縦300の画像を取得する時は下記のURLを叩けば取得できます
# 横500×縦300の画像の場合
https://unsplash.it/500/300
<!-- 300×500 の画像を取得 ( imgタグと併用 ) -->
<img src="https://unsplash.it/300/500" >
URLの帯に' ?random 'のオプションを与えれば、読み込み時に取得する画像がランダムに変わります。
# randomで切り替え
https://unsplash.it/336/280/?random
また、取得する画像にblur( ぼかし )エフェクトをかけることも可能で、その場合は' ?blur 'オプションを使います。
# ぼかしが入った画像が取得できます
https://unsplash.it/336/280/?blur
' gravity 'オプションで、切り抜きされた画像も取得できます。
その際は、north(上), east(右), south(下), west(左), center(中心)の５種類のパラメーターが用意されています。
# grvityオプション(eastパラメーター)を使っています
https://unsplash.it/200/300/?gravity=east
以上がunsplash.itの紹介でした。
Lightboxや、オーバーレイ等のエフェクトを利用する時に使うと便利そうです。
Webサービスをの開発途中に、間に合わせ画像が欲しい時に便利に使えるサービスなので、気になった人はゼヒ×２チェックしてみてください！
Unsplash It
