HTML5アプリケーションの開始

This tutorial needs a review. You can open a JIRA issue, or edit it in GitHub following these contribution guidelines.

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

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

チュートリアルのスクリーンショットを確認するには、HTML5アプリケーションの開始のビデオを参照してください。

NetBeans Java WebアプリケーションでjQueryを使用する方法のチュートリアルは、チュートリアルjQueryを使用したWebページの外観と使いやすさの強化を参照してください。

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

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

NetBeans IDE、Java

7.4, 8.0

Java Development Kit (JDK)

バージョン7または8

Chromeブラウザ

 — 

ChromeのNetBeans Connector拡張機能

1.0.0以上

HTML5デモ・プロジェクト・リソース

 — 

完成したプロジェクトのサイト・テンプレート

 — 

*注意: *

  • プロジェクト・リソースzipファイルには、このチュートリアルでプロジェクトに追加する必要のあるJPGイメージとCSSファイルが含まれます。

  • プロジェクトを動作中のソリューションと比較する場合は、完成したプロジェクトのサイト・テンプレートをダウンロードできます。

  • このドキュメントは、HTML、CSSおよびJavaScriptについて基本的な知識またはプログラミング経験を持つ読者を想定して書かれています。

ChromeブラウザでのIDEの使用

HTML5アプリケーション開発をサポートする、IDEで使用可能なツールの一部をフルに活用するには、Chromeブラウザを使用し、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. プロジェクトの「名前と場所」を指定します。「次」をクリックします。

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

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

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

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

  1. ツールバーの「実行」をクリックします。

  1. 「Chrome拡張機能のインストール」ダイアログ・ボックスで「Chrome Webストアへ移動」をクリックします。

html5 offline extension1
Figure 1. 「Chrome拡張機能のインストール」ダイアログ・ボックス

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

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

html5 rerun dialog
Figure 2. 「Chrome拡張機能のインストール」ダイアログ・ボックス
  1. Chromeブラウザに移動し、NetBeans Connectorページで「Chromeに追加」をクリックします。拡張機能を追加するかどうかを確認するプロンプトが表示されたら、「追加」をクリックします。

html5 chrome netbeanshome
Figure 3. Chrome WebストアのNetBeans Connectorページ

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

html5 install extension2
Figure 4. 拡張機能がインストールされたことの確認
  1. IDEで、「Chrome拡張機能のインストール」ダイアログ・ボックスの「プロジェクトの再実行」をクリックします。

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

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

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

html5 install extension3
Figure 5. NetBeans Connector拡張機能がChromeの「拡張機能」で有効になっている

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

  1. Chromeブラウザを起動し、Chrome Webストアに移動します。

  2. Chrome WebストアでNetbeans Connector拡張機能を検索します。

  3. 検索結果ページで「Chromeに追加」をクリックし、拡張機能の追加を確認するプロンプトが表示されたら「追加」をクリックします。

html5 install extension1
Figure 6. Chrome WebストアのNetBeans Connector拡張機能

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

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

  1. 「Chrome拡張機能のインストール」ダイアログ・ボックスで「接続なし」をクリックします。

html5 offline extension1
Figure 7. 「Chrome拡張機能のインストール」ダイアログ・ボックス
  1. ダイアログ・ボックスの*検索*をクリックして、ローカル・システム上の* netbeans-chrome-connector.crx *拡張機能を含むNetBeans IDEインストール・フォルダを開きます。

html5 offline extension2
Figure 8. NetBeans Connector拡張機能がChromeの「拡張機能」で有効になっている
  1. ChromeブラウザでChromeの「拡張機能」ページ( chrome://extensions/ )を開きます。

html5 offline extension3
Figure 9. NetBeans Connector拡張機能がChromeの「拡張機能」で有効になっている
  1. netbeans-chrome-connector.crx 拡張機能をブラウザの「拡張機能」ページにドラッグし、「追加」をクリックして、拡張機能を追加することを確認します。

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

  1. 「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ブラウザ」を選択します。

html5 embedded1
Figure 10. ツールバーのドロップダウン・リストのHTML5アプリケーションのターゲット・ブラウザのリスト
  1. ツールバーで「実行」をクリックするか、「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックして「実行」を選択します。

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

html5 embedded2
Figure 11. 「埋込みWebKitブラウザ」ウィンドウ

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

NetBeans HTML5プロジェクトの作成

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

  1. メイン・メニューで「ファイル」→「新規プロジェクト」([Ctrl]-[Shift]-[N]、Macの場合は[⌘]-[Shift]-[N])を選択して新規プロジェクト・ウィザードを開きます。

  2. HTML5*カテゴリを選択し、「HTML5アプリケーション」*を選択します。「次」をクリックします。

html5 newproject1
Figure 12. 新規プロジェクト・ウィザードのHTML5アプリケーション・テンプレート
  1. 「プロジェクト名」に*「HTML5Demo」*と入力し、プロジェクトを保存するコンピュータ上のディレクトリを指定します。「次」をクリックします。

  1. 手順3の「サイト・テンプレート」では、「サイト・テンプレートなし」を選択します。「次」をクリックします。

html5 newproject2
Figure 13. 新規HTML5アプリケーション・ウィザードの「サイト・テンプレート」パネル

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

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

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

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

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

html5 newproject3
Figure 14. 新規HTML5アプリケーション・ウィザードの「JavaScriptライブラリ」パネル

注意:

  • 「バージョン」列でライブラリのバージョン番号をクリックして、旧バージョンのライブラリを選択できるポップアップ・ウィンドウを開くことができます。デフォルトでは、ウィザードには最新バージョンが表示されます。

  • JavaScriptライブラリの最小バージョンは、圧縮されたバージョンであり、エディタで表示するとコードは包括的に表示されません。

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

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

html5 projectswindow1
Figure 15. 新規HTML5アプリケーション・ウィザードの「JavaScriptライブラリ」パネル

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

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

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

  1. NetBeans Connector統合付きChromeがツールバーのブラウザ・ドロップダウン表で選択されていることを確認します。

html5 js selectbrowser
Figure 16. ツールバーのドロップダウン・リストで選択されたブラウザ
  1. 「プロジェクト」ウィンドウでプロジェクト・ノードを右クリックし、「実行」を選択します。

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

html5 runproject
Figure 17. Chromeブラウザ・タブのアプリケーション

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

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

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

html5 runproject2
Figure 18. Chromeブラウザ・タブの「NetBeans」メニュー

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

HTMLファイルの編集

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

  1. project resourcesアーカイブをダウンロードし、コンテンツを抽出します。

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

  1. pix および css フォルダを「サイト・ルート」フォルダにコピーします。

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

html5 fileswindow
Figure 19. Chromeブラウザ・タブの「NetBeans」メニュー
  1. エディタに`index.html`を開きます(まだ開いていない場合)。

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

<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>

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

html5 editor1
Figure 20. エディタでのコード補完
  1. デフォルトの「TODO write content」コメントを削除し、 body タグの間に次のコードを入力します。

    <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>
  1. 変更を保存します。

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

html5 runproject3
Figure 21. Chromeブラウザ・タブに再ロードされたページ
  1. 次のインラインCSSルールをファイルの <head> タグの間に入力します。

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

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

html5 editor2
Figure 22. エディタでのCSSルールのコード補完

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

dom browser
Figure 23. DOMツリーを表示している「ブラウザDOM」ウィンドウ
  1. スタイル・シートへの次のリンク(bold)を`<head>`タグの間に追加します。

<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ルールの新規スタイル・シートを作成できます。

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

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

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

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

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

$(function(){

});

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

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

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

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

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

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

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

<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>

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

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

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

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

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

html5 cssstyles
Figure 24. 「CSSスタイル」ウィンドウ

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

html5 cssrules
Figure 25. 「CSSルールの編集」ダイアログ・ボックス。

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

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

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

html5 runproject5
Figure 26. ブラウザにロードされた最終プロジェクト

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

navigator3
Figure 27. 「ブラウザDOM」ウィンドウ

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

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

dom browser3
Figure 28. 「ブラウザDOM」ウィンドウ

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

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

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

  1. 「プロジェクト」ウィンドウでプロジェクトを右クリックし、ポップアップ・メニューから「テンプレートとして保存」を選択します。

  2. 「名前」フィールドに*「HTML5DemoSiteTemplate」*と入力し、テンプレートを保存する場所を指定します。

  3. すべてのファイルが選択されていることを確認します。「終了」をクリックします。

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

html5 sitetemplate
Figure 29. 「サイト・テンプレートを作成」ダイアログ・ボックス

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

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

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

サマリー

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

関連項目

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

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