このブログの更新は Twitterアカウント @m_hiyama で通知されます。
Follow @m_hiyama

メールでのご連絡は hiyama{at}chimaira{dot}org まで。

はじめてのメールはスパムと判定されることがあります。最初は、信頼されているドメインから差し障りのない文面を送っていただけると、スパムと判定されにくいと思います。

参照用 記事

2020年なのに、Webフォームの憂鬱

今って、2020年ですよね。6,7年前の2013年, 2014年に、「Webフォームが使いにくい」と文句をたれてたのですが、2020年の現在ならば、さすがにそんな酷いことはないだろう -- そう期待しますよね。だって、僕が指摘した問題点は、ごく簡単に修正できることですから。

2013年, 2014年の過去記事とは:

Webフォームに入力する文字や記号に無意味な制約が付いていてエラーを起こしてやり直しを要求されるのがストレスだ、腹が立つ、って話です。

先日(2020年のことです)、郵便の再配達をWebフォームからお願いしました。まず最初は追跡番号(お問い合わせ番号)の入力。追跡番号は、123-45-67890-1 のようなフォーマットです。このとき、「空白もハイフンも入れずに半角数字だけで入力せよ」というご指示。

なんで? なんで空白・ハイフンがダメなの。不在連絡票には 123-45-67890-1 のフォーマットで印字されてるのに、なんで区切りをいれちゃダメなの? 目視での読みやすさのために、3桁-2桁-5桁-1桁 と印字されていると思うんだけど、Webフォームでは、読みにくい/確認しにくい11桁ベタ入力なの?

技術的に難しいですか? 空白・ハイフンを取り除くプログラムって、6千行くらいのコードだっけ? もう少し短く書けると思いますが。

… と思ったけど、おとなしく指示に従って全てのフィールドに入力してサブミットすると:

  • ** 番地・部屋名に受付できない文字が入力されました。ご確認の上、訂正してください。

ハァーー?! 別に変な文字なんて入れてないよ。数字が入ってるけど -- たぶん全角じゃないとダメとかだろうな。フィールド名「番地・部屋名」は教えてくれるんですが、どの文字が「受付できない文字」かは教えてくれないので推測するしかありません。

全角数字に修正してもエラーだったんですが、「番地・部屋名」フィールドがオプショナルと気づいて入力を全部削除して成功しました。「受付できない文字」を確認すればよかったけど、心の余裕がなくて … おそらくハイフン文字だったのでしょう。

ハイフン文字には以前苦しめられました。必須入力フィールドで「全角マイナス」と呼ばれる文字以外認めない、という仕様のフォームがありまして。Unicode文字で「ハイフン」に見えるものはたくさんあるんだけど。

名前 文字番号(コードポイント) 実際の形
HYPHEN-MINUS U+002D -
FULLWIDTH HYPHEN-MINUS U+FF0D
HYPHEN U+2010
MINUS SIGN U+2212
KATAKANA-HIRAGANA PROLONGED SOUND MARK U+30FC
HORIZONTAL BAR U+2015
FIGURE DASH U+2012
EN DASH U+2013
EM DASH U+2014


  • 教訓: 「Web技術の進歩やUIの改善は速い」には例外もある。