ここがヘンだよ入力フォーム

ここがヘンだよ入力フォーム
■最新のiPhoneの購入・機種変更なら店頭より得で、予約しやすいオンラインショップ。
機種の頭金や使わないオプションパックをつけて年間何万円も損していませんか?
オンラインショップなら故障のサポートもしっかりしていて最低限の費用。待たされることもありません。

 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ
 → ケータイ乗り換え.com
 → SMARTPHONE STORE

入力フォームへの入力ってホントに面倒くさいですよね。

Amazonの物理ボタンでオーダーができる「Dash Button」の日本国内の展開を切に待ち望んでいたところ、つい先日、国内展開が発表され、さっそくオーダーも開始されました。もちろん注文完了。到着が待ち遠しい!

ついでにAmazonの人工知能搭載音声アシスタントスピーカー「Echo」も販売開始してほしいところです。自宅に居ながらにして、声だけで買い物ができるなんて、非常に近未来な感じですね。

声だけであればAppleの「Siri」というアプリケーションソフトウェアがあることを思い出しましたが、なんだか使いづらいんですよね。iPhoneユーザの中で、Siri入力をフル活用している人ってどのくらいいるんでしょう?

少なくともまだ日本国内では、入力フォームでのキーボード入力の呪縛から逃れられない現状なので、今のところはEFO(入力フォーム最適化サービス)に頼るしかありませんね。

EFOサービス『フォームアシスト』の設定とは

ショーケース・ティービーのナンバーワンサービスである『ナビキャスト・フォームアシスト』は、エンドユーザが入力をしやすくすることを目的として販売しているサービスであり、リリースから8年以上経過した今もなお、日々”使いやすさ”を追求して開発業務を行っております。

しかし、サービスイン直後からほとんど変わっていないものもあります。
それは当社内での「設定作業」です。

「設定作業」は、導入対象入力フォームのページを当社の設定担当者が、バリデーションエラーを調査しながら、ひとつひとつの項目に対して設定を行っていく作業になります。とても設定が簡単なページもあれば、中には気が遠くなるほどの項目数を持つページも存在します。

イケてない入力フォーム、ワースト5

3990社(2016年10月1日時点)もの導入実績を持つ『ナビキャスト・フォームアシスト』。
その多くの設定を手がけてきた弊社設定チームが思う、「大手企業なのに、実はWEBページがイケていない……」というモノを”あえて”リストアップしてご紹介したいと思います。

1.使ってはいけないname値を使っていて、てんやわんや・・・
そもそも入力フォームは複数の入力項目を同時に送信することになるため、データを受信したプログラムが各項目を判別できるようにする必要があります。そのためにデータに名前(name値、name属性)を付けるのがセオリーとなります。しかし、使うべきではない文字列をname値として使用されてしまう場合もあるんです。

具体的には「length」、「item」、「name」がよくあるパターンです。
何故使うべきではないかといえば、仮に「name=”name”」とした場合、EFO制御で対象となるFORMタグにアクセスしようにも、FORMタグのname値が取得できなくなってしまいます。

より詳細をお伝えしますと……

上記のようなHTMLソースに対して……

本来ならname値を「hoge」として返したいところなのですが、実際には「input-element」が返ってしまいます。
そもそもJSの仕様にも問題があるようにも思えますが、これがHTMLにおける”お作法”なんですね。

これを踏まえて考えると「length」や「item」なども、確かにエレメントの属性に当たってしまうので、予約属性という意味合いではNG扱いになってしまうんでしょうね。

また、全角文字を使ったり、許容されていない記号を使っている場合でも、同様の事象は起こりえます。規定に合わせた方が外部ツール間とのトラブルも劇的に減ると思います。

2.同じname値が使われている
これも非常によく見るパターンです。

ページ内に同じname値が利用されている場合、Javascriptによる入力フォームへのアクセスが困難になってしまいます。なんでこんなコーディング初歩レベルのミスが企業サイトで公開されているでしょうか。

僕もこの点については疑問に思っていたのですが、いくつかの企業サイトを見ているうちに、ある仮説に辿り着きました。

・よく見る重複name値のサンプル