WordPressの質問（q10093310）の続

質問

スタンプ画像を送信する機能をデータベースに格納したいのですが、格納した数字と画像URLを結び付ける方法が分かりません。
アドバイスお願い致します。

※最新のコード
https://wandbox.org/permlink/A4VLYzAR2h4uYYRh

回答No.33

dell_OK · ベストアンサー

・3点目は表示についてになります。前述のとおりtokenの使い方が難しく参考サイトを見ても文字と画像どちらに対する防御コードか理解できておりません。

tokenについては先の回答で大丈夫ですね

・表示コードは下記のようになるのではないかと書いているのですが、スタンプ画像のほかに名前とメッセージにもisset関数で変数がセットされているか確認する必要があるのか分からなかったため、

それっぽい処理はすでにされていますよ。
ただ、メール送信から部分的にコピーしてきただけのようなのでこれだけではだめです。
－－－－
$namae_value = isset($namae) ? htmlspecialchars($namae, ENT_QUOTES) : '';
$message_value = isset($message) ? htmlspecialchars($message, ENT_QUOTES) : '';
－－－－

あと、必須のチェックはHTML任せになっているので、ＰＨＰ側でもチェックするようにした方がいいのかも知れません。

いただいた質問にだけ簡単に回答していたので、コードをよく見ていませんでした。
細かく見てみると、いろいろと直した方がよさそうです。
メール送信から拝借したためなのもあるので、あれとはまったく別物と思ってください。

その１。
最初の方にある不正アクセスはコードに無駄があります。
－－－－
$noindexaccess = true;
～（省略：インラインフレーム禁止）
// 不正アクセスチェック
if (!$noindexaccess) {
header('HTTP/1.0 404 Not Found');
exit;
}
// 不正アクセスチェック
if (!$noindexaccess || isBot()) {
header('HTTP/1.0 404 Not Found');
exit;
}
－－－－
これだけでいいです。
－－－－
// 不正アクセスチェック
if (isBot()) {
header('HTTP/1.0 404 Not Found');
exit;
}
－－－－

その２。
エラー表示がありますが、チェック処理がありません。
－－－－
echo '<div style="color:red;">';
// エラーメッセージがあったら表示する
echo ($error_mes) ? '
---------------------<br />
　入力エラーです<br />
---------------------<br />'.$error_mes : '';
echo '</div>';
－－－－
これより前にチェック処理をしてください。
こんな流れになります。
－－－－
// エラーメッセージ
$error_mes = '';
～チェック処理
echo '<div style="color:red;">';
// エラーメッセージがあったら表示する
echo ($error_mes) ? '
---------------------<br />
　入力エラーです<br />
---------------------<br />'.$error_mes : '';
echo '</div>';
－－－－

他にもありますが、今日はここまでにしておきます。

補足

Q.tokenについては先の回答で大丈夫ですね

それっぽい処理はすでにされていますよ。
ただ、メール送信から部分的にコピーしてきただけのようなのでこれだけではだめです。
－－－－
$namae_value = isset($namae) ? htmlspecialchars($namae, ENT_QUOTES) : '';
$message_value = isset($message) ? htmlspecialchars($message, ENT_QUOTES) : '';
－－－－

A.アドバイスありがとうございます。tokenは送信する際に生成するものだと理解できました。

確かに中の文字列チェックは行われていますがHTMLですね。

Q.その１。
最初の方にある不正アクセスはコードに無駄があります。
－－－－
$noindexaccess = true;
～（省略：インラインフレーム禁止）
// 不正アクセスチェック
if (!$noindexaccess) {
header('HTTP/1.0 404 Not Found');
exit;
}
// 不正アクセスチェック
if (!$noindexaccess || isBot()) {
header('HTTP/1.0 404 Not Found');
exit;
}
－－－－

A.こちらのコードは保存と表示のファイルを分けるという想定をしていたので残しておりました。今のところ削除と保存のコードファイルは分けることに決めているのですが、表示は同じファイルで実装できそうでしょうか？

Q.その２。
エラー表示がありますが、チェック処理がありません。
－－－－
echo '<div style="color:red;">';
// エラーメッセージがあったら表示する
echo ($error_mes) ? '
---------------------<br />
　入力エラーです<br />
---------------------<br />'.$error_mes : '';
echo '</div>';
－－－－

A.こちらはお問合せフォーム用のファイルを見ると文字列チェックなどのコードを別ファイルに書いていてそちらを外部から読み込んでいるようです。
rerification.phpに文字列チェック用コードを書いたのですが、こちらは外部から読み込ませたほうが良いでしょうか？そのままecho '<div style="color:red;">';の上に追加するべきでしょうか？

※最新コード
https://wandbox.org/permlink/4aLeppvHjfrIycUx

回答No.22

dell_OK

・>1000×750pixel
ならフルカラー・無圧縮でも2.2MB程度にしかなりません。

これくらいのファイルサイズおよび画像寸法ならリサイズはしなくてもいいような気がします。
原寸のままＰＮＧ形式に変換したものと、サムネイル用の２００×２００の画像を保存する方法でよさそうですね。

こんな感じでどうでしょうか。
－－－－
function save_upload_file($id, $i)
{
// アップロードファイルコントロール名生成
$attachment_file = "attachment_file_{$i}";
// アップロードファイルが指定されているか
// アップロードに成功しているか
if (isset($_FILES[$attachment_file]) && is_array($_FILES[$attachment_file]) && UPLOAD_ERR_OK === $_FILES[$attachment_file]['error']) {
// WordPressアップロードディレクトリ取得
$upload_dir = wp_upload_dir();
// サブディレクトリ
$sub_dir = 'informtion-form';
// 保存ファイル名
$image_filename = "{$id}_{$i}.png";
$thumb_filename = "{$id}_{$i}_thumb.png";
// 保存ファイルパス
$image_path = $upload_dir['basedir'].'/'.$sub_dir.'/'.$image_filename;
$thumb_path = $upload_dir['basedir'].'/'.$sub_dir.'/'.$thumb_filename;
// アップロードテンポラリーファイルパス（元画像）
$tmp_name = $_FILES[$attachment_file]['tmp_name'];
// 元画像の情報を取得
$info = getimagesize($tmp_name);
// 元画像の読込
switch ($info[2]) {
case IMAGETYPE_JPEG:
$base_image = imagecreatefromjpeg($tmp_name);
break;
case IMAGETYPE_PNG:
$base_image = imagecreatefrompng($tmp_name);
break;
}
// 元画像のサイズ
$base_width = $info[0];
$base_height = $info[1];
// サムネイルサイズ
$thumb_width = 200;
$thumb_height = 200;
// サムネイル画像を準備
$thumb_image = imagecreatetruecolor($thumb_width, $thumb_height);
// 縮小（サムネイル）
imagecopyresized($thumb_image, $base_image, 0, 0, 0, 0, $thumb_width, $thumb_height, $base_width, $base_height);
// PNG形式で保存（サムネイル）
imagepng($thumb_image, $thumb_path);
// PNG形式で保存（原寸）
imagepng($base_image, $image_path, 0);
// 元画像を削除
unlink($tmp_name);
// 保存ファイル参照パス
$image_url = $upload_dir['baseurl'].'/'.$sub_dir.'/'.$image_filename;
$thumb_url = $upload_dir['baseurl'].'/'.$sub_dir.'/'.$thumb_filename;
// 画像表示
echo '<img src='.$image_url.'>';
echo '<img src='.$thumb_url.'>';
}
}
－－－－

補足

修正ありがとうございます。完成のイメージを考えてみたのですが、拡大するサイズを320×320に統一したいと考えております。
完成のイメージなのですがgoo質問と似たイメージを考えています。

左上
番号　名前　スタンプ

コメント

画像　空白　右下

https://imgur.com/BTkypYx.jpg

画像の拡大は以下のようにオーバーレイで実装したいと考えています。
https://imgur.com/9KT3bp1.gif

もう一つ挑戦してみたいことがあるのですが、pdfと別にmp4の保存は可能でしょうか？15mb以内であれば埋め込みは可能だと考えているのですが…
3分で20mbで計算(Youtubeの2分50秒動画で検証)したところ2分であれば15mbで収まりそうだとおもいました。タイムラプスでイラストを描いた様子を質問したい場合フル(2分11秒）：12.95MBなので15mbまたは14mbでvideoタグの動画を設置することが可能であれば質問の幅も広がりそうです。

※タイムラプス圧縮について
https://tips.clip-studio.com/ja-jp/articles/4000

※mp4動画について
https://rivers.jp/blog/3560
https://www.omakase.net/blog/2021/12/videojs.html
https://liginc.co.jp/342227
https://ics.media/entry/221007/

※参考サイト
https://rivers.jp/blog/3560

回答No.21

dell_OK

ディレクトリの作成方法を教えてくださってありがとうございます。
よくわりました。

・理想では10MBでアップロード制限をして5MBにリサイズしたいと考えているのですが、

リサイズと言うのは画像の寸法を変更すると言う意味です。
寸法を小さくすることでファイルサイズも小さくなるであろうと言う期待によるものです。
直接的にファイルサイズを小さくすると言うのとは少し違います。
指定したファイルサイズになるように画像の寸法を変更する命令はないような気がします。
なので、自分で作ることになるのですが、
私が思いつく方法としては、例えば、
ファイルサイズが５ＭＢ以下になるまで、
画像の寸法を９０％、８０％、７０％とだんだん小さな縮尺で縮小していく方法です。
品質をより保ちたいのであれば、９５％、９０％、８５％と５％刻みでもいいと思います。
刻みを小さくすれば品質はより保つことができますが、
仮に５０％まで小さくしなくては５ＭＢにならなかった場合に、
１％刻みでやっていくと５０回処理しなければなりません。
そこまでするようなことかどうかは質問者さまが判断されることですが、
サーバーに負荷がかかりそうです。

私はファイルサイズを目標にしてリサイズしたことはありません。
サイトに表示する画像の寸法が決まっているのでその寸法にする程度です。
とは言え、質問者さまの場合は、
イラストやデザインのようなもののようなので、
どこまで品質を保つかが重要でしたら、
寸法を目標にするのはあまりよくないのかも知れないですね。

・表示サイズは200×200で考えています。
クリックした際に拡大する機能も可能であれば実装したいです。

方法はふたつあります。
ひとつ目は、
サムネイル用の２００×２００の画像と、
品質を確保した拡大表示用の画像のふたつを保存する方法。
ふたつ目は、
品質を確保した拡大表示用の画像のみ保存して、
その画像をサムネイル表示にも使う方法です。

後者はサムネイルしか見ていない場合でも、
ファイルサイズの大きな画像がダウンロードされてしまうので、
ほぼ拡大表示する人たち向けのサイトになるかと思います。

前者はWordPressも採用している方法だと思いますが、
画像をアップロードすると１５０×１５０（初期値）の画像も保存されています。
拡大表示するとは限らない人たち向けはこちらの方がいいような気がします。
ファイル数が２倍になり、ファイル名も別に生成するようになるので、
管理は少しだけ複雑になってくると思います。

補足

Q.サムネイル用の２００×２００の画像と、
品質を確保した拡大表示用の画像のふたつを保存する方法。
ふたつ目は、
品質を確保した拡大表示用の画像のみ保存して、
その画像をサムネイル表示にも使う方法です。

前者はWordPressも採用している方法だと思いますが、
画像をアップロードすると１５０×１５０（初期値）の画像も保存されています。
拡大表示するとは限らない人たち向けはこちらの方がいいような気がします。
ファイル数が２倍になり、ファイル名も別に生成するようになるので、
管理は少しだけ複雑になってくると思います。

A.アドバイスありがとうございます。色々調べてみたところリサイズとは画像の縮小が一般的なようですね。
現状で問題なさそうです。知恵袋でも以下のように書いてありました。問題はpdf等になりそうです。

後者の方は相性が悪そうなので前者を作成したいです。掲示板である以上画面内にレスポンスが1つしか見えないと役割を果たしていない気がします。
最近ですと画像と文字が画面内に収まる形が主流になっているためやはり普段は縮小させる方が良さそうです。
2つ保存する場合、どのようなファイルなどは分けることになるのでしょうか？

>1000×750pixel
ならフルカラー・無圧縮でも2.2MB程度にしかなりません。

回答No.20

dell_OK

・教えていただいたコードについて質問があるのですが、1～2までのループとは何のことでしょうか？

アップロードするファイルのループです。
<input type="file" name="attachment_file_1" ～>
<input type="file" name="attachment_file_2" ～>
これらの、1と2のことです。

・元画像のサイズのコードになるのですが、$関数[0]で横、$関数[1]で縦というコードがあるのでしょうか？

関数ではなく、変数です。
$info = getimagesize($tmp_name);
getimagesize()のドキュメントです。
https://www.php.net/manual/ja/function.getimagesize.php
戻り値の説明をご覧ください。
「0 番目および 1 番目の要素は、それぞれ画像の幅と高さを表します。」とあります。
$info[0]は幅、$info[1]は高さです。

・public_html/wp-content/uploads/informtion-formに格納するようにコードを変更することは可能でしょうか？

ではこうしてみてください。
－－－－
function save_upload_file($id, $i)
{
// アップロードファイルコントロール名生成
$attachment_file = "attachment_file_{$i}";
// アップロードファイルが指定されているか
// アップロードに成功しているか
if (isset($_FILES[$attachment_file]) && is_array($_FILES[$attachment_file]) && UPLOAD_ERR_OK === $_FILES[$attachment_file]['error']) {
// WordPressアップロードディレクトリ取得
$upload_dir = wp_upload_dir();
// サブディレクトリ
$sub_dir="informtion-form";
// 保存ファイル名
$save_filename = "{$id}_{$i}.png";
// 保存ファイルパス
$newpath = $upload_dir['basedir'].'/'.$sub_dir.'/'.$save_filename;
// アップロードテンポラリーファイルパス（元画像）
$tmp_name = $_FILES[$attachment_file]['tmp_name'];
// 元画像の情報を取得
$info = getimagesize($tmp_name);
// 元画像の読込
switch ($info[2]) {
case IMAGETYPE_JPEG:
$base_image = imagecreatefromjpeg($tmp_name);
break;
case IMAGETYPE_PNG:
$base_image = imagecreatefrompng($tmp_name);
break;
}
// 元画像のサイズ
$base_width = $info[0];
$base_height = $info[1];
// 縮小サイズ
$new_width = 200;
$new_height = 200;
// 元画像のサイズが縮小サイズ以下か
if ($base_width <= $new_width && $base_height <= $new_height) {
// 元画像のまま
$new_image = $base_image;
} else {
// 縮小サイズの画像を準備
$new_image = imagecreatetruecolor($new_width, $new_height);
// 縮小
imagecopyresized($new_image, $base_image, 0, 0, 0, 0, $new_width, $new_height, $base_width, $base_height);
}
// PNG形式で保存
imagepng($new_image, $newpath, 0);
// 元画像を削除
unlink($tmp_name);
// 保存ファイル参照パス
$url = $upload_dir['baseurl'].'/'.$sub_dir.'/'.$save_filename;
// 画像表示
echo '<img src='.$url.'>';
}
}
－－－－

サブディレクトリ（$sub_dir）を追加してみました。
私のローカル環境では問題ありませんでした。
ローカルなのでディレクトリを作成するのは簡単ですが、
WordPress管理画面からはディレクトリの作成ができないような感じです。
どうやってディレクトリを作成するのか教えてくださると助かります。

補足

A.WordPress管理画面からはディレクトリの作成ができないような感じです。
どうやってディレクトリを作成するのか教えてくださると助かります。

Q.アドバイスありがとうございます。理解できました。

xamppで作成する場合はffftpが簡単でした。
WinSCPは自分ではわからなかったので、ffftpで参考サイトを見ながら作成したところうまくいきました。
FileZillaで設定したIDとPASSを利用して、FFFTPを設定することで接続可能です。
32bitの旧xamppはエラーが起こりどうしてもうまくいかなかったです。
64bitの最新版であればwordpressの最新バージョンでもエラーはないようです。

※参考サイト
https://itlogs.net/xampp-filezilla/#:~:text=FileZilla%20FTP%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E7%94%BB%E9%9D%A2%E3%81%AE%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%80%8CEdit%E3%80%8D%E2%87%92%E3%80%8CUsers,%E3%81%A7%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E3%80%82

回答No.19

dell_OK

リサイズされずに画像が表示されたのでしょうか。
画像が表示されなかったのでしょうか。

お礼

アップロード時のサイズがそのまま表示されております。

補足

回答ありがとうございます。
リサイズに失敗しているようです。

回答No.18

dell_OK

次はリサイズしてみます。
アップロードファイル保存関数を以下のようにしてください。
－－－－
function save_upload_file($id, $i)
{
// アップロードファイルコントロール名生成
$attachment_file = "attachment_file_{$i}";
// アップロードファイルが指定されているか
// アップロードに成功しているか
if (isset($_FILES[$attachment_file]) && is_array($_FILES[$attachment_file]) && UPLOAD_ERR_OK === $_FILES[$attachment_file]['error']) {
// WordPressアップロードディレクトリ取得
$upload_dir = wp_upload_dir();
// 保存ファイル名
$save_filename = "{$id}_{$i}.png";
// 保存ファイルパス
$newpath = $upload_dir['basedir'].'/'.$save_filename;
// アップロードテンポラリーファイルパス（元画像）
$tmp_name = $_FILES[$attachment_file]['tmp_name'];
// 元画像の情報を取得
$info = getimagesize($tmp_name);
// 元画像の読込
switch ($info[2]) {
case IMAGETYPE_JPEG:
$base_image = imagecreatefromjpeg($tmp_name);
break;
case IMAGETYPE_PNG:
$base_image = imagecreatefrompng($tmp_name);
break;
}
// 元画像のサイズ
$base_width = $info[0];
$base_height = $info[1];
// 縮小サイズ
$new_width = 200;
$new_height = 200;
// 元画像のサイズが縮小サイズ以下か
if ($base_width <= $new_width && $base_height <= $new_height) {
// 元画像のまま
$new_image = $base_image;
} else {
// 縮小サイズの画像を準備
$new_image = imagecreatetruecolor($new_width, $new_height);
// 縮小
imagecopyresized($new_image, $base_image, 0, 0, 0, 0, $new_width, $new_height, $base_width, $base_height);
}
// PNG形式で保存
imagepng($new_image, $newpath, 0);
// 元画像を削除
unlink($tmp_name);
// 保存ファイル参照パス
$url = $upload_dir['baseurl'].'/'.$save_filename;
// 画像表示
echo '<img src='.$url.'>';
}
}
－－－－

変更した処理のおおまかな流れ。

画像の形式に合わせて読み込む。

画像のサイズ判定をして、
縮小サイズ以下ならリサイズせずそのままの画像で、
そうでなければリサイズした画像で。

ＰＮＧ形式で保存する。
https://www.php.net/manual/ja/function.imagepng.php
圧縮レベルの意味がわからないのですが、
０が圧縮しないとなっているのと、
「quality」品質と言う意味から、
画質が損なわれなくなると思って０にしています。
ただ、ファイルサイズが大きくなってしまうようです。

元画像（アップロードテンポラリーファイル）を削除。
前回のコードでは、
move_uploaded_file()でテンポラリーから保存先へ移動していたので、
テンポラリーに残りませんでしたが、
今回のコードでは、
テンポラリーから直接画像処理をしているので、
テンポラリーに残ってしまうため削除しています。

縮小サイズは２００×２００の固定にしています。
動作確認をして、画像がこのサイズで表示されていたら成功です。
成功したらＧＤがインストールされていると考えてもいいと思います。

あとは質問者さまの希望のサイズでリサイズする必要がありますが、
画像が縦長か横長かによってどうするかなどで、
処理がわかってきますのでそこまでしていません。
希望のリサイズサイズがありますか。
最大縦長と最大横長です。

お礼

TerminalでGDがあるか確認のコマンド(php -m | grep gd)を打ってみたところ、gdと返ってきたのインストールはされているようです。
imagecreatetruecolorはGDライブラリのバージョンが2.0.1以上でないと動かないようなのでそちらも調べてみましたが問題なさそうです。

※GDがあるか確認
https://www.flyenginer.com/low/low_php/php%E3%81%A7gd%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E7%94%BB%E5%83%8F%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B.html

var_dump(gd_info());でバージョン確認
array(14) { ["GD Version"]=> string(26) "bundled (2.1.0 compatible)"で出力

※参考サイト
https://oshiete.goo.ne.jp/qa/1512649.html
https://www.php.net/manual/ja/function.gd-info.php

補足

回答ありがとうございます。
実行してみたのですが、リサイズされていないため何かしらの方法でGDをインストールする必要がありそうです。

リサイズについてなのですが、他サイトを調べてみたところ下記のようになっておりました。
理想では10MBでアップロード制限をして5MBにリサイズしたいと考えているのですが、表示サイズは200×200で考えています。
クリックした際に拡大する機能も可能であれば実装したいです。

ピクシブ32MB
OKWABE8MB
ヤフー知恵袋4MB
imgur20MB

回答No.17

dell_OK

そうですね。
それでは、ＧＤやリサイズのことはいったん置いておいて、
単純にアップロードするところまでやってみませんか。
それができたら、リサイズや画像形式変換するようにしてみたいと思います。
参考サイトの情報やコードは必要に応じて入れていきたいと思います。

現在質問者さまのサイトで実行しているファイルが
entry-confirmationform.php
と言う前提で、コードの変更をお願いします。

nameのところに_1と_2を追加してください。
－－－－
echo '<input type="file" name="attachment_file_1" id="my_image" accept=".png, .jpg, .jpeg, .pdf, .doc">';
echo '<input type="file" name="attachment_file_2" id="my_image" accept=".png, .jpg, .jpeg, .pdf, .doc">';
－－－－

メッセージをデータベースに保存した後でアップロードファイルを保存します。
－－－－
<?php
if (!empty($_POST['message'])) {
$message = $_POST['message'];
$namae = $_POST['namae'];
$stamp = $_POST['stamp'];
$sql = 'INSERT INTO sortable(message,namae,stamp) VALUES(%s,%s,%d)';
$wpdb->query($wpdb->prepare($sql, $message, $namae, $stamp));
// ループカウンタ$iが1から2までのループ
for ($i = 1; $i <= 2; ++$i) {
// アップロードファイル保存関数を呼ぶ
// 第一引数：保存されたメッセージのＩＤ
// 第二引数：ループカウンタ
save_upload_file($wpdb->insert_id, $i);
}
}
// アップロードファイル保存関数
// 第一引数：ＩＤ
// 第二引数：連番
function save_upload_file($id, $i)
{
// アップロードファイルコントロール名生成
$attachment_file = "attachment_file_{$i}";
// アップロードファイルが指定されているか
// アップロードに成功しているか
if (isset($_FILES[$attachment_file]) && is_array($_FILES[$attachment_file]) && UPLOAD_ERR_OK === $_FILES[$attachment_file]['error']) {
// WordPressアップロードディレクトリ取得
$upload_dir = wp_upload_dir();
// 保存ファイル名
$save_filename = "{$id}_{$i}.png";
// 保存ファイルパス
$newpath = $upload_dir['basedir'].'/'.$save_filename;
// 保存ファイル参照パス
$url = $upload_dir['baseurl'].'/'.$save_filename;
// アップロードファイル（テンポラリー）を保存ファイルパスへ移動
if (move_uploaded_file($_FILES[$attachment_file]['tmp_name'], $newpath)) {
// アップロードファイル表示
echo '<img src='.$url.'>';
}
}
}
?>
－－－－

保存ファイルの拡張子は固定で.pngにしています。
いずれ画像ファイルはPNG形式に変換するのでこれでいいと思います。

これで動作確認してみてください。
アップロードファイルはPNG形式とJPEG形式のもので試してください。
アップロード後に画像が表示されていれば成功です。

保存先のディレクトリはWordPressのwp-content\uploadsです。
WordPressの管理画面でアップロードしたファイルが保存されるのと同じ場所です。
但し、管理画面では確認できません。
管理画面で確認できるようにするには、データベースにいろいろ登録する必要があるはずです。

ＰＤＦについてはのちのち。

お礼

回答No.19についての回

こちらが最新の回答になります。
申し訳ありません、先ほど確認してみたところリサイズに成功していました。キャッシュの問題かコマンドを打ったことにより動作したようです。

教えていただいたコードについて質問があるのですが、1～2までのループとは何のことでしょうか？
IDはレスポンスの数だけ増えるはずなので何を指しているのかわかりませんでした。

// ループカウンタ$iが1から2までのループ
for ($i = 1; $i <= 2; ++$i) {
// アップロードファイル保存関数を呼ぶ
// 第一引数：保存されたメッセージのＩＤ
// 第二引数：ループカウンタ
save_upload_file($wpdb->insert_id, $i);
}

元画像のサイズのコードになるのですが、$関数[0]で横、$関数[1]で縦というコードがあるのでしょうか？
アドバイスを1つ頂きたいのですが、現在画像フォルダが2つあります。
階層の浅いところに1つ深いところに1つです。本来は深いところに1つしかないのですが(public_html/wp-content/uploads)どうしても出力できない画像があったため浅いところ(public_html/wp-content/themes/sample_theme/images)にも作成してそちらからも読み込みをおこなっております。
今回のアップロード画像は深いほうセキュリティ上よいとされているところに保存されています。こちらは普段の記事などに使うフォルダになっているため、できればフォルダを作成してその中に格納するようにしたいです。
public_html/wp-content/uploads/informtion-formに格納するようにコードを変更することは可能でしょうか？

function save_upload_file($id, $i)
{
// 元画像のサイズ
$base_width = $info[0];
$base_height = $info[1];

補足

Q.現在質問者さまのサイトで実行しているファイルが
entry-confirmationform.php
と言う前提で、コードの変更をお願いします。

A.回答ありがとうございます。雑談掲示板はenter-informtion.phpでお願い致します。

動作を確認したところ表示することができました。次に何をすればよいでしょうか？

※最新コード
https://wandbox.org/permlink/tBvIS06rvwMRCRAX

回答No.16

dell_OK

・GDインストールして変換する方法もあったのですが難しそうでしたのでやめておきます。
WebP画像というのに変換する方法もあるようです。

通常GDはPHPとセットでインストールされていると思います。
WebPに変換するのもGDライブラリのはずです。
それはそれとして。
WebPに変換するときに画質が落ちないように気を付けてください。
品質の引数がありますが省略するとどうなるかわからないので確認しておいてください。
https://www.php.net/manual/ja/function.imagewebp.php

お礼

WebPについて調べてみたのですが、まだ非対応の端末などがあり掲示板の質問→画像保存→添削などには向いていないためやはりPNGで統一したいです。
そうなってくると昨日回答させていただいた1の方法しか分かりませんでした。GDでも可能なようですが、アドバイス頂きながらでないと難しいです。
php.iniファイルからインストールできるようですが、リサイズと変換をする方法が分からない状態です。
拡張子も変換できるようですが、リサイズするとなると複雑なようなのでphp側でリサイズしてGD側で拡張子の変換という流れでも良いのではないかと考えています。
ただ画質が落ちてしまいそうなのでそこが心配です。

※GDインストール
https://cravelweb.com/webdesign/wp-customize/post-4911
※拡張子変換
https://1-notes.com/php-gd-change-format-type/

※WebP対応について
https://webdesign-trends.net/entry/13745
https://www.webtech.co.jp/blog/optpix_labs/format/15586/

※参考サイト
1,http://ithat.me/2016/12/13/php-image-format-jpg-png-gif-convert-to
2,https://www.scollabo.com/banban/php/ref/ref_imagecreatefrompng.html
3,https://blog.gurunpa.com/php-png-jpg

//1つ目の方法 imageCreateFromPng( )で変換
// 変換前ファイル読み込み（ファイル形式によって関数を使い分ける）
if ($info[2] == IMAGETYPE_PNG) $ext = @imagecreatefrompng('input.png');
if ($info[2] == IMAGETYPE_JPEG) $ext = @imagecreatefromjpeg('input.jpg');
if ($info[2] == IMAGETYPE_JPEG) $ext = @imagecreatefromgif('input.gif');

// 指定形式に変換
imagepng($ext, 'output.png');
imagejpeg($ext, 'output.jpg');
imagegif($ext, 'output.gif');

// メモリの解放
imagedestroy($ext);

補足

回答ありがとうございます。
GDライブラリを使うのは難しそうなので1と2の方法を取ろうと考えていたのですが該当のコードで可能でしょうか？

回答No.15

dell_OK

・データベースにIDはすでに設定しているのですがそちらが連番になるのでしょうか？

そうです。
テーブルの構造を確認してみてください。
ＩＤのその他のところにAUTO_INCREMENTと書かれているはずです。
名前の通り「自動で増加」するものです。
INSERTではIDに何も設定していないのに１、２、３、４が設定されていますよね。
次にINSERTしたら５になるはずです。
基本的にはこのような連番になっていますが、ファイル名の"{ID}_{連番}"の連番と混同しないでくださいね。
テーブルのＩＤは{ID}の方です。
{連番}の方はプログラムで設定するものです。

補足

理解することことができました。
アドバイスありがとうございます。

回答No.14

dell_OK

・バイナリー画像ファイルの拡張子を変更するコードを調べても情報が出てこず困っております。

拡張子を変更するのが目的ではありません。
画像の形式を変更するのが目的です。
「php 画像変換」で検索してみてください。

補足

回答ありがとうございます。php 画像変換で調べてみたところ方法が2つほどありそうでした。
GDインストールして変換する方法もあったのですが難しそうでしたのでやめておきます。
WebP画像というのに変換する方法もあるようです。

※WebP画像に変換して表示する
https://kusumo-t.com/php73-webp/

※参考サイト
1,http://ithat.me/2016/12/13/php-image-format-jpg-png-gif-convert-to
2,https://www.scollabo.com/banban/php/ref/ref_imagecreatefrompng.html
3,https://blog.gurunpa.com/php-png-jpg

//1つ目の方法 imageCreateFromPng( )で変換
// 変換前ファイル読み込み（ファイル形式によって関数を使い分ける）
if ($info[2] == IMAGETYPE_PNG) $ext = @imagecreatefrompng('input.png');
if ($info[2] == IMAGETYPE_JPEG) $ext = @imagecreatefromjpeg('input.jpg');
if ($info[2] == IMAGETYPE_JPEG) $ext = @imagecreatefromgif('input.gif');

// 指定形式に変換
imagepng($ext, 'output.png');
imagejpeg($ext, 'output.jpg');
imagegif($ext, 'output.gif');

// メモリの解放
imagedestroy($ext);

※参考サイト
https://codelikes.com/php-base64-decode/

//2つ目の方法 配列にまとめる？
$ext = [
'image/jpeg' => 'jpeg',
'image/png' => 'png',
'image/gif' => 'gif',
'image/bmp' => 'bmp',
];

回答No.13

dell_OK

・ファイル名を保存する予定だったのですが、IDと結び付けてそちらをデータベースで管理可能という事でしょうか？

ファイル名を{ID}_{連番}にする話です。
sortableにメッセージを保存すると自動でIDが振られます。
そのIDを取得する方法は $wpdb->insert_id です。
メッセージを保存後にアップロードファイルの処理をします。
ファイル名の生成は "{$wpdb->insert_id}_{連番}.png" になります。
連番はひとつ目のファイルは 1 、ふたつ目のファイルは 2 です。
アップロードファイルは最大ふたつあるのでループで処理してください。
ループのインデックスを1～2でまわすといいと思います。

現在のコードをいただくのはいいのですが、
必要なものだけにしていただけますか。
どれをどうみたらいいのかわかりません。

アップロードファイルがふたつあるのはこれなので、
new-information.php
これで言うと、この部分、名前（name）が同じになってます。
同じ名前のものを送信するとどちらかしか送信されません。
名前を attachment_file_1 attachment_file_2 にするか、
attachment_file[1] attachment_file[2] にしてください。
－－－－
echo '<input type="file" name="attachment_file" id="my_image" accept=".png, .jpg, .jpeg, .pdf, .doc">';
echo '<input type="file" name="attachment_file" id="my_image" accept=".png, .jpg, .jpeg, .pdf, .doc">';
－－－－

アップロードファイルの処理をしているのはこれですが、
text-storage.php
処理している名前はこうなっています。
$_FILES['upfile']
名前がattachment_fileなら、
$_FILES['attachment_file']でなくてはいけません。
正確にはattachment_file_1かattachment_file[1]になってきます。
また、この1の部分はループ処理のカウンタを使うようになります。

それでと。
話しを戻すと、アップロードファイルの名前は、
"{$wpdb->insert_id}_{ループカウンタ}.png"と言う具合になります。

データベースで管理、と言うか、
sortableのIDがそのままファイル名になります。

補足

A.修正ありがとうございます。なるほどファイルに連番をつけて該当の画像を表示させるのですね。sqlの連番というのは自動でつくのでしょうか？
データベースにIDはすでに設定しているのですがそちらが連番になるのでしょうか？

ループ処理は画像のフォーマットを変換してから修正してみます。

※現在のコード
https://wandbox.org/permlink/URwcrvnMZPcq9AEo

※現在のデータベース
https://imgur.com/l9UAB3E.jpg