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

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

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

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

hiddenとtextとでそれぞれ同じ名前が使われています。
下記のようなアクセスがあった場合、先に書かれている項目にしかアクセスできません。

もちろん、getElementsByNameで配列として取得する方法もありますが、そもそもこのサイトの問題はそこにはなく、さらに次の確認ページにあるようでした。

・次の確認ページサンプル

この確認ページは、前の入力ページのソースコードを流用していると思われます。

受け取り側のCGIサーバーでちゃんと制御すれば、問題ないと思われるコーダーの方々もいらっしゃるかもしれませんが、サーバでPHPが使われていて、かつ、name値(=name属性)が配列している”data_[]”といったような書き方をしている場合、配列番号がおかしなことになってしまいます。

まともな設計をする人であれば、容易に理解できるのではないでしょうか。

多くのこの症状で放置されている企業の場合、「現在、動いているから問題なし」として目をつぶっているケースが目立ちます。しかし、このままではページ改修時に思わぬ不具合を発生させてしまうかもしれません。
事前に”つまらない”不具合を潰すためにも、こうした整理整頓は必須だと言えますね。

3.TABLEタグ内のFORMタグを挿入する際のトラブル
FORMタグの挿入位置が規定違反になっているページも、かなりの頻度で見かけます。
まずはダメなサンプルコードを見てみましょう。

一見、DOM構造的には問題がないように見えますが、TABLEタグの構造にFORMタグが入り込んでしまっています。これはアクセス方法次第ではJSエラーを発生させてしまう原因にもなりかねません。

色々なサイトで「間違ったネスト」としてサンプルと解説と解決方法が出ているので参考にしてみてください。
<参考ページ「絶対に避けるべきHTMLタグの使い方、12選」>

ちなみに簡単に解決させるには、素直にFORMタグをTABLEタグの外に出してあげるといいでしょう。
具体的な解決例は以下のような感じです。

4.グローバル関数を書き換えてしまっているWEBページ
これは完全に手に負えなかったパターンですね。
JSの予約語である関数を、独自functionで上書きしているケースです。

僕が出会った関数は、”Date()”関数を独自フォーマットでの返り値にしていたり、”document.write()”関数を社内用のライブラリ読み込み処理に変更していたり……。
という具合に、基本の関数を変更しちゃダメですよね。

また、ライブラリとしてよく利用されている「prototype.js」はArray関数をhackすることで有名ですが、間違った値の抜き取り方さえしなければ、特に問題にはなりません。ただし、この辺は知識と経験が多少必要かもしれませんね。

5.framesetのページ構成
frameset構成は一昔前のホームページ作成においてはどこの会社でも利用していたものです。今となっては使っている方が稀という古い技術になってしまいましたね。
※もしかすると最近のエンジニアの中でも、この機能自体を知らない方もいらっしゃるのでは?

ただし、世の中には未だにframesetを使ったWEBページで運用している大手会社がいくつか存在しています。
何故、frameset構成に固執して使い続けているかは知る由もありませんが、恐らくは「古くからある技術だから安心だろう」なんて理由で昔から変更していないだけなのではないでしょうか。

ここでframesetとiframeの違いを簡単に説明いたします。
framesetは各HTMLを入れる器のページを用意して、ブラウザの表示部分を区分けしたものになります。区分けしたエリアそれぞれに別々のHTMLを表示させることができる機能なんですね。一方、iframeはHTMLの中に別のHTMLを入れられるといったもので、デザイン的に使うことも可能になった機能です。

iframeでframesetと同じ構成は作れますが、framesetだけでiframeと同じ構成は作れません。
当然、iframeの方が後発の機能ということになりますが、現在ではiframeすらも廃れる技術として認識されているのが一般認識です。つまり、HTMLを複数インクルードするようなページは、もはや時代遅れと考えてもいいかもしれませんね。

無秩序なWEBサイトに明日はない

一端のWEBエンジニアを語るのであれば、国際的なWEBの標準規格を推奨する「W3C」を熟読してみることもいいでしょう。
<参考ページ「World Wide Web Consortium(W3C)」>

ここまで、弊社サービス『ナビキャスト・フォームアシスト』の設定を起点に話を進めましたが、これは弊社サービスを導入する・しないに限った話ではありません。

「W3C」に則っていない間違ったHTMLソースは、”対応できない”ブラウザや弊社サービスを含む”対応できない”外部サービスが散見されてしまうということです。つまり逆に言えば、正しいHTMLソースでさえあれば、ほとんどのブラウザでの閲覧や、外部サービスの恩恵は受けられるということです。

ブラウザを作っている人も、サービスを考えている人も、どちらも「W3C」のルールに則って作成されていますから当然ですよね。

ブラウザ開発もWEBページ製作も、推奨基準を理解した上で、かつ、準拠しているのであれば、もしかすると世の中のWEB開発がかなり効率化を図れるのかもしれませんね。

コメント