レターパックなどの郵便の際に「おなまえ」という名前を記載する欄があります。送り主の名前を書くときに「お」がついてるのは良くないということで、「お」を消すというビジネスマナーがよく知られてますよね。
送り主が自分に対して敬語を使っていることになるからというのが理由でしょうが、その理屈でいくと次の疑問が浮かびます。それは、WEBフォームのお名前欄の「お」は消さなくて良いのかということです。
WEBフォームの「お」は消せないんじゃないかと思った人もいるでしょうが、実は消せます。「消せないから」は理由になりません。レターパックの「お」を消すなら、WEBフォームの「お」も消しましょう。
「お」を消せるフォームを実装する
まずはフォーム側に「お」を消す機能を実装して見ます。きっとマナーを気にしている誰もが望んでいた機能でしょう。
今回はちゃちゃっとChatGPTさんに作ってもらいました。
プロンプト
ChatGPTには以下の入力をしました。
# WEB作成
次の仕様に従うフォームを作成してください。
# 仕様
- 「お名前」が入力できる
- 「提出」ボタンがある
- 「’お’を消す」ボタンがある。
- 「’お’を消す」ボタンを押すとフォームラベルの「お名前」の’お’の部分にだけ打ち消し線が表示される
- 打ち消し線が無い状態で「提出」ボタンを押すと「間違っています」と表示
- 打ち消し線が有る状態で「提出」ボタンを押すと「受け付けました」と表示「お」が消せるフォーム
ChatGPTの出力は以下の通りです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フォーム</title>
</head>
<body>
<form>
<label for="name">お名前：</label>
<input type="text" id="name" name="name"><br>
<button type="button" onclick="removePrefix()">‘お’を消す</button><br>
<button type="button" onclick="submitForm()">提出</button>
</form>
<script>
function removePrefix() {
const label = document.querySelector('label[for="name"]');
label.innerHTML = label.innerHTML.replace(/^お/, '<span style="text-decoration: line-through;">お</span>');
}
function submitForm() {
const label = document.querySelector('label[for="name"]');
if (label.innerHTML.startsWith('お')) {
alert('間違っています');
} else {
alert('受け付けました');
}
}
</script>
</body>
</html>JavaScriptで「お」に打ち消し線を引く関数「removePrefix()」が作られています。
動作
早速、出力されたファイルをブラウザで開いて動作を確認して見ました。
「'お'を消す」ボタンをクリックすると、ちゃんと「お名前」の「お」に打ち消し線が引かれます。
自分で「お」を消す
マナーを気にする人にはとても残念なことに、世の中のWEBフォームには、上のような「お」を消す機能は用意されてません。フォームの機能として用意してないと「お」は消せないと思ったのでは無いでしょうか？
実は消せます。そのヒントはすでにChatGPTが教えてくれました。そう、JavaScriptでHTMLを書き換えれば良いのです。
開発者ツールでJavaScriptを実行する
Chromeを使っている場合は「Cmd+Shift+C」で開発者ツールを開くことができます。そして、開発者ツールの「Console」欄からJavaScriptを実行することができます。
JavaScriptの中身はWEBフォームによって変える必要がありますが、上のChatGPTの出力だと、removePrefixの中身がそのまま使えます。
ここでは、新しい関数myFunctionを作って、removePrefixと同じ処理を実行します。
そして、このmyFunctionを実行すると、「'お'を消す」ボタンを押さなくても「お」に打ち消し線が引かれます。
このように、「お」を消す機能が実装されていないフォームでも、自分で「お」を消すことできます。
まとめ
マナーを気にする人が待ち望んでいたであろうWEBフォームの「お」を消す方法について紹介しました。もちろん、基本的に相手に届くのはフォームに入力された文字だけなので、フォームのラベルの「お」が消されたかどうかは受信者には通常は分かりません。その意味でWEBフォームの「お」を消す意味はないのですが、ChatGPTですぐに思いついたネタを動く形にできるようになったのでやってみました。
コメント