ディレクトリ内の画像をランダムに表示したい、さらに表示される画像が被らないようにしたい
という内容のコーディングをしたので備忘録

やりたいこと

html

<img src="img/random/◯◯◯.png">
<img src="img/random/□□□.png">
<img src="img/random/△△△.png">

こんな感じでimgタグで画像を複数表示、更にディレクトリ内にある画像をランダムで表示、更に同じ画像が表示されないようにする
ということをしたかったのでPHPを書きました。

完成コード

完成コードはこんな感じ

php

$dir = 'img/random/'; // 画像ファイルが保存されているディレクトリ
$files = array_filter(scandir($dir), function ($file) {
    return !is_dir($file) && preg_match('/\.(jpg|jpeg|png|gif)$/', $file);
}); // 画像ファイルのみを取得

$randomIndexes = array_rand($files, 3); // 3つのランダムな配列インデックス
shuffle($randomIndexes); // 配列をシャッフル

foreach ($randomIndexes as $randomIndex) {
    $randomImage = $dir . $files[$randomIndex]; // ランダムな画像ファイル名
    echo '<img src="' . $randomImage . '">';
}

ディレクトリーの構成

構成はこんな感じ。
jpgやpngも混じっています。

img/
　├ random/
  　├ ◯◯◯.png
  　├ □□□.png
  　├ △△△.png
  　├ ×××.jpg
  　├ ...

解説

画像ファイルの取得

php

$dir = 'img/random/'; // 画像ファイルが保存されているディレクトリ
$files = array_filter(scandir($dir), function ($file) {
    return !is_dir($file) && preg_match('/\.(jpg|jpeg|png|gif)$/', $file);
}); // 画像ファイルのみを取得

scandir()関数指定したディレクトリからすべてのファイルとディレクトリの名前を取得し、 array_filter()関数を使用して、ファイルのみを取得しています。

array_filter()関数は、指定した配列から条件を満たす要素だけを取り出して新しい配列を作成します。
第1引数に対象の配列を指定し、第2引数に条件判定のためのコールバック関数を指定します。コールバック関数は、配列の各要素に対して実行され、trueを返した要素だけが新しい配列に含まれます。

この場合、 $file には配列の各要素（ファイル名）が順番に渡されます。コールバック関数は、 is_dir()関数を使用してディレクトリかどうかを判定し、ファイルの場合は拡張子が jpg、jpeg、png、gif のいずれかであるかを preg_match()関数で判定しています。条件を満たすファイルのみが新しい配列に含まれ、それ以外の要素は除外されます。

表示させたい画像の数を指定

php

$randomIndexes = array_rand($files, 3);

$files 配列からランダムに3つの要素を選択し、その要素のインデックスを含む $randomIndexes 配列を作成

ランダムな3つの要素を取得することで、パスが重複することなく3つの画像を表示できるようになります。

ランダムに並び替え

php

shuffle($randomIndexes); // 配列をシャッフル

shuffle() 関数は、引数として与えた配列の要素をランダムに並び替えます。
$randomIndexes 配列の要素をランダムに並び替えることで、3つの要素を取得する順序をランダムにすることができます。

$randomIndexes 配列内の要素がランダムに並び替えられるため、 $randomImages 配列内の画像ファイルの表示順序がランダムになります。

imgタグとして表示

php

foreach ($randomIndexes as $randomIndex) {
    $randomImage = $dir . $files[$randomIndex]; // ランダムな画像ファイル名
    echo '<img src="' . $randomImage . '">';
}

foreachを使って$randomIndexes配列内の要素の数と同じ回数だけ繰り返されます。
ランダムに選択された画像ファイルのパスを作成し、HTMLのタグを指定の数だけ生成させています

まとめ

今後、写真が多く掲載されるサイトを作る際に使えるな思いました。
良い写真がたくさんある場合、選んだり先方に選んでもらうより、ランダムに表示させたほうがよさそう
とはいえ同じ写真が表示されるのもイケてないので、被らない表示のさせ方は色々と使えそう気がしてます