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

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

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

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

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値のサンプル

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...