意外に優秀なJavaFX WebViewのHTML5フォーム対応

JavaFX NetBeans HTML5 RIA

久々のポストです。(そういやFxGlassFishMonitorの解説も1回書いただけでさぼってるなー。こちらも早くまとめねば)

今、仕事で完全に社内向けの管理用Webアプリケーションを作っているのですが、どうせ完全に内部向けなら古いブラウザなんか気にせずHTML5で追加されたフォームをばんばん使っちゃえ♪ って感じで作っています。
で、ふと、「JavaFXのWebViewはWebKitベースなんだけど対応状況はどうなんだろう？」と思って調べてみたら意外に対応状況が優秀だったことがわかりました。さすがにChromeには負けますが、Safariよりは対応が進んでいたりします。と言うわけでその点についてまとめてみます。

以下のコードを表示してみることにします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>HTML5フォームテスト</title>
    <style>
:invalid {
  border-color: #e88;
  -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
  -moz-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
  -o-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
  -ms-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
  box-shadow:0 0 5px rgba(255, 0, 0, .8);
}
    </style>
  </head>
  <body>
    <form action="" method="GET">
      <p>
        number: <input type="number" min="0" max="100" name="number">
      </p>
      <p>
        date: <input type="date" name="date">
      </p>
      <p>
        search: <input type="search" name="search">
      </p>
      <p>
        url: <input type="url" name="url">
      </p>
      <p>
        email: <input type="email" name="email">
      </p>
      <p>
        month: <input type="month" name="month">
      </p>
      <p>
        range: <input type="range" min="0" max="100" name="range">
      </p>
      <p>
        color: <input type="color" name="color">
      <p>
      <p>
        meter: <meter value="60" min="0" max="100"></meter>
      </p>
      <p>
        progress: <progress max="100">進行中だよ</progress>
      </p>
      <input type="submit" value="submit"name="submit">
    </form>
  </body>
</html>

HTML5で追加されたフォームのうち代表的なものを記述しています。invalid 疑似クラスを指定しており、指定したフォームに対して妥当でない値が入力された場合にはボーダーの色を変更するようにしています。ブラウザが対応していれば、妥当でない値を入れると色が変わるようになります。

まず、これをChrome (バージョン 28.0.1500.71) で表示すると次のようになります。

今回指定した全てのフォームに対応しています。number や date、month、range、color に対しては入力補助のコンポーネントが表示されており、url や email に対しては、妥当でない値を入れるとCSSでの指定通りにボーダーが赤くなっていることが分かります。 や にもちゃんと対応していますね。
date については次のようなカレンダーピッカーを出すことができます。

Firefox (22.0) では次のように、url、email、meter、progress には対応していますが、number、date、month、range、color には対応しておらず、入力補助コンポーネントも出ません。

Safari (6.0.5) についてもMac版は意外と対応が遅れており、date、month、color が対応していません。iOS版はもう少し対応が進んでおり、date や month ではあのドラム型の入力コンポーネントが出てきます。

Opera (12.15 *1 ) は一番対応が早かったブラウザで、今回指定した全てのフォームに対応しています。

では、JavaFXではどうでしょうか。バージョン2.2のWebViewを使って表示した結果は次の通りです。

何と、search と color 以外は全て対応しているのです！number や date、month は一見対応していないように見えますが、実はフォーカスしてカーソルキーを上下すると数値や日付の値を入力できるようになっています。(画像では分からないですが)

で、この件についてTwitterでさくらばさんにさらに次のような情報をもらいました。

と言うわけでJDK8 Early Access (1.8.0-ea-b99) をダウンロードして、JavaFX8のWebViewでも見てみることにしました。
結果は次の通りです。

何とdate、month、colorでピッカーが用意されるようになりました！でも、このバージョン (8 Build b99) ではバグがあるのかクリックしても何も反応しませんでした。(´；ω；｀)ﾌﾞﾜｯ
まあ、正式版が出るまでには対応されるでしょうw

ちなみにJavaFX8では DatePicker コンポーネントが追加されています。こんな感じです。

バグが直るときっとWebViewでもこんなピッカーが表示されるようになるのでしょう。

というわけでJavaFX WebViewのHTML5フォーム対応状況についてでした。

おまけ

今回、JDK8でJavaFXアプリを作るためにNetBeans7.4betaをダウンロードして使ってみたのですが、NetBeans7.4ではMavenベースのJavaFXプロジェクトを作れるようになっていました。これはうれしい！

(追記)
さすがにIEの結果がないのはちょっとあれだと思ったので、VMを立ち上げてWin8上のIE10での結果も撮って追加しました。

IE10は number、url、email、range、progress に対応していました。ただし number は妥当性検証のみで入力補助はありません。range の表示がWin8らしいですね。

*1:Blinkになる前のバージョンです