Webサイトとかを制作している時にとりあえず,仮にでもいいから画像を入れておきたいなー。
なんてことありませんか？
今日はダミー画像を簡単に生成してくれるサービスを紹介したいと思います。
1. Placehold.jp
使い方は簡単で,URLに欲しい画像のサイズをパスパラメータとして与えるだけです。
https://placehold.jp/150x150.pngとしてやると,150x150のPNG画像を生成してくれます。
使い方
基本
https://placehold.jp/{幅}x{高さ}.png幅と高さだけを指定するとグレースケールのダミー画像を作成してくれます。
例)https://placehold.jp/200x200.png
背景･文字の色サイズを変える
https://placehold.jp/{文字色}/150x100.png
https://placehold.jp/{背景色}/{文字色}/150x100.png
https://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png背景色,文字の色,文字のサイズも変えることが可能です。
文字色のみ変更
例1)https://placehold.jp/ff0000/150x150.png
文字色･背景色変更
例2)https://placehold.jp/00ff00/0000ff/150x150.png
文字色･背景色･文字サイズ変更
例3)https://placehold.jp/55/d2e3f0/109c31/150x150.png
画像の形式(フォーマット)を変更する
https://placehold.jp/150x150.{png|jpg}画像のファイル形式を.pngと.jpgのどちらかを選べます。
テキストを変更する
https://placehold.jp/150x150.png?text={表示したい文字列}テキストも変えられます。
URLでは使えない文字を入れたい場合はURLエンコードしてあげる必要があるので注意が必要です。
URLエンコードしない場合
例1)https://placehold.jp/150x150.png?text=ダミー画像&モック画像
｢&｣以降が表示されません。
URLエンコードした場合
例2)https://placehold.jp/150x150.png?text=ダミー画像%26モック画像
想定通りすべての文字が表示されます。
CSSでスタイリングする
https://placehold.jp/150x150.png?css={JSON化したCSSパラメータ文字列}/CSSでスタイリングもできちゃいます。
結構凝った画像も作ることが可能です。
%20no-repeat%22%2C%22%20%20background%22%3A%22%20linear-gradient(135deg%2C%20%23427eff%200%25%2C%20%23f13f79%2070%25)%20no-repeat%22%7D)
2. Lorem Picsum
2つ目はおしゃれな写真をダミー画像として生成してくれるLoremPicsumです。
有名なストックフォトサイトUnsplashが経営しているサービスのようです。
使い方
基本
https://picsum.photos/{幅}/{高さ}パスパラメータに画像の幅と高さを指定するとランダムでダミー画像を生成してくれます。
例)https://picsum.photos/300/200
正方形
https://picsum.photos/{サイズ}正方形の画像が使いたい場合はサイズだけ指定します。
例)https://picsum.photos/200
特定の画像
https://picsum.photos/id/{image}/{幅}/{高さ}ランダムではなく特定の画像が使いたい場合は/id/{image}を指定します。
どんな画像が使われているかは こちら で確認できます。
例)https://picsum.photos/id/0/600/320
静的ランダム画像
https://picsum.photos/seed/{seed}/{幅}/{高さ}ランダムがいいけど,毎回画像が変わるのは困る場合は/seed/{seed}を指定します。
{seed}に任意の文字列を入れることで,同じ文字列が使われている場合は同じ画像が表示されます。
例)https://picsum.photos/seed/aaaa/600/320
グレースケール
https://picsum.photos/{幅}/{高さ}?grayscaleクエリパラメータとして?grayscaleをつけるとグレースケールの写真に変換されます。
グレースケール
例)https://picsum.photos/seed/grayscale/600/320?grayscale
通常
例)https://picsum.photos/seed/grayscale/600/320
ぼかし
https://picsum.photos/{幅}/{高さ}/?blur
https://picsum.photos/{幅}/{高さ}/?blur={1-10}クエリパラメータとして?blurをつけると写真をぼかしてくれます。
?blur=に1〜10を指定することでぼかし具合を調整できます。
ぼかし
例)https://picsum.photos/seed/bokashi/600/320?blur
通常
例)https://picsum.photos/seed/bokashi/600/320
ぼかしレベル blur=1
例)https://picsum.photos/seed/level/600/320?blur=1
ぼかしレベル blur=5
例)https://picsum.photos/seed/level/600/320?blur=5
ぼかしレベル blur=10
例)https://picsum.photos/seed/level/600/320?blur=10)
グレースケール&ぼかし
https://picsum.photos/{幅}/{高さ}?grayscale&blurグレースケール,ぼかしどちらも使いたい場合はgrayscale&blurのように&でつなぎます。
例)https://picsum.photos/seed/graybokashi/600/320?grayscale&blur=2
ファイル形式
https://picsum.photos/{幅}/{高さ}.{jpg|webp}ファイル形式には.jpgと.webpが用意されています。
同じサイズの画像をランダムで使う場合
https://picsum.photos/{幅}/{高さ}?random={random}現状同じサイズの画像を設定するとすべて同じ画像が表示されてしまいます。
クエリパラメータに?random={random}とすることで別々の画像を表示できるようになります。
{random}は任意の文字列で大丈夫です。同じ文字列の場合,同じ画像を表示します。
randomを使用しない場合
例)https://picsum.photos/150/150
randomを使用した場合
例)https://picsum.photos/150/150random={1-3}
3. placekitten
最後に猫派のためのダミー画像生成サービスを紹介します。
使い方
基本
https://placekitten.com/{幅}/{高さ}上の2つのサービスと同じくパスパラメータに画像の幅と高さを指定するとランダムでダミー画像を生成してくれます。
かわいいいいいい!!!
例)https://placekitten.com/600/320
グレースケール
https://placekitten.com/g/{幅}/{高さ}パスパラメータにgと入れることでグレースケールの画像を生成してくれます。
例)https://placekitten.com/g/600/320
まとめ
簡単に画像が生成できます。
URLにパラメータを入れることで結構いろんな効果を付与させたりできますね。
これを使って自動でアイキャッチ画像なんかを作れたらなと思ってます。
それではまた明日。