WordPressの質問（q10217484）の続

質問

アップロードされたカメラ画像を非表示にするコードを追加したのですが、表示するためのURLを追加するコードが抜けており追加いたしました。
上記とは別にアップロードされたファイルをエンコードするコードも抜けているのではないかと思っております。
旧コードでは対象ファイルではない場合にアラートで警告ダイアログを表示するコードとは別にエンコードするコードがあるため最新コードにも追加すべきではないかと考えております…

下記のコードは追加すべきでしょうか？（single-input.php の15行目から38行目まで）

$attach = [];
if (!empty($_SESSION['attach'])) {
foreach ($_SESSION['attach']['data'] as $i => $data) {
if (!empty($data)) {
$base64 = base64_encode($data);
}
$type = $_SESSION['attach']['type'][$i];
switch ($type) {
case 'image/jpeg':
case 'image/png':
$attach[] = '<img style="height: 100px;" src="data:'.$type.';base64,'.$base64.'">';
break;
case 'video/mp4':
$attach[] = '<video style="height: 100px;" controls src="data:'.$type.';base64,'.$base64.'">';
break;
case 'application/pdf':
$attach[] = '<iframe style="height: 100px;" src="data:'.$type.';base64,'.$base64.'"></iframe>';
break;
default:
$attach[] = '';
break;
}
}
}

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

※旧コード
https://wandbox.org/permlink/cfzsJgBFcYrcIDI1

回答No.36

dell_OK · ベストアンサー

・参照している変数が存在しないと書かれているようなのです

そうですね。
コードを見ると、用意した変数は　divBoardFormPartial　ですが、
エラー個所では　divJsBoardFormPartial　と書かれています。
違いの「Js」はＩＤ名をそのまま書かれたからですね。
－－－－
// class
const divBoardFormPartial = document.createElement("div");
// classの追加
divBoardFormPartial.classList.add("board_form_partial");
// idの追加
divJsBoardFormPartial.id = 'js_board_form_partial_div';
－－－－

ＩＤを設定するにしても変数は変わりませんので「Js」のないものを書いてください。
－－－－
divBoardFormPartial.id = 'js_board_form_partial_div';
－－－－

変数名のつけ方についてクラスとかＩＤとかややこしい説明をしなかった方がよかったのかと、いまさらながらに思っています。

・1つの HTMLタグに複数のクラスを追加する方法について調べた際に答えが出てこず

そうですね。
次に発生するエラーはまさにそれです。
－－－－
divTitlePartialParts.classList.add("title-partial parts"); // classの追加
－－－－

classList.add()はクラスを追加する関数ですが、"title-partial parts"はクラスではありません。
"title-partial"と"parts"がクラスです。
なので、それぞれを追加するこんな書き方や、
－－－－
divTitlePartialParts.classList.add("title-partial"); // classの追加
divTitlePartialParts.classList.add("parts"); // classの追加
－－－－

複数同時に追加する書き方や、
－－－－
divTitlePartialParts.classList.add("title-partial", "parts"); // classの追加
－－－－

その関数は使わず、class属性を書きかえてしまうこんな書き方があります。
－－－－
divTitlePartialParts.className = "title-partial parts"; // classの追加
－－－－
divTitlePartialParts.setAttribute("class", "title-partial parts"); // classの追加
－－－－

追加や削除でクラスを頻繁に書きかえるのならclassListを使うのもいいと思いますが、要素を作りっぱなしでそのままのもに関してはclassNameでもいいのかなと思います。
https://developer.mozilla.org/ja/docs/Web/API/Element/classList
https://developer.mozilla.org/ja/docs/Web/API/Element/className

お礼

こちらが最新の質問になります。
回答の期限が切れていることに気が付かず、申し訳ありません。
アドバイス宜しくお願い致します。

https://okwave.jp/qa/q10235817.html

補足

Q.コードを見ると、用意した変数は　divBoardFormPartial　ですが、
エラー個所では　divJsBoardFormPartial　と書かれています。
違いの「Js」はＩＤ名をそのまま書かれたからですね。
ＩＤを設定するにしても変数は変わりませんので「Js」のないものを書いてください。

A.回答ありがとうございます、変数をそろえるんですね理解できました。

Q.classList.add()はクラスを追加する関数ですが、"title-partial parts"はクラスではありません。
"title-partial"と"parts"がクラスです。
追加や削除でクラスを頻繁に書きかえるのならclassListを使うのもいいと思いますが、要素を作りっぱなしでそのままのもに関してはclassNameでもいいのかなと思います。

➀なので、それぞれを追加するこんな書き方や、
－－－－
divTitlePartialParts.classList.add("title-partial"); // classの追加
divTitlePartialParts.classList.add("parts"); // classの追加
－－－－

➁複数同時に追加する書き方や、
－－－－
divTitlePartialParts.classList.add("title-partial", "parts"); // classの追加
－－－－

➂その関数は使わず、class属性を書きかえてしまうこんな書き方があります。
－－－－
divTitlePartialParts.className = "title-partial parts"; // classの追加
－－－－
divTitlePartialParts.setAttribute("class", "title-partial parts"); // classの追加
－－－－

A.解説ありがとうございます。➀➁は恐らくクラスを2つ分けることになり下記のように書くことができないと思われる為、
➂の方法で書きたいのですが頻繁に書き換える場合 classList を使ったほうが良いとのことでどちらを選択すべきでしょうか？

・title-partial {

}

回答No.15

dell_OK

・下記コードで良いでしょうか？

変数名を間違えています。
if($namae == ""){ $namae = "匿名"; }

補足

回答ありがとうございます。名前 = $namae = 匿名 という認識なのですが、変数名に間違いがあるのでしょうか？

回答No.14

dell_OK

PHP側です。

functions.php
名前は任意になったので必須のこのチェックは削除してください。
－－－－
Chk_InputMode($namae, '・お名前をご記入ください。', $error);
－－－－

ここも名前のチェックを削除してください。
－－－－
// 何もせず終わる処理
if (empty($_SESSION['question']) || empty($_SESSION['title']) || empty($_SESSION['stamp'])) {
exit;
}
－－－－

あと、messageをquestionにするもれがあったようです。
bbs_quest_input.php
－－－－変更前
namae_value = json.namae;
message_value = json.message;
－－－－変更後
namae_value = json.namae;
question_value = json.question;
title_value = json.title;
－－－－

補足

A.修正ありがとうございます。名前を必須から任意に変更して未入力の場合匿名で表示する場合、下記コードで良いでしょうか？
$namae = Chk_StrMode($namae);
if($name == ""){ $name = "匿名"; }

※参考サイト
https://okwave.jp/qa/q8813173.html

https://cravelweb.com/webdesign/wp-customize/post-5637

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

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

確認画面へ進むボタンについて再度考えてみたのですが、dell_ok さんが言われた通り「クリックされた時」と「非同期通信が完了して応答があった時」のタイミングは合わせたほうが良さそうですね。
問題解決策として下記の2つ方法がありそうです。
➀の方法のいずれかのタイミングで強制的にローディングを終了するというのが難しいのではないかと思っているのですが可能でしょうか？

➀ボタン送信時にローディングアニメーションを呼び出して、いずれかのタイミングで強制的にローディングを終了する

※強制的にローディングを終了
https://moshashugyo.com/media/loading

※ローディングアニメーション
https://nagashima.kyusan-u.ac.jp/note/loading-animation/

➁ボタンの上に画像を重ねてレイアウトしておいて、状況に応じて一方（＝上になっている要素）の表示/非表示を制御する
※アドバイス頂いた方法なのでサンプルサイトはありません

※HTML
<wrapper要素>
　<ボタン要素 />
　<アニメーション要素 />
</wrapper要素＞

※CSS
wrapper要素 { position: relative; }
アニメーション要素 { position:absolute; top:0; left:0; }

回答No.13

dell_OK

・minlength 属性で制限してエラー文を最大文字数と同じように表示させる方法を思いついたのですが、HTML で制限せずに最大文字数と同じようにまとめることは可能なのでしょうか？

minlength属性はsubmitボタン押下でないと動作（ブラウザがエラーメッセージを表示して送信しなくなる）しません。
「確認画面へ進む」ボタンはsubmitではなくただのボタンですし、JavaScriptで非同期送信しているので意味のない属性です。
それに最小文字数と最大文字数で挙動が異なるのはあまりいい方法ではないと思いますので、同じ方法が思います。
５文字未満でも赤くしないとのことですので、まずは、使えなくする、だけに対応してみましょう。

functions.php
名前は任意になったので０文字以上。
質問文は必須なので１文字以上。
－－－－
class MIN_LENGTH
{
public const NAME = 0;
public const TITLE = 5;
public const QUESTION = 1;
}
－－－－

bbs_quest_input.php
data-minlength属性とその値で判定の処理を追加。
－－－－
<input class="input" type="text" name="namae" id="name" data-length="<?php echo MAX_LENGTH::NAME; ?>" data-minlength="<?php echo MIN_LENGTH::NAME; ?>" placeholder="未入力の場合は、匿名で表示されます">
～
<input class="input" type="text" name="title" id="title" data-length="<?php echo MAX_LENGTH::TITLE; ?>" data-minlength="<?php echo MIN_LENGTH::TITLE; ?>" placeholder="<?php echo MIN_LENGTH::TITLE; ?>文字以上で入力してください">
～
<textarea class="input" name="question" id="question" data-length="<?php echo MAX_LENGTH::QUESTION; ?>" data-minlength="<?php echo MIN_LENGTH::QUESTION; ?>" placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください"></textarea>
～
function validation_text(parts) {
/* このpartsグループの、inputを抽出 */
let text = parts.getElementsByClassName('input')[0];
/* 最小チェック */
if (text.value.length < text.dataset.minlength) {
return false;
}
/* 最大チェック */
if (text.value.length >= text.dataset.length) {
return false;
}
return true;
};
－－－－

PHP側での判定はのちほど。

補足

A.解説ありがとうございます、submitボタンで制限可能だと思っておりました。非同期通信の場合は不可能なんですね。

回答No.12

dell_OK

・エラーで5文字以上でないとエラーを表示させたい場合どうすれば良いでしょうか？

その前に、他にもやることや考えておくことがあります。
５文字以上でないと「確認画面へ進む」ボタンを押せなくする。
５文字未満の時は「残りn文字入力できます。」を赤くするか否か。

それと、ここのidをtitleに変更しておいてください。
－－－－
<input class="input" type="text" name="title" id="name" data-length="<?php echo MAX_LENGTH::TITLE; ?>" placeholder="5文字以上で入力してください">
－－－－

補足

➀５文字以上でないと「確認画面へ進む」ボタンを押せなくする。
➁５文字未満の時は「残りn文字入力できます。」を赤くするか否か。

A.回答ありがとうございます。
➀は HTML で制限できるのではないかと考えておりました。minlength 属性で制限してエラー文を最大文字数と同じように表示させる方法を思いついたのですが、HTML で制限せずに最大文字数と同じようにまとめることは可能なのでしょうか？

※参考サイト
https://reference.hyper-text.org/html/attribute/minlength/

➁は5文字未満でも赤くせずに通常通り残り文字数でカウントする方法を考えております。

回答No.11

dell_OK

・$mes を第二引数にしてエラーメッセージを表示しているということでしょうか？

そんな感じですが、ここでは表示したいエラーメッセージを渡しているだけで、表示まではしていません。

・Javascript でのクラス名の変更で非同期通信（fetch関数）への影響はありますでしょうか？

影響はないと思います。
試してだめならどこを変えるか検討されればいいと思います。
ただ、参考サイトは一定時間が経過したタイミングで見た目が変わっているだけなので、「クリックされた時」と「非同期通信が完了して応答があった時」のタイミングでそれぞれのことをする必要があります。
参考サイトのものは見た目（スタイルシート）は使えると思いますが、JavaScriptの方はあんまり使えないような気がします。
SCSSやjQueryのことはわからないので、あまりアドバイスできないかも知れません。

回答No.10

dell_OK

最新コードを見ました。
実行はしていませんが、その前に直すべきところをお伝えします。

ひとつめ。
functions.phpの以下の関数は変更する必要はありませんので、関数の内部も含めてもとに戻しておいてください。
－－－－
function Chk_ngword($str, $mes, &$error)
～
function Chk_InputMode($str, $mes, &$error)
～
function CheckUrl($checkurl, $mes)
－－－－

$strはチェックする文字の対象で、名前、タイトル、質問文、が入ってくるところです。
以前、何が入ってくるかわからない（いろいろ入ってくる）ので、$namaeや$messageになっていないと説明したかと思います。
補足しておきます。
「str」が何かと言うと、「string」の略で、「文字列」と言う意味です。
汎用的に使うので「$str」と言う変数名になっているのです。

「$str」が名前、「$mes」がメッセージだと思われたのかも知れませんが違います。
$mesはエラーがあった時に表示するエラーメッセージです。
呼ぶ側はこうなっていて、第二引数が「$mes」です。
　Chk_ngword($namae, '・NGワードが入力されています。', $error);
なので、関数側の引数に「$title」や「$que」を書くのは間違いです。

ふたつめ。
同じくfunctions.php。
以前削除するようにお願いしたコードがまた戻っています。
セッション変数をクリアした後に、その内容を確認するif()があり、そこで抜けてしまい、結果画面に行かなくなります。
－－－－
// セッション変数の削除
$_SESSION = [];
session_destroy();

// 結果画面へ行く信号が届いた時に、何もせず終わる
if (empty($_SESSION['question']) || empty($_SESSION['title']) || empty($_SESSION['namae']) || empty($_SESSION['stamp'])) {
exit;
}
－－－－

そのif()の処理はその上のここにあるので、必要な処理は完了しています。
－－－－
// 新しいセッションを開始、あるいは既存のセッションを再開する
session_start();
// 何もせず終わる処理
if (empty($_SESSION['question']) || empty($_SESSION['title']) || empty($_SESSION['namae']) || empty($_SESSION['stamp'])) {
exit;
}
－－－－

みっつめ。
bbs_quest_view.php。
－－－－
<h2>入力画面</h2>
<form method="post" enctype="multipart/form-data" name="input_form">
<div>名前<input type="text" name="namae"></div>
<div>質問タイトル<input type="text" name="title"></div>
<div>質問文<textarea name="question"></textarea></div>
－－－－
ここは回答を入力する画面です。
回答にはタイトルは不要だと思います。
質問文ではなく回答文の方がいいと思います。

補足

Q.第二引数が「$mes」です。
　Chk_ngword($namae, '・NGワードが入力されています。', $error);
なので、関数側の引数に「$title」や「$que」を書くのは間違いです。

A.アドバイスありがとうございます。申し訳ありません、忘れておりました。コメントアウトでメモしておきます。
$mes を第二引数にしてエラーメッセージを表示しているということでしょうか？

Q.以前削除するようにお願いしたコードがまた戻っています。
セッション変数をクリアした後に、その内容を確認するif()があり、そこで抜けてしまい、結果画面に行かなくなります。

A.アドバイスありがとうございます、申し訳ありません。コードを削除いたしました。

Q.ここは回答を入力する画面です。
回答にはタイトルは不要だと思います。
質問文ではなく回答文の方がいいと思います。

A.アドバイスありがとうございます。修正いたしました。

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

dell_ok さんにお聞きしたいのですが、
確認画面へ進むボタンに参考サイトの「ひと目でステータスが分かる送信ボタン」を実装したいと考えているのですが、Javascript でのクラス名の変更で非同期通信（fetch関数）への影響はありますでしょうか？
ボタンにアニメーションを加えて送信したことを分かりやすく伝えるようにデザインを変更する場合、大きく修正が必要になるのではないかと思いその他のデザインにすべきか悩んでおります…

※参考サイト
https://webdesign-trends.net/entry/13228

回答No.9

dell_OK

確認画面へは進めました。
問題なさそうです。

補足

A.確認ありがとうございます、表示することが出来ました。
一覧表示する際にアップロード画像だけでは分かりにくいため質問タイトルも入力してもらい、回答者に分かりやすい形にしたいと考えております。
最小5文字の最大50文字で制限したいのですが、エラーで5文字以上でないとエラーを表示させたい場合どうすれば良いでしょうか？

上記とは別の質問があります。
確認画面へ進むボタンに参考サイトの「ひと目でステータスが分かる送信ボタン」を実装したいと考えているのですが、Javascript でのクラス名の変更で非同期通信（fetch関数）への影響はありますでしょうか？
ファイルサイズが大きくなる場合ボタンを押して確認画面に切り替わる際に時間がかかる為、送信されているか分からずに2度押しする、再読み込みする人が出てくるのではないかと感じました。
また色弱の方がいる場合判別できない可能性があり、ボタンにアニメーションを加えて送信したことを伝える方が良いのではないかと考えております。

※参考サイト
https://webdesign-trends.net/entry/13228

全ファイルでコメント入力（message）と設定していたのですが、雑談掲示板のクラスに message を付ける方が適切ではないかと考え、question に変更いたしました。
functions.php の80行目 ngワードの設定に title を追加してみたのですが問題はありますでしょうか？
ngワードと url のチェックを名前、タイトル、質問文のすべてに適応すべきか悩んでおります。

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

回答No.8

dell_OK

・確認画面へ進むボタンが機能せず進むことが出来なくなってしまったのですが、原因として考えられることはありますでしょうか？

最新のコードで試してみましたが問題なく動作しています。
質問者さまのサイトの質問入力画面のＵＲＬを教えてください。

補足

回答ありがとうございます、下記リンクになります。確認よろしくお願い致します。

https://www.irasuto.cfbx.jp/質問掲示板/

回答No.7

dell_OK

・セッションからクリアする必要がなくなったのは非同期通信にして確認画面から送信するように変更したからでしょうか？

確認画面ではなく、入力画面からの送信で、クリアされているアップロードファイルは空の状態でセッションが上書きされるからです。

補足

Q.確認画面ではなく、入力画面からの送信で、クリアされているアップロードファイルは空の状態でセッションが上書きされるからです。

A.回答ありがとうございます、理解出来ました。

確認画面へ進むボタンが機能せず進むことが出来なくなってしまったのですが、原因として考えられることはありますでしょうか？
bbs_quest_input.phpの214行目に名前とメッセージの残りの文字数を表示するコードのクラス名を追加いたしました。
m.className = 'msg_partial';

bbs_quest_input.phpの232行目を const formData = new FormData(input_form); に修正いたしました。
const formData = new FormData(input_form);

※bbs_quest_input.phpの17行目は input_form のままにしておきたかったのでエラーが出ていた上記のコードを修正したのですが確認画面に進むことができず原因が分からない状態です…
<form name="input_form">

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

回答No.6

dell_OK

通して実行してみると問題がありました。

functions.php の function bbs_quest_confirm() に不要な処理があります。
ここは削除してください。
－－－－
// 結果画面へ行く信号が届いた時に、何もせず終わる
if (empty($_SESSION['message']) || empty($_SESSION['namae']) || empty($_SESSION['stamp'])) {
exit;
}
－－－－
同じ処理が２回あり、セッションをクリアした後に判定している２回目のこの処理のせいで、正常に結果画面に行けなくなっています。

それと問題ではありませんが、アップロードファイルのクリアに関する処理は以前と少し違い、セッションからクリアする必要がなくなり、attachdelが不要となりました。
以下のコードは削除してください。
－－－－
<input type="hidden" class="attachdel" name="attachdel[]">
～
<input type="hidden" class="attachdel" name="attachdel[]">
～
<input type="hidden" class="attachdel" name="attachdel[]">
～
const del = document.querySelectorAll('.attachdel');
～
del[i].value = "";
～
del[i].value = "1";
－－－－

かわりのクリアするコードを追加してください。
　blobType[i] = "";
　blobUrl[i] = "";
こんな感じになります。
－－－－
clear[i].addEventListener('click', () => {
blobType[i] = "";
blobUrl[i] = "";
attach[i].value = "";
viewer[i].innerHTML = "";
changeImg[i].classList.remove('hideItems');
});
－－－－

補足

－－－－
// 結果画面へ行く信号が届いた時に、何もせず終わる
|| empty($_SESSION['namae']) || empty($_SESSION['stamp'])) {
exit;
}
－－－－
Q.同じ処理が２回あり、セッションをクリアした後に判定している２回目のこの処理のせいで、正常に結果画面に行けなくなっています。

A.アドバイスありがとうございます、削除いたしました。

Q.それと問題ではありませんが、アップロードファイルのクリアに関する処理は以前と少し違い、セッションからクリアする必要がなくなり、attachdelが不要となりました。
以下のコードは削除してください。

A.修正ありがとうございます。セッションからクリアする必要がなくなったのは非同期通信にして確認画面から送信するように変更したからでしょうか？

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