Web アプリケーション開発入門
このドキュメントでは、NetBeans IDE を使用して Web アプリケーションを開発する基本的な手順を学ぶことができます。簡単な Web アプリケーションを作成し、サーバーに配備し、その表現をブラウザに表示する方法を示します。このアプリケーションは JavaServer Pages™ (JSP) ページを使用して、名前の入力を求めます。次に JavaBeans™ コンポーネントを使用して HTTP セッション中その名前を維持し、2 つめの JSP ページに出力するために名前を取得します。
目次
このチュートリアルに従うには、次のソフトウェアとリソースが必要です。
| NetBeans IDE |
Java バージョン |
| Java Development Kit (JDK) |
version 6 |
GlassFish Server Open Source Edition
または
Tomcat サーブレットコンテナ
または
Oracle WebLogic Server |
3.x
version 6.x (EE 5) または 7.x (EE 5 または EE 6)
11gR1 (10.3.3) 以降 |
注:
- Java EE インストール版 (Java SE ではない) では、GlassFish サーバーと Apache Tomcat サーブレットコンテナをオプションでインストールできます。
- プロジェクトを、正常に機能するソリューションと比較する必要がある場合は、サンプルアプリケーションをダウンロードできます。
Web アプリケーションプロジェクトの準備と作成
- メインメニューから「ファイル」>「新規プロジェクト」(Ctrl-Shift-N) を選択します。「カテゴリ」から「Java Web」を選択します。「プロジェクト」で「Web アプリケーション」を選択して、「次へ」をクリックします。
- 手順 2 で、「プロジェクト名」テキストボックスに「HelloWeb」と入力します。
- 「プロジェクトの場所」を使用コンピュータ上の任意のディレクトリにします。このチュートリアルでは、このディレクトリを $PROJECTHOME と表します。
- (任意) 「ライブラリの格納用に専用フォルダを使用」チェックボックスを選択し、ライブラリフォルダの場所を指定します。このオプションの詳細は、「プロジェクトライブラリの共有」を参照してください。
- 「次へ」をクリックします。「サーバーと設定」パネルが開きます。アプリケーションで使用する Java EE のバージョンを選択します。
- アプリケーションを配備するサーバーを選択します。IDE に登録されているサーバーのみ表示されます。「コンテキストパス」(サーバー上など) が /HelloWeb になっていることを確認します。これは、前の手順でプロジェクトにつけた名前に基づいています。
- 「次へ」をクリックします。「フレームワーク」パネルで「完了」をクリックしてプロジェクトを作成します。
これで、 $PROJECTHOME /HelloWeb プロジェクトフォルダが作成されます。このプロジェクトフォルダには、ソースおよび、プロジェクトの Ant 構築スクリプトなどのプロジェクトメタデータのすべてが含まれます。IDE で HellowWeb プロジェクトが開きます。開始ページである index.jsp が、メインウィンドウ内のソースエディタで開きます。プロジェクトのファイル構造を「ファイル」ウィンドウ (Ctrl-2) で、論理構造を「プロジェクト」ウィンドウ (Ctrl-1) で表示できます。
Web アプリケーションのソースファイルの作成と編集
ソースファイルの作成と編集は、IDE が提供するもっとも重要な機能です。これは、開発者が時間の大半を費やす部分です。IDE には、開発者が手動ですべてのコードを作成するか、あるいはコードのかなりの部分を IDE に自動的に生成させるかどうかに関係なく、開発者各自の開発スタイルに役立つ広範囲のツールが用意されています。
Java パッケージと Java ソースファイルの作成
- 「プロジェクト」ウィンドウで「ソースパッケージ」ノードを展開します。「ソースパッケージ」ノードには、空の「デフォルトパッケージ」ノードだけ含まれていることに注意してください。
- 「ソースパッケージ」ノードを右クリックし、「新規」>「Java クラス」を選択します。「クラス名」テキストボックスに「NameHandler」と入力し、「パッケージ」コンボボックスに「org.mypackage.hello」と入力して、「完了」をクリックします。新しい NameHandler.java ファイルがソースエディタで開きます。
- ソースエディタで、クラス宣言のすぐ下に次の行を入力して String 変数を宣言します。
String name;
- 次のコンストラクタをクラスに追加します。
public NameHandler() { }
- nameHandler() コンストラクタに次の行を追加します。
name = null;
取得メソッドと設定メソッドの生成
- ソースエディタで name フィールドを右クリックし、「リファクタリング」>「フィールドをカプセル化」を選択します。「フィールドをカプセル化」ダイアログが開き、name フィールドが表示されます。フィールドの可視性はデフォルトで private に、アクセス用メソッドの可視性は public に設定されています。これは、クラス変数宣言のアクセス修飾子は private と指定され、取得メソッドと設定メソッドはそれぞれ public と private の修飾子を指定して生成されることを示します。
- 「リファクタリング」をクリックします。name フィールドの取得メソッドと設定メソッドが生成されます。クラス変数の修飾子は private に設定され、取得メソッドと設定メソッドは public の修飾子を指定して生成されます。Java クラスは次のようになります。
package org.mypackage.hello;
/**
*
* @author nbuser
*/
public class NameHandler {
private String name;
/** NameHandler の新しいインスタンスを作成 */
public NameHandler() {
name = null;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
デフォルトの JavaServer Pages ファイルの編集
- ソースエディタの上部に表示されている index.jsp ファイルのタブをクリックしてふたたびフォーカスします。
ソースエディタの右側にあるパレット (Ctrl-Shift-8) で「HTML フォーム」を展開し、「フォーム」項目をソースエディタ内の <h1> タグのあとにドラッグします。
「挿入フォーム」ダイアログが表示されます。
- 次の値を指定します。
- アクション: response.jsp
- メソッド: GET
- 名前: Name Input Form
「了解」をクリックします。index.jsp ファイルに HTML フォームが追加されます。
- 「テキスト入力」項目を </form> タグの直前にドラッグし、次の値を指定します。
「了解」をクリックします。<form> タグの間に HTML <input> タグが追加されます。このタグから value 属性を削除します。
- </form> タグの直前に「ボタン」項目をドラッグします。次の値を指定します。
「了解」をクリックします。<form> タグの間に HTML のボタンが追加されます。
- <input> タグの直前に「Enter your name:」と入力し、<h1> タグで囲まれたデフォルトの「Hello World!」というテキストを「Entry Form」に変更します。
- ソースエディタ内を右クリックし、「整形」(Alt-Shift-F) を選択してコードの体裁を整えます。index.jsp ファイルは次のようになります。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Entry Form</h1>
<form name="Name Input Form" action="response.jsp">
Enter your name:
<input type="text" name="name" />
<input type="submit" value="OK" />
</form>
</body>
</html>
JavaServer Pages ファイルの作成
- 「プロジェクト」ウィンドウで「HelloWeb」プロジェクトノードを右クリックし、「新規」>「JSP」を選択します。「新規 JSP ファイル」ウィザードが開きます。ファイルを response という名前にして、「完了」をクリックします。「プロジェクト」ウィンドウ内で index.jsp の下に response.jsp ファイルノードが表示され、ソースエディタで新しいファイルが開きます。
-
ソースエディタの右側の「パレット」で、「JSP」を展開し、「Bean を使用」項目をソースエディタ内の <body> タグのすぐ下にドラッグします。「挿入 Bean を使用」ダイアログが開きます。次の図に示すように、値を指定します。
- ID: mybean
- クラス: org.mypackage.hello.NameHandler
- スコープ: session
「了解」をクリックします。<jsp:useBean> タグが <body> タグの下に追加されていることがわかります。
- パレットから、「Bean プロパティーを設定」項目を <h1> タグの直前にドラッグし、「了解」をクリックします。表示される <jsp:setProperty> タグ内で、空の value 属性を削除し、次のように編集します。value = "" 属性が作成されている場合は削除します。そうでない場合は、index.jsp で渡す name の値が上書きされます。
<jsp:setProperty name="mybean" property="name" />
<jsp:setProperty> のドキュメントに示すように、プロパティー値はさまざまな方法で設定できます。この例では、index.jsp からのユーザー入力が、request オブジェクトに渡される名前と値のペアになります。<jsp:setProperty> タグを使用してプロパティーを設定するとき、request オブジェクトに含まれるプロパティーの名前に従って値を指定できます。したがって、property を name に設定することで、ユーザー入力で指定された値を取得できます。
- <h1> タグの間のテキストを次のように変更します。
<h1>Hello, !</h1>
- パレットから「Bean プロパティーを取得」項目をドラッグし、<h1> タグ間のコンマのあとにドロップします。「挿入 Bean プロパティーを取得」ダイアログで次の値を指定します。
- Bean 名: mybean
- プロパティー名: name
「了解」をクリックします。<jsp:getProperty> タグが <h1> タグの間に追加されていることがわかります。
注意: プロパティー名では大文字と小文字が区別されます。response.jsp と index.jsp の入力フォームの "name" プロパティーは、同じ大文字と小文字で指定する必要があります。
- ソースエディタ内を右クリックし、「整形」(Alt-Shift-F) を選択してコードの体裁を整えます。response.jsp ファイルの <body> タグは次のようになります。
<body>
<jsp:useBean id="mybean" scope="session" class="org.mypackage.hello.NameHandler" />
<jsp:setProperty name="mybean" property="name" />
<h1>Hello, <jsp:getProperty name="mybean" property="name" />!</h1>
</body>
Web アプリケーションプロジェクトの実行
IDE では、Ant 構築スクリプトを使用し、Web アプリケーションを構築、実行します。IDE では、「新規プロジェクト」ウィザードで指定するオプションと、プロジェクトの「プロジェクトプロパティー」ダイアログ (「プロジェクト」ウィンドウでプロジェクトノードの右クリックメニューから「プロパティー」を選択) のオプションに基づいて構築スクリプトが生成されます。
-
「プロジェクト」ウィンドウで「HelloWeb」プロジェクトノードを右クリックし、「実行」(F6) を選択します。Web アプリケーションを実行すると、IDE によって次の手順が実行されます。
- アプリケーションコードの構築とコンパイル (後述の注を参照)。プロジェクトノードのコンテキストメニューから「構築」または「生成物を削除して構築」を選択すると、この手順を個別に実行できます。
- サーバーの起動。
- サーバーへのアプリケーションの配備。プロジェクトノードのコンテキストメニューから「配備」を選択すると、この手順を個別に実行できます。
- ブラウザウィンドウでのアプリケーションの表示。
注: プロジェクトはデフォルトで「保存時にコンパイル」機能が有効になっている状態で作成されているので、アプリケーションを IDE で実行するときに先にコードをコンパイルする必要はありません。保存時にコンパイル機能の詳細は、「Java プロジェクトの作成、インポート、および構成」の「保存時にコンパイル」節を参照してください。
-
アプリケーションの実行の進行状況を示す出力ウィンドウが開きます。出力ウィンドウの「HelloWeb」タブを見てください。このタブでは、IDE で実行されるすべての手順を追跡できます。問題がある場合は、IDE がこのウィンドウにエラー情報を表示します。
- IDE がサーバーの状態を示す出力ウィンドウを開きます。出力ウィンドウで、使用しているサーバーの名前が付いているタブを見てください。
重要: GlassFish サーバーの起動に失敗した場合は、手動で起動し、プロジェクトを再度実行してください。サーバーは、「サービス」ウィンドウでサーバーノードを右クリックし、「起動」を選択することで、手動で起動できます。
サーバーの出力ウィンドウは、Web アプリケーションの実行の問題に関する詳細な情報を提供します。サーバーのログも役立つ場合があります。これらは、サーバーのドメインディレクトリにあります。「表示」>「IDE のログ」を選択して、IDE のログを表示することもできます。
-
デフォルトのブラウザで index.jsp ページが開きます。IDE がサーバーの出力を表示する前に、ブラウザウィンドウが開くこともあります。
テキストボックスに名前を入力し、「OK」をクリックします。response.jsp ページが表示され、簡単なあいさつのメッセージが表示されます。
トラブルシューティング
プロジェクトを構築して実行しましたが、index.jsp の「OK」ボタンをクリックすると、response.jsp を使用できないことを示すエラーページが表示されます。
JDK version 6 を使用していることを確認してください。IDE で使用している JDK のバージョンを確認するには、メインメニューから「ヘルプ」>「製品について」を選択します。Tomcat version 6.x 以降を使用していることを確認してください。メインメニューから「ツール」>「サーバー」を選択します。プロジェクトで使用しているサーバーを選択し、ダイアログの上部に表示される「サーバーの種類」のエントリを確認します。サンプルプロジェクトをダウンロードし、作成したプロジェクトと比較することもできます。
プロジェクトを構築して実行しましたが、「Hello, !」しか表示されず、名前が表示されません。
<jsp:setProperty> タグに value = "" 属性が含まれていませんか。これは index.jsp フォームで渡す値を上書きし、空の文字列に置き換えます。value 属性を削除してください。
プロジェクトを構築して実行しましたが、「Hello, null!」と表示されます。
まず、IDE の出力ウィンドウをアプリケーションとサーバーの両方について確認し、サーバーのログを確認します。サーバーが稼働しているかどうかを確認してください。アプリケーションが配備されているかどうかを確認してください。サーバーが稼働中で、アプリケーションが配備されている場合は、org.apache.jasper.JasperException: java.lang.NullPointerException が発生しているかどうかを確認してください。これは通常、コード内で値が正しく初期化されていないことを意味します。このチュートリアルでは、これはおそらく JSP ファイル内のプロパティー名の入力誤りを示しています。プロパティー名では大文字と小文字が区別されることに注意してください。
関連項目
これで、Web アプリケーション開発入門のチュートリアルは終わりです。このドキュメントでは、NetBeans IDE を使用して簡単な Web アプリケーションを作成し、サーバーに配備し、その表現をブラウザに表示する方法を示しました。また、アプリケーションで JavaServer Pages と JavaBeans を使用してユーザーデータを収集、維持、および出力する方法も示しました。
NetBeans IDE での Web アプリケーションの開発についての詳細は、次のリソースを参照してください。
