ご質問時のURL記載について再度のお願いと「フォームボタン制御の方法」

個人的なお願いの内容と、技術的な内容をごちゃまぜでお送りいたします (ノ゚ェ゚)
大雑把で毎度すみません。

コメント送信時の注意

お手数おかけしますが、弊ブログコメント欄でのURL記載を必須にさせて頂きます。

いや前から必須ではあったんだけれども、古いブラウザあるいは古い端末からのコメントを制御できないという事情があるので、今後は全ての記事コメント欄に於いて

  • お名前(ハンドルネーム)
  • コメント送信者の所有ブログURL
  • コメント内容

この3つを 必須入力事項 にさせてください。これまでよりも厳しめに技術的制御を行うことにします。

理由はざっと以下の通りです。

  1. 質問該当テンプレートと実際に利用しているテンプレートのすり合わせ
  2. 現況確認

①はテンプレートに関するご質問に限定されます。テンプレートに関するご質問は、必ず質問該当テンプレートの専用記事でお願いします というのをお約束にさせてもらっています。まずは質問テンプレートが合っているかどうかの確認ですね。「Aテンプレートについての質問なのにBテンプレートのページにコメントしてしまったので話しが噛み合わない」といったケースもこれまでに何度かありました。まずは本当にテンプレートが合っているのかの確認が必要です。

また、テンプレートと関連の無い記事へのコメントもこれまで同様お控えくださいね。技術的な内容の記事の場合はコメント欄を参照される方も少なくありません。そういった自主性を重んじる方々が混乱してしまいますので、繰り返しになりますが テンプレート質問は該当テンプレート専用記事でのみ受付 でございます。

あとブログURL記載は「文句言いたいだけ」の方をブロックする意味も含みます。ですから当然 明らかにコメント送信者の所有サイトではないと思われるURLの場合は無視します。 そんなん付き合っとれるか無視無視 ( ゚Д゚)
GoogleやYahooトップのURL入れてくるとか、この(私の)ブログのURL入れてくるとか。そういうのもこれまで幾度かありました(笑)

②について、本当はこれをお願いしたい。
何か障害がある場合、それを目視確認できるページURLを記載してください。
そうは言ってもFC2ブログでは送信入力項目を増やすことができませんので、皆さんにお願いするしかありません。

例えば「これをやってみたけどおかしいので直し方を教えてほしい」といった場合。例え私の記事の指南通りにやっているとしても

  • 個人カスタマイズに起因している場合(バッティングや記述ミス 等)
  • 前後の内容にエラーがありそれが影響している場合
  • 指南通りにやっていると思いこんでいる場合

など総合的に見ないと原因の特定というのはできないので、「お前が作ったテンプレートなんだから検証できるだろ」と思うなかれ。そんなに単純なものでもないのです。なので 目で見ること、(記事やページ)全体のソースコードを確認すること がとても重要です。

現況を確認できるページが無い場合もあります。「これこれをやるとページレイアウトが崩れる」など見た目に明らかな悪影響が出ている場合は掲載したくはないですよね。お気持ちはわかります。わかりますが、原因と結果を見ないことにはどうしようもない (´・ω・`)
ですから例えば最もアクセス数が少ない記事とか、一番古い記事なんかを利用するのも一つの手です。最新記事よりは人の目に触れる可能性が低いのでやきもきしなくて済むかもしれません。もちろん一時的にパスワードを付けてもらっても構いません。とにかく私が目視できる環境を提供してください。

確認できるページがあるけれどもURLを記載しない、とかはホントちょっと困る ^^;
それは「あなたが自分の時間を使って探しなさいよ」と言っているのと同じ。1000記事とか2000記事とかある中から探すとか嘘やろ (;`ー´)o

コメント送信の制御

もしかすると同じ悩みをお持ちの方もいるかもなので、私が今後行う方法を掲載しておきます。必須箇所を入力しないとボタンが押せない というやつです。

動作サンプル

動作のサンプルなので簡単なデザインにしてあります。

導入フロー

STEP 1
HTMLの追加
  • 入力必須input要素へのhtml属性追加及び一部変更(任意)
  • ボタンへのhtml属性追加
STEP 2
CSSの追加

CSSは、テンプレートスタイルシートの最終に追加します。

STEP 3
JSの追加

JavaScript(JS)はテンプレートhtmlの </body> 直前に追加します。

サンプルhtmlはテンプレートのフォームデザインを一からやり直さなきゃいけないので、弊ブログ最新テンプレートの『OATH』をサンプルにします。弊ブログ提供のテンプレートは概ね似たような構成ですが、他製作者様についてはわかりません。ごめんなさい。

OATH - FC2ブログテンプレート

OATH - FC2ブログテンプレート

OATHテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

HTMLの追加

元のフォーム部位htmlは以下の通り。

<!-- /コメント投稿 -->
<div id="comment_wrap">
  <form class="comment_form" id="comment_form" name="comment_form" action="./" method="post">
    <div class="comment_form-inner">
      <input type="hidden" name="mode" value="regist">
      <input type="hidden" name=comment[no] value="<%pno>">
      <div class="division">
        <input class="half" id="name" type="text" name="comment[name]" value="<%cookie_name>" placeholder="<%template_name>">
        <input class="half" id="subject" type="text" name="comment[title]" placeholder="<%template_title>" value onblur="if(this.value == '') this.value='No title';" onfocus="if(this.value == 'No title') this.value='';">
      </div>
      <input class="apply" id="url" type="text" name="comment[url]" value="<%cookie_url>" placeholder="URL">
      <script src="<%template_comment_js>"></script>
      <textarea class="apply" id="comment" name="comment[body]" placeholder="<%template_body>"></textarea>
      <input class="half" id="password" type="password" name="comment[pass]" placeholder="<%template_password>">
      <div id="no-p">
        <input id="himitu" type="checkbox" name="comment[himitu]">
        <label id="secret-label" for="himitu"><%template_private_check></label>
      </div>
      <div class="division" id="form-btn">
        <button class="comment-submit" id="sendbtn" type="submit" form="comment_form" value="<%template_send>"><svg class="svg-stroke" role=img><use xlink:href="#svg-send-stroke"></use></svg><%template_send></button>
      </div>
    </div>
  </form>
</div>
<!-- /コメント投稿 ここまで -->

緑の行が3つあります。これが「必須入力」の候補です。それ以外のinputは必須にしてもあまり意味が無いのでこの3つに絞ります。

  1. 名前
  2. URL
  3. コメント内容

の3つです。必須にしたい要素に required を以下の要領で追加します。1つ目の「名前」をサンプルに利用します。

<input class="half" id="name" type="text" name="comment[name]" value="<%cookie_name>" placeholder="<%template_name>" required>

input要素 の開始タグの最終に required です。前の内容に 半角スペース をひとつ入れてrequired
全角スペースを利用しないよう注意。全角スペース入れたら即構文エラーです。

該当箇所を見つけづらい場合はそれぞれの name属性の値Ctrl + F 検索すると良いでしょう (エディターをお持ちの方はその限りでない)

名前なら comment[name]、URLなら comment[url]、コメント内容なら comment[body] といった具合です。

URLを必須にしたい場合はもうひと手間加えます。

<input class="apply" id="url" type="text" name="comment[url]" value="<%cookie_url>" placeholder="URL" required>

赤字の texturl に変更。

続いて今度は button要素 にも属性を追加します。

<button class="comment-submit" id="sendbtn" type="submit" form="comment_form" value="<%template_send>" disabled><svg class="svg-stroke" role=img><use xlink:href="#svg-send-stroke"></use></svg><%template_send></button>

こちらは required ではなく disabled なので注意。ボタンの初期状態を disabled(無効)にしておき、入力されたらdisabledを外してenabled(有効)化する、という方法です。なので、このボタンが無効状態である時のCSSを追加します。

CSSの追加

ボタンのid名がテンプレートによってまちまちだと思いますので、それぞれしっかりと調べてください。そして以下の要領でCSSを追加。

例) id名が sendbtn の場合

#sendbtn[disabled] {
  opacity: .2;/* 必ずしも必要ではありません, 不透明度の指定 */
  background: rgb(180,180,180);/* 無効時のボタン背景色 */
  color: rgb(150,150,150);/* 必ずしも必要ではありません, 視認性を確認の上調整 */
  cursor: default;
}

JSの追加

<!--comment_area-->
<script>
  const cForm = document.getElementById('comment_form');// コメントフォームのid
  const cButton = document.getElementById('sendbtn');// 送信ボタンのid
  cForm.addEventListener('input', update);
  function update() {
    const isRequired = cForm.checkValidity();
    if (isRequired) {
      cButton.disabled = false;
      return;
    } else {
      cButton.disabled = true;
    }
  }
</script>
<!--/comment_area-->

JSソースコードを圧縮する際は コメントアウトを削除 した上で行ってください。

コメントフォームのidは恐らくどのテンプレートでも comment_form ではないかと思います。FC2のシステム上のいくつかの動作と結びついているのでほぼこのidで固定のはず。仮に別のidが与えられている場合は逆にあまりよろしくないので製作者に問い合わせなどされると良いかもしれません。

送信ボタンのidはテンプレートによって異なります。私が提供しているものについてはほとんどが sendbtn となっています(もしかすると違うのもあるかも)が、導入前に確認を行ってください。送信ボタンが button要素 ではなく input要素 になっていることもありますが特に気にする必要はなく、この部位のid名さえわかればOKです。

また、コメント欄の無いページやコメント編集ページを対象外にするためにFC2独自変数を含めています。編集の場合は既に一旦送信をクリアしているので不要であろうという判断です。

この方法を取ると画面遷移することなく入力チェックができて便利かと思います。ただし個人設定で『コメントを投稿する際の確認画面/ 表示する』にしている場合は効果半減及びコメンテーターの手間が多くなりますので注意してください。

まとめ

時間の都合などがあり本来分けるべき内容を一つの記事にしてしまいました。すみませーん ( ̄∀ ̄;)

ご質問のある方、指南を仰ぎたい方は、質疑応答を円滑に進めるためのお願いごと にご理解とご協力を頂ければ幸いです :)

-
2023/01/14 (Sat) 13:03

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2023/01/14 (Sat) 13:10

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2023/01/14 (Sat) 18:48

To コメントクッキーの件 内緒さん

こんばんは ('0')/

ちょっと時間があまりなくてきちんとした検証はしていないので、恐らくこれではないか、というのを伝えますね。
コメントクッキー等の制御をするためのJSファイル
・ /comment.js
・ /blog_res.js
の2点が必須で自動で挿入される仕組みになっていますが、例として上げて頂いたみなさんのページにはこの必須2ファイルが出力されていません。
恐らくバリデータによる text/javascript への警告を避けるために何らかの処理を行っているのではないでしょうか。私が気がついたのはbody終了タグに半角スペースを意図的にひとつ混入させていますよね。FC2のシステムでは通常の
</body>
を見つけてその直前に挿入するようになっています。完全一致なので
</body >
は適用外になってしまいます。

なので通常の形式に戻し、一度動作を確認してみてください。

-----
もしこの予想が正しければ対処法がほしいだろうと思いますので記事を書きますね。夜中あるいは明日以降になるかと思います。めんどくさい場合はFC2のシステムを受け入れるのがまっとうなやり方かと思います ^^;

-
2023/01/14 (Sat) 19:45

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2023/01/14 (Sat) 21:42

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2023/01/14 (Sat) 23:03

To コメントクッキーの件 内緒さん②

はい。必須ファイルについてはその方法でもOKです。

送信ボタンの件は、JSを圧縮する際にコメントの削除を忘れているのが原因です。

× (一部抜粋)
const cForm=document.getElementById('comment_form');// コメントフォームのid const cButton 〜


const cForm = document.getElementById('comment_form');const cButton 〜

このタイプのコメントは改行が行われるまで // の後の内容をコメント扱いしますので、 cButtonのコンストラクタ以降もコメント化されてしまって機能を失っています。
2箇所のコメントアウトを削除した上で改めて圧縮を行ってくださいね。注意点として記事内にも追記しておきました。

-
2023/01/14 (Sat) 23:19

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2023/01/15 (Sun) 01:35

To コメントクッキーの件 内緒さん(完了のご報告)

やったー(笑)
body終了タグの件、上手い方法を思いつきましたね。
ともかく修正できて良かったです。お疲れ様でした :)

-
2023/01/27 (Fri) 14:58

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2023/02/26 (Sun) 12:17

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2023/02/26 (Sun) 17:52

To Driverの件 内緒さん

こんばんは ('0')/

どなたかのサイトとお間違いではないでしょうか。せっかくの感謝のお言葉ですから是非ご本人にお伝えくださいね :)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)