- ベストアンサー
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
- みんなの回答 （36）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (35)
- dell_OK
- ベストアンサー率13% (742/5653)
・sample.php の要素の関係性を見ると親はＡかＢどちらになるのでしょうか？ ＨＴＭＬのタグの外側のものが親です。 なのでＡとＢの関係ではＡが親です。 「sample.php の要素の関係性」と言われていますが、それに該当するのは、私が訂正する前のものですが、この部分ですよね。 －－－－ // class const board_form_partial_div = document.createElement("div"); // classの追加 board_form_partial_div.classList.add("board_form_partial"); // id const js_board_form_partial_div = document.createElement('div'); // idの追加 js_board_form_partial_div.id = 'js_board_form_partial_div'; －－－－ これはＢを生成していますが、生成したものをＡに追加する処理が書かれていません。 変数名を変更しようとした作業と、このＢにあたる階層をさらに追加した作業を一緒にされたようなので、どこでＢの追加をしたらいいのかもわからなくなっているのではないでしょうか。 ・非同期通信に入れない方法もあるのではないかと考えていたのですが、Javascript で別途生成する方法もあるという認識で合ってますでしょうか？ そうですね。 実際のコードがわからないので確実にとは言えませんが、JavaScriptでHTMLを書きかえる実装は可能なのでできると思っています。 参考サイトを見る限り、クラスを変更することでスタイルシートの影響を受けて見た目が変化するものかと思います。 クラスを追加削除する方法はご存じのはずなので実装できそうですね。
補足
Q.これはＢを生成していますが、生成したものをＡに追加する処理が書かれていません。 変数名を変更しようとした作業と、このＢにあたる階層をさらに追加した作業を一緒にされたようなので、どこでＢの追加をしたらいいのかもわからなくなっているのではないでしょうか。 A.回答ありがとうございます、質問の説明が不足しておりました申し訳ありません。 sample.phpの382行目と396行目のコードについて親はBになるのではないでしょうか？ 追加する処理が抜けておりましたご指摘ありがとうございます。最も外側の HTML タグになるので一番最後に追加致します。 Ａ<div id="confirm_area" style="display: block;"> Ｂ <div class="board_form_partial" id="js_board_form_partial"> ※該当コード https://wandbox.org/permlink/AKB7fAcT53FvYUXs Q.参考サイトを見る限り、クラスを変更することでスタイルシートの影響を受けて見た目が変化するものかと思います。 クラスを追加削除する方法はご存じのはずなので実装できそうですね。 A.回答ありがとうございます、右上に表示する画像の URL のみ変更する形になると思われます。
- dell_OK
- ベストアンサー率13% (742/5653)
最新のコードを見てみましたがまったく動かなくなっています。 必ずローカルの個別ファイルでスクリプトを試してから実装してください。 動くかどうかを確認するのは私がすることではありません。 質問者さまが事前に確認しておいて欲しいです。 作り方がわからない、エラーを解決できない、と言った内容で質問してください。 エラーが出ている個所はここです。 －－－－３２１行目 const questionHeader-partial_div = document.createElement("div"); －－－－ 変数名に - は使えません。 それを直すと次のエラーはここです。 －－－－３２５行目 const title-partial parts_div = document.createElement("div"); －－－－ 変数名に空白も使えません。 私がクラス名にならったと言ったのでそのままクラス名を変数にされたのだと思いますが、多くのプログラム言語で - や空白は変数名に使えません。 基本的なことですが - は引き算の演算子です。 一般的には「title-partial」と書くと、「title 引く partial」と言う式だと解釈しようとします。 「title - partial」と同じことです。 なので - は変数名には使えません。 空白は予約語と変数の区切り文字です。 「consttitle」と書くと解釈されないので、「const title」と書く規則のようなものです。 他の空白はあってもなくても解釈に影響されないものです。 「title-partial parts_div」は「title-partial」と「parts_div」の別々の単語（予約語や変数）だと解釈しようとします。 ここでは - もあるので「title」と「partial」と「parts_div」ですね。 ただ、エラーメッセージはそのようなことは示してはくれません。 おかしなところで即座に止まるので、私が説明にしたような推測をふまえた無理やりな解釈はしません。 「Uncaught SyntaxError: Missing initializer in const declaration」 『キャッチされない SyntaxError: const 宣言に初期化子がありません』 初期化子と言うのは、この場合 = です。 「= が見つからなかった」と言うエラーです。 構文は「const 名前 = 値」です。 JavaScriptは以下のような処理をしていると思われます。 １．「const」があった、定数の宣言だ。 ２．「const」の次は定数名があるはずだ。 その定数名は「title」だ。（-で途切れる） ３．定数名の次は初期化子「=」があるはずだ。 あれ？「-」だよ、「=」じゃないからエラーにしよう。 無駄話のように説明しましたが、コンピューターがこのような解釈でやっているんだな、と言うことを常に頭の中に入れておいてください。 そうすればコーディングの簡単な間違いは自分でわかってくるようになると思います。 クラス名にならう、について説明を省いたためにこうもなったのかと思っています。 親子が分かりやすいと思ってそうしたのですが、本来はクラス名を変数にしない方がいいです。 なぜなら、クラスは複数のタグに同じものが設定できるからです。 例えばこのようなクラスを記述している個所があります。 "namae-partial parts" "body-partial parts" クラスの特殊性は空白で区切ることで複数していできることです。 ここでは３つのクラスがあります。 namae-partial body-partial parts これで言うと、変数としてならって欲しかったクラス名は namae-partial や body-partial でした。 parts はこれらとは少し違う用途のためにあるクラス名でしたね。 変数名としては「namae_partial_div」や「body_partial_div」かな。 それはそれとして。 もしかしたら、名前も質問文も同じクラス名 partial で作っていたかも知れない場合もありえます。 そうなると partial はどの partial なのか分かりにくくなってしまいます。 ここまで言っておいて言うのもよくないかも知れませんが、もちろん変数名を partial にしても、それ自体には問題ありません。 もともと div や child でやっていたのですから、正しく使いまわせばなんの問題もありません。 分かりやすくするためにクラス名にならっただけです。 ですがそれもよくないと言ったのは、場合によっては分かりづらくなるからです。 親も子も同じクラス名だった場合などがあったりしますから。 もし確実にただひとつのものだけを示すとしたらＩＤにならう方がいいと思います。 ですが、使うかどうかわからないまだ未設定のＩＤにならうことはできません。 ここではただ表示するためだけのＨＴＭＬを生成するためだけの処理なので、ＩＤを使いまくるはずもなく設定もしないでしょう。 今わかっているのはクラス名だけだったからクラス名にならったまでです。 場合によって何にならうかは変わってくると思いますので、絶対これだ、と言う風には思わないでくださいね。
補足
Q.必ずローカルの個別ファイルでスクリプトを試してから実装してください。 動くかどうかを確認するのは私がすることではありません。 質問者さまが事前に確認しておいて欲しいです。 作り方がわからない、エラーを解決できない、と言った内容で質問してください。 A.回答ありがとうございます、申し訳ありませんコードが間違っている前提でお聞きしておりました。 Q.私がクラス名にならったと言ったのでそのままクラス名を変数にされたのだと思いますが、多くのプログラム言語で - や空白は変数名に使えません。 A.回答ありがとうございます。覚えておきます、勉強になりました。 JSの変数やメソッドでは、camelCase で命名するのが慣例とのことで、以下のアドバイスを頂き案1でコードを全て修正してみました。 案2. 変数名ではなくプロパティ名として書く方法は難しそうで、プロパティ名は class ごとに分けるべきか、HTMLタグごとのみ分けるだけで良いのか分からず sample.js に一部だけ書いてみました。 ※最新コード https://wandbox.org/permlink/ncJsnAA8BEgkpAx5 ※頂いたアドバイス 案1. ローカル変数名をキャメルケースで書く 例) var divTitlePartialParts = 要素; divTitlePartialParts.append(子要素); 親要素.append(divTitlePartialParts); 案2. 変数名ではなくプロパティ名として書く 例) var div = {}; div["title-partial parts"] = 要素; div["title-partial parts"].append(子要素); 親要素.append(div["title-partial parts"]); Q.JavaScriptは以下のような処理をしていると思われます。 １．「const」があった、定数の宣言だ。 ２．「const」の次は定数名があるはずだ。 その定数名は「title」だ。（-で途切れる） ３．定数名の次は初期化子「=」があるはずだ。 あれ？「-」だよ、「=」じゃないからエラーにしよう。 A.解説ありがとうございます。エラーについて頭に入れておくようにします。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ 常に表示されている step_area についてコードを考えてみたのですが、間違えている部分はありますでしょうか？ 変数名をどうすべきか悩んで親、子、孫、ひ孫、やしゃごで命名してみました。コードを考えながら書いてみたところかなり大変だと感じております… ※該当HTML <div class="questionHeader-partial"> <h2><span class="fa-stack"><i class="fa fa-circle fa-stack-2x w-circle"></i> <i class="fa-stack-1x fa-inverse q">Q</i></span> <span class="q-text">質問する</span></h2> <div class="other_step"> <img src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step02.png" width="364" height="36" alt="STEP1 入力"> </div> </div> ※Javascripコード <script> const divQuestionHeaderPartial = document.createElement("div"); // div (親)を生成 divQuestionHeaderPartial.classList.add("questionHeader-partial"); // classの追加 child = document.createElement("h2"); // h2 (子)を生成 grandchild = document.createElement("span"); // span (孫)を生成 grandchild.class = "fa-stack"; // classの追加 greatGrandchildOldest = document.createElement("i"); // i (ひ孫一番目)を生成 greatGrandchildOldest.class = "fa fa-circle fa-stack-2x w-circle"; // classの追加 greatGrandchildSecondOldest = document.createElement("i"); // i (ひ孫二番目)を生成 greatGrandchildSecondOldest.class = "fa-stack-1x fa-inverse q"; // classの追加 greatGreatGrandchild.appendChild(document.createTextNode('Q')); //やしゃご要素として Text ノードを生成 grandchildSecond = document.createElement("span"); // span (孫二番目)を生成 childSecond = document.createElement("div"); // div (子)を生成 childSecond.class = "other_step"; // classの追加 grandchildThird = document.createElement("img"); // img (孫三番目)を生成 //属性の追加 grandchildThird.src = "http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step02.png"; grandchildThird.style.Height = "364px"; grandchildThird.style.Width = "36px"; grandchildThird.alt = "STEP1 入力" /*<h2><span class="fa-stack"><i class="fa fa-circle fa-stack-2x w-circle"></i> <i class="fa-stack-1x fa-inverse q">Q</i></span><span class="q-text">質問する</span></h2>まで*/ grandchild.appendChild(i); // grandchild (孫要素) の末尾に i を追加 h2.appendChild(grandchild); // h2 (子要素) の末尾に grandchild を追加 divQuestionHeaderPartial.appendChild(h2); // divQuestionHeaderPartial (親要素) の末尾に h2 を追加 /*<div class="other_step"> <img src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step02.png" width="364" height="36" alt="STEP1 入力"> </div>まで*/ div.appendChild(grandchildThird); // div (子要素) の末尾に grandchildThird を追加 divQuestionHeaderPartial.appendChild(div); // divQuestionHeaderPartial (親要素) の末尾に div を追加 </script>
- dell_OK
- ベストアンサー率13% (742/5653)
・confirm_area.appendChild(child); と div.appendChild(child); の違いも曖昧なのですが、 div.appendChild(child); は createElement() でHTML 要素を動的に生成する前のタグが div の時に使われるという認識で合ってますでしょうか？ 回答No.22を読んでいただければわかってくると思います。 すべてが単純な「親要素.appendChild(子要素)」です。 ですが、親要素がなんなのか、子要素がなんなのか、を理解する必要があります。 いきなりコードから始めたので理解が難しくなっていると思いますが、ＨＴＭＬから始めていたら難しさは軽減されていたと思います。 confirm_area.appendChild(child) 親要素はconfirm_area、子要素はchild、childはcreateElement()で作られた何かしらのタグ。 div.appendChild(child) 親要素はdiv、子要素はchild、childはcreateElement()で作られた何かしらのタグ。 言葉にすると違うのは親要素だけです。 子要素は、何かしらのタグ、なのでその内容はそれぞれで違う何かしら。 でも、やっていることは「親要素に子要素を追加」ただそれだけ。 なので、親要素がなんなのか、子要素がなんなのか、を理解すればいいのです。 コードから解釈せずに、ＨＴＭＬから解釈すれば、もっとわかりやすいはずです。 そのためにもＨＴＭＬを書いてもらいました。 －－－－ Ａ<div id="confirm_area" style="display: block;"> Ｂ <div class="board_form_partial" id="js_board_form_partial"> Ｃ <div class="questionHeader-partial"> Ｄ <div class="title-partial parts"> <!-- title-partial + parts --> 質問タイトルテスト </div> Ｅ <div class="stamp-partial"> －－－－ ＡとＢは親子、Ａが親、Ｂが子。 ＢとＣは親子、Ｂが親、Ｃが子。 ＣとＤは親子、Ｃが親、Ｄが子。 ＣとＥは親子、Ｃが親、Ｅが子。 ＤとＥは兄弟、Ｃが親。 親子とは階層でもあります。 前回、孫の話しまでしましたが、親子（階層が違う）、兄弟（階層が同じ）の関係を把握して、要素を追加していくようにすれば簡単になってくると思います。 上記の例で言うと、ＡＢＣを変数にして、elementA、elementB、elementCとかでもいいかも知れません。 ・sample.phpを修正してみたのですが、382行目と396行目が何故 confirm_area.appendChild(child); になるのか分からず悩んでおります… 質問の意味がわかりません。 382 confirm_area.appendChild(image_partial_div); // confirm_area の末尾に div を追加 396 div.appendChild(child); // div の末尾に child を追加 最新コードの396行目は div. のようですが、これを confirm_area. にしなければならないのか分からないと言うことでしょうか。 同じ説明を繰り返すことになるのでしませんが、ここまでの説明でだいぶわかってきているのではないでしょうか。 ・非同期通信でFont Awesomeアイコンを使う事は難しいでしょうか？ Font Awesomeがどのようなものは把握していませんが、難しいことではないと思います。 基本的なことはＨＴＭＬを生成するだけだと思います。 画像にする場合も同じくＨＴＭＬを生成するだけです。 どのようなＨＴＭＬを生成するかが違うだけで、どこで何をするかは同じだと思います。 ただ、「回答No.19の補足に書かせていただいた HTML に間違いがありました」で追加されたコードですが、これをその中に入れるのがいいかどうかを先に検討してみてください。 見た目で言うとですが、こうなっていきますよね。 ～～～～ 質問する 「ＳＴＥＰ１入力」 ＞ ＳＴＥＰ２確認 ＞ ＳＴＥＰ３完了 動画・画像をアップロード 名前 ～～～～ 確認する ＳＴＥＰ１入力 ＞ 「ＳＴＥＰ２確認」 ＞ ＳＴＥＰ３完了 動画・画像 名前 ～～～～ 完了 ＳＴＥＰ１入力 ＞ ＳＴＥＰ２確認 ＞ 「ＳＴＥＰ３完了」 動画・画像 名前 ～～～～ これをＨＴＭＬで書いてみると、こんなのをイメージされていますよね。 －－－－ <div id="input_area"> <h2>質問する</h2><div>｛ＳＴＥＰの表示｝</div> <div>動画・画像を～</div> <div>名前</div> </div> <div id="confirm_area"></div> <div id="result_area"></div> －－－－ <div id="input_area"></div> <div id="confirm_area"> <h2>確認する</h2><div>｛ＳＴＥＰの表示｝</div> <div>動画・画像</div> <div>名前</div> </div> <div id="result_area"></div> －－－－ <div id="input_area"></div> <div id="confirm_area"></div> <div id="result_area"> <h2>完了</h2><div>｛ＳＴＥＰの表示｝</div> <div>動画・画像</div> <div>名前</div> </div> －－－－ でもですよ、見た目はまったく同じですが、こんな風にもできます。 －－－－ <div id="step_area"> <h2>質問する</h2><div>｛ＳＴＥＰの表示｝</div> </div> <div id="input_area"> <div>動画・画像を～</div> <div>名前</div> </div> <div id="confirm_area"></div> <div id="result_area"></div> －－－－ <div id="step_area"> <h2>確認する</h2><div>｛ＳＴＥＰの表示｝</div> </div> <div id="input_area"></div> <div id="confirm_area"> <div>動画・画像</div> <div>名前</div> </div> <div id="result_area"></div> －－－－ <div id="step_area"> <h2>完了</h2><div>｛ＳＴＥＰの表示｝</div> </div> <div id="input_area"></div> <div id="confirm_area"></div> <div id="result_area"> <div>動画・画像</div> <div>名前</div> </div> －－－－ input_area、confirm_area、result_areaは表示非表示を切り替えていますが、step_areaは常に表示されている部分です。 その内容を変更するだけですので、createElement()などで生成や追加するよりも簡単になってきます。 変更するためにＩＤを付けるとこんな感じです。 －－－－ <div id="step_area"> <h2 id="step_title"></h2><div id="step_img"></div> </div> －－－－ スクリプトはこんな処理内容です。 document.getElementById("step_title").textContent = "確認する"; document.getElementById("step_img").～ = ～; Font Awesomeでも画像でも、～の部分をどうにかすることで実現できると思います。 実際はこんなに簡単な階層ではないかも知れませんが、正しいＨＴＭＬとなるよう要素タグを設定して、それぞれに必要な処理をすればいいと思います。
補足
Q.confirm_area.appendChild(child) 親要素はconfirm_area、子要素はchild、childはcreateElement()で作られた何かしらのタグ。 div.appendChild(child) 親要素はdiv、子要素はchild、childはcreateElement()で作られた何かしらのタグ。 A.回答ありがとうございます。覚えておきます。 －－－－ Ａ<div id="confirm_area" style="display: block;"> Ｂ <div class="board_form_partial" id="js_board_form_partial"> Ｃ <div class="questionHeader-partial"> Ｄ <div class="title-partial parts"> <!-- title-partial + parts --> 質問タイトルテスト </div> Ｅ <div class="stamp-partial"> －－－－ ＡとＢは親子、Ａが親、Ｂが子。 ＢとＣは親子、Ｂが親、Ｃが子。 ＣとＤは親子、Ｃが親、Ｄが子。 ＣとＥは親子、Ｃが親、Ｅが子。 ＤとＥは兄弟、Ｃが親。 A.解説ありがとうございます。とても分かりやすく理解することが出来ました。 Q.sample.phpを修正してみたのですが、382行目と396行目が何故 confirm_area.appendChild(child); になるのか分からず悩んでおります… A.回答ありがとうございます。説明を頂いて理解出来てきたのですが、sample.php の要素の関係性を見ると親はＡかＢどちらになるのでしょうか？Ｂの board_form_partial になるのではないかと考えております。 Ａ<div id="confirm_area" style="display: block;"> Ｂ <div class="board_form_partial" id="js_board_form_partial"> Q.Font Awesomeがどのようなものは把握していませんが、難しいことではないと思います。 基本的なことはＨＴＭＬを生成するだけだと思います。 画像にする場合も同じくＨＴＭＬを生成するだけです。 ただ、「回答No.19の補足に書かせていただいた HTML に間違いがありました」で追加されたコードですが、これをその中に入れるのがいいかどうかを先に検討してみてください。 スクリプトはこんな処理内容です。 document.getElementById("step_title").textContent = "確認する"; document.getElementById("step_img").～ = ～; Font Awesomeでも画像でも、～の部分をどうにかすることで実現できると思います。 A.アドバイスありがとうございます。Font Awesome は HTML でアイコンフォントを呼び出すものになります。 非同期通信に入れない方法もあるのではないかと考えていたのですが、Javascript で別途生成する方法もあるという認識で合ってますでしょうか？ ※参考サイト https://homeatlast.co.jp/font-awesome.html
- dell_OK
- ベストアンサー率13% (742/5653)
・質問➀についてコードを書いてみたのですが、classとidを同じ div で表示させたい場合 createElement は1つになると思うのですがどうすれば良いのでしょうか？ －－－－ // class const board_form_partial_div = document.createElement("div"); // classの追加 board_form_partial_div.classList.add("board_form_partial"); // idの追加 board_form_partial_div.id = 'js_board_form_partial_div'; －－－－ ・質問➁ createElement() で HTML 要素を動的に生成して、appendChild() で追加する場所を指定、appendChild(child) で子要素として追加という役割で合ってますでしょうか？ そうですね。 基本的には以下のような処理です。 子要素 = document.createElement("要素名") // 要素を生成 親要素.appendChild(子要素) // 要素を追加 ・pタグが必要ない場合削除してもよいのでしょうか…？ かまいませんが順番がおかしくならないようにしてください。 不安でしたらcreateElement()とappendChild()の練習をして使い方を自分のものにしてください。 例えば、以下のようにしたらどうなるとか。 子要素 = document.createElement("要素名") 孫要素 = document.createElement("要素名") 子要素.appendChild(孫要素) 親要素.appendChild(子要素) 兄弟要素 = document.createElement("要素名") 親要素.appendChild(兄弟要素) 子要素は親要素の中に、孫要素は子要素の中（階層が一段深くなる）に、兄弟要素は親要素の中でかつ子要素の次（同じ階層）に、みたいな解釈ができるようになればいいと思います。 手で作ったＨＴＭＬとスクリプトで生成したＨＴＭＬが同じになるようローカルで試してみてください。 私とてそれなりに理解していても何十回とそのように繰り返しています。 ・confirm_area.appendChild(child); // confirm_area の末尾に child を追加 についてのコードの意図が分からないのですが、pタグを追加する場合に必要なのでしょうか？ そのようなコードはないと思いますので、どこのことかわかりません。 pタグのところの話しでしたらそうでしょうね。 話しは少しそれますが、これらのことについての考え方を説明しておきます。 あくまで、私が思うに、なので本当のところは少し違うかも知れません。 質問者さまのひとつ前から抜粋です。 －－－－Ａ div = document.createElement("div"); child = document.createElement("p"); child.appendChild(document.createTextNode(namae_value)); div.appendChild(child); // div の末尾に child を追加 confirm_area.appendChild(div); // confirm_area の末尾に div を追加 －－－－ pタグに関するものがなくなると、これだけになります。 －－－－Ｂ div = document.createElement("div"); confirm_area.appendChild(div); // confirm_area の末尾に div を追加 －－－－ でも、name_valueを表示したいのでその処理が必要です。 どこに表示するのかと言うと div の中でしょうからこうなります。 －－－－Ｃ div = document.createElement("div"); div.appendChild(document.createTextNode(namae_value)); confirm_area.appendChild(div); // confirm_area の末尾に div を追加 －－－－ ＡとＣでは親要素が違います。 Ａ child.appendChild() Ｃ div.appendChild() Ａの真ん中の行を見てみましょう。 －－－－ child.appendChild(document.createTextNode(namae_value)); －－－－ これは生成した要素を変数に入れずに、直接追加しています。 divから見ると孫要素です。 ～～～～ <div> <p> namae_valueの値 </p> </div> ～～～～ 実際はテキストノードなので要素と呼ぶのは正しくはないかも知れませんが、親子孫の関係ためこの言葉で説明しておきます。 それで、pタグをなくしたい、ＨＴＭＬは以下のようなものだとします。 ～～～～ <div> namae_valueの値 </div> ～～～～ そうなると、Ｃの真ん中の行のように、親要素変数divにテキストノードを追加することになります。 －－－－ div.appendChild(document.createTextNode(namae_value)); －－－－ テキストノードを変数にしていない理由について。 もともとの参照サイトでそうなっていたのだと思いますが、おそらく、テキストノードにはその中にさらに要素などを追加することができない最小単位のものだからだと思います。 変数にする意味はそれを何度か使うことが主な役割なので、二度と使わないものは変数に入れる必要がありません。 例えばdivタグの中にdivタグを追加する場合はこれだけですみます。 －－－－ div.appendChild(document.createElement("div")); －－－－ ～～～～ <div> <div></div> </div> ～～～～ でもこれだけ作ってもあまり意味はないですよね。 内側のdivタグの中には何かしらが入っていて欲しいものです。 －－－－ child = document.createElement("div"); child.classList.add("classA"); child.id = "namae"; child.appendChild(document.createTextNode("なまえ")); div.appendChild(child); －－－－ ～～～～ <div> <div class="classA" id="namae"> なまえ </div> </div> ～～～～ こんな風に、要素に属性を追加したり、さらに要素を追加したりするには、変数childに対して複数の処理が必要になってくるわけです。 一方、テキストノードはただの文字（タグを含まない）で、その中に何も入れれず、二度と使わないので、直接追加しています。 もちろん変数に入れることもできます。 －－－－ child = document.createElement("div"); child.classList.add("classA"); child.id = "namae"; textnode = document.createTextNode("なまえ"); child.appendChild(textnode); div.appendChild(child); －－－－ これだけだと何の意味もありませんが、このように分解すると、１行が短くなって、どこになにを追加しているかがわかりやすくもなりますし、コーディングのルールも統一されます。 ただ、テキストノードは直接追加すると言うコーディングルールもありとは思います。
補足
Q.質問➀についてコードを書いてみたのですが、classとidを同じ div で表示させたい場合 createElement は1つになると思うのですがどうすれば良いのでしょうか？ A.回答ありがとうございます、勉強になりました。覚えておきます。 Q.質問➁ 基本的には以下のような処理です。 子要素 = document.createElement("要素名") // 要素を生成 親要素.appendChild(子要素) // 要素を追加 A.解説ありがとうございます。理解できました。 Q.pタグが必要ない場合削除してもよいのでしょうか…？ A.回答ありがとうございます、pタグは残しておいた方が分かりやすいのではないかと思いました。 Q.話しは少しそれますが、これらのことについての考え方を説明しておきます。 あくまで、私が思うに、なので本当のところは少し違うかも知れません。 A.解説ありがとうございます。コメントアウトでまとめてみました。 pタグあり －－－－Ａ div = document.createElement("div"); // div (子)を生成 child = document.createElement("p"); // p (孫)を生成 child.appendChild(document.createTextNode(namae_value)); //孫要素として Text ノードを生成 div.appendChild(child); // div の末尾に child (孫要素) を追加 confirm_area.appendChild(div); // confirm_area (親要素) の末尾に div を追加 －－－－ pタグなし name_valueなし －－－－Ｂ div = document.createElement("div"); // div (子)を生成 confirm_area.appendChild(div); // confirm_area (親要素) の末尾に div を追加 －－－－ pタグなし name_valueあり －－－－Ｃ div = document.createElement("div"); // div (子)を生成 div.appendChild(document.createTextNode(namae_value)); //子要素として Text ノードを生成 confirm_area.appendChild(div); // confirm_area (親要素) の末尾に div を追加 －－－－ ＡとＣでは親要素が違います。 Ａ child.appendChild() Ｃ div.appendChild() Q.おそらく、テキストノードにはその中にさらに要素などを追加することができない最小単位のものだからだと思います。 変数にする意味はそれを何度か使うことが主な役割なので、二度と使わないものは変数に入れる必要がありません。 分解すると、１行が短くなって、どこになにを追加しているかがわかりやすくもなりますし、コーディングのルールも統一されます。 ただ、テキストノードは直接追加すると言うコーディングルールもありとは思います。 A.回答ありがとうございます、二度と使わないものであれば変数にする必要はないからという理由でしっくりきました。 分解したほうがコードのミスは減り、後に見返した時に分かりやすいですね。 －－－－ A child = document.createElement("div"); // div (孫)を生成 child.classList.add("classA"); // classの追加 child.id = "namae"; // idの追加 child.appendChild(document.createTextNode("なまえ")); //孫要素として Text ノードを生成 div.appendChild(child); // div (子要素) の末尾に child を追加 －－－－ 変数に入れる場合 －－－－ B child = document.createElement("div"); // div (孫)を生成 child.classList.add("classA"); // classの追加 child.id = "namae"; // idの追加 textnode = document.createTextNode("なまえ"); //孫要素として Text ノードを生成 child.appendChild(textnode); // child (子要素) の末尾に textnode を追加 div.appendChild(child); // div (親要素) の末尾に child を追加 －－－－
- dell_OK
- ベストアンサー率13% (742/5653)
質問➀ 両方実装可能です。 質問の意図がわかりませんが、もともとそのように書かれていますよね。 質問➁ 記載されたコードの１行目と２行目は画像表示の箇所ではありません。 ３行目からが画像表示の処理です。 －－－－ div.appendChild(child); // div の末尾に child を追加 confirm_area.appendChild(div); // confirm_area の末尾に div を追加 div = document.createElement("div"); －－－－ 私のサンプルコードの作り方がかなりよくなかったようです。 質問➂のこととあわせて、画像表示の処理を書き直してみます。 汎用的な変数 div は使わないで、階層タグごとに個別の変数を作るようにしたので、どの要素がどの要素に追加されているかがわかりやすくなったと思います。 －－－－変更前 div = document.createElement("div"); for (const i in blobType) { if (blobType[i] != "") { child = null; if (blobType[i] == "img") { child = document.createElement("img"); } else if (blobType[i] == "video") { child = document.createElement("video"); child.setAttribute("controls", null); } else if (blobType[i] == "iframe") { child = document.createElement("iframe"); } if (child !== null) { child.style.maxHeight = "200px"; child.style.maxWidth = "200px"; child.src = blobUrl[i]; div.appendChild(child); } } } confirm_area.appendChild(div); // confirm_area の末尾に div を追加 －－－－変更後 const image_partial_div = document.createElement("div"); image_partial_div.classList.add("image-partial"); for (const i in blobType) { if (blobType[i] != "") { 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) { changeImg.classList.add("changeImg"); changeImg.style.maxHeight = "200px"; changeImg.style.maxWidth = "200px"; changeImg.src = blobUrl[i]; const image_camera_icon_div = document.createElement("div"); image_camera_icon_div.classList.add("image-camera-icon"); image_camera_icon_div.appendChild(changeImg); image_partial_div.appendChild(image_camera_icon_div); } } } confirm_area.appendChild(image_partial_div); // confirm_area の末尾に div を追加 －－－－ 質問➃ 参考サイトに書かれているとおりです。 elm.classList.add("className"); つまり、 要素.classList.add("クラス"); 他のところも汎用的な変数 div を使わないで、個別の変数で要素を作った方がわかりやすくなっていいかも知れません。
お礼
こちらが最新の質問になります。 confirm_area.appendChild(child); と div.appendChild(child); の違いも曖昧なのですが、 div.appendChild(child); は createElement() でHTML 要素を動的に生成する前のタグが div の時に使われるという認識で合ってますでしょうか？ sample.phpを修正してみたのですが、382行目と396行目が何故 confirm_area.appendChild(child); になるのか分からず悩んでおります… 回答No.19の補足に書かせていただいた HTML に間違いがありました申し訳ありません。下記コードでステップフロー画像も確認画面で表示させたいのですが、非同期通信でFont Awesomeアイコンを使う事は難しいでしょうか？ 画像にするべきか dell_ok さんにお聞きしたいです。 <div class="board_form_partial" id="js_board_form_partial"> <div class="questionHeader-partial"> <h2><span class="fa-stack"><i class="fa fa-circle fa-stack-2x w-circle"></i><i class="fa-stack-1x fa-inverse q">Q</i></span><span class="q-text">質問する</span></h2> <div class="other_step"> <img src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step02.png" width="364" height="36" alt="STEP1 入力"> </div> </div> ※表示したいHTML <div id="confirm_area" style="display: block;"> <div class="board_form_partial" id="js_board_form_partial"> <div class="questionHeader-partial"> <h2><span class="fa-stack"><i class="fa fa-circle fa-stack-2x w-circle"></i><i class="fa-stack-1x fa-inverse q">Q</i></span><span class="q-text">質問する</span></h2> <div class="other_step"> <img src="http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step02.png" width="364" height="36" alt="STEP1 入力"> </div> </div> <div class="title-partial parts"> <!-- title-partial + parts --> 質問タイトルテスト </div> <div class="stamp-partial"> <input type="radio" name="stamp" id="confirm_stamp" value="1"><label for="confirm_stamp"></label> </div> <div class="namae-partial parts"> <!-- title-partial + parts --> 名前テスト </div> <div class="body-partial parts"><!-- body-partial + parts --> コメントテスト </div> <div class="image-partial"> <div class="image-camera-icon"> <img src="http://www.irasuto.cfbx.jp/wp-content/uploads/camera.png" class="changeImg" style="height: 100px;"> </div> <div class="image-camera-icon"> <img src="http://www.irasuto.cfbx.jp/wp-content/uploads/camera.png" class="changeImg" style="height: 100px;"> </div> <div class="image-camera-icon"> <img src="http://www.irasuto.cfbx.jp/wp-content/uploads/camera.png" class="changeImg" style="height: 100px;"> </div> </div> <div class="post-button"><!-- ボタンを押せなくする --> <button type="button">入力画面へ戻る</button><button type="button" name="output">結果画面へ進む</button> </div> </div> </div> <!-- type、name、id、valueの順番 --> </div> </div> ※最新コード https://wandbox.org/permlink/5BfE7DyUtwCNWL2y
補足
解説ありがとうございます。 質問➀についてコードを書いてみたのですが、classとidを同じ div で表示させたい場合 createElement は1つになると思うのですがどうすれば良いのでしょうか？ // class const board_form_partial_div = document.createElement("div"); // classの追加 board_form_partial_div.classList.add("board_form_partial"); // id const js_board_form_partial_div = document.createElement('div'); // idの追加 js_board_form_partial_div.id = 'js_board_form_partial_div'; 質問➁ createElement() で HTML 要素を動的に生成して、appendChild() で追加する場所を指定、appendChild(child) で子要素として追加という役割で合ってますでしょうか？ 質問③④についての修正ありがとうございます。コードを参考に階層タグごとに個別の変数にしてみました。 上記と別に質問があるのですが、child = document.createElement("p"); は必須でしょうか？以前こちらのコードを消した際に順番がおかしくなった気がするのですが、pタグが必要ない場合削除してもよいのでしょうか…？ confirm_area.appendChild(child); // confirm_area の末尾に child を追加 についてのコードの意図が分からないのですが、pタグを追加する場合に必要なのでしょうか？
- dell_OK
- ベストアンサー率13% (742/5653)
最新コードを試して気づいたことを先に。 固定文字が表示されていました。 －－－－ child.appendChild(document.createTextNode('title_value')); ～ child.appendChild(document.createTextNode('namae_value')); ～ child.appendChild(document.createTextNode('question_value')); －－－－ 変数にしておいてください。 －－－－ child.appendChild(document.createTextNode(title_value)); ～ child.appendChild(document.createTextNode(namae_value)); ～ child.appendChild(document.createTextNode(question_value)); －－－－ いただいた質問については、のちほど回答させていただきます。
補足
回答ありがとうございます、修正いたしました。
- dell_OK
- ベストアンサー率13% (742/5653)
・移動させるだけで良いのでしょうか？ よくありません。 移動先がわずかにおかしいです。 まずはそうなるＨＴＭＬを書いてみてください。 それから、それを生成するcreateElementやappendChildを組み合わせてみてください。 ＨＴＭＬと生成コードはいきなり実装しないでください。 まずはローカルのデスクトップなどにhtmlファイルを用意して、 十分に試してみて成功したら実装してください。 ファイル名はinput.htmlとして以下のコードにしてください。 －－－－ <div id="confirm_area"></div> <script> const confirm_area = document.getElementById("confirm_area"); var namae_value = "なまえ"; var title_value = "たいとる"; var question_value = "しつもんぶん"; var stamp_value = "1"; confirm_area.textContent = ''; var div; var child; child = document.createElement("h2"); child.appendChild(document.createTextNode('確認画面')); confirm_area.appendChild(child); // confirm_area の末尾に child を追加 div = document.createElement("div"); child = document.createElement("p"); child.appendChild(document.createTextNode("質問タイトル：" + title_value)); div.appendChild(child); // div の末尾に child を追加 confirm_area.appendChild(div); // confirm_area の末尾に div を追加 div = document.createElement("div"); child = document.createElement("p"); child.appendChild(document.createTextNode("名前：" + namae_value)); div.appendChild(child); // div の末尾に child を追加 confirm_area.appendChild(div); // confirm_area の末尾に div を追加 div = document.createElement("div"); child = document.createElement("p"); child.appendChild(document.createTextNode("質問文：" + question_value)); div.appendChild(child); // div の末尾に child を追加 confirm_area.appendChild(div); // confirm_area の末尾に div を追加 div = document.createElement("div"); child = document.createElement("input"); child.type = "radio"; child.name = "stamp"; child.id = "confirm_stamp"; child.value = stamp_value; child.checked = true; div.appendChild(child); // div の末尾に child を追加 child = document.createElement("label"); child.htmlFor = "confirm_stamp"; div.appendChild(child); // div の末尾に child を追加 confirm_area.appendChild(div); // confirm_area の末尾に div を追加 </script> －－－－ それをブラウザで開いてElementsを確認するとこんな風になります。 －－－－ <div id="confirm_area"> <h2>確認画面</h2> <div> <p>質問タイトル：たいとる</p> </div> <div> <p>名前：なまえ</p> </div> <div> <p>質問文：しつもんぶん</p> </div> <div><input type="radio" name="stamp" id="confirm_stamp" value="1"><label for="confirm_stamp"></label></div> </div> －－－－ このできあがったＨＴＭＬを別のファイルconfirm.htmlに保存してブラウザで表示してみましょう。 そこまでできたら、スタンプ（ここではただのラジオボタンですが）がタイトルの右にくるように変更してみてください。 タイトルの右に表示する方法はたくさんあります。 質問者さまがいいと思う構成でＨＴＭＬを書きかえてください。 それをまたブラウザで確認して完成させてください。 そこまでできたら、今度は、そのＨＴＭＬが生成できるようにinput.htmlのスクリプトを変更してみてください。 それで正しく表示されたら、そのコードにならって、実装してみてください。
お礼
回答が遅くなってしまい申し訳ありません。
補足
アドバイスありがとうございます。ＨＴＭＬを書いてからJavascriptを書くように気を付けます。 下記 HTML を確認画面で表示したいのですが、複数分からないところがあり dell_ok さんにお聞きしたいです。 質問➀ <div class="board_form_partial" id="js_board_form_partial">で class と id を両方実装することは可能でしょうか？ 質問➁ <div class="image-partial"> <div class="image-camera-icon">を続けて実装したい場合、下記コードを2回連続で書くのでしょうか？ div.appendChild(child); // div の末尾に child を追加 confirm_area.appendChild(div); // confirm_area の末尾に div を追加 div = document.createElement("div"); 質問➂ <div class="image-camera-icon"> <img src="http://www.irasuto.cfbx.jp/wp-content/uploads/camera.png" class="changeImg" style="height: 100px;"> </div> 画像ごとに div を設定することは可能でしょうか？ 質問➃ 各 HTML に class名を追加したい場合どのように書けばよいのでしょうか…？ ※参考サイト https://eclair.blog/javascript-classlist-methods/ ※確認画面で表示したいHTML <div id="confirm_area" style="display: block;"> <div class="board_form_partial" id="js_board_form_partial"> <div class="questionHeader-partial"> <div class="title-partial parts"> <!-- title-partial + parts --> 質問タイトルテスト </div> <div class="stamp-partial"> <input type="radio" name="stamp" id="confirm_stamp" value="1"><label for="confirm_stamp"></label> </div> <div class="namae-partial parts"> <!-- title-partial + parts --> 名前テスト </div> <div class="body-partial parts"><!-- body-partial + parts --> コメントテスト </div> <div class="image-partial"> <div class="image-camera-icon"> <img src="http://www.irasuto.cfbx.jp/wp-content/uploads/camera.png" class="changeImg" style="height: 100px;"> </div> <div class="image-camera-icon"> <img src="http://www.irasuto.cfbx.jp/wp-content/uploads/camera.png" class="changeImg" style="height: 100px;"> </div> <div class="image-camera-icon"> <img src="http://www.irasuto.cfbx.jp/wp-content/uploads/camera.png" class="changeImg" style="height: 100px;"> </div> </div> <div class="post-button"><!-- ボタンを押せなくする --> <button type="button">入力画面へ戻る</button><button type="button" name="output">結果画面へ進む</button> </div> </div> </div> <!-- type、name、id、valueの順番 --> </div> </div> ※最新コード（sample.phpに実装したい HTML に合わせたJavascriptコードを書きました。） https://wandbox.org/permlink/fpNbi8XKCwBrBAAP
- dell_OK
- ベストアンサー率13% (742/5653)
・4行目のボタンを使用可能にするというのは非同期通信が完了後に５行目のボタンのクラスからwaitを削除（もとのボタンに戻ります）元のボタンとして送信→確認画面に切り替わるということでしょうか？ 切り替わるのはその後の処理です。 使用可にしているのは、確認画面から入力画面に戻る時に使用不可のままにならないようにするためです。 なので、戻る時に使用可にしてもいいのですが、コードが分離してしまうので、わかりやすい位置に入れました。
補足
解説ありがとうございます、理解出来ました。 確認画面の表示する順番を下記のように変更したいのですが、 スタンプ画像を表示するコード（bbs_quest_input.phpの322行目から333行目）を移動させたい場合、質問タイトルの下（bbs_quest_input.phpの314行目）に移動させるだけで良いのでしょうか？ タイトル スタンプ 名前 メッセージ 画像 ※最新コード https://wandbox.org/permlink/fXDPhFGfxgK4cqKp
- dell_OK
- ベストアンサー率13% (742/5653)
・名前 = $namae = 匿名 という認識なのですが、変数名に間違いがあるのでしょうか？ 質問者さまのコード（回答No.14の補足）は以下のようになっていたので訂正コードを書きました。 －－－－ if($name == ""){ $name = "匿名"; } －－－－
補足
回答ありがとうございます、勘違いしておりました申し訳ありません…
- dell_OK
- ベストアンサー率13% (742/5653)
・強制的にローディングを終了するというのが難しいのではないかと思っているのですが可能でしょうか？ ローディングはそのページが表示されるタイミングのことなので、ボタンが押された一時的な場面ではありません。 参考サイトを見ると、どちらも以下のようなイベント（タイミング）での話しです。 $(window).on('load' window.addEventListener('load' タイミングはボタンが押された時などで置きかえるような考え方もできますが、おそらくそのスタイルシートもあまりいいものではないような気がします。 ・ボタンの上に画像を重ねてレイアウトしておいて、状況に応じて一方（＝上になっている要素）の表示/非表示を制御する こちらの方が扱いやすそうな気はします。 ですが、そこまでしなくてもできます。 先日「ひと目でステータスが分かる送信ボタン」はタイミングが違う注意をしましたが、それだけのことですので、別々のタイミングでそれぞれの処理をするだけです。 まずは「クリックされた時」に適用するスタイルシートです。 円がくるくるまわっているように見えるものです。 参考サイトのスタイルシートをもとに最小限にしてみました。 もとのクラス名は「onclic」を「wait」にしました。 －－－－ <style> .wait { height: 40px; width: 40px; border-radius: 40px; border: 3px solid; border-color: #bbbbbb; border-left-color: #1ECD97; font-size: 0; animation: rotating 2s 0.25s linear infinite; } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> －－－－ 「クリックされた時」の処理です。 ２行目から４行目を追加してください。 ２行目：submit_buttonに要素を定義しています ３行目：ボタンが２度押しされないように使用不可にしています ４行目：ボタンのクラスにwaitを追加しています（くるくるまわるスタイルシートが反映されます） －－－－ const submit_button_click = function() { const submit_button = document.getElementById("submit_button"); submit_button.disabled = true; submit_button.classList.add('wait'); namae_value = ""; －－－－ 「非同期通信が完了して応答があった時」の処理です。 ４行目と５行目を追加してください。 ４行目：ボタンを使用可にしています ５行目：ボタンのクラスからwaitを削除しています（もとのボタンに戻ります） －－－－ //非同期通信 fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt) .then(response => { submit_button.disabled = false; submit_button.classList.remove('wait'); return response.json(); －－－－
補足
Q.ローディングはそのページが表示されるタイミングのことなので、ボタンが押された一時的な場面ではありません。 タイミングはボタンが押された時などで置きかえるような考え方もできますが、おそらくそのスタイルシートもあまりいいものではないような気がします。 ・ボタンの上に画像を重ねてレイアウトしておいて、状況に応じて一方（＝上になっている要素）の表示/非表示を制御する A.解説ありがとうございます。どちらの方法もコードが複雑になるのではないかと懸念しておりました。 Q.先日「ひと目でステータスが分かる送信ボタン」はタイミングが違う注意をしましたが、それだけのことですので、別々のタイミングでそれぞれの処理をするだけです。 A.回答ありがとうございます、ローディング画像が終わるタイミングと非同期通信が終わるタイミングで大きなずれが生じることが一番の問題点ではないかと考えておりました。 「非同期通信が完了して応答があった時」の処理です。 ４行目と５行目を追加してください。 ４行目：ボタンを使用可にしています ５行目：ボタンのクラスからwaitを削除しています（もとのボタンに戻ります） －－－－ //非同期通信 fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt) .then(response => { submit_button.disabled = false; submit_button.classList.remove('wait'); return response.json(); －－－－x A.コード修正ありがとうございます。1つ疑問があるのですが、4行目のボタンを使用可能にするというのは非同期通信が完了後に５行目のボタンのクラスからwaitを削除（もとのボタンに戻ります）元のボタンとして送信→確認画面に切り替わるということでしょうか？ ※最新コード https://wandbox.org/permlink/vn2Qhc7kaDWX3Jsk
関連するQ&A
- WordPressの質問（q10082875）の続
質問掲示板を作成しているのですがSQLでページの遷移がうまくいきません。 何か不足しているコードがあるのでしょうか？ ※該当コード echo '<input type="hidden" name="action" value="confirmationform">'; ※質問掲示板 https://wandbox.org/permlink/07uPWjVPmU6rwrVJ ※お問い合わせページ(遷移可能な元のコード) https://wandbox.org/permlink/8BiCLMilyhjCC2qp
- ベストアンサー
- PHP
- WordPressの質問（q10165331）の続
URLを連番にすべきかuuidにすべきか迷っているのですが、どちらが良いと思われますでしょうか？ 一連番号のIDを避けるべきなのであればメジャーなサイトはすべてランダム文字列になっているはずではないかという意見とURLが予測しやすいと攻撃しやすいという意見があるようです。 IDを付ける際にBase58を使う、N 進数の文字列を使うなどuuid意外にも色んな方法があるようで、どうすべきか分かりません、アドバイスお願い致します。 $url = home_url('質問表示画面?'.$row->ID); ※idをautoincrementしない方が良い理由 https://zenn.dev/praha/articles/3c84e3818891c3 ※ユーザIDを連番にしてURLに使っても問題ない https://teratail.com/questions/364664 https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11270700181 ※短縮URLの付け方 https://sousaku-memo.net/php-system/71 https://co.bsnws.net/article/256 ※htmlspecialcharsでIDをエスケープ http://lovee7.blog.fc2.com/blog-entry-34.html 質問一覧表示(single-que_list.php) 回答可能なページ(single-complete.php) <?php /* Template Name: que_list 固定ページ: 質問一覧画面 */ get_header(); $sql = 'SELECT * FROM sortable'; $query = $wpdb->prepare($sql); $rows = $wpdb->get_results($query); $upload_dir = wp_upload_dir(); foreach ($rows as $row) { $url = home_url('質問表示画面?'.$row->ID); $pattern = $upload_dir['basedir'].'/attach/'.$row->ID.'_0.*'; $files = glob($pattern); if (empty($files)) { $view = '<img src="ダミー画像パス">'; } else { $info = pathinfo($files[0]); $attach_url = $upload_dir['baseurl'].'/attach/'.$info['basename']; $ext = $info['extension']; switch ($ext) { case 'jpeg': case 'png': $view = '<img style="height: 50px;" src="'.$attach_url.'">'; break; case 'mp4': $view = '<video style="height: 50px;" src="'.$attach_url.'">'; break; case 'pdf': $view = '<iframe style="height: 50px;" src="'.$attach_url.'"></iframe>'; break; default: $view = ''; break; } } echo '<div><a href="'.$url.'">'.$row->unique_id; echo '<div>'.$row->namae.'</div>'; echo '<div>'.$view.'</div>'; echo '<div>'.mb_strimwidth($row->message, 0, 38, '･･･').'</div>'; echo '</a></div>'; } ?>
- ベストアンサー
- PHP
- WordPressの質問（q10103578）の続
下記のコードファイルにIDとスタンプを追加したいのですが、変数がセットされているか確認すべきかどうか知識不足もあり判断ができないためアドバイス頂いてから決めようと考えています。 宜しくお願い致します。 echo "ID:{$wpdb->insert_id}"; echo '<img class="selimg" src="'.$stamps[$stamp].'">'; ※現在のコード https://wandbox.org/permlink/rnlDqXMzNIOqimxW
- ベストアンサー
- PHP
- WordPressの質問（q10155839）の続
var_dump($row);で確認したところ登録結果画面と質問表示画面でNULLが表示されております。 コードをたどったところ質問表示画面の$sql = 'SELECT * FROM sortable WHERE URL=%s';で取得に失敗しているのではないかと考えたのですが、エラー原因は分かりますでしょうか？ ※データベースにURLは格納されております。 https://imgur.com/5RmSq2Y.jpg ※該当コード $url = substr($_SERVER['REQUEST_URI'], -36); $sql = 'SELECT * FROM sortable WHERE URL=%s'; $query = $wpdb->prepare($sql, $url); $rows = $wpdb->get_results($query); var_dump($row); if (empty($rows)) { echo '質問がみつかりません'; exit; } ________________________________________________________________________ Q.テーブルにカラムを追加して保存するようにしてみてください。 A.アドバイスありがとうございます、下記コードでIPアドレスは保存できるようですが、入力画面、確認画面、表示画面どのタイミングで追加すべきでしょうか？ $ip_address = $_SERVER["REMOTE_ADDR"]; //文字列形式から数値 に、数値から文字列形式に変換 $ip_long = ip2long($ip_address); -- ipアドレスのテーブル CREATE TABLE tbl_ips ( `ip` INT(10) NOT NULL ); $sql = "INSERT INTO tbl_ips ( ip ) VALUES ( INET_ATON( $ip ) );" Q.こんな感じになります。 メッセージの一部、については以前やったことがあると思いますので、$row->messageから取得するようにしてみてください。 A.アドバイスありがとうございます、メッセージの一部を取得というコードを考えてみました。1点質問があるのですが、<a href="'.$url.'"></a>を名前、画像、メッセージ全体に1つだけかけたい場合どのようなコードにすればよいのでしょうか？ －－－－ <?php /* Template Name: 質問一覧画面 */ get_header(); $sql = 'SELECT * FROM sortable'; $query = $wpdb->prepare($sql); $rows = $wpdb->get_results($query); $upload_dir = wp_upload_dir(); foreach ($rows as $row) { $url = home_url('質問表示画面?'.$row->URL); $pattern = $upload_dir['basedir'].'/attach/'.$row->ID.'_0.*'; $files = glob($pattern); if (empty($files)) { $view = '<img src="ダミー画像パス">'; } else { $info = pathinfo($files[0]); $attach_url = $upload_dir['baseurl'].'/attach/'.$info['basename']; $ext = $info['extension']; switch ($ext) { case 'jpeg': case 'png': $view = '<img style="height: 50px;" src="'.$attach_url.'">'; break; case 'mp4': $view = '<video style="height: 50px;" src="'.$attach_url.'">'; break; case 'pdf': $view = '<iframe style="height: 50px;" src="'.$attach_url.'"></iframe>'; break; default: $view = ''; break; } } echo '<div><a href="'.$url.'">'.$row->namae.'</a></div>'; echo '<div>'.$view.'</div>'; echo '<div>'.mb_strimwidth($row->message, 0, 38, "･･･").'</div>'; } －－－－ 昨日教えて頂いた質問掲示板 登録結果画面のタイトルから飛べるページをリンク先として考えておりました。 http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e7%99%bb%e9%8c%b2%e7%b5%90%e6%9e%9c%e7%94%bb%e9%9d%a2/
- ベストアンサー
- PHP
- WordPressの質問（q10124692）の続
https://wandbox.org/permlink/xgiSHSJPTNlBrtmO $mime_type から $ext を決めて、テンポラリファイルを $data に読み込めばPDFと動画にも適応できるようです。間違えていたらアドバイスお願い致します。 以前dell_okさんにバイナリーデータがどうしても必要だとお伝えしていたのですが、finfo_open（finfoクラス）はmime_typeを返すのに、拡張子では判断せずバイナリを読み込んでチェックするのでバイナリーのチェックは要らないようですね、申し訳ありません。 名前とメッセージはエラーチェックやtokenがあるためdell_okさんから教えて頂いたコードを使うように考えています。 アップロードファイルについてはおそらくこちらのコードを使うか参考に組み替える必要があると考えております。 //mime_typeを返すのに、拡張子では判断せずバイナリを読み込んでチェック //ファイルの種類を表示するために宣言 $finfo = new finfo(FILEINFO_MIME_TYPE); $mime_type = $finfo->file($path); if (FILE_EXT_PNG == $ext && 'image/png' == $mime_type) { } elseif (in_array($ext, [FILE_EXT_JPEG, '.jpg']) && 'image/jpeg' == $mime_type) { $ext = FILE_EXT_JPEG; } else { // バイナリー文字列確認 $contents = file_get_contents($path); if (FILE_EXT_PDF == $ext && 'application/pdf' == $mime_type) { } elseif (FILE_EXT_MP4 == $ext && 'video/mp4' == $mime_type) { } else { $ext = null; } } return $ext; if (isset($ext)) { $_SESSION['attach_name'][$key] = md5($data) . $ext; $_SESSION['attach_data'][$key] = $data; $_SESSION['attach_mime'][$key] = $mime_type; } else $err[] = '画像形式は png, jpg のみです。'; } } }
- ベストアンサー
- PHP
- WordPressの質問（q10145776）の続
不正なトークンと表示されるため、single-regist.phpから下記のコードを削除したのですが、そちらは問題ないでしょうか？ 送信時にトークンが必要だと思いますので、登録結果画面には必要ないのではないかと考えております。 //確認画面でデータが安全であることが確認された上で$_SESSIONを経由して画面遷移するが、登録結果画面へは不正アクセスできるから必須 if (empty($_SESSION['token']) || empty($_POST['token']) || $_SESSION['token'] !== $_POST['token']) { exit('不正トークン'); } ※single-regist.phpの11行目からトークンのコードになります https://wandbox.org/permlink/vCbUEZFcvQf2n1DK
- ベストアンサー
- PHP
- WordPressの質問（q10113307）の続
「保存するファイル名につかってはいけない」とのことなのですが、user_add_check.phpの<input type="hidden" name="image_name" value="<?= $user_image['name'] ?>">を使う事はアウトなようです。 自分なりに参考サイトを見て考えてみたのですが、$_SESSION['image']['data']が機能しているのか分からない状態です。 自信がないため2パターン考えてみました。 ※参考サイト https://qiita.com/ryouya3948/items/66294cb445663f2a9d95 user_add.php(要らないもの？) <h2>新規登録</h2> <form method="post" action="user_add_check.php" enctype="multipart/form-data"> <input type="text" name="name" class="user_name_input" placeholder="ユーザー名"> <input type="file" name="image" id="my_image" accept="image/*" multiple> <input class="btn btn-outline-info" type="button" onclick="history.back()" value="戻る"> <input class="btn btn-outline-dark" type="submit" value="登録"> </form> user_add_check.php(入力画面) <?php session_start(); //ファイルの内容を全て文字列に読み込む $_SESSION['userfile']['data'] = file_get_contents($_FILES['userfile']['tmp_name']); //アップロードされたファイルの種類を確認--送られてくる MIME タイプは信用できない--メッセージ全体を偽装できる $_SESSION['userfile']['type'] = exif_imagetype($_FILES['userfile']['tmp_name']); $_SESSION['userfile']['type'] = mime_content_type ($_FILES['userfile']['tmp_name'] ); //画像であるかどうかをexif_imagetype()を使って判別--画像のみ分ける必要があるのか不明 //$_SESSION['userfile']['type'] = exif_imagetype($_FILES['image']['tmp_name']); ?> <img src="image.php"> <form method="post" action="user_add_done.php"> <input type="hidden" name="name" value="<?= $user_name ?>"> <input type="hidden" name="image_name" value="<?= $user_image['name'] ?>"> <input type="button" class="btn btn-outline-info modal_close" onclick="history.back()" value="戻る"> <input type="submit" class="btn btn-outline-dark" value="OK"> </form> image.php(確認画面 バイナリーデータ確認) <?php $load_name = $ext session_start(); switch ($file_ext == $_SESSION['userfile']['type']) { case IMAGETYPE_JPEG: header('content-type: image/jpeg'); break; case IMAGETYPE_PNG: header('content-type: image/png'); break; case IMAGETYPE_GIF: header('content-type: image/gif'); break; case MIME_TYPE_PDF: header('content-type: application/pdf'); break; case MIME_TYPE_MP4: header('content-type: video/mp4'); break; } ?> <?php $load_name = $ext session_start(); switch ($file_ext == $_SESSION['userfile']['type']) { //jpegを表示 case IMAGETYPE_JPEG: header('content-type: image/jpeg'); echo $_SESSION['image']['data']; break; //pngを表示 case IMAGETYPE_PNG: header('content-type: image/png'); echo $_SESSION['image']['data']; break; //pdfを表示 case MIME_TYPE_PDF: header('content-type: application/pdf'); echo( substr( $_SESSION['image']['data'], 0, 5 ) ); break; //mp4を表示 case MIME_TYPE_MP4: header('content-type: video/mp4'); echo( substr( $_SESSION['image']['data'], 4, 4 ) ); break; } ?> ___________________________________________________________ image.php(確認画面 バイナリーデータ確認) <?php function get_file_ext($ext) { //MIMEタイプを取得 $finfo = finfo_open(FILEINFO_MIME_TYPE); $mime_type = finfo_file($finfo, $_SESSION['image']['data']);/*$GET['image']['data']*/ if (FILE_EXT_PNG == $ext && 'image/png' == $mime_type) { } elseif (in_array($ext, [FILE_EXT_JPEG, '.jpg']) && 'image/jpeg' == $mime_type) { $ext = FILE_EXT_JPEG; } else { // バイナリー文字列確認 $contents = file_get_contents($_SESSION['image']['data']); if (FILE_EXT_PDF == $ext && 'application/pdf' == $mime_type && '%PDF-' == substr($contents, 0, 5)) { } elseif (FILE_EXT_MP4 == $ext && 'video/mp4' == $mime_type && 'ftyp' == substr($contents, 4, 4)) { } else { $ext = null; } } return $ext; } ?> user_add_done.php(表示画面 保存拡張子) $_SESSION['image']これを使う //文字列をファイルに書き込む関数 file_put_contents('./image/',$_SESSION['image']);
- ベストアンサー
- PHP
- WordPressの質問（q10187929）の続
blob を使いファイルアップロード機能を考えてみたのですが、画像と動画をどのように識別させるのかが分かりませんでした。 データ URI 形式で表示する方法と、Blob URL で表示する方法の2種類があるようです。 Data URI で動画を表示する方法は対応ブラウザの関係で避けた方が良いと思っております。 アドバイスお願い致します。 ※blob.php にコードを追加いたしました。 ※最新コード https://wandbox.org/permlink/PSXWslcYugaPqtjK ※参考サイト https://mixltd.jp/blog/how_to_make_thumbnail_from_input_video/ https://lab.syncer.jp/Web/JavaScript/Snippet/17/ https://qiita.com/azu369yu/items/8998e1e1536a5acfb7b3
- ベストアンサー
- PHP
- WordPressの質問（q10245849）の続
回答が遅れてしまい申し訳ありません、こちらが最新の質問になります。 質問入力画面に画像をアップロードした場合と動画をアップロードした場合で大きさが変わってしまうのですが、統一することは可能でしょうか？ こちらは以前 dell_ok さんにお聞きした覚えがあり難しいとアドバイスを頂いた記憶があるのですが… 質問入力画面にファイルをアップロードする場合クリックして選択する方法だけでなくドラッグ＆ドロップも追加することは可能でしょうか？ ※最新コード https://wandbox.org/permlink/IM6IiiwxaS6eXwXY
- 受付中
- PHP
- WordPressの質問（q1023581）の続
回答が遅くなってしまい申し訳ありません… 確認画面で分からないところがあり、アドバイスお願い致します。 ➀アップロードされたファイルを表示画面と同じ大きさ（height: 350px; width: 528px;）で表示したい場合どうすれば良いでしょうか？ HTML を書き換えるコードの画像サイズを変更しても変化がないためどうすべきか悩んでおります。 ➁名前と画像アイコンの表示順を逆にしたいのですが、bbs_quest_input.php の452行目の divNamaePartialParts.appendChild(usericonImg); と 455行目の divNamaePartialParts.appendChild(child); コードで順番を変更させる方法が分からず教えて頂きたいです。 上記とは別の疑問になるのですが、質問文、質問タイトル、名前それぞれ残り1文字入力可能な状態で制限がかかってしまいます。 これは以内というコードになっているからでしょうか？何が原因となっているのか分からずアドバイス頂きたいです。 ※現在のコード https://wandbox.org/permlink/piR82q0rnnWvVphI ※確認ページ表示画面 https://imgur.com/AucGqLf.png ※質問掲示板 http://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/
- ベストアンサー
- PHP
お礼
こちらが最新の質問になります。 回答の期限が切れていることに気が付かず、申し訳ありません。 アドバイス宜しくお願い致します。 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 { }