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 のみです。';

}
}
}

回答No.61

dell_OK · ベストアンサー

・名前にも字数制限を50文字でメッセージと同じように設けたい場合1つの文にまとめることは可能でしょうか？

まとめると言うのは、メッセージと共通の処理にしたいと言うことでしょうか。

お礼

こちらが最新の質問になります。回答の期限が切れてしまったので、下記URLからアドバイスお願い致します。

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

補足

回答ありがとうございます、共通の処理にしたいと考えております。
名前は50文字でメッセージは500文字で字数制限を設けたいです。

回答No.60

dell_OK

・アップロードした際にカメラの画像を見えなくすることは可能でしょうか？

できるとは思います。
と言っても、アップロードではなく、ファイルを選択したあと、ですね。
でも、見えなくすると、ファイルを間違えてたりした場合に、違うファイルを選択する方法がなくなってしまいますよ。

補足

回答ありがとうございます、どうやら参考サイトではカメラの画像の上にcssで重ねていたようです。

position: relative;をカメラの画像に設定して、position: absolute;とtop: 0; left:0;をアップロードファイルに設定することで解決いたしました。

回答No.59

dell_OK

・goo質問とヤフー知恵袋ともに1文字目から字数制限まで送信ボタンに色が付き、0文字と字数制限が消えた場合色が消えております。

文字数うんぬんで考えているので難しくなっています。
ボタンが押せる時と押せない時で色が違うだけです。
JavaScriptではすでにボタンを押せるようにしたり押せないようにしているので、それ以外に何もしなくていいです。
スタイルシートで押せる時と押せない時の色を指定してください。
－－－－
<style>
#submit_button {
background-color: green;
}

#submit_button:disabled {
background-color: #444;
}
</style>
－－－－

お礼

質問が2点あるのでアドバイスお願い致します。
1点目は名前にも字数制限を50文字でメッセージと同じように設けたい場合1つの文にまとめることは可能でしょうか？
下記のように別途追加コードを考えてみたのですが、1まとめに出来るのではないかと考えております。

※現在のデザイン
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>

2点目はファイルアップロードについてになります。現在はカメラの画像を設置してそちらからファイルをアップロードする形になっているのですが、アップロードした際にカメラの画像を見えなくすることは可能でしょうか？昨日dell_okさんに教えて頂いたようにアップロードする前とした後でcssを切り替えるようなコードになるのでしょうか？

補足

アドバイスありがとうございます、cssを書いてみたところ色が変化致しました。

回答No.58

dell_OK

・ファイルのアップロードボタンが機能しなくなってしまったのですが原因が分かりません…

カメラ画像のクリックを有効にするには、
カメラ画像とアップロードボタンが<label>タグで括られている必要があります。

－－－－
<div class="image-camera-icon">
<label>
<img src="<?php echo $camera_url; ?>" style="height: 100px;">
<input type="file" class="attach" name="attach[]" accept=".png, .jpg, .jpeg, .pdf, .mp4" style="display: none;">
</label>
</div>
－－－－

補足

アドバイスありがとうございます、修正したところアップロード可能になりました。

回答No.57

dell_OK

・データベースから表示する際のコードデザインと同じものを閲覧者に表示させたい場合はコードを使いまわしできるように1つにまとめるような形になるのでしょうか？

質問を理解できていませんが、
どのようなものを表示させたいのかによると思います。
同じページを見るのであれば、使いまわしは関係なさそうですし、
具体的になってみないと判断できません。
最初から使いまわすことを考えてコーディングするのは重要ですが、
無理してそうすることはないと思います。
やってみて、たまたま同じか似たようなコードになったら、
使いまわす、と言うか、共通の処理にする感じになるかと。

補足

A.回答ありがとうございます、同じページを見せることにはなりそうです。先に入力ページと確認ページを作成してから考えてみます。

回答No.56

dell_OK

・ msg_partial.innerHTMLでinnerHTMLでdivタグを変更して、cssを切り替えたということでしょうか？

CSSを切り替えていると言う表現が正しいかどうかわかりませんが、
〇の部分（strongタグ）のスタイルシートをふたつ用意しています。
ひとつは通常のもので　<strong>〇</strong>　を表示し、
もうひとつはエラーのもので　<strong class="err">〇</strong>　を表示しています。
このclassありなしの違いでスタイルシートを使い分けています。

・スタンプ画像について同じようにコードを変更してみたのですが、どうしても表示されません…
lavelにcssが設定できないためそちらが原因のようです。

質問者さまのstyle.cssファイルはこちらを参照しているようです。
http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/css/style.css?ver=6.2.2

私の環境とは階層が違っています。

私のは　テーマ名/style.css　で、
質問者さまのは　テーマ名/css/style.css　です。

この階層のファイルに覚えがあるのでしたら、
こちらに書いてみてください。

お礼

ファイルのアップロードボタンが機能しなくなってしまったのですが原因が分かりません…
ファイルのアップロードは先頭に配置しております。

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

現在のコードがsingle-input.phpでdell_okさんのコードがsingle-input2.phpになります。
※該当コード
https://wandbox.org/permlink/uzGZfXmtinHpawr4

別件になるのですが、気になる機能があり可能であれば実装してみたいと考えております…
goo質問とヤフー知恵袋ともに1文字目から字数制限まで送信ボタンに色が付き、0文字と字数制限が消えた場合色が消えております。今日dell_okさんに教わったことを軸に考えると0～500文字までは色を付けることは出来そうなのですがこの場合0文字目も含まれてしまいます。

Javascriptの処理を増やすことで速度に問題が生まれるのではないかという懸念と、コードが難しくなるのではないかという懸念があります。
こちらの機能についてご意見をお聞きしたいです。

※確認するボタンコード
<div class="post-button"><!-- ボタンを押せなくする -->
<button type="submit" id="submit_button" name="mode" value="confirm">確認画面へ進む</button>
</div>

※0～500文字までに確認するボタンに色を付ける
<style>
#submit_button strong {
color: #444;
}

#submit_button span strong err {
color: green;
}
</style>

function lengthCheck() {
const maxLength = <?php echo MESSAGE_MAX_LENGTH; ?> ;
const left = maxLength - message.value.length;
if (left >= 0) {
msg_partial.innerHTML = 'あと<strong>' + left + '</strong>文字';
　　　　　　 //ここに追加
　　　　　　 submit_button.innerHTML = <button>' + 確認画面へ進む + '</button>';
submit_button.disabled = message.value.length === 0;
} else {
msg_partial.innerHTML = '<strong class="err">' + -left + '</strong>文字超過しています';
　　　　　　 //ここに追加
　　　　　　 submit_button.innerHTML = <button class="err">' + 確認画面へ進む + '</button>';
submit_button.disabled = true;
}
}

補足

A.説明ありがとうございます、理解できました。
スタンプ画像の階層を直したところ表示されました、申し訳ありません。

1つお聞きしたいのですが、データベースから表示する際のコードデザインと同じものを閲覧者に表示させたい場合はコードを使いまわしできるように1つにまとめるような形になるのでしょうか？

回答No.55

dell_OK

・画像ファイルを変更いたしました。

ありがとうございます。
すべての画像が見えるようになりました。

画像の寸法は統一されていないのですね。
正方形でないものが、連続フィルムのように繰り返されてしまうようです。
繰り返されないようにするのは簡単なので、それだけ直しておきます。

ただ、寸法の異なるスタンプ画像がならんでいるのは不自然な気がします。

補足

回答ありがとうございます、画像の寸法はそろえる予定で考えております。

回答No.54

dell_OK

こんな感じでどうでしょうか。

http://oksample.starfree.jp/wp/single/

－－－－
<style>
#msg_partial {
color: #444;
}

#msg_partial strong {
color: #333;
}

#msg_partial strong.err {
color: red;
}
</style>
<div id="msg_partial"></div>
－－－－
if (left >= 0) {
msg_partial.innerHTML = 'あと<strong>' + left + '</strong>文字';
submit_button.disabled = message.value.length === 0;
} else {
msg_partial.innerHTML = '<strong class="err">' + -left + '</strong>文字超過しています';
submit_button.disabled = true;
}
－－－－

補足

修正ありがとうございます、理想の形です。
msg_partial.innerHTMLでinnerHTMLでdivタグを変更して、cssを切り替えたということでしょうか？

スタンプ画像についてdell_okさんと同じようにコードを変更してみたのですが、どうしても表示されません…
lavelにcssが設定できないためそちらが原因のようです。

回答No.53

dell_OK

・文字数だけ赤にした方が目に留まるかと実際使っていた際に感じたのです

なるほど。
私が誤解していました。
「あと〇文字」の方も赤いのかと思っていました。
知恵袋が何色なのかわかりませんが、適当に黒系の色にしてみます。

回答No.52

dell_OK

文字数のみ赤くしたサンプルをアップロードしているので見てください。

スタンプ画像に質問者さまの画像を参照するようにしてみたのですが、ふたつしか表示されないので、画像ファイルがあるか確認していただけると助かります。

補足

修正ありがとうございます。画像ファイルを変更いたしました。

回答No.51

dell_OK

・昨日成されていたコードを試してみたのですが、文字数のカウントが表示されなくなってしまいました。原因は分かりますでしょうか？

私のサンプルを使うには差分を見て取り込む必要があります。

single-index.phpに以下の真ん中の行を追加してください。
－－－－
get_header();
const MESSAGE_MAX_LENGTH = 500;
$noindexaccess = true;
－－－－

私のサンプルではPHPでも文字数チェックをしているので、
最大文字数をPHPとJavaScriptの両方で共通して使うためのものです。

JavaScriptの方では以下のようにして、この最大文字数を定数に設定しています。
const maxLength = <?php echo MESSAGE_MAX_LENGTH; ?> ;

質問者さまの場合は　500　ですが、
私のサンプルは　20　です。
この値を一か所を直すだけで両方に反映されます。
これがどう便利かと言うと、
動作確認のテスト中に５００文字も入力するのは面倒ですが、
この値を小さくしておけばテストが楽になります。

・入力フォームのメッセージで〇に入る数字のみ赤で表示させるようにすることは可能でしょうか？

可能ですが、そのようなことをしてもあまり意味がないのでおすすめできません。
いまの方がいいと思います。

一般的に赤色は警告として人間が感じています。
あと〇文字　に警告感を出すと常に警告されることになります。
そうすると　〇文字超過しています　の警告感が薄れることになります。

質問者さまが体感してみてそれほどでもないと思えば実装してみてください。
スタイルシートは　style.css　に書いた方がいいとは思いますので、
のちのちそうしていただくとして、とりあえずその要素の近くに書くことにします。
－－－－
<style>
#msg_partial {
color: #444;
}

#msg_partial span {
color: red;
}
</style>
<div id="msg_partial"></div>
－－－－
if (left >= 0) {
msg_partial.innerHTML = 'あと<span>' + left + '</span>文字';
submit_button.disabled = message.value.length === 0;
} else {
msg_partial.innerHTML = '<span>' + -left + '</span>文字超過しています';
submit_button.disabled = true;
}
－－－－

補足

Q.私のサンプルではPHPでも文字数チェックをしているので、
最大文字数をPHPとJavaScriptの両方で共通して使うためのものです。

JavaScriptの方では以下のようにして、この最大文字数を定数に設定しています。
const maxLength = <?php echo MESSAGE_MAX_LENGTH; ?> ;

A.回答ありがとうございます、表示することが出来ました。なるほど両方でチェックしているんですね。

Q.一般的に赤色は警告として人間が感じています。
あと〇文字　に警告感を出すと常に警告されることになります。
そうすると　〇文字超過しています　の警告感が薄れることになります。

A.アドバイスありがとうございます、ヤフー知恵袋のように文字数だけ赤にした方が目に留まるかと実際使っていた際に感じたのですが…
すべて同じ色で表示させてしまうと見落としてしまう気がしていました。