2020-10-03

ダミー画像探すならLorem Picsum使おう

Thumbnail

WEB アプリやページを作っているときに、画像を当て込みたいときがあったりしませんか?

そういったときに便利なのが Lorem Picsum 。使い方メモです。

Lorem Picsum とは

特にフロントエンドでの作業時に、画像をダミーではめ込みたいというときがあります。

そういうとき、

  • 画像サイズとかは決め打ちしたいけどわざわざそれ用の画像を用意するのは面倒臭かったり
  • カルーセル等の確認では別画像にしておきたかったり

しませんかね??

Lorem Picsum はそういった悩みに対応するサービスです。

超要約すると、 URL 内のパラメータをちょっと変えるだけで素材もサイズも変えた画像を返してくれます。

公式サイトはコチラ

使い方

使い方はめっちゃシンプル!!

https://picsum.photos/id/{画像ID}/{幅(px)}/{高さ(px)}

で指定した幅と高さの画像が手に入ります!もう画像はなんでもいい!毎回ランダムで変わってもいい!というときは、

https://picsum.photos/{幅(px)}/{高さ(px)}

で ok です。

さらにいうと、正方形でよければ

https://picsum.photos/{幅・高さ(px)}

で大丈夫です。

画像 ID

画像 ID の一覧はこちらで確認をとることが出来ます。

もしくは後述の API で json 形式にて取得することも可能です。

発展的な使い方

いくつか他の URL も用意されています。

文字列ベースで画像を変える

https://picsum.photos/seed/{seed文字列}/{幅}/{高さ}

seed 文字列の所に好きな文字列を入れればその文字列に対応した画像が手に入ります。

グレースケール

以下のように、URL 末尾に ?grayscale を付与することでグレースケール画像を取得できます。

https://picsum.photos/200/300?grayscale

ぼかし

ちょっと素材をぼかしたいときは、URL 末尾に ?blur を付与すればよいです。

https://picsum.photos/200/300?blur

なお、この ?blur ですが、1 から 10 までの値を与えることで、10 段階で強さを調整出来ます。

https://picsum.photos/200/300?blur=1
https://picsum.photos/200/300?blur=10

blurgrayscale は下記のように & で繋げば共存できます。

https://picsum.photos/200/300?blur=5&grayscale

ブラウザキャッシュを防ぐ

同じ幅・高さの画像を取得する際、同じ URL からだとブラウザがキャッシュしてしまう場合があります。そういった場合は、randomパラメータを付与します。

https://picsum.photos/200/300?blur=5&grayscale&random=1
https://picsum.photos/200/300?blur=5&grayscale&random=2

としておけば、同時に読み込んでも別の画像が表示されます。

ファイル拡張子が必要な場合

.jpg もしくは .webp を URL の数値末尾に付け足します。

https://picsum.photos/200/300.jpg?blur=5&grayscale
https://picsum.photos/200/300.webp?blur=5&grayscale

画像素材そのものについての情報

List API

画像素材そのものについての情報を取得するためのエンドポイントが用意されています。

https://picsum.photos/v2/list

これで 30 個のアイテムが取得されます。

もっと取得したい場合、

https://picsum.photos/v2/list?page=2&limit=100

のように、ページ番号をpageにて、取得件数をlimitにて指定すれば柔軟に情報が取得できます。

試していると、limitの上限は 100 のようです。 以下のようなレスポンスが得られます。

[
  {
    "id": "0",
    "author": "Alejandro Escamilla",
    "width": 5616,
    "height": 3744,
    "url": "https://unsplash.com/photos/...",
    "download_url": "https://picsum.photos/..."
  }, ...
]

Detail API

画像の ID ごとに情報を取得することもできます。

https://picsum.photos/id/{画像ID}/info

レスポンスは上の List のものと同じです。単体で情報が返ってくるという点のみが違います。

まとめ

ダミー画像を簡単にはめ込んでいくことが出来る Lorem Picsum を紹介しました。

画像部分はデザイナーに任せる、みたいなシーンでフロントエンドエンジニアが画面設計を進めるに当たって知っておいて損のないツールだと思います。

ぜひ使いこなしていきましょう!

管理者

Takuya Ban
Takuya Ban

何でも系エンジニアです。

qiita

新着記事

BigQueryに限らずSQL関連の謎エラーはだいたいこういう凡ミスです。
Reactの2種類のコンポーネントについて、今から学ぶ人向けです。
もうすぐ5G対応iPhoneが出るけどそもそも5G使える場所がないのでは…
大阪都構想が告示されましたが…
モックとか作る上でのもはや必須ツールともいえるLorem Picsumの使い方メモです。

qiita

© 2020, Takuya Ban