Firefox 4新機能、HTML5フォームバリデーション

Firefox web browser - Faster, more secure & customizable

Firefox 4 beta 7が公開された。JavaScriptエンジンの大幅な高速化とH/Wアクセラレーションを利用したレンダリング性能の大幅向上といったメジャーリリースに匹敵する興味深いベータ版に仕上がっている。ユーザからは見えにくいためこうした機能改善に比べるマイナーに見えるが、今後のWebページやWebアプリケーション開発負荷を軽減することにつながる新機能としてHTML5フォームの機能が実装されたことをあげることができる。どういった機能が実現されたのかが次のブログにまとまっている。2つ目のブログには実施に試せるサンプルも掲載されているので、Firefox 3.6と4 beta 7の両方でアクセスしてみれば、その違いを体験できる。

すべてではないが、Firefox 4 beta 7ではHTML5フォームが実装されている。新しいタイプの追加、新しい属性の追加、自動補完機能の実現、自動バリデーション機能の実現、新しいフォームAPIの導入などが実現されている。特に注目されるのは自動バリデーション機能の実現だ。これまで、ユーザがテキストフィールドに入力する値の検証はJavaScriptで実装してきた。これは繰り返し使うようなコードであるにもかかわらず、エラーも発生しやすい部分で、かならずしも作業していて面白いコーディングではなかった。

Firefox 4 beta 7ではHTML5フォーム仕様で規定されている自動バリデーション機能が実装されており、JavaScriptを記述しなくとも、ブラウザに自動的にチェックを実施させることができる。たとえば次のようなHTMLを用意したとすると、Firefox 3.6.12とFirefox 4 beta 7では次のように異なる動作をする。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>HTML5フォームデモ1</title>
</head>
<body>
  <ul>
    <li><input required></input> 入力必須フィールド</li>
    <li><input type='email'> 電子メールフィールド</li>
    <li><input type='email' pattern=".*@gmail\.com" title="Gmailのアドレスを入力してください"> パターンを指定した電子メールフィールド</li>
    <li><input type='email' placeholder="会社のメールアドレスを入力してください"> プレースホルダを指定した電子メールフィールド</li>
    <li><textarea maxlength='100'>最大長を100に設定したテキストエリア</textarea></li>
  </ul>
</body>
</html>


Firefox 3.6.12で閲覧した場合	HTML5フォーム機能に対応していないので、検証機能が機能していない。


Firefox 4 beta 7で閲覧した場合。必須項目やプレースホルダの機能がすでに働いていることを確認できる。赤い表示が指定された制限を満たしていないことを示している。この場合、requiredが指定されているので何も入力されていないことから赤い表示になっている。	emailが指定されている項目は電子メールアドレスになっていないと不正として赤い表記になる。テキストエリアの最大長制限も機能していることがわかる。

指定したタイプにしたがって自動的に検証が実施される。emailが指定されていれば電子メールが入力されているかどうかチェックし、不正な入力であれば赤色で注意を促すようになっている。属性にrequiredが指定されていれば入力必須フィールドとして扱われる。バリデーションパターンは正規表現で指定することができるので、制限したい入力内容を簡単に指定できる。

WebページやWebアプリケーションではパスワードを2回入力させて確認を求めることがあるが、これを実装するなら次のようになる。

パスワードが一致するまで赤く表示され、条件が満たされていないことが示されている。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>HTML5フォームデモ2</title>
</head>
<body>
<script>
   // Mounir Lamouri's Blogに掲載されているサンプルコードをベースに若干変更
   // http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4
   function checkPassword(p1, p2)
   {
     if (p1.value != p2.value) {
       p2.setCustomValidity('パスワードが一致していません');
     } else {
       p2.setCustomValidity('');
     }
   }
 </script>
 <input type='password' id='p1'>
 <input type='password' onfocus="checkPassword(document.getElementById('p1'), this);" oninput="checkPassword(document.getElementById('p1'), this);">
</body>
</html>

もうひとつ興味深い機能が、自動補完機能だ。inputのあとにdatalist要素を指定しておくと、この中で指定した値が入力補完候補として表示されるようになる。JavaScriptを使うことなくこうした機能が利用できるのはなかなか便利。

入力候補が表示される。Firefox 3.6.12で閲覧するとただのselect要素が表示される。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>HTML5フォームデモ3</title>
</head>
<body>
  <!--
    Firefox 4: HTML5 Formsに掲載されているサンプルに若干の変更
    http://hacks.mozilla.org/2010/11/firefox-4-html5-forms/
  -->
  <label>都市 <input list="cities"></label>
  <datalist id="cities">
    <select>
      <option value="Tokyo">Tokyo</option>
      <option value="Osaka">Osaka</option>
      <option value="Nagoya">Nagoya</option>
    </select>
  </datalist>
</body>
</html>

HTML5フォーム機能は開発者の負担を軽減するほか、ユーザに対して高いアクセサビリティと一貫した操作性を提供することにもつながる。HTML5フォームの仕様は今後も変更される可能性があり、さらにブラウザごとの実装もまだ足並みが揃っていない状況にある。さらにすべての主要ブラウザの最新版のHTML5フォーム機能が出揃ったとしても、既存の古いブラウザに対しては従来通りの方法を提供する必要がある。

HTML5フォーム機能は今後のフォーム機能において重要なポジションを占めていくことになると考えられる。本番環境での適応はまだ先の話になりそうだが、Firefox 4 beta 7やFirefox beta 8ナイトリービルドなどを使って実験をはじめるにはいい条件が整ってきた。