KUNISAN.JPブログ - 234 / 1674 ページ

KUNISAN.JP内のWebページからWebサーバーへの画像ファイルのアップロードは、13年前に作ったPerl + PerlMagickのプログラムをベースに、ちょこちょこと細かいところを変えながら動かしていました。11年前にPHPを使い始めてからも、Perlのプログラムで困っていなかったこともあり、PHPの方でファイルのアップロードプログラムを作ろうという気があまり起きませんでした。

ただ、本ブログで複数画像をアップするような場合、ページ右上の画像だけは書き込み画面からアップできるのですが、他の画像はFTPを介してしかアップすることができませんでした。画像を表示するためのHTMLも、テキストファイルに記載した「HTMLひな形」の一部を変えつつ、ブログ記事編集ページ(管理者専用)にコピペしながら表示するようなことをしていました。この作業はスマートフォンやタブレットでは少々厳しいため、ブログ記事のアップは基本的に家でパソコンを使ってやるしかありませんでした。

今後はスマートフォンやタブレットからもブログ記事をアップできるようにしたいと思い、新たなファイルアップロード用のプログラムを作ることにしました。ただ、今更Perlでプログラムを作りたくないということもあり、PHPで制作することにしてみました。

久しぶりにPHPでプログラムを書きましたが、やはり数年前によく使ったこともあってか、ネット情報を参考にしながら、昨日と今日と2日間だけで作業が完了しました。せっかくなので、プログラムを一部公開したいと思います(まあ、世に出回っている情報ではありますが)。

まずは画像のアップロードです。核となる部分だけ抜粋しましたが、これだけで動きます。

■ HTML(ファイルを選択してアップロード)

<form action="upload_image.php" method="post" enctype="multipart/form-data">
<input type="file" name="FILE"><br>
<input type="submit" value="アップロード">
</form>

■ PHP(アップロードされた画像ファイルをWebサーバーに保存)

<?php
//ディレクトリを含めたファイル名
$image_name_full = '../abc/photo.jpg';
//アップロードファイルの移動
if (move_uploaded_file ($_FILES['FILE']['tmp_name'], $image_name_full)) {
	echo $image_name_full, 'のアップロード成功。<br>';
} else {
	echo 'アップロード失敗。<br>';
}
?>

ただ、さくらのレンタルサーバー(スタンダード)でこれを動作させると、2MB位までのファイルしかアップロードできません。スマートフォンの写真でも10MB近くになることもあり、これでは十分とは言えません。さくらインターネットのサーバーコントロールパネルから、PHP設定の編集を開き、以下のような設定を追加します。

■ php.ini(POST送信の最大容量とアップロードファイルの最大サイズを設定)
post_max_size = 20M
upload_max_filesize = 20M

なお、メモリ上限の設定(例: memory_limit = 128M)も可能ですが、こちらは最初から十分にあるようなので特に設定をしなくても大丈夫でした。

これで画像ファイルのアップロードまではできますが、オリジナルの写真のままでは画像サイズが大きすぎてしまい、Webページ表示用としては適していません。続いて、アップロードした画像をリサイズ(縮小)するプログラムです。

■ PHP(画像サイズ変更 GDでリサイズ)

<?php
//ディレクトリを含めたファイル名
$image_name_full = '../abc/photo.jpg';
//変更後のイメージサイズ(長辺)
$image_size = 300;
//元画像サイスの取得
list($org_w, $org_h) = getimagesize($image_name_full);
//リサイズ後のピクセル数計算
if ($org_w > $org_h) { //横長画像の場合
	$copy_w = $image_size;
	$copy_h = round($org_h * ($image_size / $org_w));
} else { //縦長画像の場合(もしくは正方形)
	$copy_h = $image_size;
	$copy_w = round($org_w * ($image_size / $org_h));			
}
//オリジナルファイルの画像リソース(GD)
$org_img = imagecreatefromjpeg($image_name_full);
//コピー画像のリソース(GD)
$copy_img = imagecreatetruecolor($copy_w, $copy_h);
//画像のリサイズ(GD)
imagecopyresized($copy_img, $org_img, 0, 0, 0, 0, $copy_w, $copy_h, $org_w, $org_h);
//画像の保存(GD)
imagejpeg($copy_img, $image_name_full,95);
?>

これで動くことは動くのですが、リサイズ後の画像の劣化やギザギザが目につきます。そこで、リサイズの部分は比較的画像の劣化が少ないImageMagickモジュールを使用することにしました。

さくらのレンタルサーバー(スタンダード)では、デフォルトではImageMagickが使用できないものの、php.iniに一行加えるだけで使用できるようになります。

■ php.ini(ImageMagickを設定)
extension = imagick.so

■ PHP(画像サイズ変更 ImageMagickでリサイズ)

<?php
//ディレクトリを含めたファイル名
$image_name_full = '../abc/photo.jpg';
//変更後のイメージサイズ(長辺)
$image_size = 300;
//元画像サイスの取得
list($org_w, $org_h) = getimagesize($image_name_full);
//リサイズ後のピクセル数計算
if ($org_w > $org_h) { //横長画像の場合
	$copy_w = $image_size;
	$copy_h = round($org_h * ($image_size / $org_w));
} else { //縦長画像の場合(もしくは正方形)
	$copy_h = $image_size;
	$copy_w = round($org_w * ($image_size / $org_h));			
}
$image = new Imagick($image_name_full);
//画像のリサイズ
$image->scaleImage($copy_w, $copy_h);
//JPEG画質＆保存
$image->setCompressionQuality(95);
$image->writeImage($image_name_full);
$image->destroy();
?>

一連の流れで、画像のアップロードからリサイズまでできるようになりました。ブログ記事編集ページ(管理者専用)には、この他にも細かい機能を付けて、スマートフォンやタブレットでも複数画像を使った記事をアップできるようになりました。まあ、大手のサービスではとっくにやっていることではありますが、これを手作りで構築すること自体が楽しいということで…。





Web管理関連記事(リンク一覧): さくらレンタルサーバーのアクセス履歴をPHPで表示 / PHPで画像のアップロード(さくらレンタルサーバーのPHPでImageMagick) / KUNISAN.JPサイトのメンテナンス(2019) / Webサーバー引っ越し(さくらインターネット スタンダード)とHTTPS(常時SSL)化 / Googleマップの有料化(ディベロッパー向け) → Google Cloud Platform / ...(記事連続表示)

関連カテゴリー: PHP関連記事, Web管理関連記事

詳細! PHP 7+MySQL 入門ノートをAmazon.co.jpでチェック