// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= HTML5アプリケーションの開始
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: HTML5アプリケーションの開始 - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, HTML5アプリケーションの開始

このドキュメントは、IDEでHTML5プロジェクトを作成する方法と、プロジェクトでのJavaScriptおよびCSSの使用をサポートするIDEの機能の一部を示します。このドキュメントでは、jQuery JavaScriptライブラリを使用してWebページのリストを変更する単純なHTML5アプリケーションを作成します。

このドキュメントでは、Chrome WebストアからChromeブラウザのNetBeans Connector拡張機能をインストールする方法も示します。

チュートリアルのスクリーンショットを確認するには、link:../web/html5-gettingstarted-screencast.html[+HTML5アプリケーションの開始のビデオ+]を参照してください。

NetBeans Java WebアプリケーションでjQueryを使用する方法のチュートリアルは、チュートリアルlink:../web/js-toolkits-jquery.html[+jQueryを使用したWebページの外観と使いやすさの強化+]を参照してください。

== このチュートリアルを完了するには、次のリソースが必要です。

|===
|ソフトウェアまたはリソース |必須バージョン 

|link:https://netbeans.org/downloads/index.html[+NetBeans IDE、Java+] |7.4, 8.0 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Java Development Kit (JDK)+] |バージョン7または8 

|link:http://www.google.com/chrome[+Chromeブラウザ+] |-- 

|link:https://chrome.google.com/webstore/detail/netbeans-connector/hafdlehgocfcodbgjnpecfajgkeejnaa?utm_source=chrome-ntp-icon[+ChromeのNetBeans Connector拡張機能+] |1.0.0以上 

|link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5Demo-projectresources.zip[+HTML5デモ・プロジェクト・リソース+] |-- 

|link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip[+完成したプロジェクトのサイト・テンプレート+] |-- 
|===

*注意: *

* link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5Demo-projectresources.zip[+プロジェクト・リソースzipファイル+]には、このチュートリアルでプロジェクトに追加する必要のあるJPGイメージとCSSファイルが含まれます。
* プロジェクトを動作中のソリューションと比較する場合は、完成したプロジェクトのlink:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip[+サイト・テンプレート+]をダウンロードできます。
* このドキュメントは、HTML、CSSおよびJavaScriptについて基本的な知識またはプログラミング経験を持つ読者を想定して書かれています。


== ChromeブラウザでのIDEの使用

HTML5アプリケーション開発をサポートする、IDEで使用可能なツールの一部をフルに活用するには、Chromeブラウザを使用し、link:https://chrome.google.com/webstore/[+Chrome Webストア+]からNetBeans Connector拡張機能をインストールすることをお薦めします。拡張機能をインストールする必要があるのは1回のみです。

インストールすると、NetBeans Connector拡張機能は、ChromeブラウザでNetBeans HTML5プロジェクトを実行する際にURLの場所バーからアクセス可能なNetBeansアクション・メニューを追加します。NetBeansアクション・メニューでは、NetBeansでの検査モードを有効にし、ブラウザ・ウィンドウを一般的な表示デバイスのサイズにすばやく変更できます。JavaScriptデバッガも、HTML5アプリケーションを実行すると自動的に有効になります。


=== Chrome Webストアからの拡張機能のインストール

IDEからNetBeans HTML5アプリケーション・プロジェクトを実行し、NetBeans統合でターゲット・ブラウザとしてChromeを選択した場合は、NetBeans Connector拡張機能のインストールを確認するプロンプトが自動的に表示されます。この課題では、ダミーのHTML5プロジェクトを作成および実行することで拡張機能をインストールする方法を示します。この課題をスキップし、IDEから求められた場合に拡張機能をインストールするか、NetBeans Connector拡張機能をChrome Webストアから直接インストールすることもできます。

*注意:*IDEにより、Chrome Webストアがデフォルト・ブラウザに開きます。ChromeがIDEのデフォルト・ブラウザとして設定されていない場合は、次の手順を実行する前に、「オプション」ウィンドウを開き、「一般」カテゴリの「Webブラウザ」ドロップダウン・リストで「Chrome」を選択する必要があります。

1. 「ファイル」>「新規プロジェクト」を選択し、新規プロジェクト・ウィザードを開きます。
2. HTML/JavaScriptカテゴリで「HTML5アプリケーション」を選択します。「次」をクリックします。
3. プロジェクトの「名前と場所」を指定します。「次」をクリックします。

この課題では、名前は重要ではありません。


[start=4]
. 「サイト・テンプレートなし」を選択します。「終了」をクリックします。

「終了」をクリックすると、IDEにより新規HTML5プロジェクトが作成され、 ``index.html`` がエディタに開きます。


[start=5]
. NetBeans統合のあるChromeがツールバーのドロップダウン・リストで選択されていることを確認します。

[start=6]
. ツールバーの「実行」をクリックします。

[start=7]
. 「Chrome拡張機能のインストール」ダイアログ・ボックスで「Chrome Webストアへ移動」をクリックします。
image::images/html5-offline-extension1.png[title="「Chrome拡張機能のインストール」ダイアログ・ボックス"]

「Chrome Webストアへ移動」をクリックすると、ChromeブラウザにChrome WebストアのNetBeans Connectorページが開きます。

*注意:*「Chrome拡張機能のインストール」では、拡張機能がインストールされた後にクリックするボタンが表示されます。

image::images/html5-rerun-dialog.png[title="「Chrome拡張機能のインストール」ダイアログ・ボックス"]

[start=8]
. Chromeブラウザに移動し、NetBeans Connectorページで「Chromeに追加」をクリックします。拡張機能を追加するかどうかを確認するプロンプトが表示されたら、「追加」をクリックします。
image::images/html5-chrome-netbeanshome.png[title="Chrome WebストアのNetBeans Connectorページ"]

拡張機能がインストールされると、拡張機能が追加されたことを示す通知が表示され、ChromeブラウザでNetBeans HTML5プロジェクトを実行するとNetBeans ConnectorアイコンがURLの場所バーに表示されます。

image::images/html5-install-extension2.png[title="拡張機能がインストールされたことの確認"]

[start=9]
. IDEで、「Chrome拡張機能のインストール」ダイアログ・ボックスの「プロジェクトの再実行」をクリックします。

「プロジェクトの再実行」をクリックすると、Chromeブラウザに新しいタブが開き、HTML5アプリケーションの索引ページが表示されます。

拡張機能がインストールされると、ChromeブラウザでNetBeans HTML5プロジェクトを実行したときにNetBeans ConnectorアイコンがURLの場所バーに表示されます。

ChromeブラウザでChromeの「拡張機能」ページ( ``chrome://extensions/`` )を開くと、拡張機能が有効になっています。

image::images/html5-install-extension3.png[title="NetBeans Connector拡張機能がChromeの「拡張機能」で有効になっている"]

*注意:*または、次の手順を実行して、NetBeans Connector拡張機能をChrome Webストアから直接インストールできます。

1. Chromeブラウザを起動し、link:https://chrome.google.com/webstore/[+Chrome Webストア+]に移動します。
2. Chrome WebストアでNetbeans Connector拡張機能を検索します。
3. 検索結果ページで「Chromeに追加」をクリックし、拡張機能の追加を確認するプロンプトが表示されたら「追加」をクリックします。
image::images/html5-install-extension1.png[title="Chrome WebストアのNetBeans Connector拡張機能"]


=== 拡張機能のオフライン・インストール

Chrome Webストアに接続できない場合は、IDEにバンドルされているNetBeans Connector拡張機能をインストールできます。NetBeans HTML5プロジェクトを実行し、NetBeans Connector拡張機能のインストールを求められた場合に、Chrome Webストアにアクセスできない場合は、次の手順を実行して拡張機能をインストールできます。

1. 「Chrome拡張機能のインストール」ダイアログ・ボックスで「接続なし」をクリックします。
image::images/html5-offline-extension1.png[title="「Chrome拡張機能のインストール」ダイアログ・ボックス"]

[start=2]
. ダイアログ・ボックスの*検索*をクリックして、ローカル・システム上の* ``netbeans-chrome-connector.crx`` *拡張機能を含むNetBeans IDEインストール・フォルダを開きます。
image::images/html5-offline-extension2.png[title="NetBeans Connector拡張機能がChromeの「拡張機能」で有効になっている"]

[start=3]
. ChromeブラウザでChromeの「拡張機能」ページ( ``chrome://extensions/`` )を開きます。
image::images/html5-offline-extension3.png[title="NetBeans Connector拡張機能がChromeの「拡張機能」で有効になっている"]

[start=4]
.  ``netbeans-chrome-connector.crx`` 拡張機能をブラウザの「拡張機能」ページにドラッグし、「追加」をクリックして、拡張機能を追加することを確認します。

拡張機能が追加されると、NetBeans Connector拡張機能がインストール済拡張機能のリストに追加されていることが表示されます。


[start=5]
. 「Chrome拡張機能のインストール」ダイアログ・ボックスで*「はい、プラグインをただちにインストールします」*をクリックして、ChromeブラウザにNetBeans HTML5プロジェクトを開きます。ブラウザ・タブの場所バーにNetBeans Connectorアイコンが表示されます。


== 埋込みWebKitブラウザの使用

アプリケーションを開発している場合は、NetBeans Connector拡張機能がインストールされたChromeブラウザでHTML5を実行することをお薦めします。HTML5アプリケーションを作成する場合は、実行ターゲットとして*NetBeans統合のあるChrome*がデフォルトで選択されています。ただし、IDEにバンドルされている埋込みWebKitブラウザでHTML5アプリケーションを実行することもできます。

埋込みWebKitブラウザでHTML5アプリケーションを実行すると、「Webブラウザ」ウィンドウがIDEに開かれます。埋込みWebKitブラウザでは、「検査」モード、各種画面サイズ・オプション、JavaScriptデバッグなど、NetBeans Connector拡張機能がインストールされている場合にChromeブラウザで有効になる機能の多くがサポートされます。

*注意:*メイン・メニューで「ウィンドウ」→「Web」→「Webブラウザ」を選択すると、IDEによって、「オプション」ウィンドウで「Webブラウザ」として指定されたブラウザが開かれます。

次の手順を実行して、埋込みWebKitブラウザでHTML5アプリケーションを実行します。

1. ツールバーのドロップダウン・リストで「埋込みWebKitブラウザ」を選択します。
image::images/html5-embedded1.png[title="ツールバーのドロップダウン・リストのHTML5アプリケーションのターゲット・ブラウザのリスト"]

[start=2]
. ツールバーで「実行」をクリックするか、「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックして「実行」を選択します。

アプリケーションを実行すると、IDEに「Webブラウザ」ウィンドウが開きます。

image::images/html5-embedded2.png[title="「埋込みWebKitブラウザ」ウィンドウ"]

「Webブラウザ」タブのツールバーでアイコンをクリックして「検査」モードを有効にし、異なる表示サイズ間をすばやく切り替えることができます。


== NetBeans HTML5プロジェクトの作成

この課題では、IDEの新規プロジェクト・ウィザードを使用して新規HTML5プロジェクトを作成します。このチュートリアルでは、 ``index.html`` ファイルのみ持つ非常に基本的なHTML5プロジェクトを作成します。ウィザードでは、プロジェクトで使用するいくつかのjQuery JavaScriptライブラリも選択します。

1. メイン・メニューで「ファイル」→「新規プロジェクト」([Ctrl]-[Shift]-[N]、Macの場合は[⌘]-[Shift]-[N])を選択して新規プロジェクト・ウィザードを開きます。
2. *HTML5*カテゴリを選択し、*「HTML5アプリケーション」*を選択します。「次」をクリックします。
image::images/html5-newproject1.png[title="新規プロジェクト・ウィザードのHTML5アプリケーション・テンプレート"]

[start=3]
. 「プロジェクト名」に*「HTML5Demo」*と入力し、プロジェクトを保存するコンピュータ上のディレクトリを指定します。「次」をクリックします。

[start=4]
. 手順3の「サイト・テンプレート」では、「サイト・テンプレートなし」を選択します。「次」をクリックします。
image::images/html5-newproject2.png[title="新規HTML5アプリケーション・ウィザードの「サイト・テンプレート」パネル"]

「サイト・テンプレートなし」オプションを選択すると、ウィザードによって基本的な空のNetBeans HTML5プロジェクトが生成されます。ここで「終了」をクリックした場合、プロジェクトには「サイト・ルート」フォルダのみ含まれ、「サイト・ルート」フォルダには ``index.html`` ファイルのみ含まれます。

ウィザードの「サイト・テンプレート」ページでは、HTML5プロジェクトに対して一般的なオンライン・テンプレートのリストから選択するか、サイト・テンプレートの ``.zip`` アーカイブの場所を指定できます。 ``.zip`` アーカイブのURLを入力するか、「参照」をクリックしてローカル・システム上の場所を指定できます。サイト・テンプレートに基づいてプロジェクトを作成すると、プロジェクトのファイル、ライブラリおよび構造はテンプレートによって決定されます。

*注意:* リストのオンライン・テンプレートの1つに基づくプロジェクトを作成するにはオンラインになっている必要があります。


[start=5]
. 手順4の「JavaScriptファイル」では、「使用可能」ペインで ``jquery`` および ``jqueryui``  JavaScriptライブラリを選択し、右矢印アイコン( > )をクリックして、選択したライブラリをウィザードの「選択済」ペインに移動します。デフォルトでは、ライブラリはプロジェクトの「 ``js/libraries`` 」フォルダに作成されます。このチュートリアルでは、「縮小」バージョンのJavaScriptライブラリを使用します。

パネルのテキスト・フィールドを使用して、JavaScriptライブラリのリストをフィルタできます。たとえば、フィールドに*「jq」*と入力して、 ``jquery`` ライブラリを探します。[Ctrl]を押しながらライブラリの名前をクリックして、複数のライブラリを選択できます。

image::images/html5-newproject3.png[title="新規HTML5アプリケーション・ウィザードの「JavaScriptライブラリ」パネル"]

*注意:*

* 「バージョン」列でライブラリのバージョン番号をクリックして、旧バージョンのライブラリを選択できるポップアップ・ウィンドウを開くことができます。デフォルトでは、ウィザードには最新バージョンが表示されます。
* JavaScriptライブラリの最小バージョンは、圧縮されたバージョンであり、エディタで表示するとコードは包括的に表示されません。

[start=6]
. *「終了」*をクリックすると、ウィザードが完了します。

「終了」をクリックすると、IDEによりプロジェクトが作成され、「プロジェクト」ウィンドウにプロジェクトのノードが表示され、エディタに ``index.html`` ファイルが開かれます。

image::images/html5-projectswindow1.png[title="新規HTML5アプリケーション・ウィザードの「JavaScriptライブラリ」パネル"]

「プロジェクト」ウィンドウで「 ``js/libs`` 」フォルダを展開した場合、新規プロジェクト・ウィザードで指定したJavaScriptライブラリがプロジェクトに自動的に追加されたことがわかります。JavaScriptファイルを右クリックし、ポップアップ・メニューで「削除」を選択して、JavaScriptライブラリをプロジェクトから削除できます。

JavaScriptライブラリをプロジェクトに追加するには、プロジェクト・ノードを右クリックし、「プロパティ」を選択して、「プロジェクト・プロパティ」ウィンドウを開きます。「プロジェクト・プロパティ」ウィンドウの「JavaScriptライブラリ」パネルでライブラリを追加できます。または、ローカル・システムにあるJavaScriptファイルを「 ``js`` 」フォルダに直接コピーできます。

ここで、プロジェクトがChromeブラウザに正しく表示されることをテストできます。


[start=7]
. NetBeans Connector統合付きChromeがツールバーのブラウザ・ドロップダウン表で選択されていることを確認します。
image::images/html5-js-selectbrowser.png[title="ツールバーのドロップダウン・リストで選択されたブラウザ"]

[start=8]
. 「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。

「実行」を選択すると、IDEによってChromeブラウザにタブが開き、アプリケーションのデフォルトの ``index.html`` ページが表示されます。IDEで「ブラウザDOM」ウィンドウが開き、ブラウザで開いているページのDOMツリーが表示されます。

image::images/html5-runproject.png[title="Chromeブラウザ・タブのアプリケーション"]

NetBeans Connectorがタブをデバッグしていることを示す黄色いバーがブラウザ・タブに表示されます。黄色いバーが表示されているときは、IDEとブラウザが接続され、相互に通信できます。IDEからHTML5アプリケーションを起動すると、JavaScriptデバッガが自動的に有効になります。ファイルに変更を保存するかCSSスタイル・シートに変更を加えた場合は、ブラウザ・ウィンドウが自動的に更新されて変更が表示されるため、ページを再ロードする必要はありません。

黄色いバーを閉じるか「取消」をクリックした場合は、IDEとブラウザ間の接続が切断されます。接続を切断した場合は、IDEからHTML5アプリケーションを再度実行する必要があります。

また、NetBeansアイコンがブラウザのURLの場所フィールドに表示されます。アイコンをクリックして、ブラウザの表示サイズの変更および「NetBeansでの検査」モードの有効化を行う各種オプションを提供するメニューを開くことができます。

image::images/html5-runproject2.png[title="Chromeブラウザ・タブの「NetBeans」メニュー"]

メニューでデフォルト・デバイスの1つを選択した場合、ブラウザ・ウィンドウがデバイスのサイズに変更されます。これにより、アプリケーションが選択したデバイスでどのように表示されるかを確認できます。HTML5アプリケーションは、通常、表示されるデバイスの画面サイズに対応するように設計されています。画面サイズに対応するJavaScriptおよびCSSルールを使用し、レイアウトがデバイスに対して最適化されるようにアプリケーションの表示方法を変更できます。


== HTMLファイルの編集

この課題では、プロジェクトにプロジェクト・リソースを追加し、 ``index.html`` ファイルを編集してリソースへのリンクを追加し、いくつかのCSSルールを追加します。JavaScriptと組み合せた場合に、いくつかの単純なCSSセレクタによってブラウザへのページの表示方法が大幅に変化する様子を確認します。

1. link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5Demo-projectresources.zip[+project resources+]アーカイブをダウンロードし、コンテンツを抽出します。

zipアーカイブには、プロジェクトに追加する必要のあるファイルを含む2つのフォルダ( ``pix`` および ``css`` )が含まれます。


[start=2]
.  ``pix`` および ``css`` フォルダを「サイト・ルート」フォルダにコピーします。

*注意:*プロジェクトのディレクトリ構造を参照する場合は、フォルダを ``public_html`` フォルダにコピーする必要があります。

image::images/html5-fileswindow.png[title="Chromeブラウザ・タブの「NetBeans」メニュー"]

[start=3]
. エディタに`index.html`を開きます(まだ開いていない場合)。

[start=4]
. エディタで、開始および終了 ``<head>`` タグの間に次のコード(太字)を追加することで、プロジェクトの作成時に追加したJavaScriptライブラリへの参照を追加します。

[source,xml]
----

<html>
  <head>
    <title></title>
    <meta charset=UTF-8">
    <meta name="viewport" content="width=device-width">
    *<script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
    <script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script>*
  </head>
  <body>
    TODO write content
  </body>
</html>
----

エディタでのコード補完の使用が役立つ場合があります。

image::images/html5-editor1.png[title="エディタでのコード補完"]

[start=5]
. デフォルトの「`TODO write content`」コメントを削除し、 ``body`` タグの間に次のコードを入力します。

[source,html]
----

    <body>
        <div>

            <h3><a href="#">Mary Adams</a></h3>
            <div>
                <img src="pix/maryadams.jpg" alt="Mary Adams">
                <ul>
                    <li><h4>Vice President</h4></li>
                    <li><b>phone:</b> x8234</li>
                    <li><b>office:</b> 102 Bldg 1</li>
                    <li><b>email:</b> m.adams@company.com</li>
                </ul>
                <br clear="all">
            </div>

            <h3><a href="#">John Matthews</a></h3>
            <div>
                <img src="pix/johnmatthews.jpg" alt="John Matthews">
                <ul>
                    <li><h4>Middle Manager</h4></li>
                    <li><b>phone:</b> x3082</li>
                    <li><b>office:</b> 307 Bldg 1</li>
                    <li><b>email:</b> j.matthews@company.com</li>
                </ul>
                <br clear="all">
            </div>

            <h3><a href="#">Sam Jackson</a></h3>
            <div>
                <img src="pix/samjackson.jpg" alt="Sam Jackson">
                <ul>
                    <li><h4>Deputy Assistant</h4></li>
                    <li><b>phone:</b> x3494</li>
                    <li><b>office:</b> 457 Bldg 2</li>
                    <li><b>email:</b> s.jackson@company.com</li>
                </ul>
                <br clear="all">
            </div>

            <h3><a href="#">Jennifer Brooks</a></h3>
            <div>
                <img src="pix/jeniferapplethwaite.jpg" alt="Jenifer Applethwaite">
                <ul>
                    <li><h4>Senior Technician</h4></li>
                    <li><b>phone:</b> x9430</li>
                    <li><b>office:</b> 327 Bldg 2</li>
                    <li><b>email:</b> j.brooks@company.com</li>
                </ul>
                <br clear="all">
            </div>
        </div>
    </body>
----

[start=6]
. 変更を保存します。

変更を保存すると、ブラウザにページが自動的に再ロードされ、ページは次の図のようになります。

image::images/html5-runproject3.png[title="Chromeブラウザ・タブに再ロードされたページ"]

[start=7]
. 次のインラインCSSルールをファイルの ``<head>`` タグの間に入力します。

[source,xml]
----

<style type="text/css">
    ul {list-style-type: none}
    img {
        margin-right: 20px; 
        float:left; 
        border: 1px solid;
    }
</style>
----

CSSルールを追加する際に、[Ctrl]-[Space]を押して、エディタでコード補完を使用します。

image::images/html5-editor2.png[title="エディタでのCSSルールのコード補完"]

「ブラウザDOM」ウィンドウを開くと、現在のページの構造を確認できます。

image::images/dom-browser.png[title="DOMツリーを表示している「ブラウザDOM」ウィンドウ"]

[start=8]
. スタイル・シートへの次のリンク(*bold*)を`<head>`タグの間に追加します。

[source,xml]
----

<head>
...
    <script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script>
    *<link type="text/css" rel="stylesheet" href="css/basecss.css">*
...
</head>
----

 ``basecss.css`` スタイル・シートは、jQuery "UI lightness"テーマのカスタムCSSスタイル・シートに定義されているCSSルールの一部に基づきます。

エディタに ``basecss.css`` スタイル・シートを開き、スタイル・シートを変更して前の手順で追加したCSSルールを追加するか、CSSルールの新規スタイル・シートを作成できます。


[start=9]
.  ``<head>`` タグの間に次のコードを追加して、ページの要素がロードされる際にjQueryスクリプトを実行します。

[source,xml]
----

    *<script type="text/javascript">
        $(document).ready(function() {

        });
    </script>*
</head>
----

jQueryは、動的に適用されるJavaScriptの属性と動作をDOM (Document Object Model)の要素に結び付けることによって機能します。この例で使用するjQuery命令は、DOMのすべての要素がブラウザにロードされた後にのみ実行される必要があります。jQuery動作はDOMの要素に接続されるので、期待する結果を得るにはこれらの要素がjQueryで使用できる必要があるため、これは重要です。jQueryは、`$`で表される、jQueryオブジェクトの後に続く組込みの`(document).ready`関数を使用して、これを処理してくれます。

この関数の次の省略バージョンを使用することもできます。


[source,java]
----

$(function(){

});
----

jQueryの命令は、JavaScriptメソッドの形式をとり、パラメータの配列を表すオプションのオブジェクト・リテラルを持ちます。また、適切なとき、つまりDOMが完全にロードされた後にのみ実行されるように、`(document).ready`関数内の中括弧`{}`の間に置く必要があります。


[start=10]
. `(document).ready`関数内の中括弧`{}`の間に、次のコード(太字)を追加します。

[source,xml]
----

    <script type="text/javascript">
        $(document).ready(function() {
            *$("#infolist").accordion({
                autoHeight: false
            });*
        });
    </script>
</head>
----

このコードは、link:http://jqueryui.com/[+jQuery UIライブラリ+]に含まれるlink:http://jqueryui.com/demos/accordion/[+jQuery accordionウィジェット+]・スクリプトを呼び出します。accordionスクリプトは、 ``infolist`` として識別されているDOMオブジェクト内の要素を変更します。このコードで、`#infolist`は、値`infolist`の`id`属性を持つ一意のDOM要素に接続されたCSSセレクタです。これは、典型的なJavaScriptドット表記法(「`.`」)を使用して、`accordion()`メソッドを使用してこの要素を表示するjQuery命令に接続されています。

次の手順では、ページ内の要素を ``infolist`` として識別します。

*注意:*上記のスニペットでは、「`autoHeight: false`」も指定しています。これは、アコーディオン・ウィジェットが各パネルの高さをマークアップ内で最も高いコンテンツ部分に基づいて設定することを防止します。詳細は、link:http://docs.jquery.com/UI/Accordion[+アコーディオンのAPIドキュメント+]を参照してください。

`index.html`ファイルの ``<head>`` セクションは次のようになります。


[source,xml]
----

<html>
    <head>
        <title></title>
        <meta charset="UTF-8">        
        <meta name="viewport" content="width=device-width">
        <script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
        <script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script>
        <link type="text/css" rel="stylesheet" href="css/basecss.css">

        <style type="text/css">
            ul {list-style-type: none}
            img {
                margin-right: 20px; 
                float:left; 
                border: 1px solid;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#infolist").accordion({
                    autoHeight: false
                });
            });
        </script>
    </head>
----

エディタ内で右クリックし、「フォーマット」を選択すると、コードの体裁を整えることができます。


[start=11]
. 次の`id`セレクタと値(太字)を追加することで、ページのコンテンツを囲む ``<div>`` 要素を変更します。

[source,html]
----

<body>
    <div *id="infolist"*>
            
----

この`<div>`要素は、ページのコンテンツを囲みます(4セットの`<h3>`タグと、チュートリアルで前に追加した`<div>`タグ)。

「CSSルールの編集」ダイアログ・ボックスで、要素にセレクタを追加できます。「CSSルールの編集」ダイアログ・ボックスを開くには、エディタで ``<div>`` タグを右クリックし、ポップアップ・メニューで「CSSルールの編集」を選択します。または、エディタで挿入カーソルが ``<div>`` タグにある場合は、「CSSスタイル」ウィンドウ(「ウィンドウ」>「Web」>「CSSスタイル」)の「CSSルールの編集」ボタン(image::images/newcssrule.png[title="エディタでのコード補完"])をクリックします。

image::images/html5-cssstyles.png[title="「CSSスタイル」ウィンドウ"]

CSSルール・ダイアログ・ボックスで、「セレクタ・タイプ」として「 ``id`` 」を選択し、「セレクタ」として*「infolist」*を入力します。「要素に変更を適用」が選択されていることを確認します。

image::images/html5-cssrules.png[title="「CSSルールの編集」ダイアログ・ボックス。"]

ダイアログ・ボックスで「OK」をクリックすると、 ``infolist`` セレクタのCSSルールが ``basecss.css`` スタイル・シートに自動的に追加されます。


[start=12]
. 変更を ``index.html`` に保存します([Ctrl]-[S]、Macの場合は[⌘]-[S])。

変更を保存すると、Webブラウザにページが自動的に再ロードされます。ページのレイアウトが変更され、 ``basecss.css`` スタイル・シートに定義されているCSSスタイル・ルールがページで使用されています。下のリストのうち ``<h3>`` は開いていますが、その他は縮小されています。 ``<h3>`` 要素をクリックしてリストを展開できます。

image::images/html5-runproject5.png[title="ブラウザにロードされた最終プロジェクト"]

jQuery accordion関数は、 ``infolist``  DOMオブジェクトに含まれるすべてのページ要素を変更します。「ナビゲータ」ウィンドウで、HTMLファイルの構造および ``id=infolist`` で識別された ``div`` 要素を確認できます。

image::images/navigator3.png[title="「ブラウザDOM」ウィンドウ"]

「ナビゲータ」ウィンドウで要素を右クリックし、「ソースへ移動」を選択して、ソース・ファイル内のその要素の場所にすばやく移動できます。

「ブラウザDOM」ウィンドウで、ブラウザでレンダリングされたページのDOM要素、および要素に適用されるJQueryスタイルを確認できます。

image::images/dom-browser3.png[title="「ブラウザDOM」ウィンドウ"]

ブラウザでNetBeansでの検査モードが有効になっている場合、ブラウザ・ウィンドウで要素を選択すると、その要素が「ブラウザDOM」ウィンドウで強調表示されます。


[[template]]
== サイト・テンプレートとしてのプロジェクトの保存

テンプレートとして使用できるサイト・テンプレートとしてプロジェクトを保存して、プロジェクトに基づく他のHTML5サイトを作成できます。サイト・テンプレートには、JavaScriptライブラリ、CSSファイル、イメージおよびHTMLファイルのテンプレートを含めることができます。IDEには、サイト・テンプレートに含めるファイルを選択できるウィザードが用意されています。

1. 「プロジェクト」ウィンドウでプロジェクトを右クリックし、ポップアップ・メニューから「テンプレートとして保存」を選択します。
2. 「名前」フィールドに*「HTML5DemoSiteTemplate」*と入力し、テンプレートを保存する場所を指定します。
3. すべてのファイルが選択されていることを確認します。「終了」をクリックします。

ダイアログ・ボックスのツリーでノードを展開すると、サイト・テンプレートに含まれるファイルを確認できます。

image::images/html5-sitetemplate.png[title="「サイト・テンプレートを作成」ダイアログ・ボックス"]

サイト・テンプレートに ``index.html`` ファイル、CSSスタイル・シート、プロジェクトに使用されるイメージおよびJavaScriptライブラリが含まれることを確認できます。サイト・テンプレートには、構成ファイルとテストを含めることもできます。

「終了」をクリックすると、IDEによってサイト・テンプレートが ``.zip`` アーカイブとして生成されます。

サイト・テンプレートに基づくプロジェクトを作成する場合は、新規プロジェクト・ウィザードの「サイト・テンプレート」パネルで ``.zip`` アーカイブの場所を指定します。


[[summary]]
== サマリー

このチュートリアルでは、いくつかのjQuery JavaScriptライブラリを使用する空のHTML5プロジェクトを作成する方法を学習しました。ChromeブラウザのNetBeans Connector拡張機能をインストールし、ブラウザでHTML5プロジェクトを実行する方法も学習しました。 ``index.html`` ファイルを編集するときに、HTMLおよびCSSファイルの編集に役立ついくつかのツールがIDEによって提供されることを確認しました。

link:/about/contact_form.html?to=3&subject=Feedback:%20Getting%20Started%20with%20HTML5%20Applications[+このチュートリアルに関するご意見をお寄せください+]


[[seealso]]
== 関連項目

IDEでのHTML5アプリケーションのサポートの詳細は、link:https://netbeans.org/[+netbeans.org+]で次のソースを参照してください。

* link:html5-editing-css.html[+HTML5アプリケーションでのCSSスタイル・シートの操作+]。このチュートリアルで作成したアプリケーションを継続するドキュメントで、IDEでCSSのウィザードおよびウィンドウのいくつかを使用する方法、およびChromeブラウザの「検査」モードを使用してプロジェクト・ソース内の要素をビジュアルに特定する方法を示します。
* link:html5-js-support.html[+HTML5アプリケーションでのJavaScriptのデバッグとテスト+]。IDEでJavaScriptファイルをデバッグおよびテストするのに役立つツールをIDEが提供する方法を示すドキュメントです。

jQueryの詳細は、公式ドキュメントを参照してください。

* 公式ホーム・ページ: link:http://jquery.com[+http://jquery.com+]
* UIホーム・ページ: link:http://jqueryui.com/[+http://jqueryui.com/+]
* チュートリアル: link:http://docs.jquery.com/Tutorials[+http://docs.jquery.com/Tutorials+]
* ドキュメントのメイン・ページ: link:http://docs.jquery.com/Main_Page[+http://docs.jquery.com/Main_Page+]
* UIデモおよびドキュメント: link:http://jqueryui.com/demos/[+http://jqueryui.com/demos/+]