作成日
24 November 2011
Adobe Developer Connection（ADC）と連動する開発者向けイベント「ADC MEETUP ROUND3」では、General Sessionの他にHTML関連情報とFlash関連情報の2つのトラックが設けられた。HTMLトラックのSESSION3では、株式会社ピクルスのテクニカルディレクター山下美緒氏より、HTML5の新機能を活用してユーザビリティの高いフォームを構築するノウハウの紹介が行われた。
MAX 2011では、HTML5／CSS3を活用するためのノウハウやTipsを紹介する技術セッションも数多く開催された。山下氏はそれらのセッションを聴講して得た情報から、HTML5で新たにサポートされるフォーム技術の活用方法に着目した。
近年のインターネット上のコンテンツが、ユーザが閲覧するだけのものからユーザが作るものへとシフトしてきている現状を挙げている。それに加えて、現在はマルチデバイスの時代を迎えており、PCだけでなくスマートフォンやタブレットなどからインターネットにアクセスするケースも増えてきた。この2点から、入力のしやすさを実現することは、良いWebサイトを構築する上で必要不可欠な要素になっていると山下氏は指摘する。ユーザによるコンテンツ制作への参加には、言うまでもなくフォームによる入力が不可欠だ。したがって、フォームのユーザビリティを高めることは、サイト全体の評価に大きく関わってくる。これが、山下氏が特にフォームの重要性を指摘する理由である。
同氏は、Webサイトを訪れた際にユーザが感じるストレスの中には、HTMLの使い方を直すことで解消できるものも多くあることを指摘する。例えば、ユーザが初見で感じるストレスには次のようなものが挙げられる。
- 文字が小さすぎる
- どこをクリックすればいいのか、わからない
- なかなかページが表示されない
- ブックマークしたら、タイトルが「無題ドキュメント」だった
- スマートフォンでボタンがクリックしづらい
- フォームに何を入力すればよいのかわからない
- フォームで警告がでるけど、どこを直したらいいのかわからない
デザイン上の問題もあれば、HTML上の問題もある。特に気づかれにくいのが、フォームに関する問題が、デザインだけでなくHTMLでも解消できるという点だ。ここで、HTML5の新機能が大きな力を発揮する。HTML5のフォームには、新たに次のような機能が加わっている。
- 入力補助
- バリデート（エラーチェック）
- 項目に適した入力方法が選べる
これらの機能は、inputタグのtype属性によって有効に活用できるようになる。type属性自身も用途に合わせた非常に多くの種類が追加されている。つまり、HTMLの記述だけで用途に応じて見た目の変更や入力サポートを行うことが可能になるというわけだ。なお、現時点では全てのWebブラウザーが新しいtype属性に対応しているわけではないが、Webブラウザーは認識できないtype属性を"text"と同等に扱うため、仮に対応していない場合でも大きな不都合は生じないので、積極的に使うべきだと山下氏は言う。
続いて山下氏は、実際にHTML5で新たに追加されたtype属性の中から、ユーザビリティを高めるためにおすすめのフォーム機能を紹介した。
2.1 type="url"
<input type=”url" name=”url”>
"url"はURLを入力するフィールドで用いる属性値で、以下のような機能が有効になる。
- 入力テキストがURL形式になっているかどうかの検証
- 書式の補完（"http://"を付け加えるなど）
- スマートフォンにおいて、入力に適したキーボードを表示
2.2 type="email"
<input type=”email" name=”email”>
"email"はEメールを入力するフィールドで用いる属性値で、以下のような機能が有効になる。
- 入力テキストがEメール形式になっているかどうかの検証
- スマートフォンにおいて、入力に適したキーボード（"@"付き）を表示
2.3 type="tel"
<input type=”tel" name=”tel”>
"tel"は電話番号を入力するフィールドで用いる属性値で、以下のような機能が有効になる。
- スマートフォンにおいて、テンキーを表示
2.4 type="number"
<input type=”number" name=”number”>
"number"は数字を入力するフィールドで用いる属性値で、以下のような機能が有効になる。
- スピンボックスを表示
- 入力テキストが数字であるかどうかの検証（数値以外入力できない）
- スマートフォンにおいて、テンキーを表示
また、number属性値は次のように最小値／最大値を指定するmin／maxや、スピンボックスのステップ数（刻み幅）を指定するstepなどの属性を併用することでより便利になるとのこと。
<input type="number" name=“age” min="0" max="10" step=”1”>
ここで山下氏は、これらのtype属性値と組み合わせて利用できる有用な属性をいくつか取り上げた。
3.1 required属性
<input type=”text" name=”text” required>
requiredは入力必須の項目を指定するための属性で、未入力の場合にはエラーメッセージが表示されるようになる。
3.2 pattern属性
<input type=”text" name=”text” pattern=“^[abc]$”>
patternは入力されたテキストに対して正規表現を使ったチェックを行うことができる属性である。
3.3 novalidate属性
<form novalidate>
novalidate属性はformタグに指定する。この属性を指定されたフォームでは入力チェックによるエラー表示が無効になる。例えば、type="url"となった入力ボックスで、入力テキストがURL形式になっていなくてもエラーは表示されない。
3.4 placeholder属性
<input type=”text" name=” text” placeholder=“お名前(漢字)”>
placeholder属性を使うと、入力ボックス内にガイドテキストを表示することができる。ユーザに対してどんなテキストを入力したらいいかを示すために便利な属性である。
最後に、現時点ではまだ対応するブラウザーが限られているが、今後期待できるいくつかの属性値が紹介された。
4.1 type="range"
<input type="range" name=” range”>
<input type=”range" name=“range” min="0" max="10" step=”1”>
"range"はスライダーを表示する属性値である。固定の数値では指定しにくいような値を入力してもらう場合に有効で、number属性値と同様にmin／max／stepなどの属性と組み合わせることでより便利になるという。現時点ではChrome／Safari／Operaのみ対応。
4.2 type="color"
<input type="color" name=“color”>
"color"は色の入力のために使う属性値で、カラーピッカーが表示される点が大きな特徴。現時点ではOperaのみ対応。
4.3 type="date"
<input type="date” name=“date”>
"date"は日付入力のために使う属性値で、日付ピッカーが表示される。現時点ではOperaのみが対応しているが、ChromeとFirefoxでは代わりにスピンコントローラが表示されるとのこと。
4.4 type="search"
<input type=”search" name=”search”>
"search"は入力ボックスとして検索ボックスを表示するための属性値である。現時点ではChrome／Safari／Operaのみが対応しており、ブラウザーによってそれぞれに合った表示が適用されるという。
ここで紹介された以外にも、HTML5では様々なtype属性値が追加される予定となっている。ユーザビリティの向上に活用できるHTML5の新機能は他にもたくさんあるが、このフォームのtype属性値はその中でも特に導入が簡単で、得られる効果が大きいので、積極的に使って欲しいと山下氏は呼びかけた。