ドキュメント



ご意見をお寄せください | 印刷 | PDF | ePub | Mobi
JavaFX: JavaFXアプリケーションへのHTMLコンテンツの追加

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に示すようにグラフィックがレンダリングされます。

図3-1 グラフィックのレンダリング

図3-1の説明が続きます
「図3-1 グラフィックのレンダリング」の説明

メディア再生

WebViewコンポーネントを使用すると、ロードされたHTMLページ内でビデオおよびオーディオ・コンテンツを再生できます。 次のコーデックがサポートされています。

  • オーディオ: AIFF、WAV(PCM)、MP3およびAAC

  • ビデオ: VP6、H264

  • メディア・コンテナ: FLV、FXM、MP4およびMpegTS (HLS)

メディア・コンテンツの埋込みの詳細は、videoおよびaudioタグに対応するHTML5の仕様を参照してください。

フォーム・コントロール

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に示すような出力が生成されます。

図3-2 フォーム要素のレンダリング

図3-2の説明が続きます
「図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アプリケーションが表示されます。

図3-3 インタラクティブなHTML5要素のレンダリング

図3-3の説明が続きます
「図3-3 インタラクティブなHTML5要素のレンダリング」の説明

インタラクティブな要素のプロパティの詳細は、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ソケットの使用の一般的なモデルを示します。

例3-5 HTMLコードでのWebソケットの使用

<!DOCTYPE HTML>
<html>
<head>
<title>Web Worker</title>
</head>
<body>
<script>
    socketConnection = new WebSocket('ws://example.com:8001');    
    socketConnection.onopen = function () {
        // do some stuff
    };
</script>
</body>
</html>

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に示すようにレンダリングされます。

図3-4 Webフォントのレンダリング

図3-4の説明が続きます
「図3-4 Webフォントのレンダリング」の説明

ウィンドウを閉じる

目次

JavaFX: JavaFXアプリケーションへのHTMLコンテンツの追加

展開 | 縮小