1.初期設定

1.Google Chromeの拡張機能 NetBeans Connector をインストールしておくと、NetBeansでHTMLファイルを保存するとリアルタイムでChromeの表示が更新されるので、開発効率が上がります。

図6.1 NetBeans Connector

2.プロジェクトの作成

作成するHTMLファイルは、「プロジェクト」という単位で管理されます。以下の手順でプロジェクトを作成します。

1.ウィンドウの左上にある「ファイル (F)」をクリック

2.下図6.2の「新規プロジェクト(W)…」をクリック

図6.2 新規プロジェクト

3.新規プロジェクトという、新しく作るプロジェクトの設定を行うための下図6.3のウィンドウが開きます。

下図6.3のウィンドウ では、「カテゴリ」が「HTML5/Javascript」、「プロジェクト」が「HTML5/JSアプリケーション」を選択して、「次へ (N) >」をクリックします。

図6.3 プロジェクトを選択

4.次に、下図6.4でプロジェクト名を決定します。

「プロジェクト名(N)」はデフォルトで「HTML5Application」となっています。(プロジェクト名は講師の指示に従ってください)

「プロジェクトの場所(L)」にHTMLファイルやCSSファイルが保存されるので任意の場所を選んでください。
(研修ではCドライブ直下の指定したフォルダ)

図6.4 名前と場所

5.下図6.5のサイト・テンプレートは「なし」を選択してください。

図6.5 サイトテンプレート

6.下図6.6の「ツール」はすべてのチェックを外してください。

図6.6 ツール

問題なければ「終了(F)」ボタンをクリックします。

研修中はこのプロジェクトを使い続けていきます。

7.下図6.7のようにGoogleChromeのアイコンが表示されます。

図6.7 GoogleChromeのアイコン

8.緑色の右向き三角のボタンをクリックすることでプロジェクトが実行できます。

9.GoogleChrome「TODO write content」と書かれたWebページが表示されます。

図6.8 NetBeans Connector

10.NetbeansのエディタでHTMLの内容を書き換え、上書き保存するとリアルタイムでWebページの内容も更新されます。

これをライブプレビューといいます。

3.エディタ機能 

1.HTMLの自動生成

何も入力していない状態でエディタ上で「Ctrl + Space」キーを同時に押すことで入力の自動補完機能が使えます。

下図6.9のようにフォームや特定のHTMLを自動で生成するためのサブメニューが表示されます

図6.9 自動補完機能

2.HTMLの自動補完

1.エディタ上で小なり記号(<)を入れるとタグの候補を表示します。

2.さらに「p」などと最初の一文字を入力するとタグの候補が絞り込まれます。

3.大なり記号(>)を入れて、開きタグを入力し、エンターキーを押すと、閉じタグ(今回の場合は</p>)が挿入されて便利です。

3.履歴

1.メニューバーの「チーム」 -「履歴(T)」-「履歴を表示(T)」を選択すると下図6.10のように、そのファイルの編集履歴が表示されます。

ファイルの保存日時、メッセージ、修正箇所の差分が表示されます。

6.10 ファイルの履歴

2.過去の履歴と現在のファイルの内容を見比べながら、必要に応じて過去の状態に戻ることができます。

3.右向きの矢印をクリックすることで過去のファイルの状態に戻せます。

4.「ソース」タブをクリックすると、通常の編集用エディタに戻ります。

なお、Javaの時に使用したショートカットキーはほとんどそのまま使用できます。

HTMLの文法に関しては以下の記事も参考にしてください。

新人エンジニア向けHTML講座

以上。

NetBeans IDEの説明へ戻る