src/content/features/html5/index_ja.html - netbeans-website-cleanup - Git at Google

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
 <html>
     <head>
         <title>HTML5 Web開発のサポート</title>
         <meta http-equiv="content-language" content="en">
         <meta name="description" content="DESCRIPTION HERE">
         <link rel="stylesheet" type="text/css" href="../../features.css">
         <link rel="stylesheet" type="text/css" href="/images_www/js/colorbox/colorbox.css">
     <meta HTTP-EQUIV="Content-Type" Content="text/html; charset=UTF-8"></head>
     <body>
         <script type="text/javascript" src="/images_www/js/colorbox/jquery.colorbox-min.js"></script>

         <script type="text/javascript">
             $(document).ready(function(){
                 $('a.cbox').colorbox({rel:'cbox',opacity:0.7});
             });
         </script>
         <div style="margin:10px 20px 0px 0px;">
             <h1>HTML5 Web開発のサポート</h1>
             <p><a href="../../images_www/v7/3/features/html5-dev.png"><img alt="NetBeans IDEでのJava Enterpriseアプリケーションの開発" border="0" src="../../images_www/v7/3/features/html5-dev-cut.png"><br /> <span class="font-11">イメージをクリックして全画面表示</span></a><br /></p>
             <p class="intro">
                 NetBeans IDE 7.3では、HTML5テクノロジ・ファミリを利用したクライアント側Webアプリケーションの開発体験をサポートおよび強化する新機能が導入されています。これを使用すると、デスクトップ・プラットフォームとモバイル・プラットフォームを同時にターゲットとする即応性の高いWebデザイン・パラダイムに対応した、リッチなWebアプリケーションをすばやく直観的に作成できます。また、<a href="../java-on-server/index.html">Java EE</a>および<a href="../php/index.html">PHP</a>アプリケーション内のHTML5テクノロジを使用できます。
             </p>
             <div class="line">&nbsp;</div>

             <!-- left text section start -->
             <a name="o1"></a> <span class="overview-right" id="im1"><a class="cbox" href="../../images_www/v7/3/features/html5-app.png" title="HTML5アプリケーション開発のサポート"><img alt="" src="../../images_www/v7/3/features/html5-app-cut.png" /></a></span>
             <h2>高速なHTML5開発のサポート</h2>
             <p>
                 NetBeans IDEを使用すると、HTML5プロジェクトの作成時からHTML5 Webアプリケーションの開発を高速化できます。一般的なHTML5プロジェクト用オンライン・テンプレートのリストから選択することも、サイト・テンプレートの.zipアーカイブの場所を指定することも可能です。サイト・テンプレートに基づいてプロジェクトを作成する場合、ファイル、ライブラリ、およびプロジェクトの構造はテンプレートによって決まります。</p>
             <p>もしくは、<a href="../java-on-server/index.html">Java EEアプリケーション</a>および<a href="../php/index.html">PHPアプリケーション</a>の作成後に後述するすべてのHTML5機能を使用することもできます。
             <p>
                 一度設定すれば、Webページのライブ・プレビュー、エディタ・サポート、デバッグ、その他の機能がHTML5、Java EEおよびPHPアプリケーションの開発、テストおよびデバッグを支援します。<br /><br /> <a class="arr-link" href="../../kb/docs/webclient/html5-gettingstarted.html">HTML5開発の開始</a>
             </p>
             <div class="line">&nbsp;</div>
             <!-- left text section end -->

             <!-- right text section start -->
             <a name="o2"></a> <span class="overview-left" id="im2"><a class="cbox" href="../../images_www/v7/3/features/html5-preview.png" title="Webページのライブ・プレビュー"><img alt="" src="../../images_www/v7/3/features/html5-preview-cut.png" /></a></span>
             <h2>Webページのライブ・プレビュー</h2>
             <p>
                 Chromeと内部埋込みWebKitブラウザ(どちらもWebKitベース)の緊密な統合により、コードとページ・デザインのシームレスな結び付きが保証されます。これがWYSIWYGより優れているのは、熟練した開発者のほとんどが認めるところです。
             </p>
             <p>
                 リモートのWebKit APIを使用することで、従来どおりIDEでコードを完全に把握し制御しながら、ブラウザ・ページでビジュアル・フィードバックを即座に得ることができます。<br />
             </p>

             <p><b>注意:</b> Webページのライブ・プレビューはモバイル・デバイスでも使用できます。つまり、Chromeおよび内部埋込みWebKitブラウザだけでなく、Android上のChromeおよびiOS上のMobile Safariでも使用できます。
             </p>

             <div class="line">&nbsp;</div>
             <!-- right text section end -->

             <!-- left text section start -->
             <a name="o1"></a> <span class="overview-right" id="im3"><a class="cbox" href="../../images_www/v7/3/features/html5-layout.png" title="レイアウト・オプション"><img alt="" src="../../images_www/v7/3/features/html5-layout-cut.png" /></a></span>
             <h2>レスポンシブWebデザイン機能 </h2>
             <p>
                 NetBeans IDEでは、レスポンシブWebデザイン・アーキテクチャの使用がサポートされており、Webページの各種フォーム・ファクタを選択し、そのフォーム・ファクタに合せてブラウザでWebページのビジュアル要素を即座にレイアウトすることができます。縦モードまたは横モードのスマートフォンからデスクトップまで多岐にわたる事前設定済フォーム・ファクタから選択できます。
             </p>
             <p>
                 ブラウザ機能の強化に加えて、IDEのCSSスタイル・エディタもブラウザに現在表示されているメディア問合せを認識し、CSSの編集内容をそのメディア問合せに自動的に配置します。</p>
             <div class="line">&nbsp;</div>
             <!-- left text section end -->

             <!-- right text section start -->
             <a name="o2"></a> <span class="overview-left" id="im4"><a class="cbox" href="../../images_www/v7/3/features/javascript-editing.png" title="JavaScriptのサポート"><img alt="" src="../../images_www/v7/3/features/javascript-editing-cut.png" /></a></span>
             <h2>JavaScriptサポートの拡張</h2>
             <p>
                 IDEでのJavaScriptのサポートが大きく改良されました。サポートにはJavaScriptフレームワーク固有の構文の色分け、コード補完の他、その他の編集およびリファクタリングのツールが含まれています。
             </p>
             <p>jQuery、JSON、Knockout、Ext Js、AngularJS、JsDoc、ExtDocおよびScriptDocなどのJavaScriptフレームワークがサポートされています。</p>
             <p>
                 また、JavaScript言語自体のフォーマット・オプションも「オプション」ダイアログ・ボックスで制御できるようになりました。
             </p>
             <div class="line">&nbsp;</div>
             <!-- right text section end -->

             <!-- left text section start -->
             <a name="o1"></a> <span class="overview-right" id="im5"><a class="cbox" href="../../images_www/v7/3/features/html5-css-rules.png" title="CSSルールの編集"><img alt="" src="../../images_www/v7/3/features/html5-css-rules-cut.png" /></a></span>
             <h2>CSSの編集およびスタイルのサポート</h2>
             <p>Sassy CSSおよびLESS CSSプリプロセッサの編集サポートは、言語構造の構文的および意味的な色分け、インデント、再フォーマット、コード折りたたみ、およびファイル・テンプレートを含めて提供されます。コード補完やリファクタリング・ツールは、変数およびmixinsで使用可能です。
             </p>
             <p>
                 WebKitブラウザとの緊密な統合により、「CSSスタイル」ウィンドウで加えた変更をリアルタイムにブラウザで確認できます。ブラウザをリフレッシュするまでの間、CSSの変更がどのように見えるかを推測する必要はなくなりました。変更はリアルタイムに、ソース・コードで行われます。</p>
             <p>
                 ブラウザから検査を行い、ブラウザで選択した要素のCSSルールを「CSSスタイル」ウィンドウに自動的に表示することもできます。CSSは、「CSSスタイル」ウィンドウでプロパティを使用して編集することも、CSSソース・コードに直接アクセスしてそこで編集することもできるようになりました。その際、コード補完とインライン・ドキュメントを利用できます。<br /><br /> <a class="arr-link" href="../../kb/docs/webclient/html5-editing-css.html">HTML5アプリケーションでのCSSの使用</a>
             </p>

              <p><b>注意:</b> CSSの編集およびスタイルのサポートはモバイル・デバイスでも使用できます。つまり、Chromeおよび内部埋込みWebKitブラウザだけでなく、Android上のChromeおよびiOS上のMobile Safariでも使用できます。
             </p>

             <div class="line">&nbsp;</div>
             <!-- left text section end -->

              <!-- right text section start -->
             <a name="o2"></a> <span class="overview-left" id="im4"><a class="cbox" href="../../images_www/v7/3/features/html5-device.png" title="HTML5デバイスのサポート"><img alt="" src="../../images_www/v7/3/features/html5-device.png" /></a></span>
             <h2>モバイル・デバイス・サポートとCordova開発</h2>
             <p>HTML5、JavaScriptおよびCSS3でアプリケーションを開発し、IDEでそのCordova/PhoneGapサポートを介してネイティブ・ディストリビューションを作成します。IDEの各HTML5プロジェクトは、iOSまたはAndroidネイティブ・パッケージに変換し、IDEから直接、ネイティブ・デバイスにデプロイできます。
             <p>
                 IDEでは、Chromeブラウザおよび埋込みWebKitブラウザで視覚的にCSSファイルを編集し、JavaScriptをデバッグできます。同様に、iOSデバイス(Safari)およびAndroidデバイス(Chrome)でも直接作業できます。
             </p>
             <p><b>注意:</b> HTML5、Java EEまたはPHPのどの種類のWebアプリケーションでも、モバイル・デバイスでテストしてデバッグできます。
             </p>
             <div class="line">&nbsp;</div>
             <!-- right text section end -->

             <table>
                 <tr>
                     <td class="valign-top"><h2>デバッグとテスト</h2></td>
                     <!--<td></td>-->
                     <td class="valign-top"><h2>Webサービスの消費</h2></td>
                     <!--<td></td>-->
                     <td class="valign-top"><h2>複数のブラウザへの対応</h2></td>
                 </tr>
                 <tr>
                     <td class="valign-top" style="width:33%;padding-right:10px;">
                         <p>
                             <span class="overview-centre" id="im5"><img alt="" src="../../images_www/v7/3/features/html5-debug-cut.png" /></span><br />Chromeブラウザ、内部埋込みWebKitブラウザ、Android上のChromeブラウザ、およびiOS上のMobile Safariブラウザで、JavaScriptをデバッグできます。<br /><br /> <a class="arr-link" href="../../kb/docs/webclient/html5-js-support.html">JavaScriptのデバッグおよびテスト</a>
                         </p>
                     </td>
                     <!--<td>&nbsp;</td>-->
                     <td class="valign-top"  style="width:33%;padding-right:10px;">

                         <p>
                             <span class="overview-centre" id="im6"><img alt="" src="../../images_www/v7/3/features/html5-rest-client-cut.png" /></span><br /> RESTful Webサービス用のJavaScriptクライアントを作成することで、エンタープライズ・データに簡単にアクセスできます。<br /><br />RESTful JavaScriptクライアント・ウィザードを使用して、Webサービスを含むNetBeansプロジェクトに配置されたRESTful Webサービス用のJavaScriptクライアントをすばやく生成できます。
                         </p>
                     </td>
                     <!--<td>&nbsp;&nbsp;&nbsp;</td>-->
                     <td class="valign-top"  style="width:33%">
                         <p>
                             <span class="overview-centre" id="im7"><img alt="" src="../../images_www/v7/3/features/html5-css-doc-cut.png" /></span><br /> アプリケーションを複数のブラウザで確実に動作させることができます。<br /><br />コード補完機能によって利用可能なインライン・ドキュメントにより、特定のコード構造がブラウザでサポートされているかどうかを確認できます。<br />
                         </p>
                     </td>
                 </tr>
             </table>
             <h2>関連項目</h2>
             <ul class="bigger">
                 <li>最新の安定版リリースの主な機能のリストについては、<a href="/community/releases/80/index.html">NetBeans IDE 8.1リリース・ページ</a>を参照してください。</li>
                 <li>作業を開始する際に役立つチュートリアルについては、<a href="../../kb/trails/php.html">PHPおよびHTML5の学習</a>を参照してください。</li>
             </ul>

         </div>
     </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
	<html>
	<head>
	<title>HTML5 Web開発のサポート</title>
	<meta http-equiv="content-language" content="en">
	<meta name="description" content="DESCRIPTION HERE">
	<link rel="stylesheet" type="text/css" href="../../features.css">
	<link rel="stylesheet" type="text/css" href="/images_www/js/colorbox/colorbox.css">
	<meta HTTP-EQUIV="Content-Type" Content="text/html; charset=UTF-8"></head>
	<body>
	<script type="text/javascript" src="/images_www/js/colorbox/jquery.colorbox-min.js"></script>

	<script type="text/javascript">
	$(document).ready(function(){
	$('a.cbox').colorbox({rel:'cbox',opacity:0.7});
	});
	</script>
	<div style="margin:10px 20px 0px 0px;">
	<h1>HTML5 Web開発のサポート</h1>
	<p><a href="../../images_www/v7/3/features/html5-dev.png"><img alt="NetBeans IDEでのJava Enterpriseアプリケーションの開発" border="0" src="../../images_www/v7/3/features/html5-dev-cut.png"><br /> <span class="font-11">イメージをクリックして全画面表示</span></a><br /></p>
	<p class="intro">
	NetBeans IDE 7.3では、HTML5テクノロジ・ファミリを利用したクライアント側Webアプリケーションの開発体験をサポートおよび強化する新機能が導入されています。これを使用すると、デスクトップ・プラットフォームとモバイル・プラットフォームを同時にターゲットとする即応性の高いWebデザイン・パラダイムに対応した、リッチなWebアプリケーションをすばやく直観的に作成できます。また、<a href="../java-on-server/index.html">Java EE</a>および<a href="../php/index.html">PHP</a>アプリケーション内のHTML5テクノロジを使用できます。
	</p>
	<div class="line"> </div>

	<!-- left text section start -->
	<a name="o1"></a> <span class="overview-right" id="im1"><a class="cbox" href="../../images_www/v7/3/features/html5-app.png" title="HTML5アプリケーション開発のサポート"><img alt="" src="../../images_www/v7/3/features/html5-app-cut.png" /></a></span>
	<h2>高速なHTML5開発のサポート</h2>
	<p>
	NetBeans IDEを使用すると、HTML5プロジェクトの作成時からHTML5 Webアプリケーションの開発を高速化できます。一般的なHTML5プロジェクト用オンライン・テンプレートのリストから選択することも、サイト・テンプレートの.zipアーカイブの場所を指定することも可能です。サイト・テンプレートに基づいてプロジェクトを作成する場合、ファイル、ライブラリ、およびプロジェクトの構造はテンプレートによって決まります。</p>
	<p>もしくは、<a href="../java-on-server/index.html">Java EEアプリケーション</a>および<a href="../php/index.html">PHPアプリケーション</a>の作成後に後述するすべてのHTML5機能を使用することもできます。
	<p>
	一度設定すれば、Webページのライブ・プレビュー、エディタ・サポート、デバッグ、その他の機能がHTML5、Java EEおよびPHPアプリケーションの開発、テストおよびデバッグを支援します。<br /><br /> <a class="arr-link" href="../../kb/docs/webclient/html5-gettingstarted.html">HTML5開発の開始</a>
	</p>
	<div class="line"> </div>
	<!-- left text section end -->

	<!-- right text section start -->
	<a name="o2"></a> <span class="overview-left" id="im2"><a class="cbox" href="../../images_www/v7/3/features/html5-preview.png" title="Webページのライブ・プレビュー"><img alt="" src="../../images_www/v7/3/features/html5-preview-cut.png" /></a></span>
	<h2>Webページのライブ・プレビュー</h2>
	<p>
	Chromeと内部埋込みWebKitブラウザ(どちらもWebKitベース)の緊密な統合により、コードとページ・デザインのシームレスな結び付きが保証されます。これがWYSIWYGより優れているのは、熟練した開発者のほとんどが認めるところです。
	</p>
	<p>
	リモートのWebKit APIを使用することで、従来どおりIDEでコードを完全に把握し制御しながら、ブラウザ・ページでビジュアル・フィードバックを即座に得ることができます。<br />
	</p>

	<p><b>注意:</b> Webページのライブ・プレビューはモバイル・デバイスでも使用できます。つまり、Chromeおよび内部埋込みWebKitブラウザだけでなく、Android上のChromeおよびiOS上のMobile Safariでも使用できます。
	</p>

	<div class="line"> </div>
	<!-- right text section end -->

	<!-- left text section start -->
	<a name="o1"></a> <span class="overview-right" id="im3"><a class="cbox" href="../../images_www/v7/3/features/html5-layout.png" title="レイアウト・オプション"><img alt="" src="../../images_www/v7/3/features/html5-layout-cut.png" /></a></span>
	<h2>レスポンシブWebデザイン機能 </h2>
	<p>
	NetBeans IDEでは、レスポンシブWebデザイン・アーキテクチャの使用がサポートされており、Webページの各種フォーム・ファクタを選択し、そのフォーム・ファクタに合せてブラウザでWebページのビジュアル要素を即座にレイアウトすることができます。縦モードまたは横モードのスマートフォンからデスクトップまで多岐にわたる事前設定済フォーム・ファクタから選択できます。
	</p>
	<p>
	ブラウザ機能の強化に加えて、IDEのCSSスタイル・エディタもブラウザに現在表示されているメディア問合せを認識し、CSSの編集内容をそのメディア問合せに自動的に配置します。</p>
	<div class="line"> </div>
	<!-- left text section end -->

	<!-- right text section start -->
	<a name="o2"></a> <span class="overview-left" id="im4"><a class="cbox" href="../../images_www/v7/3/features/javascript-editing.png" title="JavaScriptのサポート"><img alt="" src="../../images_www/v7/3/features/javascript-editing-cut.png" /></a></span>
	<h2>JavaScriptサポートの拡張</h2>
	<p>
	IDEでのJavaScriptのサポートが大きく改良されました。サポートにはJavaScriptフレームワーク固有の構文の色分け、コード補完の他、その他の編集およびリファクタリングのツールが含まれています。
	</p>
	<p>jQuery、JSON、Knockout、Ext Js、AngularJS、JsDoc、ExtDocおよびScriptDocなどのJavaScriptフレームワークがサポートされています。</p>
	<p>
	また、JavaScript言語自体のフォーマット・オプションも「オプション」ダイアログ・ボックスで制御できるようになりました。
	</p>
	<div class="line"> </div>
	<!-- right text section end -->

	<!-- left text section start -->
	<a name="o1"></a> <span class="overview-right" id="im5"><a class="cbox" href="../../images_www/v7/3/features/html5-css-rules.png" title="CSSルールの編集"><img alt="" src="../../images_www/v7/3/features/html5-css-rules-cut.png" /></a></span>
	<h2>CSSの編集およびスタイルのサポート</h2>
	<p>Sassy CSSおよびLESS CSSプリプロセッサの編集サポートは、言語構造の構文的および意味的な色分け、インデント、再フォーマット、コード折りたたみ、およびファイル・テンプレートを含めて提供されます。コード補完やリファクタリング・ツールは、変数およびmixinsで使用可能です。
	</p>
	<p>
	WebKitブラウザとの緊密な統合により、「CSSスタイル」ウィンドウで加えた変更をリアルタイムにブラウザで確認できます。ブラウザをリフレッシュするまでの間、CSSの変更がどのように見えるかを推測する必要はなくなりました。変更はリアルタイムに、ソース・コードで行われます。</p>
	<p>
	ブラウザから検査を行い、ブラウザで選択した要素のCSSルールを「CSSスタイル」ウィンドウに自動的に表示することもできます。CSSは、「CSSスタイル」ウィンドウでプロパティを使用して編集することも、CSSソース・コードに直接アクセスしてそこで編集することもできるようになりました。その際、コード補完とインライン・ドキュメントを利用できます。<br /><br /> <a class="arr-link" href="../../kb/docs/webclient/html5-editing-css.html">HTML5アプリケーションでのCSSの使用</a>
	</p>

	<p><b>注意:</b> CSSの編集およびスタイルのサポートはモバイル・デバイスでも使用できます。つまり、Chromeおよび内部埋込みWebKitブラウザだけでなく、Android上のChromeおよびiOS上のMobile Safariでも使用できます。
	</p>

	<div class="line"> </div>
	<!-- left text section end -->

	<!-- right text section start -->
	<a name="o2"></a> <span class="overview-left" id="im4"><a class="cbox" href="../../images_www/v7/3/features/html5-device.png" title="HTML5デバイスのサポート"><img alt="" src="../../images_www/v7/3/features/html5-device.png" /></a></span>
	<h2>モバイル・デバイス・サポートとCordova開発</h2>
	<p>HTML5、JavaScriptおよびCSS3でアプリケーションを開発し、IDEでそのCordova/PhoneGapサポートを介してネイティブ・ディストリビューションを作成します。IDEの各HTML5プロジェクトは、iOSまたはAndroidネイティブ・パッケージに変換し、IDEから直接、ネイティブ・デバイスにデプロイできます。
	<p>
	IDEでは、Chromeブラウザおよび埋込みWebKitブラウザで視覚的にCSSファイルを編集し、JavaScriptをデバッグできます。同様に、iOSデバイス(Safari)およびAndroidデバイス(Chrome)でも直接作業できます。
	</p>
	<p><b>注意:</b> HTML5、Java EEまたはPHPのどの種類のWebアプリケーションでも、モバイル・デバイスでテストしてデバッグできます。
	</p>
	<div class="line"> </div>
	<!-- right text section end -->

	<table>
	<tr>
	<td class="valign-top"><h2>デバッグとテスト</h2></td>
	<!--<td></td>-->
	<td class="valign-top"><h2>Webサービスの消費</h2></td>
	<!--<td></td>-->
	<td class="valign-top"><h2>複数のブラウザへの対応</h2></td>
	</tr>
	<tr>
	<td class="valign-top" style="width:33%;padding-right:10px;">
	<p>
	<span class="overview-centre" id="im5"><img alt="" src="../../images_www/v7/3/features/html5-debug-cut.png" /></span><br />Chromeブラウザ、内部埋込みWebKitブラウザ、Android上のChromeブラウザ、およびiOS上のMobile Safariブラウザで、JavaScriptをデバッグできます。<br /><br /> <a class="arr-link" href="../../kb/docs/webclient/html5-js-support.html">JavaScriptのデバッグおよびテスト</a>
	</p>
	</td>
	<!--<td> </td>-->
	<td class="valign-top" style="width:33%;padding-right:10px;">

	<p>
	<span class="overview-centre" id="im6"><img alt="" src="../../images_www/v7/3/features/html5-rest-client-cut.png" /></span><br /> RESTful Webサービス用のJavaScriptクライアントを作成することで、エンタープライズ・データに簡単にアクセスできます。<br /><br />RESTful JavaScriptクライアント・ウィザードを使用して、Webサービスを含むNetBeansプロジェクトに配置されたRESTful Webサービス用のJavaScriptクライアントをすばやく生成できます。
	</p>
	</td>
	<!--<td>   </td>-->
	<td class="valign-top" style="width:33%">
	<p>
	<span class="overview-centre" id="im7"><img alt="" src="../../images_www/v7/3/features/html5-css-doc-cut.png" /></span><br /> アプリケーションを複数のブラウザで確実に動作させることができます。<br /><br />コード補完機能によって利用可能なインライン・ドキュメントにより、特定のコード構造がブラウザでサポートされているかどうかを確認できます。<br />
	</p>
	</td>
	</tr>
	</table>
	<h2>関連項目</h2>
	<ul class="bigger">
	<li>最新の安定版リリースの主な機能のリストについては、<a href="/community/releases/80/index.html">NetBeans IDE 8.1リリース・ページ</a>を参照してください。</li>
	<li>作業を開始する際に役立つチュートリアルについては、<a href="../../kb/trails/php.html">PHPおよびHTML5の学習</a>を参照してください。</li>
	</ul>

	</div>
	</body>
	</html>