前回は、Web開発に特化した開発環境/エディタたちとして、GUI/CUIそれぞれの著名な開発プラットフォームを紹介しました。今回は、最新版にて大幅にWeb開発の機能が強化されたNetBeansについて取りあげたいと思います。

NetBeans 7.3にて強化されたWeb開発の機能を知る

NetBeansはJavaで動作する統合開発環境です。Oracle(買収以前はSun Microsystems)がスポンサーとなり、NetBeans Communityを中心として開発が進められています。PHPやJava、C、HTML/JavaScriptなど、様々な言語をサポートしています。

バージョン7.3ではHTML5に関するコーディング機能が大幅に強化されており、インスペクタやJavaScriptデバッガが利用可能になりました。Google Chromeに専用の拡張を導入することで、NetBeansと連携してさまざまな開発支援機能を利用できます。

今回はこのNetBeans 7.3にて強化された、Web開発の機能をご紹介します。NetBeansのインストールから、Web開発の支援機能をひととおり確認していきましょう。

・NetBeansのインストール
・NetBeans Connectorのインストール
・プロジェクトの作成、実行
・NetBeans Connectorでのデバッグ作業
・NetBeansのエディタ機能

なお、ここでの動作環境は次のとおりです。

・OS: Windows 7 Professional
・Google Chrome: 26.0.1410.64m

NetBeansのインストール

NetBeansのWebサイトより、NetBeansのインストーラをダウンロードします。画面右側の[Download]リンクをクリックしましょう。

NetBeansのWebサイト

NetBeans IDEは、開発者の意向に応じてサポートしている言語・機能が異なります。Web関連の開発のみに利用する場合は、PHPバンドルを選択すればOKです。この機会にほかのプログラミング言語にも触れてみたい！という方は、[すべて]をダウンロードしましょう。

NetBeans IDEのバンドル一覧

NetBeansはJDKを要求します。未インストールの場合は、OracleのサポートサイトよりJDKをダウンロード、インストールしておきます。

NetBeansインストーラをダウンロード後、起動します。ウィザードに従って、インストールを進めていきます。

インストールされるソフトウェア

ライセンス内容

JUnitのライセンス

NetBeansインストール先/JDK確認

GlassFishインストール先確認

インストール内容の最終確認画面

インストール完了。NetBeansプロジェクトに協力する場合はチェックを入れる

NetBeansをインストール後、さっそく起動してみましょう。次のようなスタート画面が表示されれば、インストールは正常に完了しています。

NetBeans Connectorのインストール

NetBeans ConnectorはGoogle Chromeの拡張として提供されている、NetBeans連携のためのプラグインソフトウェアです。Google Chromeにインストールしておくことで、NetBeansと連携したインスペクタ、JavaScriptデバッガ、ユニットテストが利用可能になります。NetBeansでWebサイト/アプリケーションを開発する際には、ぜひともインストールしておきたい拡張です。

NetBeans Connectorのインストールは、Chrome ウェブストアからおこないます。検索ボックスにNetBeansと入力します。

Chrome ウェブストアでNetBeans Connectorを検索

[Chromeに追加]ボタンをクリックし、NetBeans Connectorをインストールします。

NetBeans Connectorのインストールが完了。Chromeの拡張機能にて、インストールが完了しているかを確認

NetBeans Connectorのインストールが出来たら、ひととおりの準備が完了です。それでは早速、NetBeansの機能を体験していきましょう。

プロジェクトの作成、実行

NetBeansのメニューより、プロジェクトを新規に作成します。今回はWebサイト/アプリケーションのプロジェクトを作成したいので、カテゴリから[HTML/JavaScript]を選択し、[HTML5 Application]を選択します。既存のソースコード一式がある場合は、[HTML5 Application with Exisiting Sources]を選択します。

プロジェクトの新規作成ダイアログ

続いてプロジェクト名と、プロジェクトファイル一式を配置する場所を決定します。プロジェクトファイルは、デフォルトでマイドキュメント直下のNetBeansProjectsフォルダに配置されます。

プロジェクトの新規作成ダイアログ

プロジェクトにテンプレートを適用したい場合は、ここでテンプレートを選択します。テンプレートは自前で用意するほか、オンライン・テンプレートをダウンロードして利用することも可能です。

サイト・テンプレートの選択

オンライン・テンプレートで利用可能なプロダクトは次のとおりです。

・Angular JS Seed - Angular JSプロジェクト用のテンプレート
・Initializr: Bootstrap - InitializrのBootstrapテンプレート
・Initializr: Classic - InitializerのClassic H5BPテンプレート
・Initializr: Responsive - InitializerのResponsiveテンプレート
・HTML5 Boilerplate v4.0.0 - HTML5 Boilerplateのテンプレート(Version 4.0.0)
・HTML5 Boilerplate v3.0.2 - HTML5 Boilerplateのテンプレート(Version 3.0.2)
・Twitter Bootstrap - Twitter Bootstrapのテンプレート
・Mobile Boilerplate - Mobile Boilerplateのテンプレート

今回はテンプレートを使用せずに、プロジェクトを作成します。

最後に、利用するJavaScriptライブラリを選択します。使用可能なライブラリとバージョンが画面左に表示されるので、利用するライブラリを選択します。各種ライブラリはCDNJSまたはGoogle CDNから取得します。

サイト・テンプレートの選択

検索することで、目的のライブラリを絞り込める

[終了]ボタンをクリックして、プロジェクトの作成が完了します。

プロジェクト作成直後の画面。index.htmlが自動的に開く

プロジェクトの作成ができたら、さっそくWebブラウザでどのような表示になるか確認してみましょう。ツールバー上の再生ボタンをクリックします。Google ChromeにNetBeans Connectorがインストールされている場合は、NetBeansとGoogle Chromeが連動した状態でWebサイトの画面が表示されます。

Google Chrome + NetBeans Connectorでプレビュー中

NetBeans Connectorでのデバッグ作業

NetBeans Connectorを利用することで、NetBeansで次のデバッグ作業がおこなえます。

■ライブプレビュー

NetBeans上でコードを変更して保存をおこなうことで、自動的にGoogle Chromeで表示されている画面が更新されます。エディタで保存して、ウィンドウを切り替えて、更新ボタンをクリックして、エディタに戻って修正して・・といった一連の作業は、ライブプレビューで軽減が図れます。

NetBeans上でコードを変更して保存すると、Google Chromeの表示も更新される

■インスペクタ

NetBeans Connectorが有効になっている状態で、キーボードショートカット - Ctrl + Shift + S を同時に押すと、NetBeansと連携したインスペクタが利用可能になります。

NetBeansインスペクタで、CSSスタイルを確認

■ウィンドウサイズの調節

Google Chromeのアドレスバーに表示されている立方体のアイコンをクリックすることで、ウィンドウサイズの調整ができます。用意されているのは次の8種類です。

・デスクトップPC: 幅1,280px x 高さ1,024px
・タブレット幅持ち: 幅1,024px x 高さ768px
・タブレット高さ持ち: 幅768px x 高さ1,024px
・スマートフォン幅持ち: 幅480px x 高さ320px
・スマートフォン高さ持ち: 幅320px x 高さ480px
・ワイドスクリーン: 幅1,680px x 高さ1,050px
・ネットブックPC: 幅1,024px x 高さ600px
・Size to Fit: 最大化での表示

ウィンドウサイズの調整機能

クリックすることで、ウィンドウが指定した幅と高さに伸縮します。viewport指定の動作確認や、レスポンシブWebデザインの表示確認に役立ちます。

画面サイズのリストは、[Customize]メニューより自由に追加・編集・削除がおこなえます。

Customize Windows Settingsで、画面サイズの定義を自由に編集できる

NetBeansのエディタ機能

NetBeansのエディタには、多くの機能が用意されています。ここではWeb開発に関連した機能のうち、いくつかを抜粋してご紹介します。

■ナビゲータ

ナビゲータパネルでは、開いているファイルの種類に応じて内容を構造化し、ツリー表示します。ツリーはそれぞれ開閉がおこなえ、各要素をダブルクリックすることで、該当コードにジャンプします。

編集中のファイル種類と、ナビゲータに表示される情報の対応は次のとおりです。

・HTML: DOMツリーが表示されます。属性値が指定されている場合は、それも併せて表示します
・CSS: セレクタごとに分類されます。ID、クラス、要素名やCSSルール、名前空間別に整理して表示します
・JavaScript: オブジェクト、変数、スコープをツリーとして表示します

HTMLでのナビゲータ

CSSでのナビゲータ

JavaScriptでのナビゲータ

■入力の自動補完

エディタにてCtrl+Spaceキーを同時に押すことで、入力の自動補完がおこなわれます。入力補完の種類は、編集中のファイルに応じて変化します。ヘルプが存在する場合は、それも併せて表示されます。

たとえばHTMLファイルを編集中、タグを途中まで入力した状態でCtrl+Spaceキーを押すと、下の画像の通り、補完候補としてその要素のヘルプが表示されます。

HTMLでの入力補完(1)

何も入力していない状態でCtrl + Spaceキーを押した場合、フォームや特定のHTMLを自動で生成するためのサブメニューが表示されます。

HTMLでの入力補完(2)

キーボードやマウスで挿入したい要素を選択すると、ダイアログが表示されます。それぞれ情報を入力して[OK]ボタンをクリックすることで、必要なHTMLコードが挿入されます。

HTMLでの入力補完(3)

CSSファイルの編集中にCtrl + Spaceキーを押すと、CSSプロパティの補完候補とヘルプが表示されます。

CSSでの入力補完

JavaScriptファイルの編集中にCtrl + Spaceキーを押すと、オブジェクトやライブラリ特有のAPI情報、ほかのHTMLやCSSに入力されている内容と連携したセレクタが補完候補として表示されます。

JavaScriptでの入力補完

■履歴

エディタ上部の[履歴]タブをクリックすると、そのファイルの編集履歴が表示されます。SubversionやMercurial, Gitなどのバージョン管理システムとの連携設定をおこなっていない状態でも、自動で履歴が保存されていきます。

履歴

履歴ではファイルの保存日時、メッセージ、修正箇所の差分が表示されます。[ソース]タブをクリックすると、通常の編集用エディタに戻ります。

■表示、インデント、自動補完の機能設定

エディタの表示やインデント、自動補完の機能についての設定は、NetBeansのオプション > エディタタブにて変更が可能です。

フォーマットでは、インデントの種類やインデントサイズ、行折り返しのカスタマイズができます。

コード補完では、自動補完機能に対する挙動のカスタマイズができます。

NetBeansエディタオプション - コード補完

ヒントでは、言語に応じたヒントを表示するルールをカスタマイズできます。

NetBeansエディタオプション - ヒント

NetBeans 7.3にて強化された、Web開発に関連する機能についてひととおりご紹介しました。NetBeansにはHTML5やJavaScript以外にも、JavaやPHPといった幅広い言語をサポートしています。WebデザイナーからWebプログラマーまで、幅広いニーズに応えることができる開発プラットフォームと言えるでしょう。

NetBeansには最初から非常に多くの機能が用意されています。デザイナーや開発者によっては、インデントの好みや「大きなお世話」になるような機能もあることでしょう。有効にする機能、無効にする機能を随時見直しながら、自分の手になじむ開発環境にしていきましょう。

富田宏昭 Hiroaki Tomida
「株式会社キクミミ」でFileMakerやオープンソース言語などを用いた、Webアプリ開発 企業の業務改善のためのシステム開発や環境構築を行っている。主な著書に「HTML5/JavaScriptとPhoneGapで作るiPhoneアプリ開発入門」(マイナビ)など。