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.5

dell_OK

・bbs_quest_input の87行目を id="input_button" から id="submit_button" に変更したい場合、233行目の input_form と bbs_quest_input も submit にした方が分かりやすいと思われますでしょうか？

そうですね。
名前がそろっていた方がわかりやすいような気はします。
ただ、機能（画面）名ではなくなるためのわかりにくさも感じないではないです。
私は「submit」が「送信」のような感じなので違和感があります。
一番最後の画面ならまだわからないでもないですが、全画面でなにかしら送信しているのでそれでも微妙な感じです。
とは言え、ここはそのＳＥＯ対策優先で、そのようにされていいと思います。
そうなると、functions.phpの方も変更してそろえておいてください。
－－－－
function bbs_quest_input()
～
add_action('wp_ajax_bbs_quest_input', 'bbs_quest_input');
add_action('wp_ajax_nopriv_bbs_quest_input', 'bbs_quest_input');
－－－－

補足

Q.名前がそろっていた方がわかりやすいような気はします。
ただ、機能（画面）名ではなくなるためのわかりにくさも感じないではないです。
私は「submit」が「送信」のような感じなので違和感があります。
一番最後の画面ならまだわからないでもないですが、全画面でなにかしら送信しているのでそれでも微妙な感じです。

A.アドバイスありがとうございます。自分も submit では違和感を感じていたのですが、まとめサイトやヤフー知恵袋やgoo質問やOKWABEなどのcssを見て判断したためSEOを考えると最適なのではないかと考えております。

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

回答No.4

dell_OK

・const set_attach_event = function() {} はどのような役割があるのでしょうか？

名前の通り「アタッチのイベントを設定する」です。
アタッチとは添付と言う意味で、ここではアップロードファイルのことです。
アップロードファイルのコントロール「<input type="file" class="attach" name="attach[]" ～>」の「change」イベントを設定しています。
なぜいまさら役割を聞いているのかわかりませんが、このset_attach_event()は、init()の中にだらだらと長いコードを書くのは可読性がよくないので、別の関数にして呼び出すことで、init()の中をすっきりさせる目的です。
init()の中に書くことは、さまざまな初期処理が前提となっています。
私がそうしたのではなく、もともと参考にされてたコードがそうだったのだと思います。
初期処理にもいろいろあるため、全部をその中に書くとひたすらに長くなります。
処理Ａ、処理Ｂ、処理Ｃといくつもあって、どこからどこまでが処理Ａで、どこからどこまでが処理Ｂで、と言うのは、パッと見てわかるとは思えません。
そのためにコメントを書くのも間違っていると思います。
処理ごとに分離しておいた方がメンテナンスしやすいと思います。
それにエラーが起こった時に、それらを呼んでいるコードの一行をコメントするなり、移動するなりして、動作確認がしやすくもなります。
ひたすら長いと、処理コードそのものをコメントしたり移動したりする羽目になります。
このような事情で、処理のひとかたまりを関数にしてしまうのが、おそらくですが、一般的なプログラミングの基本だと思います。
なので、正直なところ、init()の中に書かれていた、以下のコードも別の関数にしてしまいたいほどです。
－－－－
/* 文字数表示 */
document.addEventListener('input', e => {
if (!['name', 'message'].includes(e.target.id)) return;
const
t = e.target,
m = t.nextElementSibling,
n = t.value.length - (t.dataset.length | 0),
c = document.createElement('span');
c.append(Math.abs(n));
m.style.color = n > 0 ? 'red' : 'black';
m.replaceChildren(n > 0 ? '' : '残り', c,
`文字${n > 0 ? '超過してい' : '入力でき'}ます。`);
/* 毎回判定によるボタン制御 */
validation();
});
/* 初回判定のボタン制御 */
validation();
－－－－

・const init = function () {} が外側である必要があると推測されるため set_attach_event(); をどうすべきか悩んでおります。

そもそも　const init = function () {}　をコメントにした時点で、閉じ　}　をコメントにしていなかったからそのようなコードになったのです。
{　をコメントにするときは、組み合わせの　}　もコメントにするようにしてください。
先にも言いましたが、init()がすっきりしていたら、そのようなことにはならずにすんだはずです。
{}の組み合わせが長くなるとこのようなことが起こりやすくなりますし、組み合わせの　}　を探すのも大変になり、間違えやすくもなります。

正しい　{}　の組み合わせにすれば問題ありません。

補足

Q.なぜいまさら役割を聞いているのかわかりませんが、このset_attach_event()は、init()の中にだらだらと長いコードを書くのは可読性がよくないので、別の関数にして呼び出すことで、init()の中をすっきりさせる目的です。
init()の中に書くことは、さまざまな初期処理が前提となっています。

A.回答ありがとうございます、init() の中に const set_attach_event = function() {} を入れることばかり考えておりました、申し訳ありません。
set_attach_event() で呼び出す場合ファイルアップロード時にカメラ画像を非表示にするコードと名前とメッセージの残りの文字数を表示するコード両方に window.addEventListener("DOMContentLoaded", init); イベントを適応することができるんですね。

Q.初期処理にもいろいろあるため、全部をその中に書くとひたすらに長くなります。
処理ごとに分離しておいた方がメンテナンスしやすいと思います。
それにエラーが起こった時に、それらを呼んでいるコードの一行をコメントするなり、移動するなりして、動作確認がしやすくもなります。

A.アドバイスありがとうございます、dell_ok さんが例にあげられたコードは別の方からもまとめたほうがエラーを解決しやすいとご指摘いただいたのですが、文字数のカウント部分のコードをまとめるのがとても難しく document.addEventListener('input', e => {}); を使う条件があるため現状維持という形で考えておりました…

Q.先にも言いましたが、init()がすっきりしていたら、そのようなことにはならずにすんだはずです。
正しい　{}　の組み合わせにすれば問題ありません。

A.アドバイスありがとうございます。
閉じタグも並行して考えるべきでした、以後気を付けます。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

上記とは別に dell_ok さんから意見を頂きたいのですが、bbs_quest_input の87行目を id="input_button" から id="submit_button" に変更したい場合、233行目の input_form と bbs_quest_input も submit にした方が分かりやすいと思われますでしょうか？
SEOを考えてクラスを命名したため submit_button に変更したいと考えております。
※87行目
<button type="button" id="submit_button" name="mode" value="confirm">確認画面へ進む</button>
※233行目
const formData = new FormData(input_form);
※235行目
formData.append("action", "bbs_quest_input");

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

回答No.3

dell_OK

・const init の定義が必要になるんですね…

以下のコードで　init　を呼ぶから必要なんです。
　window.addEventListener("DOMContentLoaded", init);
呼ばないなら必要ないので、こちら側を削除するかです。
なぜ、このコードを書いたか覚えていますか。
それを使わなくなった理由がわかりません。

お礼

こちらが最新の質問になります。
disabled プロパティで色の変化を付けており以前は表示されていたのですが、コードを変更したところ表示されなくなってしまいました。
原因を探ったところ Console に下記のエラー文が表示されており、ファイルをアップロード時に非表示にするコードを含めて無効になってしまっているようです。

※エラー文
Uncaught ReferenceError: init is not defined

これだけでは分からなかったため原因を教えて頂いたところ、コードのまとめ方に問題があるようです。
dell_ok さんに教えて頂きたいのですが、const set_attach_event = function() {} はどのような役割があるのでしょうか？
set_attach_event(); で呼び出しているため const init = function () {} 内で出力させてHTML解釈後に実行するという意味ではないかと考えております。
const init = function () {} が外側である必要があると推測されるため set_attach_event(); をどうすべきか悩んでおります。
アドバイスお願い致します。

※アドバイス頂いた内容
　set_attach_event = function () {
　　　　・・・
　　　const init = function () { ・・・ }
　　　　・・・
　}
　window.addEventListener("DOMContentLoaded", init);
のような構成になっているのでは

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

補足

Q.以下のコードで　init　を呼ぶから必要なんです。
なぜ、このコードを書いたか覚えていますか。
それを使わなくなった理由がわかりません。

A.回答ありがとうございます、DOM要素が発生してしまうリスクがあるためエレメント事作る必要があり document.addEventListener を使うようにしてしておりました。
init を呼ぶ場合定義が必要という事で覚えておきます。

回答No.2

dell_OK

・同じコードが2つ存在することを見落としていたようです、

ふたつ目を削除するのは定義の行だけではなくて、関数定義全体を削除してください。
－－－－
const set_attach_event = function() {
　省略
}
－－－－

・//const init = function () {} について再度考えてみたのですが、

initの定義がないのに、
－－－－
//const init = function () {
－－－－

ここで呼び出すのは不具合のもとです。
－－－－
window.addEventListener("DOMContentLoaded", init);
－－－－

initの定義は必須のはずです。

補足

Q.ふたつ目を削除するのは定義の行だけではなくて、関数定義全体を削除してください。

A.回答ありがとうございます、申し訳ありません関数定義全体が同じものだとは確認しておりませんでした。
削除いたしました。

Q.initの定義がないのに、
－－－－
//const init = function () {
－－－－

ここで呼び出すのは不具合のもとです。
－－－－
window.addEventListener("DOMContentLoaded", init);
－－－－

initの定義は必須のはずです。

A.アドバイスありがとうございます。const init の定義が必要になるんですね…
const set_attach_event = function() {} はどのような役割があるのでしょうか？
set_attach_event(); で呼び出しているため const init = function () {} 内で出力させてHTML解釈後に実行するという意味ではないかと考えております。
カメラ画像をファイルアップロード時に非表示にするコードと名前とメッセージの残りの文字数を表示するコードを window.addEventListener("DOMContentLoaded", init); でまとめる為にはどうすれば良いのか分からず…
アドバイスお願い致します。

※bbs_quest_input の 217行目に const init = function () の終了タグを 218行目に const set_attach_event = function () の終了タグを書きました。
https://wandbox.org/permlink/uNt2X9bLZw8EYwWQ

※bbs_quest_input の 196行目に const set_attach_event = function () の終了タグを 217行目に const init = function () の終了タグを書きました。
https://wandbox.org/permlink/KMNyDL5Bz5VKn265

回答No.1

dell_OK

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

これは画面遷移（同期型）する場合に確認画面から戻った時に表示するための準備処理なので不要です。

前回の回答で、カメラ画像との切り替えができたのでよしとしましたが、この部分の「<?php echo $attach[0]; ?>」は上記の準備処理でできたものを表示しているところなので、
－－－－
<div class="viewer"><?php echo $attach[0]; ?></div>
－－－－

ここも不要なため、これだけでいいです。
－－－－
<div class="viewer"></div>
－－－－

最新コードをみてみました。
JavaScriptでエラーが発生しています。
set_attach_event()がふたつあるためです。
見た感じ２つめの方が私のサンプルのままのもののようなのでこちらを削除してください。

もうひとつ。
ここをコメントにされていますがなぜでしょうか。
必要なもののはずです。
－－－－
//const init = function () {
－－－－

お礼

こちらが最新の質問になります。
コードを見返してみたところ2つめの set_attach_event() が不要という意味が理解できました。同じコードが2つ存在することを見落としていたようです、申し訳ありません。
//const init = function () {} について再度考えてみたのですが、カメラ画像をファイルアップロード時に非表示にするコードを含めて const set_attach_event = function() {} でHTML解釈後に実行する必要があるため、
コードを削除して const set_attach_event = function() {} でまとめるのが良いのではないかと考えております。

※修正コード
https://wandbox.org/permlink/tRi77iNsvQu3yJ29

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

上記とは別にどうしても分からないところがありアドバイスお願い致します。
送信可能と不可能でボタンの色を変更させたいのですが、確認画面に進むボタンに disabled が出力されずコードをチェックしても表示されていたころのコードと同じためどこが原因なのか分かりませんでした。
唯一違うところは下記コードだったので submit に変更しても変化がなく原因が特定できておりません…
セキュリティ上の問題もあるため type="button" は新コードのままで disabled を表示させることは可能でしょうか？

https://zenn.dev/fujiyama/articles/496e5e81ba7df9

※旧コード
<button type="submit" id="submit_button" name="mode" value="confirm">表示画面へ進む</button>

※新コード
<button type="button" id="input_button" name="mode" value="confirm">確認画面へ進む</button>

※旧コード掲示板
https://www.irasuto.cfbx.jp/blog/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf/

※新コード掲示板
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/

※該当コード（sample.phpは旧コードになります）
https://wandbox.org/permlink/uErFODtwVT5xF0Ye

補足

Q.これは画面遷移（同期型）する場合に確認画面から戻った時に表示するための準備処理なので不要です。

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

Q.前回の回答で、カメラ画像との切り替えができたのでよしとしましたが、この部分の「<?php echo $attach[0]; ?>」は上記の準備処理でできたものを表示しているところなので、
ここも不要です。

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

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

Q.JavaScriptでエラーが発生しています。
set_attach_event()がふたつあるためです。
見た感じ２つめの方が私のサンプルのままのもののようなのでこちらを削除してください。

もうひとつ。
ここをコメントにされていますがなぜでしょうか。
必要なもののはずです。
－－－－
//const init = function () {
－－－－

A.アドバイスありがとうございます。set_attach_event() が2つ重複していることに気が付きませんでした削除いたします。
上記2つの内容は同じ問題になると思われるのですが、const init = function () {} はカメラ画像を非表示にするコードを追加する前に document.addEventListener("DOMContentLoaded", init); でまとめる際に dell_ok さんが作成されたコードではないかと考えております。
const init = function () {} が2つあるためどちらかを削除する場合 const set_attach_event = function() {} を残して //const init = function () {} と set_attach_event(); を削除するのが良いのではないかと考えているのですが、 //const init = function () {} は必要なコードなのでしょうか？

※bbs_quest_input.php の137行目
const set_attach_event = function() {}

※bbs_quest_input.php の197行目
//const init = function () {}

※bbs_quest_input.php の198行目
set_attach_event();