お問い合わせフォームで入力する際
入力エリアをクリックすると入力履歴が出てきます。
住所の入力など長いものは入力の手間が省けてとても便利な半面。
この機能を使った、手作業（ロボットではなく）でのスパム攻撃（ロボットに比べると件数は少ない）と思われることがあり、オートコンプリート機能をオフにすることがあったのでメモ。
HTMLでformタグやinputタグに以下のタグを設定するとオートコンプリート機能はオフ（無効化）されます。
<input type="text" autocomplete="off">ただし、Chromeはコレではオフになりません。
ネットで調べると色々なやり方が書かれていますが、どれも今回のスパム対策には向かないため
いろいろ試しましたが、この方法だとChromeでも無効化することができました。
<input type="text" autocomplete="-">オートコンプリート機能がオフになることでスパム（嫌がらせ）がゼロになるわけではないですが、手入力の場合、時間がかかるのでコレで攻撃者の手を煩わせ、被害も軽減するかもしれません。
ファビコンの設置はファビコンファイル以外にも
スマホ用のアイコンと一部Androidで表示出来ない場合があるためAndroid用のアイコンの
ファイルとしては3つを最低限準備します。
解像度としては、16×16、32×32、180×180、192×192の4つになります。
favicon用・・・favicon.ico
スマホ用（iOS）・・・apple-touch-icon-180×180.png
Android用・・・android-touch-icon-192×192.png
<link rel="icon" href="/favicon.ico" id="favicon">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-touch-icon-192x192.png">もっと厳密に設置したい方はコリスの紹介方法を参考に設置するのが良いかと思います。
https://coliss.com/articles/build-websites/operation/work/how-to-favicon.html
HTMLテンプレートにもデフォルトで入れておくと便利です。
https://www.uki213.com/memo/html-template/
参考：https://blog.senseshare.jp/favicon.html
https://keywordfinder.jp/blog/seo/favicon/
SNSシェアボタンの設置方法です。
Twitter、Facebook、LINE、noteのシェア方法の紹介になります。
SNSシェアボタンは、URLのコピーボタンも一緒に並べると利便性が高くなるのでこちらのページも併せて確認しておくと良いでしょう。
Twitterシェアボタンを設置する方法は
以下のコードを設置してください。
<a href="https://twitter.com/share?url=【シェアするURL】" target="_blank">Twitterでシェアする</a>【シェアするURL】をシェアしたいサイトのURLにしてください。
TwitterにはURL以外にも、以下のようなパラメータもあります。
| パラメータ | 説明 |
|---|---|
| text | デフォルトで入れておくテキストの設定です。 ページのタイトルを入れるのが良いでしょう。 |
| via | 「@◯◯さんから」という表示を追加できる項目です。 公式アカウントがあれば、そのidを設定しましょう。 |
| related | ツイート後に、フォローを促したいアカウントがある場合に設定する項目です。 公式アカウントがあれば、そのidを設定しましょう。 |
| hashtags | ハッシュタグを付けられる項目です。カンマ区切りで複数設定できます。 |
パラメータを追加すると以下のようになります。
全部のパラメータを追加しても良いですし、一部の追加でも良いです。
<a href="https://twitter.com/share?url=【シェアするURL】&text=【ツイートしたいテキスト】&via=【ツイート内に含むユーザ名】&related=【ツイート後に表示されるユーザー】&hashtags=【ハッシュタグ】" target="_blank">Twitterでシェアする</a>Facebookシェアボタンを設置する方法は
以下のコードを設置してください。
<a href="https://www.facebook.com/share.php?u=【シェアするURL】" target="_blank">Facebookでシェアする</a>【シェアするURL】をシェアしたいサイトのURLにしてください。
LINEシェアボタンを設置する方法は
以下のコードを設置してください。
<a href="https://social-plugins.line.me/lineit/share?url=【シェアするURL】" target="_blank">LINEでシェアする</a>【シェアするURL】をシェアしたいサイトのURLにしてください。
「noteで書く」ボタンを設置する方法は
以下のコードを設置してください。
<a href="https://note.com/intent/post?url=【シェアするURL】" target="_blank">noteで書く</a>【シェアするURL】をシェアしたいサイトのURLにしてください。
参考：https://www.help-note.com/hc/ja/articles/360000272622–noteで書く-ボタン
https://www.gaji.jp/blog/2022/06/10/10057/
https://webdesign-trends.net/entry/3632
Googleフォーム連携した静的なHTMLに
reCAPTCHAを設置する方法です。
※この設定では、よくあるオリジナルの完了画面へのリダイレクトが出来ないかも…
reCAPTCHAのバージョンはV2での実装方法になります。
reCAPTCHA公式サイトよりV2でそれぞれサイトキーとシークレットキーを発行します。
必要な項目のinputタグを設定し、entry.0000000など該当する値に変えます。
formタグのactionは認証が完了したらPHP内に記述されたURLへ送信するのでhtmlへの直接的な記述は不要です。
<form name="gr_form">
名前：<input type="text" name="entry.0000000" value="" placeholder="山田太郎"><br>
メールアドレス：<input type="text" name="entry.0000000" value="" placeholder="メールアドレス"><br>
<div id="gr_checkbox"></div>
<input type="button" value="送信" disabled="disabled" id="gr_submit" onclick="trySubmit();" />
</form>#gr_checkboxがreCAPTCHA自体の表示に関するCSS、#gr_submit:disabledはreCAPTCHA認証前の送信ボタン（非活性）のCSSです。
#gr_checkbox {
display: table;
margin: 10px auto;
}
#gr_submit:disabled {
pointer-events: none;
opacity: 0.5;
}最初に発行したサイトキーをxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxに記述します。
22行目の./gr_check.phpは設置場所に合わせてパスを修正してください。（同じ階層の場合はこのままで可）
<script src="https://www.google.com/recaptcha/api.js?onload=grOnloadCallback&render=explicit" async defer></script>
<script type="text/javascript">
var grOnloadCallback = function() {
grecaptcha.render('gr_checkbox', {
'sitekey' : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
'callback' : grCallback,
'expired-callback' : grExpiredCallback
});
};
var grCallback = function(response) {
document.getElementById('gr_submit').removeAttribute('disabled');
};
var grExpiredCallback = function(response) {
document.getElementById('gr_submit').setAttribute('disabled', 'disabled');
};
var trySubmit = function() {
if( document.gr_form.reportValidity() ) {
var xhr = new XMLHttpRequest();
xhr.open('POST', './gr_check.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
if('' != xhr.responseText) {
document.gr_form.action = xhr.responseText;
document.gr_form.method = 'POST';
document.gr_form.submit();
}
}
}
var gr_response = document.getElementById('g-recaptcha-response').value;
xhr.send('response=' + gr_response);
}
}
</script>最初に発行したシークレットキーをxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxに記述し、
https://docs.google.com/forms/u/0/d/e/zzzzzzzzzz/formResponseを該当する値に変え、
ファイル名をgr_check.phpにして下記のコードを記述し保存します。
<?php
$token = $_POST['response'];
if($token) {
$url = 'https://www.google.com/recaptcha/api/siteverify';
$secret_key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$response = file_get_contents("{$url}?secret={$secret_key}&response={$token}");
$json = json_decode($response, true);
if($json['success'] == 'true') {
echo 'https://docs.google.com/forms/u/0/d/e/zzzzzzzzzz/formResponse';
}
}
?>AMPページのcanonicalタグは
本体ページと対になるように以下のように記述します。
canonicalタグのURLは必ず絶対パスで記述します。
// 本体のページ
<head>
<link rel="canonical" href="https://uki213.com/sample/">
<link rel="amphtml" href="https://uki213.com/sample/amp/">
</head>// AMPページ
<head>
<link rel="canonical" href="https://uki213.com/sample/">
</head>inputフォームにtype="datetime-local"を設定すると
カレンダー形式で日時を入力出来るようになります。
<input type="datetime-local">
最小値min="YYYY-MM-DDThh:mm:ss"や
最大値max="YYYY-MM-DDThh:mm:ss"など指定できる属性もあるので
最小値の指定は過去を選択できないように出来たり、
最大値は来月以降や来年以降など誤って遠い将来の指定してしまう入力ミス防止の為などの指定も出来ます。
2023.01現在だとiOSでも問題なく使える（Mac環境のChrome可・Safari不可）ので、状況を選べば複雑なJSのフレームワークなど使用しなくてもカレンダー形式の入力を実現でき、入力方法を便利にすることが出来ます。
年月日時分まで全て含むtype="datetime-local"以外にも
type="date"type="month"type="time"type="week"などもあります。
参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local
https://www.tagindex.com/html/form/input_datetime_local.html
https://codeforfun.jp/reference-html-tag-input-type-datetime-local/
PageSpeed Insightsでチェックをすると
「リンクに識別可能な名前が指定されていません」
というアラートが出ることがあります。
これはaタグ内に画像を使用している場合に出るアラートになりますが、
以下の要素を追加することで解消できます。
1.altを追加
通常、imgタグにaltを設定するのが一番望ましいです。
2.aria-labelを使う
altが何らかの理由で使えない場合は、aタグにaria-labelを使います。
<a href="readmore.html">Read More</a>
↓
<a href="readmore.html" aria-label="Read More">Read More</a>
参考：https://dequeuniversity.com/rules/axe/4.4/link-name
https://www.rectus.co.jp/archives/11570
PageSpeed Insightsでチェックをすると
「ボタンにユーザー補助機能名が指定されていません」
というアラートが出ることがあります。
これはbuttonタグに以下の要素を追加することで解消できます。
<button id="al"></button>
↓
<button id="al" aria-label="Name"></button>
ユーザーに知らせる必要のない要素やフォーカスが当たるべきでない要素に、適宜aria-label="Name"の代わりにaria-hidden="true"などを設定しても良いでしょう。
参考：https://dequeuniversity.com/rules/axe/4.4/button-name
https://cam-inc.co.jp/p/techblog/466554823458685993
HTMLをゼロベースから書くのは効率が悪いので
テンプレート用のHTMLを用意しておいたり、エディターのショートコードなどですぐに呼び出せる状態にしておくことが仕事でコーディングする場合、必要不可欠です。
私の場合は以下のようなHTMLを標準に使っています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=3">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>タイトル</title>
<meta name="keywords" content="キーワード">
<meta name="description" content="ディスクリプション">
<link rel="icon" href="/favicon.ico" id="favicon">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-touch-icon-192x192.png">
<!--GA-->
<!--OGP-->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/ fb# article: http://ogp.me/ns/ article#">
<meta property="og:url" content="https://●●●.jp/">
<meta property="og:type" content="article">
<meta property="og:title" content="タイトル">
<meta property="og:description" content="ディスクリプション">
<meta property="og:site_name" content="名前">
<meta property="og:image" content="https://●●●.jp/ogp.png">
<meta name="twitter:card" content="summary_large_image">
<!--OGP-->
<!--CSS-->
<link rel="stylesheet" href="./css/common.css" type="text/css" media="screen,print">
<link rel="stylesheet" href="./css/sp.css" type="text/css" media="screen and (max-width: 767px)">
<link rel="stylesheet" href="./css/pc.css" type="text/css" media="screen and (min-width: 768px)">
<!--JS-->
<script src="./js/jquery.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body id="top">
<div id="container">
<div class="main">
</div>
<div class="ftr">
<div class="copyright">Copyright © 名前 All rights reserved.</div>
</div>
</div>
</body>
</html>レスポンシブ対応として
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=3">
特に最後のmaximum-scale=3はスマホで3倍までの拡大が出来ることで
ユーザビリティ・アクセシビリティを高めています。
CSSの読み込みも
<link rel="stylesheet" href="./css/sp.css" type="text/css" media="screen and (max-width: 767px)">
<link rel="stylesheet" href="./css/pc.css" type="text/css" media="screen and (min-width: 768px)">
上書きではなく、パソコンとスマホとを完全に分けて効率的にコーディング出来るようにしています。
（CSSを最小限にするために、SPファーストでコーディングし、PCで上書きが本来最もベストです。）
SNSでシェアされて拡散してサイトに訪問してもらうのが最近はメインになるのでOGPの設定も不可欠です。
PCの性能が向上したとは言え、表示スピードを意識したコーディングのほうが良いので、ヘッダーの読み込みはCSSを先、JSは後、としたほうが良いでしょう。
