WordPressの質問（q10135525）の続

質問

名前に50文字で文字数制限を設けたいのですが、メッセージの500文字の文字数制限のコードとまとめるべきでしょうか？

※現在のデザイン
http://www.irasuto.cfbx.jp/%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%83%86%e3%82%b9%e3%83%88/

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

※single-index.php
const NAME_MAX_LENGTH = 50;

※single-input.php
<div id="name_partial"></div>

<script>
const name_partial = document.getElementById('name_partial');
name.addEventListener('input', contactForm);

contactForm();
function contactForm() {
const contactsignature = <?php echo NAME_MAX_LENGTH; ?> ;
const input = contactsignature - name.value.length;
if (input >= 0) {
name.innerHTML = 'あと<strong>' + input + '</strong>文字';
submit_button.disabled = name.value.length === 0;
} else {
name.innerHTML = '<strong class="err">' + -input + '</strong>文字超過しています';
submit_button.disabled = true;
}
}
</script>

回答No.39

dell_OK · ベストアンサー

No such file or directory
そのようなファイル、又はディレクトリはありません
home/vqnporqs/public_html/wp-content/uploads/attach/3_0.jpeg
attachディレクトリがないとか。

お礼

質問の期限が切れてしまいました、申し訳ありません。
下記のURLからアドバイスお願い致します。

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

補足

アドバイスありがとうございます、attachディレクトリを追加したところ表示することが出来ました。

不正なトークンと表示されるため、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

回答No.38

dell_OK

セッションの開始やヘッダ出力は single-index.php がやっているので、
single-regist.php からは削除してください。
－－－－削除箇所
session_start();
get_header();
－－－－

お礼

回答ありがとうございます、アドバイスよろしくお願い致します。

補足

どうしても不正トークンと表示されてしまうので、single-regist.php からトークンに関するコードを削除してみたところエラーが表示されておりました。
画像をデータベースに格納することに失敗しているようです…
single-regist.phpのトークンに関するコードは削除してもセキュリティ上問題ないのでしょうか…？

※一時的に削除したコード
////確認画面でデータが安全であることが確認された上で$_SESSIONを経由して画面遷移するが、登録結果画面へは不正アクセスできるから必須
if (empty($_SESSION['token']) || empty($_POST['token']) || $_SESSION['token'] !== $_POST['token']) {
exit('不正トークン');
}

※エラー文
Warning: file_put_contents(/home/vqnporqs/public_html/wp-content/uploads/attach/3_0.jpeg): failed to open stream: No such file or directory in /home/vqnporqs/public_html/wp-content/themes/sample_theme/single-regist.php on line 36

※確認コード
https://wandbox.org/permlink/X9uJNw2CA9gJbO86

※参考サイト
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf/

回答No.37

dell_OK

・disabledで押せなくなっているようです。

それでしたら、名前やコメントが未入力だからではないでしょうか。

お礼

こちらが最新の回答になります。横幅を指定したところ画像と動画で統一することが出来ました、申し訳ありません。

最終的に表示画面へ進むボタンを押してみたところ不正トークンと判断されエラーが起きている状態です…
HTMLを変更したことが原因かと思い戻してみたのですが、変わりませんでした。
何が原因として考えられますでしょうか？

※旧コードにHTMLを戻したもの
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf/

※HTMLを変更したもの
http://www.irasuto.cfbx.jp/blog/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf/

※変更したコード
if (child !== null) {
child.style.height = "220px";
child.style.width = "295px";
child.src = reader.result;
viewer[i].appendChild(child);
changeImg[i].classList.add('hideItems'); // もともとの画像を消す
}

補足

回答ありがとうございます、申し訳ありません。3分待ってみたところ確認画面へ進むことが出来ました。
今のところ15MBにしておこうと思います。

ファイルアップロードされた画像と動画についてお聞きしたいことがあるのですが、それぞれ高さを指定することは可能でしょうか？
2つ並べて表示したいと考えていて、220pxで指定したところ動画のみ大きく表示されてしまい、横幅が足りず並べることができませんでした…

※現在のファイル
https://wandbox.org/permlink/IE2CoYIII57iOn9Y

※該当コード
if (child !== null) {
child.style.height = "220px";
child.src = reader.result;
viewer[i].appendChild(child);
changeImg[i].classList.add('hideItems'); // もともとの画像を消す
}

回答No.36

dell_OK

・1,スタンプ画像の<label>スタンプ</label>を削除したうえで確認ページにスタンプを表示させることは可能でしょうか？

できません。
ラジオボタンとラベルがセットでスタンプ画像を表示するスタイルシートになっています。
別の方法でスタンプ画像を表示する方法もありますが、不具合の元になるのでおすすめしません。

・2,single-confirm.php（確認ページ）の44行目と53行目のHTMLとPHPが混ざるようにコードを書いているのですが、違和感があります書き方に問題はないでしょうか？

問題ありません。
いろいろな書き方がありますが、おそらくこれが一般的な書き方だと思います。

・single-input.phpのコードを15→20に変更しただけでは確認画面へ進むボタンが押せず、機能しませんでした。考えられる原因などありますでしょうか？

変更はそれだけでいいと思います。
私の方では同じコードで問題なく機能しています。

「確認画面へ進むボタンが押せず」と言うのはdisabledで押せないのですか、
それとも、押しても送信処理がされないのですか。

補足

Q.ラジオボタンとラベルがセットでスタンプ画像を表示するスタイルシートになっています。
別の方法でスタンプ画像を表示する方法もありますが、不具合の元になるのでおすすめしません。

A.回答ありがとうございます、コメントアウトをなくしてもとに戻すことに致します。

Q.問題ありません。
いろいろな書き方がありますが、おそらくこれが一般的な書き方だと思います。

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

Q.「確認画面へ進むボタンが押せず」と言うのはdisabledで押せないのですか、
それとも、押しても送信処理がされないのですか。

A.回答ありがとうございます、disabledで押せなくなっているようです。
20MBにコードを変更してみました。

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

※表示画面
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf/

回答No.35

dell_OK

・隠すためにはコードを消去する方法で良いのでしょうか？

はい。消去して大丈夫です。

お礼

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

確認ページのcssを変更するためにhtmlを変更しているのですが、変更した際に問題が起きてしまいdell_okさんにアドバイスを頂きたいのでよろしくお願い致します。

1,スタンプ画像の<label>スタンプ</label>を削除したうえで確認ページにスタンプを表示させることは可能でしょうか？本来は<label></label>を付けるべきだと思うのですが、名前とメッセージのクラスのHTMLを変更したため可能であればそちらに合わせたいと考えております。

2,single-confirm.php（確認ページ）の44行目と53行目のHTMLとPHPが混ざるようにコードを書いているのですが、違和感があります書き方に問題はないでしょうか？

//44行目
<h2>名前(name)：<?php echo $namae; ?></h2>
//53行目
<p class="firstlyText">内容(message)：<?php echo $message; ?></p>

3,アップロード可能なファイルの大きさを20mbでも試しておきたいのですが（解像度720pで1分30秒が20mb以内に収まるため）、single-input.phpのコードを15→20に変更しただけでは確認画面へ進むボタンが押せず、機能しませんでした。考えられる原因などありますでしょうか？

補足

回答ありがとうございます、コメントアウトに致しました。コメント送信後の登録結果画面（single-regist.php）のCSSまで先に書いてしまい、その後に雑談掲示板の閲覧者向けに同じコードを考えていこうと思っております。

https://wandbox.org/permlink/4jwtDXFj2ge2NSul

回答No.34

dell_OK

・attachdelは画像に対してどのような役割を担っているのでしょうか？

コードを参考にしたサイトに説明はなかったですか。
私が断言できませんが、見た感じですと。
アップロードファイルをクリアしたことを伝達するためのようです。
画面が進んだり戻ったりしてもアップロードファイルを保持するようセッションを使っていますよね。
なのでクリアボタンを押してアップロードファイルをクリアしただけではセッションに残ってしまいます。
送信された<input type="file">が空っぽなら削除されたとみなせばいいような気がするかも知れませんが、
確認画面から戻った時は<input type="file">は絶対に空っぽになります。
セキュリティの都合でファイルを設定することができません。
なので、空っぽなら削除とみなすことができないのです。
戻った時にはビューに画像などが表示されていますが、このデータはセッションからのものであり、<input type="file">とは無関係になってしまっています。

・viewerは※カメラ画像を消す処理の際に考えた役割では入力されたら表示する画像だったのですが、今回はどのような役割を持つのでしょうか？

同じです。
あとは戻った時にも表示するためのものでしょう。

・HTMLにchildというのが見当たらないのですが、どこから引っ張ってきたのでしょうか？

child = document.createElement("img");　とかで使っているでしょう。
前もって変数を定義しています。
そして対象外の場合はdocument.createElement()しませんのでnullのままです。
それで　if (child !== null) {　つまりnullでない場合にビューに表示するようにしています。

・こちらのコードはどのような意味になるのでしょうか？

アップロードファイルをクリアしています。
アップロードファイルにファイルは設定できませんが、クリアすることはできます。

・1というのはファイルの数を指しているのでしょうか？

先に説明した通り、アップロードファイルをクリアしたことを伝達するための値です。
1にはあまり意味はありません。
空っぽや0でなければだいたい大丈夫です。
これを使っているのは、single-index.phpです。
JavaScriptではdelと言う名前になっていますが、
const del = document.querySelectorAll('.attachdel');
ひとつ目の質問に戻りますが、
attachdelというクラスで、ＨＴＭＬをたどれば、
<input type="hidden" class="attachdel" name="attachdel[]">
つまり、PHPで扱っている名前はattachdel[]です。
if (empty($_POST['attachdel'][$i])) {　と言う処理につながります。

どれもいまさらな質問です。
このコードを導入した時点で疑問に感じて質問してくださればよかったです。
今後はなるべくコードを理解し、わからなければすぐ質問して理解して進むようにしてください。
後になると私が忘れてしまってまた同じことを考えたりしなくてはならなくて困ります。

補足

Q.アップロードファイルをクリアしたことを伝達するためのようです。
画面が進んだり戻ったりしてもアップロードファイルを保持するようセッションを使っていますよね。
なのでクリアボタンを押してアップロードファイルをクリアしただけではセッションに残ってしまいます。

A.説明ありがとうございます、セッションで考えると理解することができました。クリアに関するコードなんですね。

Q.child = document.createElement("img");　とかで使っているでしょう。
前もって変数を定義しています。

A.回答ありがとうございます、見落としておりました申し訳ありません。

Q.アップロードファイルをクリアしています。
アップロードファイルにファイルは設定できませんが、クリアすることはできます。

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

Q.attachdelというクラスで、ＨＴＭＬをたどれば、
<input type="hidden" class="attachdel" name="attachdel[]">
つまり、PHPで扱っている名前はattachdel[]です。
if (empty($_POST['attachdel'][$i])) {　と言う処理につながります。

A.説明ありがとうございます、1という数字を疑問に感じたのですが、元のコードの時点で質問させて頂くべきでした申し訳ありません。

1点重要なことを聞き忘れていたのですが、対象外のアップロードファイルをアップロードした際にアラートが2つ表示され文字列が返されるので、ファイルの詳細（application/octet-stream）の方は見えないようにしたいと考えております。

恐らく下記のコードで表示していただいた思うのですが、隠すためにはコードを消去する方法で良いのでしょうか？
alert(reader.result);

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

※表示画面
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf/

回答No.33

dell_OK

いただいたコードにカメラ画像を消す処理を入れてみました。

ＨＴＭＬ部変更箇所
カメラ画像にclassを追加しました。
clearボタンとviewerの順序を入れ替えました。
名前とコメントがふたつずつあったので上の方を削除しました。

ＪａｖａＳｃｒｉｐｔ部追加箇所
const changeImg = document.querySelectorAll('.changeImg'); // 入力されたら消す画像
changeImg[i].classList.add('hideItems'); // もともとの画像を消す
changeImg[i].classList.remove('hideItems');

こちらから差分を確認してください。
https://difff.jp/xjgkd.html

補足

修正ありがとうございます。
分からない点がありアドバイスお願い致します。

※修正いただいたコードにコメントを追加したもの
https://wandbox.org/permlink/WgVa9NXs22AHvKOo

1,attachdelは画像に対してどのような役割を担っているのでしょうか？

const del = document.querySelectorAll('.attachdel'); // ？

2,viewerは※カメラ画像を消す処理の際に考えた役割では入力されたら表示する画像だったのですが、今回はどのような役割を持つのでしょうか？
調べたところ、HTML要素の中身を変更だと何となく理解は出来たのですが、<input type="file" class="attach" name="attach[]" accept=".png, .jpg, .jpeg, .pdf, .mp4" style="display: none;">に直接設定されていないため画像に対して有効なものなのか疑問に思いました。

const viewer = document.querySelectorAll('.viewer'); // HTML要素の中身を変更？

※カメラ画像を消す処理のみのコード
https://wandbox.org/permlink/IiGoTx86t50FMeih

3,HTMLにchildというのが見当たらないのですが、どこから引っ張ってきたのでしょうか？

var child = null; // 何もないを意味する

4,こちらのコードはどのような意味になるのでしょうか？

attach[i].value = ""; // ?

5,1というのはファイルの数を指しているのでしょうか？

del[i].value = "1"; // ?

回答No.32

dell_OK

この合体前のコードには、以前作られたアップロードファイルの表示やクリアの処理がなくなっていますね。
文字数処理をやっている間になくなってしまったのでしょうか。

補足

申し訳ありません、元のコードに戻しました。
確認よろしくお願い致します。

※表示画面
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf/

※カメラ画像を消す処理を除いたコード
https://wandbox.org/permlink/3zTFgBEDDjXXGqmJ

回答No.31

dell_OK

合体させる前のコードはありますか。

補足

回答ありがとうございます、合体前のコードは下記になります。アドバイスよろしくお願い致します。

https://wandbox.org/permlink/AayWn5zB8sUkjaBr

回答No.30

dell_OK

・画像に設定されているclass="changeImg"がclass="hideItems"に切り替わり、cssで変更後の.hideItemsにdisplay: none;を指定することで画像が見えなくなることを想定していたのですが、認識の間違いがあるのでしょうか…？

認識はあっています。
ただ、指摘した点も残ったままですし、
他にも問題が期待通りに動作していません。
「※カメラ画像を消す処理のみのコード」を手直ししてみました。
これでひととおり動作すると思いますので確認してみてください。
コードも比較して、どこが変わったか確認しておいてください。
－－－－
<style>
.hideItems {
display: none;
}
</style>
<form method="post">
<div class="contents-selector-button">
<label>
<div class="viewFile">
<img src="img/camera.jpg" class="changeImg" style="height: 100px;">
</div>
<input type="file" class="inputFile hideItems" accept=".png, .jpg, .jpeg, .pdf, .mp4">
</label>
<button type="button" class="attachclear">clear</button>
</div>
<div class="contents-selector-button">
<label>
<div class="viewFile">
<img src="img/camera.jpg" class="changeImg" style="height: 100px;">
</div>
<input type="file" class="inputFile hideItems" accept=".png, .jpg, .jpeg, .pdf, .mp4">
</label>
<button type="button" class="attachclear">clear</button>
</div>
</form>
<script>
window.addEventListener('DOMContentLoaded', function () {
const inputFile = document.querySelectorAll('.inputFile'); // 入力される画像
const changeImg = document.querySelectorAll('.changeImg'); // 入力されたら消す画像
const viewFile = document.querySelectorAll('.viewFile'); // 入力されたら表示する画像
const fileHeight = "100px" // 置き換えた後のファイルの高さ
const resetButtons = document.querySelectorAll('.attachclear'); //押されたらファイルをリセットする
for (let i = 0; i <
changeImg.length; i++) {
inputFile[i].addEventListener(
'change', e => {
const fileDate = inputFile[i].files.item(0);
if (fileDate.size > 15 * 1024 * 1024) {
return alert('ファイルサイズが 15MBバイトを超えています');
}
const fileType = fileDate.type;
let
newElement;
if (['image/jpeg', "image/png"].includes(fileType)) {
newElement =
document.createElement('img');
} else if (fileType === 'video/mp4') {
newElement
= document.createElement('video');
newElement.controls = true;
} else if (fileType ===
'application/pdf') {
newElement = document.createElement("iframe");
} else {
return alert("対象外のファイルです");
}
changeImg[i].classList.add('hideItems'); // もともとの画像を消す
newElement.style.height = fileHeight;
newElement.src = URL.createObjectURL(fileDate);
viewFile[i].appendChild(newElement);
});
resetButtons[i].addEventListener(
'click', e => {
inputFile[i].value = "";
changeImg[i].classList.remove('hideItems');
const nextElement = changeImg[i].nextElementSibling; // changeImgの次の要素
if (nextElement) {
nextElement.remove();
}
});
}
});
</script>
－－－－

お礼

申し訳ありません、dell_okさんに修正いただいたコードのみで表示してみたところ上手く機能しておりました。

以前作成していたコードとカメラ画像を消す処理のみのコードを合体させた時に問題が発生しているようです…
クラスの構成を見直してみてJavascriptも名前メッセージのものを一時的に書かずに検証してみたのですが、何か原因として考えられるコードはありますでしょうか？

補足

修正ありがとうございます。ファイルのコードを修正してみたのですが、やはり機能していないようです…

※修正後のコード
https://wandbox.org/permlink/JHdo1hTt4ijSuMiY

※雑談掲示板ファイルアップロード
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf/

回答No.29

dell_OK

先日までのコードからは、
カメラ画像を消す方法を学べたと思っています。
元のコードはすでに完成寸前だったので、
コードをまるまる入れ替えるようなことはせず、
元のコードにカメラ画像を消す処理だけを付けてみてください。

補足

アドバイスありがとうございます。別々に考えていたのですが、アップロード機能のところは最終的に組み合わせる必要があるため上手く調節できないか考えておりました。
以前dell_okさんに公開していただいていたコードにclearボタンで値を消すコードがあり、そちらを参考にさせて頂いていたのですが、コードを組み替えるうちに分からなくなっている状態です…

下記のコードで画像に設定されているclass="changeImg"がclass="hideItems"に切り替わり、cssで変更後の.hideItemsにdisplay: none;を指定することで画像が見えなくなることを想定していたのですが、認識の間違いがあるのでしょうか…？

※カメラ画像のhtmlコード
<img src="<?php echo $camera_url; ?>" class="changeImg" style="display: none;">

※指定したcss
.hideItems {
display: none;
}

※クラスを追加する
changeImg[i].classList.add('hideItems'); // もともとの画像を消す

※カメラ画像を消す処理のみのコード
https://wandbox.org/permlink/IiGoTx86t50FMeih

※元のコード
https://wandbox.org/permlink/CBcBtRXxhcd2uaC0