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

コメント送信時の注意

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コメント送信の制御

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

動作サンプル

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

導入フロー

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

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

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

vanillaice000.blog.fc2.com

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>

赤字の text を url に変更。

続いて今度は 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独自変数を含めています。編集の場合は既に一旦送信をクリアしているので不要であろうという判断です。

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

まとめ

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

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