Web アプリケーション開発入門
このドキュメントでは、NetBeans IDE を使用して Web アプリケーションを開発する基本的な手順を学ぶことができます。簡単な Web アプリケーションを作成し、サーバーに配備し、その表現をブラウザに表示する方法を示します。このアプリケーションは JavaServer Pages™ (JSP) ページを使用して、名前の入力を求めます。次に JavaBeans™ コンポーネントを使用して HTTP セッション中その名前を維持し、2 つめの JSP ページに出力するために名前を取得します。
目次
このチュートリアルに従うには、次のソフトウェアとリソースが必要です。
注
- Web および Java EE インストール版では、GlassFish 2.1 アプリケーションサーバーと Apache Tomcat サーブレットコンテナ 6.0.x をオプションでインストールできます。このチュートリアルの手順に従うには、このいずれかをインストールする必要があります。
- NetBeans IDE の Java EE 5 機能を活用するためには、GlassFish アプリケーションサーバー 2.1 UR2 などの、Java EE 5 仕様に完全に準拠したアプリケーションサーバーを使用してください。別のサーバーを使用している場合は、「リリースノート」と「FAQ」で既知の問題やその回避策を確認してください。サポートされているサーバーと Java EE プラットフォームについては、「リリースノート」を参照してください。
- プロジェクトを、正常に機能するソリューションと比較する必要がある場合は、サンプルアプリケーションをダウンロードできます。
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> タグが追加されます。
- </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> タグの間に追加されていることがわかります。
- ソースエディタ内を右クリックし、「整形」(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) を選択します。
注: プロジェクトはデフォルトで「保存時にコンパイル」機能が有効になっている状態で作成されているので、アプリケーションを IDE で実行するときに先にコードをコンパイルする必要はありません。保存時にコンパイル機能の詳細は、「Java プロジェクトの作成、インポート、および構成」の「保存時にコンパイル」節を参照してください。
デフォルトのブラウザで index.jsp ページが開きます。
テキストボックスに名前を入力し、「OK」をクリックします。response.jsp ページが表示され、簡単なあいさつのメッセージが表示されます。
トラブルシューティング
プロジェクトを構築して実行しましたが、index.jsp の「OK」ボタンをクリックすると、response.jsp を使用できないことを示すエラーページが表示されます。
JDK version 5 以降を使用していることを確認してください。IDE で使用している JDK のバージョンを確認するには、メインメニューから「ヘルプ」>「製品について」を選択します。Tomcat version 5.x 以降を使用していることを確認してください。メインメニューから「ツール」>「サーバー」を選択します。プロジェクトで使用しているサーバーを選択し、ダイアログの上部に表示される「サーバーの種類」のエントリを確認します。サンプルプロジェクトをダウンロードし、作成したプロジェクトと比較することもできます。
プロジェクトを構築して実行しましたが、「Hello, !」しか表示されず、名前が表示されません。
<jsp:setProperty> タグに value = "" 属性が含まれていませんか。これは index.jsp フォームで渡す値を上書きし、空の文字列に置き換えます。value 属性を削除してください。
関連項目
これで、Web アプリケーション開発入門のチュートリアルは終わりです。このドキュメントでは、NetBeans IDE を使用して簡単な Web アプリケーションを作成し、サーバーに配備し、その表現をブラウザに表示する方法を示しました。また、アプリケーションで JavaServer Pages と JavaBeans を使用してユーザーデータを収集、維持、および出力する方法も示しました。
NetBeans IDE での Web アプリケーションの開発についての詳細は、次のリソースを参照してください。
