HTML5を使ったWeb開発をNetBeansで | 新入社員研修ポータル

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

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

1.ウィンドウの左上にある「ファイル (F)」をクリック
2.「新規プロジェクト(W)…」をクリック

3.新規プロジェクトという、新しく作るプロジェクトの設定を行うためのウィンドウが開きます。
4.まず、一つ目のウィンドウでは、「カテゴリ」が「HTML5/Javascript」、「プロジェクト」が「HTML5/JSアプリケーション」を選択して、「次へ (N) >」をクリックします。

5.次に、プロジェクト名を決定します。

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

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

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

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

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

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

9.アイコンにGoogleChromeのアイコンが表示されます。

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

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

12.NetbeansのエディタでHTMLの内容を書き換え、上書き保存するとリアルタイムでWebページの内容も更新されます。これをライブプレビューといいます。

何も入力していない状態でエディタ上で「Ctrl　＋　Space」キーを同時に押すことで入力の自動補完機能が使えます。フォームや特定のHTMLを自動で生成するためのサブメニューが表示されます

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

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

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

1.メニューバーの｢チーム｣ -「履歴(T)」-「履歴を表示(T)」を選択するとそのファイルの編集履歴が表示されます。ファイルの保存日時、メッセージ、修正箇所の差分が表示されます。

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

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

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

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

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

以上。