HTML5を使ったWeb開発をNetBeansで

１. 初期設定

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

 

２. プロジェクトの作成

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

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

 

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

 

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

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

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

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

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

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

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

９．アイコンにGoogleChromeのアイコンが表示され、マウスでポイントすると「NetBeans統合環境が組み込まれたChrome」と表示されます。

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

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

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

３．エディタ機能 

１．HTMLの自動生成

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

２．HTMLの自動補完

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

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

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

３．履歴

１．エディタ上の「履歴」タブをクリックするとそのファイルの編集履歴が表示されます。ファイルの保存日時、メッセージ、修正箇所の差分が表示されます。

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

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

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

 

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

 

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

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

 

いずれまた、機会があればパレットを使ったHTMLの作成やEmmetという便利なプラグインについても追記しますね。

 

以上。

 

 

NetBeans IDEの説明へ戻る