WordPressの質問（q10297398）の続

質問

another_que_answer.php 393行目の divUserIcon.appendChild(usericonImg); の usericonImg はどのように定義すべきでしょうか？
質問画面ではアップロードファイルの後にアイコン画像のコードが書かれており2つの処理をまとめておくことが出来たのですが、回答画面では順番が逆になっているため悩んでおります。

先に var usericonImg; のみ宣言してしてみたのですがエラーが表示されておりどのように書けばよいかアドバイスお願い致します。

※エラー文
TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at 質問回答画面/:462:21

※最新コード
https://github.com/i6Grja3R/sample_theme.git

※質問回答画面
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e5%9b%9e%e7%ad%94%e7%94%bb%e9%9d%a2/

回答No.7

dell_OK

・左にアイコン画像右に名前と回答、その下にアップロードファイルという順番で並べることは可能でしょうか…？

可能だと思っています。
方法としては、要素を作成する処理は共通処理として response.js に書きます。
その要素を配置する処理はまとめる共通処理ではなく回答画面に直接書きます。
配置の順序やdivタグの括り方を質問画面と回答画面で変えればできると思っています。
今は、いろいろな要素の作成と配置が混在して入り乱れているのでわかりづらいですが、各要素を作成する処理をそれぞれの function にまとめていくことでわかりやすくなってくると思っています。
そのためにも、共通処理にきれいにまとめていきましょう。

お礼

github で修正する前の URL を載せておりました申し訳ありません…
確認よろしくお願い致します。

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

補足

回答ありがとうございます、HTML の生成をそれぞれのファイルで行うという発想はありませんでした良さそうですね。
まとめられそうなコードを探してみたのですが各コードの処理が長いため途中で関数名などに違いがありどうすべきか悩んでおります。
下記コードのみ共通でその他の各要素を作成する処理をまとめる場合、現在のコードを if で分岐させる必要がありそうです…
アドバイスお願い致します。

※ 共通コード
const input_area = document.getElementById("input_area");
const confirm_area = document.getElementById("confirm_area");
const result_area = document.getElementById("result_area");
var name_value = "";
var text_value = "";
// 要素が3個の空配列を作成
const blobType = ["", "", "", ""];
const blobUrl = ["", "", "", ""];

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

回答No.6

dell_OK

・bbs_que_answer.php と bbs_quest_input.php 両方に get_header(); が存在するため、header.php に script タグを書いて JavaScript ファイルを読み込むコードを書けば良さそうです。

それだと、他のページにも get_header(); があると思いますので、他のページでも読み込まれてしまいそうですね。
これからまとめる共通処理を使わないページでは、なるべく読み込まない方がいいような気がします。
と言うのも、それが原因で他のページの JavaScript が動かなくなることもあるかも知れないからです。
できれば、bbs_que_answer.php と bbs_quest_input.php の時だけ、読み込ませる方法があればいいですね。
参考サイト（https://burebure.jp/20240821-2）にヒントはありますが、
～～～～
特定のページのみにJavaScriptを読み込ませたい場合
add_action( 'wp_enqueue_scripts', function(){
// トップページだけ「test.js」を読み込む
if( is_front_page() ){
wp_enqueue_script( 'test', get_template_directory_uri() . '/test.js' );
}
} );
～～～～
トップページだけ、と言う WordPress 関数を使ったものなので、ここに工夫が必要そうです。
現在作成中の掲示板とは別にもうひとつ掲示板を作られる予定でしたよね。
そこでも同じ処理が必要になるようでしたら、この判定に追加すればいいですし。
判定方法はおいおい調べていただくとして。

とりあえず、質問者さまが書かれたこちらのコードを functions.php に入れて、試してみましょう。
－－－－
function my_scripts_method() {
wp_enqueue_script(
'custom_script',
get_template_directory_uri() . '/response.js',
);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
－－－－

次に、テーマフォルダ内に response.js ファイルを作成してください。
まずは、「確認画面へ進む」ボタンの使用可不可を制御するコードを引っ越しして入れてみます。
－－－－
function validation_submit(f) {
const submit = document.getElementById("submit_button");
/* 判定は逆なので、逆に渡す */
submit.disabled = f ? false : true;
};
－－－－
このコードは bbs_que_answer.php と bbs_quest_input.php にまったく同じであるので、両方から削除してください。

GitHub で差分を見れば戻すことができますので、コメントにして残すのはこれからはやめていきましょう。
いったんはコメントにしておいて、動作確認をしたら削除でも構いません。
コードに問題ないことがわかれば、コミットする時点では削除しておいてください。

私のローカル環境では、質問画面と回答画面で、このボタンの使用可不可は問題なく動作しましたので、そちらでもやってみてください。
このように、まったく同じコードで、関数外変数を使っていなければ、引っ越しするだけで、コードをひとつにまとめられます。
他にもあれば、引っ越ししてみてください。

補足

Q.それだと、他のページにも get_header(); があると思いますので、他のページでも読み込まれてしまいそうですね。
これからまとめる共通処理を使わないページでは、なるべく読み込まない方がいいような気がします。
と言うのも、それが原因で他のページの JavaScript が動かなくなることもあるかも知れないからです。

A.回答ありがとうございます盲点でした。
回答、質問画面以外では不要ですね。

～～～～
特定のページのみにJavaScriptを読み込ませたい場合
add_action( 'wp_enqueue_scripts', function(){
// トップページだけ「test.js」を読み込む
if( is_front_page() ){
wp_enqueue_script( 'test', get_template_directory_uri() . '/test.js' );
}
} );
～～～～
Q.トップページだけ、と言う WordPress 関数を使ったものなので、ここに工夫が必要そうです。
現在作成中の掲示板とは別にもうひとつ掲示板を作られる予定でしたよね。
そこでも同じ処理が必要になるようでしたら、この判定に追加すればいいですし。
判定方法はおいおい調べていただくとして。

A.アドバイスありがとうございます。
判定方法について調べたところスラッグ名やページIDを設定することにより特定のページでのみJSファイルの読み込みが可能なようです。

※ WordPressで特定のページでのみCSSやJSファイルの読み込みをする方法
https://www.1-firststep.com/archives/5889

Q.GitHub で差分を見れば戻すことができますので、コメントにして残すのはこれからはやめていきましょう。
いったんはコメントにしておいて、動作確認をしたら削除でも構いません。
コードに問題ないことがわかれば、コミットする時点では削除しておいてください。

私のローカル環境では、質問画面と回答画面で、このボタンの使用可不可は問題なく動作しましたので、そちらでもやってみてください。
このように、まったく同じコードで、関数外変数を使っていなければ、引っ越しするだけで、コードをひとつにまとめられます。
他にもあれば、引っ越ししてみてください。

A.アドバイスありがとうございます。どの部分をまとめたか分からなくなる可能性があるので dell_ok さんに確認いただいた後でコメント削除してみます。

回答No.5

dell_OK

・コードをまとめるのと回答一覧を表示するどちらを優先すべきでしょうか？

そうですね。
回答画面がそれなりに機能しているのでしたら、
コードまとめを先にやってみましょう。
git のおかげでいつでもコミットした時点に戻せるので、
コードが動かなくなってしまっても心配ないですし。

コードをまとめると言ってもどこから始めましょうかね。
まずは少々肥大化してきた JavaScript の部分ですかね。
bbs_quest_input.php と bbs_que_answer.php で似たようなコードを抜き出して、
別ファイルにする必要があると思うのですが、その点は理解されていますか。
さらに、別ファイルした JavaScript ファイルを両方で読み込むようにしないといけないので、
WordPress でその読み込み方法があるか調べてみていただけますでしょうか。

補足

Q.bbs_quest_input.php と bbs_que_answer.php で似たようなコードを抜き出して、
別ファイルにする必要があると思うのですが、その点は理解されていますか。

さらに、別ファイルした JavaScript ファイルを両方で読み込むようにしないといけないので、
WordPress でその読み込み方法があるか調べてみていただけますでしょうか。

A.回答ありがとうございます。
投稿ページ作成の際に画像1、画像2、画像3で共通の処理をまとめた時のようなイメージで考えております。

functions.php に JavaScript ファイルを読み込むコードを記述後、header.php の <head></head> の間に、script タグを書いて response.js を読み込む方法を見つけました。
bbs_que_answer.php と bbs_quest_input.php 両方に get_header(); が存在するため、header.php に script タグを書いて JavaScript ファイルを読み込むコードを書けば良さそうです。

※ scriptタグを書いてJavaScriptファイルを読み込む方法
https://burebure.jp/20240821-2

<script src="<?php echo get_template_directory_uri(); ?>/response.js" type="text/javaScript" charset="utf-8"></script>

※ WordPressでJavaScriptファイルを読み込む方法
https://www.onamae.com/column/wordpress/52/

function my_scripts_method() {
wp_enqueue_script(
'custom_script',
get_template_directory_uri() . '/response.js',
);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

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

左にアイコン画像右に名前と回答、その下にアップロードファイルという順番で並べることは可能でしょうか…？
コードをまとめる場合、現在の Javascript コードを維持した方がよいと思うのですが、アイコン画像とアップロードファイルを離して配置することで分かりやすく並べたいと考えております。

※ 回答画面デザイン
https://marvelapp.com/whiteboard/urN35BK2SNIqAd9D5XwO

回答No.4

dell_OK

今後、bbs_que_answer.php と another_que_answer.php のどちらを使うかを決定してください。
質問者さまが両方直すのも手間でしょうし、私が両方見るのも手間です。

・i == 3となっていたので3番目の画像が縮小されて表示されているのではと思い修正したのですが、

なぜ i == 4 にしたのでしょうか。
私は i == 0 にするようにお願いしました。
開発者モードで fileArea の内容を確認してみてください。
ユーザーアイコンは 0 番目です。

補足

回答ありがとうございます。
bbs_que_answer.php のみ必要なのでそちらを残したいと思います、配慮が足りず申し訳ありません。

以前アドバイス頂いた際に入力機能と確認機能どちらか一方しか修正していなかったようで、i == 0 では上手くいかないものだと勘違いしておりました申し訳ありません…
dell_ok さんに教えて頂いた通りユーザーアイコンの下にアップロードファイルを表示することが出来ました。

可能な限り質問画面と回答画面の共通コードをまとめたいのですが、現在作成中の回答機能の下に回答一覧を表示したいと考えております。
コードをまとめるのと回答一覧を表示するどちらを優先すべきでしょうか？コードをまとめるのは回答画面の機能を最後まで作成してからの方が良いのではないかと思ったのですが…

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

※ 質問回答画面
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e5%9b%9e%e7%ad%94%e7%94%bb%e9%9d%a2/

回答No.3

dell_OK

エラーは i が未定義だからですが。

追加されたところにで usericonImg を再定義しているからアイコンが消えているのではないでしょうか。
－－－－
/* アイコン画像要素作成 */
var usericonImg;
usericonImg.src = blobUrl[i];
－－－－
この３行を消してみてください。

補足

アドバイスありがとうございます、var usericonImg; を2回定義しておりました申し訳ありません。
以前から3つ目にアップロードされたファイル画像のみ大きさが異なっており、another_que_answer.php の215行目と399行目を修正したところアイコン画像とアップロードファイル両方表示することが出来ました。

i == 3となっていたので3番目の画像が縮小されて表示されているのではと思い修正したのですが、他のコードを書き換える必要はないでしょうか？

※ 修正前のコード
for (let i = 0; i < blobType.length; i++) {
if (i == 3) {
usericonImg = document.createElement("img");
usericonImg.style.maxHeight = "85px";
usericonImg.style.maxWidth = "85px";
if (blobType[i] == "") {
usericonImg.src = "<?php echo $noimage_url; ?>";
} else {
usericonImg.src = blobUrl[i];
}
}

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

アイコン画像の次に名前とコメントを表示してその次にアップロードファイルを表示させるのは可能でしょうか…？
以前質問画面と回答画面で共通コードが多いので可能な限りまとめたいとお伝えしたので、dell_ok さんはコードを後々まとめやすいように質問画面のコードから変えずに考えて頂いたと思うのですが、回答画面のデザインを考えたときにアイコン画像とアップロードファイルは離して配置したほうが分かりやすいのではないかと感じました。

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

回答No.2

dell_OK

・イメージしていた順番と異なる形になってしまいました。

画像の順番のためにそのように見えているのかもしれませんね。

この i == 3 は配列インデックス 3 の時にユーザーアイコンの処理をしています。
－－－－
for (let i = 0; i < blobType.length; i++) {
if (i == 3) {
usericonImg = document.createElement("img");
－－－－

回答画面ではユーザーアイコンが先頭にあるので配列インデックスは 0 です。
なのでまずはここを変更する必要があります。
－－－－
if (i == 0) {
－－－－

それでどんな風に見えるか確認してみてください。

補足

回答ありがとうございます、修正してみたところアイコン画像が消えてしまいました。
ユーザーアイコン→名前→コメント→アップロードファイルの順番で表示するのが理想の形なのですが、ユーザーアイコンを別途表示することは可能でしょうか？

usericonImg.src = blobUrl[i]; というコードを /* アイコン画像要素作成 */ 部分に付け足してみたのですが エラー（ReferenceError: i is not defined ）が発生してしまいコード全体を書き換える必要があるのではないかと心配しております。

回答No.1

dell_OK

ファイルアップロード要素作成の処理を先にするとよさそうです。

－－－－
var div;
var child;
// class
//const divBoardFormPartial = document.createElement("div");
// classの追加
//divBoardFormPartial.classList.add("board_form_partial");
// idの追加
//divBoardFormPartial.id = 'js_board_form_partial_div';

//confirm_area.appendChild(child); // confirm_area の末尾に child を追加
//const divQuestionHeaderPartial = document.createElement("div");
//divQuestionHeaderPartial.classList.add("questionHeader-partial");
//div.appendChild(child); // div の末尾に child を追加

/* ファイルアップロード要素作成 */
const image_area = document.createElement("div");
var image_count = 0;
const divUploadfileArea = document.createElement("div"); // div (子)を生成
divUploadfileArea.classList.add("uploadfile-area"); // classの追加
var usericonImg;
for (let i = 0; i < blobType.length; i++) {
if (i == 3) {
usericonImg = document.createElement("img");
usericonImg.style.maxHeight = "85px";
usericonImg.style.maxWidth = "85px";
if (blobType[i] == "") {
usericonImg.src = "<?php echo $noimage_url; ?>";
} else {
usericonImg.src = blobUrl[i];
}
} else {
var changeImg = null;
if (blobType[i] == "img") {
changeImg = document.createElement("img");
} else if (blobType[i] == "video") {
changeImg = document.createElement("video");
changeImg.setAttribute("controls", null);
} else if (blobType[i] == "iframe") {
changeImg = document.createElement("iframe");
}
if (changeImg !== null) {
image_count++;
changeImg.classList.add("changeImg");
changeImg.style.height = "350px";
changeImg.style.width = "530px";
changeImg.src = blobUrl[i];
const divImageCameraIcon = document.createElement("div"); // div (孫)を生成
divImageCameraIcon.classList.add("image-camera-icon"); // classの追加
divImageCameraIcon.appendChild(changeImg); // image_camera_icon (子要素) の末尾に changeImg を追加
divUploadfileArea.appendChild(divImageCameraIcon); // uploadfile_area (親要素) の末尾に image_camera_icon を追加
}
}
}
image_area.appendChild(divUploadfileArea); // image_area (親要素) の末尾に div を追加

/* アイコン画像要素作成 */
const comment_area = document.createElement("div"); // const image_area の下から移動
const divUserArea = document.createElement("div"); // div (子)を生成
省略

/* 名前要素作成 */
省略

/* コメント要素作成 */
省略

/* アップロードファイルサイズ制限事項要素作成 */
－－－－

補足

回答ありがとうございます。
順番を入れ替えたところ確認画面に進むことが出来たのですが、イメージしていた順番と異なる形になってしまいました。
質問画面と可能な限りコードを統一したかったのですが順番が違うためコードを変更する必要がありそうです…
アイコン画像とアップロードファイルの if分岐コードを切り離す必要があるのではないかと考えているのですが可能でしょうか？
アップロード数で処理を分岐しているため順番を変更した際にデメリットのほうが大きいのではないかと思いました。

1.アイコン画像
2.名前
3.回答
4.アップロードファイル
5.※ファイルサイズ15MB以内、JPG/GIF/PNG/MP4
6.確認画面へ進むボタン

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

※ 回答画面デザイン
https://marvelapp.com/whiteboard/urN35BK2SNIqAd9D5XwO
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

上記とは別に以前 dell_ok さんにご提案頂いた Github ディスカッション ツール（Github issue）について調べて分からない部分を質問しておりました。
Github には3つのディスカッション ツールがあるようで、GitHub Discussions 以外は個人のコミュニケーションツールとして使えないようですね。
セキュリティ面が一番心配だったので質問でお聞きしたところ、リポシトリをプライベートリポジトリにすれば、情報を公開せずに利用することができ、参考サイト（GitHubのセキュリティ対策や情報漏洩について）の対策をしていれば、ソースコードや関連情報が外部に漏れることもないようです。

Github は本来、プロダクトの方針などの意思決定をサポートすることを目的としたツールで、ここで議論をしておくことで記録を残すというような意味合いが大きいツールなので、通常の開発作業の中での分からないことへの質問や相談などを手軽に質問するには扱いにくいのではないかとアドバイス頂いたのですが、更新履歴が見やすい・ソースファイルをダウンロードできる・ファイル一覧を確認可能などの点を考えれば GitHub Discussions を使用するのが最善だと思いました。
Q&Aに適しているのかということで疑問を持たれたようで、参考サイト（チーム開発で『GitHub Discussions』を運用してみた）を調べて教えて頂きました。記事は2年前のものなのでセキュリティ上最も安全なツールであるか保障できないとのことでした。

OkWABE の期限が切れる前に調べ終わる予定だったのですが、遅くなり申し訳ありません。

※ Github で提供されているツール
・Issue Tracker: ソースコードなどのコンテンツに問題があることを報告するためのツール
・Pull Request: ソースコードへの修正を取り込んでもらうための要求を出す機能
・GitHub Discussions: 総合ディスカッションツール。

※ GitHubのセキュリティ対策や情報漏洩について
https://jitera.com/ja/insights/9431

※ チーム開発で『GitHub Discussions』を運用してみた
https://zenn.dev/makihiro_dev/articles/github-discussions-operational-design