3 サポートされているHTML5の機能
この章では、JavaFX WebコンポーネントでサポートされているHTML5の機能の範囲について説明します。サポートされている機能の大部分は、WebEngine
クラスおよびWebView
クラス実装の一部であり、この機能にはパブリックAPIは含まれません。
JavaFX Webコンポーネントの現在の実装では、次のHTML5の機能がサポートされています。
-
キャンバスおよびSVG
-
メディア再生
-
フォーム・コントロール
-
履歴メンテナンス
-
インタラクティブな要素タグ
-
DOM
-
Webワーカー
-
Webソケット
-
Webフォント
キャンバスおよびSVG
canvas
およびsvg
要素タグのサポートによって、グラフィックのレンダリング、SVG (Scalable Vector Graphics)構文を使用した図形の作成、および色設定、ビジュアル効果、アニメーションの適用などの基本的なグラフィック機能が有効になります。例3-1に、<canvas>
および<svg>
タグを使用したWebコンポーネントのレンダリングの簡単なテストを示します。
例3-1 キャンバスおよびSVG要素の使用
<!DOCTYPE HTML> <html> <head> <title>Canvas and SVG</title> <canvas style="border:3px solid darkseagreen;" width="200" height="100"> </canvas> <svg> <circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="red"/> </svg> </body> </html>
例3-1のHTMLコードを使用してWebViewSampleアプリケーションにページをロードすると、図3-1に示すようにグラフィックがレンダリングされます。
メディア再生
WebView
コンポーネントを使用すると、ロードされたHTMLページ内でビデオおよびオーディオ・コンテンツを再生できます。次のコーデックがサポートされています。
-
オーディオ: AIFF、WAV(PCM)、MP3およびAAC
-
ビデオ: VP6、H264
-
メディア・コンテナ: FLV、FXM、MP4およびMpegTS (HLS)
フォーム・コントロール
JavaFX Webコンポーネントを使用すると、フォームをレンダリングし、データ入力を処理できます。サポートされているフォーム・コントロールには、テキスト・フィールド、ボタン、チェック・ボックスおよびその他の使用可能な入力コントロールが含まれます。例3-2に、問題のサマリーを入力し、その優先度を指定できる簡単なコントロールのセットを示します。
例3-2 フォーム入力コントロール
<!DOCTYPE HTML> <html> <form> <p><label>Login: <input></label></p> <fieldset> <legend> Priority </legend> <p><label> <input type=radio name=size> High </label></p> <p><label> <input type=radio name=size> Medium </label></p> <p><label> <input type=radio name=size> Low </label></p> </fieldset> </form> </html>
例3-2のHTMLコンテンツがWebView
コンポーネントにアップロードされると、図3-2に示すような出力が生成されます。
ユーザーがフォーム・コントロールを使用してデータを送信および処理する方法の詳細は、HTML5の仕様を参照してください。
履歴メンテナンス
アクセスしたページのリストは、javafx.scene.web
パッケージで使用可能なWebHistory
クラスを使用することで取得できます。WebHistory
クラスは、WebEngine
オブジェクトに関連付けられたセッション履歴を表します。
この機能は、JavaFX Webコンポーネントの機能について学習する際に使用されるWebViewSampleアプリケーションで有効になっています。この実装の詳細は、「Web履歴の管理」の章を参照してください。
インタラクティブな要素タグのサポート
WebView
コンポーネントでは、details
、summary
、command
、menu
などのインタラクティブなHTML5要素がサポートされています。例3-3に、Webコンポーネントでdetails
およびsummary
要素をレンダリングする方法を示します。このサンプルでは、progress
およびmeter
コントロール要素も使用されます。
例3-3 details、summary、progressおよびmeter要素の使用
<!DOCTYPE HTML> <html> <h1>Download Statistics</h1> <details> <summary>Downloading... <progress max="100" value="25"></progress> 25%</summary> <ul> <li>Size: 1,7 MB</li> <li>Server: oracle.com</li> <li>Estimated time: 2 min</li> </ul> </details> <h1>Hard Disk Availability</h1> System (C:) <meter value=240 max=326></meter> </br> Data (D:) <meter value=101 max=130></meter> </html>
このページがWebコンポーネントにロードされると、図3-3に示すようなWebViewSampleアプリケーションが表示されます。
インタラクティブな要素のプロパティの詳細は、HTML5の仕様を参照してください。
ドキュメント・オブジェクト・モデル
JavaFX Webコンポーネントの非ビジュアル部分であるWebEngine
オブジェクトを使用すると、Webページのドキュメント・オブジェクト・モデル(DOM)を作成し、アクセスできます。ドキュメント・モデルのルート要素には、WebEngine
クラスのgetDocument()
メソッドを使用することでアクセスできます。例3-4に、WebページのURIを取得し、それをアプリケーション・ウィンドウのタイトルに表示するという単純なタスクを実装するためのコードを示します。
例3-4 DOMからのURIの導出
WebView browser = new WebView(); WebEngine webEngine = browser.getEngine(); stage.setTitle(webEngine.getDocument().getDocumentURI());
さらに、JavaFXコードでイベント・ハンドラを定義するためのドキュメント・モデル・イベントの仕様もサポートされています。Webページの要素にイベント・リスナーをアタッチする例については、WebEngine
クラスの仕様を参照してください。
Webソケット
WebView
コンポーネントでは、JavaFXアプリケーションとサーバー・プロセスとの双方向通信を確立できるWebSocket
インタフェースがサポートされています。WebSocket
インタフェースの詳細は、WebSocket
APIの仕様を参照してください。例3-5に、Webソケットの使用の一般的なモデルを示します。
Webワーカー
JavaFX Webコンポーネントでは、ロードされたWebページ上でのアクティビティと並行してWebワーカー・スクリプトを実行することがサポートされています。この機能により、ユーザーの操作を待機する必要なく、長時間実行スクリプトを実行することが可能になります。
例3-6に、長時間実行タスクにmyWorker
スクリプトを使用するWebページを示します。
例3-6 Webワーカー・スクリプトの使用
<!DOCTYPE HTML> <html> <head> <title>Web Worker</title> </head> <body> <script> var worker = new Worker('myWorker.js'); worker.onmessage = function (event) { document.getElementById('result').textContent = event.data; }; </script> </body> </html>
Webワーカー・スクリプトの詳細は、HTML5の仕様を参照してください。
Webフォントのサポート
JavaFX Webコンポーネントでは、@font-face
ルールで宣言されたWebフォントがサポートされています。このルールを使用すると、必要に応じて自動的にダウンロードされるフォントへのリンクを作成できます。HTML5の仕様に従い、この機能では、特定のページの設計目的と厳密に一致するフォントを選択できる機能が提供されます。例3-7のHTMLコードでは、そのURLで指定されたフォントへのリンクを作成するために、@font-face
ルールが使用されています。
例3-7 Webフォントの使用
<!DOCTYPE HTML> <html> <head> <title>Web Font</title> <style> @font-face { font-family: "MyWebFont"; src: url("http://example.com/fonts/MyWebFont.ttf") } h1 { font-family: "MyWebFont", serif;} </style> </head> <body> <h1> This is a H1 heading styled with MyWebFont</h1> </body> </html>
このHTMLコードがWebViewSampleアプリケーションにロードされると、図3-4に示すようにレンダリングされます。