導入
Web開発において、高さの異なる画像をタイル状に配置するレイアウト（いわゆるPinterestのようなレイアウト）は、一般的にJavaScriptライブラリを用いてフロントエンドで動的に計算されます。しかし、特定の環境下や初期表示のパフォーマンスを重視する場合、PHPを用いてサーバーサイドでレイアウトの計算を行い、HTMLとして出力する手法が有効です。今回は、PHPのロジックで画像の高さを計算し、カラムごとに振り分ける実装方法を解説します。
基礎知識
この手法の核となるのは「各カラムの高さ合計を保持し、常に最も高さが低いカラムに次の画像を追加する」というアルゴリズムです。PHPの配列と`asort()`関数を活用することで、どのカラムに画像を追加すべきかを動的に決定できます。これにより、フロントエンドでの重い計算処理を軽減し、SEOや初期表示速度の向上に寄与します。
実装/解決策
実装のポイントは以下の3ステップです。
1. ディレクトリから画像リストを取得する。
2. 各カラムの高さ合計値を管理する配列を用意する。
3. `foreach`ループ内で、現在の最小高さを持つキーを特定し、そのカラムに画像データを格納する。
サンプルプログラム
以下は、ディレクトリ内の画像ファイルを読み込み、指定されたカラム数でバランスよく配置する実用的なPHPスクリプトです。
/
function columnGallery($files, $column, $width) {
$div = array(); // カラムごとの画像格納用
$heightTotal = array_fill(0, $column, 0); // 各カラムの高さ合計を初期化
foreach ($files as $file) {
// 現在の高さ合計が最小のカラムを特定
asort($heightTotal);
$keys = array_keys($heightTotal);
$target = reset($keys);
// 画像サイズを取得して高さを加算
$size = getimagesize($file);
$height = $size[1];
$div[$target][] = $file;
$heightTotal[$target] += $height;
}
// 生成されたカラムを出力
foreach ($div as $columnFiles) {
echo “
foreach ($columnFiles as $file) {
echo “
\n”;
}
echo “
\n”;
}
}
// 使用例
$dir = “images/”;
$list = glob($dir . “.{jpg,png,gif}”, GLOB_BRACE); // 画像のみ抽出
columnGallery($list, 3, 100);
?>
応用・注意点
この手法には、現場で知っておくべき注意点がいくつかあります。
1. レスポンシブ対応の限界: このコードはサーバーサイドでレンダリングを行うため、ブラウザのウィンドウサイズ変更（リサイズ）に合わせた再配置には対応できません。レスポンシブな挙動が必要な場合は、CSSの`flex`や`grid`、あるいは「Masonry.js」などのフロントエンドライブラリを併用することを推奨します。
2. 画像サイズの取得コスト: `getimagesize()`はファイルにアクセスするため、画像数が膨大な場合は処理が重くなります。実運用では、画像情報をデータベースに保存しておくか、キャッシュを活用して計算コストを抑える工夫が必要です。
3. 画像の読み込み順: サーバーサイドで計算する以上、ブラウザ側での画像の読み込み完了タイミングによってレイアウトが崩れる可能性があるため、CSSで`min-height`を設定するなどして、表示時のチラつきを抑える対策を併せて行いましょう。