はてなブログに「なぞなぞ認証」つきメールフォームを設置

はてなブログの個人営利利用が解禁されるにあたって、該当の人は連絡先を公開しなさいという話になった。いきさつはこちら。


はてなブログ個人営利利用ガイドライン(2019年10月1日施行) - はてなブログ ヘルプ

ガイドラインにはこうある。

はてなでは、下記のような利用をブログの個人営利利用と定義します。

  1. 記事やサイドバー、ヘッダ、フッタ、プロフィールページなどにブログ管理者が自身に収益が発生するよう設定した広告が挿入または記述されているもの。
    • アドネットワークによって配信されるバナーやテキスト広告
    • アフィリエイトASPとブログ管理者が契約して掲載するバナーやテキスト広告
    • ブログ管理者が独自に広告主と契約して掲載するバナーやテキスト広告
    • その他、ブログ作者に収益や特典が発生する紹介特典コードの掲載など

(以下略・強調は引用者による)

はてなブログ個人営利利用ガイドライン(2019年10月1日施行) - はてなブログ ヘルプ

このブログはあちこちに自分に収益が入る広告を載せているから、まさに「個人営利利用」にあたる。そして個人営利利用にあたるはてなブログは連絡先を明示しなさいとのこと。

連絡先の明示
  • 上記営利利用の定義4に相当する教育利用を除き、営利利用ブログには情報発信の主体を明らかにするため下記のいずれかの方法で運営者の連絡先を明示するものとします。
    • 自身でプライバシーポリシーを設けている場合、プライバシーポリシー内に記載
    • ブログのヘッダ、フッタ、サイドバー、プロフィールなど、どの記事からも確認できる箇所に記載
はてなブログ個人営利利用ガイドライン(2019年10月1日施行) - はてなブログ ヘルプ

それでは連絡先を載せよう。といいつつ、メールアドレスは以前から公開していた。ほらこちらに。

f:id:Imamura:20191013144906p:plain

プロフィールページの下の方にメールアドレスがそのまま載っている。ここは一応スパム対策をしてあるそうだ。運営からのお知らせはこちら。

プロフィールページの当該部分のソースは以下。

<script type="text/javascript">
<!--
  document.write('<a href="mai' + 'lto:\u0069\u006D\u0061\u0073\u0061\u0040(中略)">\u0069\u006D\u0061\u0073\u0061\u0040(中略)</a>');
-->
</script>

メールアドレスの部分がエスケープ化されていて、単純なクローラにはメールアドレスとわからないようになっている。しかしこのスパム対策が現在も有効かどうかはわからない。Googleフォームで連絡用フォームを作った。フォームには念のため、「なぞなぞ認証」のようなスパムよけもつけることにした。

ここから「https://docs.google.com/forms/u/0/」へ行くとフォーム一覧が表示される。

  1. 「連絡先情報」というテンプレートを使う。クリックする
    f:id:Imamura:20191013144910p:plain
  2. フォームの作成画面が表示される。最上部の「設定」をクリックする
    f:id:Imamura:20191013144913p:plain
  3. 「設定」ダイアログボックスが表示される。「メールアドレスを収集する」をオンにしてから「回答のコピーを送信」をオンにし、「常に表示」もオンにする
    f:id:Imamura:20191013144917p:plain
  4. 「プレゼンテーション」タブをクリックする。「確認メッセージ」欄に、フォームを送信したあとに表示するメッセージを入力する。ここでは「入力を受け付けました。送信内容のコピーをメールアドレスへお送りします。届かない場合はメールアドレスが間違っている可能性がありますので、お手数ですが再度ご入力ください。今村からは1~2日でご連絡差し上げます。」とした。「保存」をクリックする
    f:id:Imamura:20191013144921p:plain
  5. フォームの作成画面に戻る
    f:id:Imamura:20191013144925p:plain
  6. 「連絡先情報」と「フォームの説明」を入力する。ここでは「今村勇輔への連絡用フォーム」、「今村勇輔への連絡用フォームです。以下にご連絡先とご用件を入力してください。」とした
    f:id:Imamura:20191013144929p:plain
  7. メールアドレスの入力欄が重複しているので削除する。下のほうの「メールアドレス」と書かれている場所をクリックし、ゴミ箱アイコンをクリックする
    f:id:Imamura:20191013144933p:plain
  8. 「メールアドレス」が1つになった
    f:id:Imamura:20191013144938p:plain
  9. 同様にして「住所」も削除する
    f:id:Imamura:20191013144943p:plain
  10. 「電話番号」はスパムよけのメッセージの入力欄にする。「電話番号」と書かれている場所をクリックする
    f:id:Imamura:20191013144947p:plain
  11. 「電話番号」は「スパムよけのため、下に「せんべい」と入力してください」とする。右下の「必須」スライダーをオンにし、その右の「⁝」をクリック。「回答の検証」をクリックする
    f:id:Imamura:20191013144951p:plain
  12. 「数値」「次より大きい」「数値」「カスタムのエラーテキスト」が表示される
    f:id:Imamura:20191013144955p:plain
  13. 左端の「数値」は「正規表現」、「次より大きい」は「一致する」、左から3番目の「数値」は「せんべい」、「カスタムのエラーテキスト」は「お手数ですが「せんべい」と入力してください」にそれぞれ変更する(「せんべい」は好きな単語や文言で)
    f:id:Imamura:20191013144959p:plain
  14. 「スパムよけのため~」とその下の「コメント」を入れ替える。「コメント」のタイトル欄、「:::」が表示された状態で上へドラッグする
    f:id:Imamura:20191013145003p:plain
  15. 「コメント」と「スパムよけのため~」が入れ替わった
    f:id:Imamura:20191013145007p:plain
  16. 「コメント」を「ご用件」に変更し、右下の「必須」スライダーをオンにする。これで質問フォームは完成
    f:id:Imamura:20191013145011p:plain
  17. フォーム上部の「回答」タブをクリックして、その右にある「⁝」をクリックし「新しい回答についてのメール通知を受け取る」をクリックする。これでフォームが送信されると、Googleフォームを作成したアカウントへメールが届くようになる
    f:id:Imamura:20191013145016p:plain
  18. フォームへのリンクを取得するために「送信」ボタンをクリックする
    f:id:Imamura:20191013145020p:plain
  19. 「送信方法」のリンクマーク(「🔗」)をクリックし、右下の「コピー」をクリックすると、クリップボードにこのフォームのURLがコピーされる
    f:id:Imamura:20191013145024p:plain
  20. 試しにフォームへ入力してみる。クリップボードにコピーされたURLへアクセスし、適当に入力してみる。「スパムよけのため~」に「せんべい」以外を入力し、エラーメッセージが表示されることを確認する
    f:id:Imamura:20191013145028p:plain
  21. 「送信」ボタンをクリックして、確認メッセージが表示されることを確認する
    f:id:Imamura:20191013145034p:plain
  22. Googleフォームを作成したアカウントへ、回答があった旨メールが届くことを確認する
    f:id:Imamura:20191013145038p:plain
  23. フォームに入力したメールアドレスにはこのようなメールが届く
    f:id:Imamura:20191013145042p:plain
  24. 送信された内容はGoogleフォームの「回答」タブからも確認できる。「概要」は送信された内容の一覧
    f:id:Imamura:20191013145046p:plain
  25. 「個別」ボタンで各回答の内容を確認できる
    f:id:Imamura:20191013145050p:plain

あとはサイドバーのプロフィール欄にフォームへのリンクを書けばよい。

f:id:Imamura:20191013145055p:plain

プロフィールページのメールアドレスも非公開にして、その上にフォームへのリンクを書いた。

f:id:Imamura:20191013145100p:plain

関連リンク

Googleフォームに簡単なスパムよけをつけるアイデアは、以下を参考にさせていただきました。