モックアップに最適なダミー画像を自動生成する

More than 1 year has passed since last update.

Webサイトとかを作っていて、レイアウトの開発や確認などのためにコンテンツにダミーの画像やテキストを流し込みたい場合が多々ある。そんな時に重宝するのがダミーテキストや画像を自動生成してくれるWebサービスだ。
ダミーのテキストの書式としては有名な「lorem ipsum」系のテキストを自動で生成してくれるサービスがたくさんある(下記参照)ので、そこで作成して開発中のコンテンツ内にコピペしてあげれば良い。
ダミー画像も同様なのだが、例えば他者へレビューする用途のモックアップなどだと、コンテンツ毎に別の画像を差し込んだ状態でより完成形に近い形でダミー画像を利用したいケースや、コンテンツの表示域に合わせて最適な画像を表示したいケースなどがあり、その場合、サイズや画像種別などを変えながらURLを生成していくのが地味に手間がかかる。
そこで、自動でランダムなダミー画像を取得する処理を作ってみた。

ダミーテキスト自動生成サービス

サービス名 URL 特徴
generator.lorem-ipsum.info http://generator.lorem-ipsum.info/ 日本語をはじめ複数言語のダミーテキストを生成できる
blindtextgenerator http://www.blindtextgenerator.com/lorem-ipsum lorem-ipsum形式以外のダミーテキストが豊富
loripsum.net http://loripsum.net/ Rest API で動的に取得できる
すぐ使えるダミーテキスト http://lipsum.sugutsukaeru.jp/ 日本語の古典小説からダミーテキストを生成できる

他にもたくさんあるので、気に入るやつを探してみると面白いかも。

ダミー画像自動生成サービス

サービス名 URL 特徴
placehold http://placehold.jp/ かなり高機能。日本のサービスなのでUIもわかりやすい
lorempixel http://lorempixel.com/ 版権フリーの写真を利用でき、様々なカテゴリの画像が豊富で綺麗
placecreature http://placecreature.com/ 動物の画像のみ

こちらもたくさんあります。
【2015.3.2更新】Web制作に便利!ダミー画像を自動で生成するジェネレーター18選
にまとめてくれているので、合ったのを探してみると良いかも。

ダミー画像を自動で取得する処理

今回利用したダミー画像サービスは「lorempixel」である(画像が豊富で綺麗だったので)。

/**
 * Retrieve dummy image from the lorempixel for using as mockup
 *
 * @link http://lorempixel.com
 *
 * @param string $category [optional]
 * @param boolean $grey [optional]
 * @param integer $width [optional]
 * @param integer $height [optional]
 * @param string $dummy_text [optional]
 * @return string URL of dummy image
 */
function get_lorempixel( $category=null, $grey=false, $width=400, $height=200, $dummy_text='' ) {
  $_cat = [ 'abstract', 'animals', 'business', 'cats', 'city', 'food', 'nightlife', 'fashion', 'people', 'nature', 'sports', 'technics', 'transport' ];
  if (!in_array($category, $_cat)) {
    $category = $_cat[mt_rand(0, count($_cat) - 1)];
  }
  $grey = $grey ? 'g/' : '';
  $dummy_text = !empty($dummy_text) ? '/' . $dummy_text : '';

  return sprintf('http://lorempixel.com/%s%d/%d/%s/%d%s', $grey, intval($width), intval($height), $category, mt_rand(1, 10), $dummy_text);
}

これで、get_lorempixel() をコールするとランダムなダミー画像のURLが返ってくるので、モックアップのフロントエンド側の<img>タグなどに関数コールを埋め込んであげればよい。例えばこんな感じ。

<!DOCTYPE html>
<meta charset="utf-8">
<title>Dummy Images</title>

<article class="entry" style="width: 100%;">
  <div class="entry-image">
    <img src="<?= get_lorempixel(); ?>" alt="">
  </div>
  <div class="entry-body">
    <h2>Lorem ipsum</h2>
    <p>Lorem ipsum dolor sit amet, pri ei suas habemus definitiones, habeo congue incorrupte in sit, at ius audire suscipit. Mei graeci menandri perpetua te. Cum ex labitur persequeris, laoreet posidonium sea ad, ea vix habemus perpetua. Ea wisi dicant postea qui, ei fuisset verterem suscipiantur eos. Viderer deleniti te vis, sed id illud propriae similique.</p>
  </div>
</article>

取得画像のカテゴリを指定したり、モノトーンにしたり、サイズを指定したりする場合は、下記のように引数を変更すればOK。

echo get_lorempixel('technics', true, 780, 420, 'SampleImage');

画像の表示域に合わせてダミー画像を読み込む

レスポンシブレイアウトなどで、スマートフォン用とPC用とで表示される画像サイズを切り替えている場合、ダミー画像も表示領域に合わせて取得するサイズを切り替えたい場合がある。ギャラリー系のサイトをスマートフォンでレビューする時など、ダミー画像を一律でPC用サイズで利用していると、モックアップサイトの表示に時間がかかりすぎて、サイトパフォーマンスについてレビューイにいらぬ不安を与えてしまうかもしれないとかだ。

そんな訳で、まず表示域のサイズを計測してから、最適なサイズのダミー画像を取得する処理を作ってみる。一度フロントエンドの表示域を計測する必要があるので、画像取得はAjaxで行う。

出力されるHTML部は前項の例をそのまま利用し、JavaScript部の処理にはjQueryを使う(素で書くと面倒なのでw)。

──で、できたソースが下記の通り。

dummy-image.php
<?php

/**
 * Ajax handler
 */
if (isset($_POST['event']) && 'get_image' === $_POST['event']) {
  $dummy_image_url = get_lorempixel( null, false, intval($_POST['width']), intval($_POST['height']), 'Sample-Image');
  die($dummy_image_url);
}

/**
 * Retrieve dummy image from the lorempixel for using as mockup
 *
 * @link http://lorempixel.com
 *
 * @param string $category [optional]
 * @param boolean $grey [optional]
 * @param integer $width [optional]
 * @param integer $height [optional]
 * @param string $dummy_text [optional]
 * @return string URL of dummy image
 */
function get_lorempixel( $category=null, $grey=false, $width=400, $height=200, $dummy_text='' ) {
  $_cat = [ 'abstract', 'animals', 'business', 'cats', 'city', 'food', 'nightlife', 'fashion', 'people', 'nature', 'sports', 'technics', 'transport' ];
  if (!in_array($category, $_cat)) {
    $category = $_cat[mt_rand(0, count($_cat) - 1)];
  }
  $grey = $grey ? 'g/' : '';
  $dummy_text = !empty($dummy_text) ? '/' . $dummy_text : '';

  return sprintf('http://lorempixel.com/%s%d/%d/%s/%d%s', $grey, intval($width), intval($height), $category, mt_rand(1, 10), $dummy_text);
}

?>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Dummy Images</title>

<article class="entry" style="width: 100%;">
  <div class="entry-image">
  </div>
  <div class="entry-body">
    <h2>Lorem ipsum</h2>
    <p>Lorem ipsum dolor sit amet, pri ei suas habemus definitiones, habeo congue incorrupte in sit, at ius audire suscipit. Mei graeci menandri perpetua te. Cum ex labitur persequeris, laoreet posidonium sea ad, ea vix habemus perpetua. Ea wisi dicant postea qui, ei fuisset verterem suscipiantur eos. Viderer deleniti te vis, sed id illud propriae similique.</p>
  </div>
</article>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

  var container_width = $('.entry-image').width();
  $.ajax({
    type: 'POST', 
    url: location.href, 
    data: { event: 'get_image', width: container_width, height: Math.floor(container_width/1.618) }
  }).done(function( url ){
    $('.entry-image').append('<img src="'+url+'" alt="">');
  });

});
</script>

アクセスされた時のブラウザのウィンドウサイズに合わせてコンテンツブロックの横幅を取得して、横幅を長辺とした黄金比の高さを計算して、そのサイズにてダミー画像を取得するという処理になっている。

Ajaxの発火をリサイズイベントと連携させると特定のウィンドウサイズになったら画像を再取得するみたいな処理もできるかと。