3分で読めます
| ヒント

NetBeansは、Mac上で様々な言語の開発をサポートする非常に便利な統合開発環境(IDE)です。第1回の記事では、インストール方法を説明しました。第2回の記事では、HTMLの書き方と学習方法をご紹介します。

パートIの要約
NetBeans は Java で書かれており、最初の記事では Java 8 をインストールしてから NetBeans 8.2 をインストールする方法を説明しました。
[Mac で無料で HTML を記述およびデバッグするための NetBeans のインストール方法、パート I]
そこで、Mac 上でも、あるいは信頼できるサービス(後者の場合はおそらくある程度の費用がかかる)を利用しても、従来の Web サーバーを構築する際の不便さについて説明しました。次に、NetBeans にはプライベートにアクセスできるローカル Web サーバー エンジンが内蔵されていることを説明しました。これにより、Safari などで HTML と CSS をテストできるようになります。
NetBeans 環境の設定にはいくつかの微妙な点があるので、始めましょう。
NetBeansの使用
まず、NetBeansを起動します。前回の記事では、他のMacアプリと同様にDockに配置する方法を説明しました。このようにスプラッシュ画面が表示されます。

ここで途方に暮れてしまうユーザーもいます。そこで、左上にあるNetBeansの「ファイル」メニューに注目してみましょう。「ファイル」>「新規プロジェクト」を選択してください。

まず、上部の検索フィールドを無視してください。代わりに:
- 「カテゴリ」の下で、「HTML5/JavaScript」をクリックします。
- 「プロジェクト」の下で、「HTML5/JS アプリケーション」をクリックします。
- 次へをクリック >
次のページでは、プロジェクトの名前と保存場所を指定します。プロジェクトを保存するのに便利な場所は、私のようにホームフォルダのルートです。

名前と場所を指定したら、「次へ >」をクリックします。この例ではサイトテンプレートがないので、「サイトテンプレートなし」を選択し、「次へ >」をクリックします。すると、「ツール」ページが表示されます。

これらのツールはすべて選択解除してください。このハウツーでは邪魔になるだけです。「完了」をクリックしてください。すると、素晴らしいNetBeans IDEが起動し、試用テンプレートとして定型的なHTMLコードが既に用意されています。例えば、以下のようになります。

この時点でいくつか注意点があります。まず、IDEは少し難しそうに見えるかもしれません。でも大丈夫です。IDEの使い方は少しずつ学んでいくものです。まずは基本から始めましょう。編集、保存、そしてブラウザを使った確認です。
NetBeansのドキュメントでもっと詳しく学びたい方は、ぜひご覧ください。クイックスタートガイドをはじめ、豊富な資料が揃っています。とても参考になります。
続けて、すぐに使い始めるために、Webブラウザを定義しましょう。このハウツーではSafariを使用します。iDEの上部に、ドロップダウン矢印が付いた(デフォルトの)Chromeアイコンがあることに注目してください。(Chromeを完全に使いこなすには、特別なNetBeanプラグインが必要なので、ここでは説明しません。)

下矢印をクリックすると、ブラウザのオプションが表示されます。Safariをクリックします。ブラウザ選択ウィンドウが閉じ、メニューバーのアイコンがSafariに切り替わります。

これで、定型HTMLコードをテストできます。メニューバーの右向きの緑色の矢印をクリックしてください。(上記のメニューバーのスクリーンショットをご覧ください。)Safariが起動し、結果が表示されます。

まとめ
ここまでで、JavaとNetBeansをインストールし、NetBeans HTML/CSSプロジェクトを作成し、ブラウザを選択し、Safariで定型HTMLを表示しました。次はエラー処理を少し見てみましょう。なかなか面白いですね。
HTMLのデバッグ
NetBeansの機能を簡単に紹介するために、14行目の末尾にある「div」コードを削除してみてください。するとすぐに、左側の行番号の列に(電球)の警告が表示されます。それをクリックすると、IDEがHTMLのどの部分を修正したかを説明する黄色のボックスが表示されます。

編集を元に戻すには、「/div」を置き換え、メニューバーにある二重のフロッピーディスクアイコン(時代錯誤ですが、伝統的なアイコンです)をクリックして作業内容を保存します。これで作業開始時に戻ります。その後、「ファイル」メニューから「終了」を選択するか、HTMLの編集を続行してください。
もちろん、学ぶべきことはまだまだたくさんあります。しかし、このハウツーとNetBeansのドキュメントがあれば、優れたIDEと無料のローカルプライベートWebサーバーエンジンを使ってHTMLを学習する準備が整います。
最後に、Amazonで見つけた学習補助としておすすめの本をご紹介します。「HTML & CSSを賢く学ぶ方法」

さあ、楽しんでください。