// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= Webアプリケーション開発入門
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Webアプリケーション開発入門 - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Webアプリケーション開発入門

このドキュメントでは、NetBeans IDEを使用してWebアプリケーションを開発する基本的な手順を学習できます。単純なWebアプリケーションを作成し、サーバーにデプロイし、その表現をブラウザに表示する方法を示します。このアプリケーションはlink:http://www.oracle.com/technetwork/java/javaee/jsp/index.html[+JavaServer Pages+](tm) (JSP)ページを使用して、名前の入力を求めます。次にJavaBeansコンポーネントを使用してHTTPセッションの間その名前を維持し、2つ目のJSPページに出力するために名前を取得します。


image::images/netbeans-stamp-80-74-73.png[title="このページの内容は、NetBeans IDE 7.2、7.3、7.4および8.0に適用されます"]


*このチュートリアルに従うには、次のソフトウェアとリソースが必要です。*

|===
|ソフトウェアまたはリソース |必須バージョン 

|link:https://netbeans.org/downloads/index.html[+NetBeans IDE+] |7.2、7.3、7.4、8.0、Java EEバージョン 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Java Development Kit (JDK)+] |バージョン7または8 

|GlassFish Server Open Source Edition
_または_
Tomcatサーブレット・コンテナ
_または_
Oracle WebLogic Server |4.x 
_ _ 


.xまたは8.x

11gR1 (10.3.3)以降 
|===

*注意: *

* Java EEインストール版(Java SEではない)では、GlassFishサーバーとApache Tomcatサーブレット・コンテナをオプションでインストールできます。
* プロジェクトを、正常に機能するソリューションと比較する必要がある場合は、link:https://netbeans.org/projects/samples/downloads/download/Samples/Java%20Web/HelloWebEE6.zip[+サンプル・アプリケーションをダウンロード+]できます。


== Webアプリケーション・プロジェクトの準備と作成

1. メイン・メニューから「ファイル」>「新規プロジェクト」([Ctrl]-[Shift]-[N])を選択します。「カテゴリ」から「Java Web」を選択します。「プロジェクト」で「Webアプリケーション」を選択して、「次」をクリックします。
2. ステップ2で、「プロジェクト名」テキスト・ボックスに「 ``HelloWeb`` 」と入力します。
3. 「プロジェクトの場所」を使用コンピュータ上の任意のディレクトリにします。このチュートリアルでは、このディレクトリを ``_$PROJECTHOME_`` と表します。
4. (オプション)「ライブラリの格納用に専用フォルダを使用」チェックボックスを選択し、ライブラリ・フォルダの場所を指定します。このオプションの詳細は、_NetBeans IDEによるアプリケーションの開発_のlink:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG366[+Javaプロジェクトの作成+]を参照してください。
5. 「次」をクリックします。「サーバーと設定」パネルが開きます。アプリケーションで使用するJava EEのバージョンを選択します。
6. アプリケーションをデプロイするサーバーを選択します。表示されるのは、IDEに登録されているサーバーのみです。「コンテキスト・パス」(サーバー上など)が ``/HelloWeb`` になっていることを確認します。これは、前のステップでプロジェクトにつけた名前に基づいています。
7. 「終了」をクリックします。

これで、 ``_$PROJECTHOME_/HelloWeb`` プロジェクト・フォルダが作成されます。プロジェクトのファイル構造を「ファイル」ウィンドウ([Ctrl]-[2])で、論理構造を「プロジェクト」ウィンドウ([Ctrl]-[1])で表示できます。

image::images/projects-window.png[]

このプロジェクト・フォルダには、ソースおよびプロジェクト・メタデータ(プロジェクトのAntビルド・スクリプトなど)のすべてが含まれます。IDEでHelloWebプロジェクトが開きます。開始ページである ``index.jsp`` が、メイン・ウィンドウ内のソース・エディタで開きます。

*注意:*プロジェクトの作成時に指定したサーバーおよびJava EEのバージョンによっては、Webプロジェクトのデフォルト開始ページとして ``index.html`` が生成される場合があります。このチュートリアルの手順を実行して ``index.html`` ファイルを使用することも、新規ファイル・ウィザードを使用して ``index.jsp`` ファイルを生成し、開始ページとして使用することもできます。後者の場合、 ``index.html`` ファイルを削除する必要があります。


== Webアプリケーションのソース・ファイルの作成と編集

ソース・ファイルの作成と編集は、IDEが提供する最も重要な機能です。これは、開発者が時間の大半を費やす部分です。IDEには、開発者が手動ですべてのコードを作成するか、あるいはコードのかなりの部分をIDEに自動的に生成させるかどうかに関係なく、開発者各自の開発スタイルに役立つ広範囲のツールが用意されています。


=== JavaパッケージとJavaソース・ファイルの作成

1. 「プロジェクト」ウィンドウで「ソース・パッケージ」ノードを展開します。「ソース・パッケージ」ノードには、空の「デフォルト・パッケージ」ノードのみが含まれていることに注意してください。
2. 「ソース・パッケージ」ノードを右クリックし、「新規」>「Javaクラス」を選択します。「クラス名」テキスト・ボックスに「 ``NameHandler`` 」と入力し、「パッケージ」コンボ・ボックスに「 ``org.mypackage.hello`` 」と入力します。「終了」をクリックします。新しい ``NameHandler.java`` ファイルがソース・エディタで開きます。
3. ソース・エディタで、クラス宣言のすぐ下に次の行を入力して ``String`` 変数を宣言します。

[source,java]
----

String name;
----


. 次のコンストラクタをクラスに追加します。

[source,java]
----

public NameHandler() { }
----


.  ``nameHandler() `` コンストラクタに次の行を追加します。

[source,java]
----

name = null;
----


=== 取得メソッドと設定メソッドの生成

1. ソース・エディタで ``name`` フィールドを右クリックし、「リファクタリング」>「フィールドをカプセル化」を選択します。

「フィールドをカプセル化」ダイアログが開き、 ``name`` フィールドが表示されます。フィールドの可視性はデフォルトでprivateに、アクセッサ・メソッドの可視性はpublicに設定されています。これは、クラス変数宣言のアクセス修飾子はprivateと指定され、取得メソッドと設定メソッドはそれぞれ ``public`` と ``private`` の修飾子を指定して生成されることを示します。

image::images/encapsulatefields-dialog.png[]


. 「リファクタリング」をクリックします。

 ``name`` フィールドの取得メソッドと設定メソッドが生成されます。クラス変数の修飾子は ``private`` に設定され、取得メソッドと設定メソッドはpublicの修飾子を指定して生成されます。Javaクラスは次のようになります。


[source,java]
----

package org.mypackage.hello;

/**
 *
 * @author nbuser
 */

public class NameHandler {

    private String name;

    /** Creates a new instance of NameHandler */
    public NameHandler() {
       name = null;
    }

    public String getName() {
       return name;
    }

    public void setName(String name) {
       this.name = name;
    }

}
----


=== デフォルトのJavaServer Pagesファイルの編集

1. ソース・エディタの上部に表示されている ``index.jsp`` ファイルのタブをクリックして再度フォーカスします。
2. 
ソース・エディタの右側にあるパレット([Ctrl]-[Shift]-8)で「HTMLフォーム」を展開し、「フォーム」項目をソース・エディタ内の ``<h1>`` タグの後にドラッグします。

「挿入フォーム」ダイアログ・ボックスが表示されます。


. 次の値を指定します。
* *アクション:* response.jsp
* *メソッド:* GET
* *名前:* Name Input Form

「OK」をクリックします。 ``index.jsp`` ファイルにHTMLフォームが追加されます。

image::images/input-form.png[]


. 「テキスト入力」項目を ``</form>`` タグの直前にドラッグし、次の値を指定します。
* *名前:* name
* *型:* text
「OK」をクリックします。 ``<form>`` タグの間にHTML ``<input>`` タグが追加されます。このタグから ``value`` 属性を削除します。


.  ``</form>`` タグの直前に「ボタン」項目をドラッグします。次の値を指定します。
* *ラベル:* OK
* *型:* submit
「OK」をクリックします。 ``<form>`` タグの間にHTMLのボタンが追加されます。


.  ``<input>`` タグの直前に「 ``Enter your name:`` 」と入力し、 ``<h1>`` タグで囲まれたデフォルトの「 ``Hello World!`` 」というテキストを「 ``Entry Form`` 」に変更します。


. ソース・エディタ内を右クリックし、「フォーマット」([Alt]-[Shift]-[F])を選択してコードの体裁を整えます。 ``index.jsp`` ファイルは次のようになります。

[source,xml]
----

<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ファイルの作成

1. 「プロジェクト」ウィンドウで「HelloWeb」プロジェクト・ノードを右クリックし、「新規」>「JSP」を選択します。新規JSPファイル・ウィザードが開きます。ファイルを ``response`` という名前にして、「終了」をクリックします。「プロジェクト」ウィンドウ内で ``index.jsp`` の下に ``response.jsp`` ファイル・ノードが表示され、ソース・エディタで新しいファイルが開きます。
2. 
ソース・エディタの右側の「パレット」で、「JSP」を展開し、「Beanを使用」項目をソース・エディタ内の ``<body>`` タグのすぐ下にドラッグします。「挿入Beanを使用」ダイアログが開きます。次の図に示すように、値を指定します。

image::images/usebean-dialog.png[]

* *ID:* mybean
* *クラス: *org.mypackage.hello.NameHandler
* *スコープ:* session
「OK」をクリックします。 ``<jsp:useBean>`` タグが ``<body>`` タグの下に追加されていることがわかります。


. パレットから、「Beanプロパティを設定」項目を ``<h1>`` タグの直前にドラッグし、「OK」をクリックします。表示される ``<jsp:setProperty>`` タグ内で、空の ``value`` 属性を削除し、次のように編集します。 ``value=""`` 属性が作成されている場合は削除します。そうでない場合は、 ``index.jsp`` で渡す ``name`` の値が上書きされます。

[source,java]
----

<jsp:setProperty name="mybean" property="name" />
----

プロパティ値は、

 ``<jsp:setProperty>`` のドキュメントに示すように、様々な方法で設定できます。この例では、 ``index.jsp`` からのユーザー入力が、 ``request`` オブジェクトに渡される名前と値のペアになります。 ``<jsp:setProperty>`` タグを使用してプロパティを設定するとき、 ``request`` オブジェクトに含まれるプロパティの名前に従って値を指定できます。したがって、 ``property`` を ``name`` に設定することで、ユーザー入力で指定された値を取得できます。


. <h1> タグの間のテキストを次のように変更します。

[source,xml]
----

<h1>Hello, !</h1>
----


. パレットから「Beanプロパティを取得」項目をドラッグし、 ``<h1>`` タグ間のカンマの後にドロップします。「挿入Beanプロパティを取得」ダイアログで次の値を指定します。
* *Bean名: *mybean
* *プロパティ名: *name

「OK」をクリックします。 ``<jsp:getProperty>``  タグが ``<h1>`` タグの間に追加されていることがわかります。

*注意:* プロパティ名では大文字と小文字が区別されます。 ``response.jsp`` と ``index.jsp`` の入力フォームの"name" プロパティは、同じ大文字と小文字で指定する必要があります。


. ソース・エディタ内を右クリックし、「フォーマット」([Alt]-[Shift]-[F])を選択してコードの体裁を整えます。 ``response.jsp`` ファイルの ``<body>`` タグは次のようになります。

[source,xml]
----

<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では、新規プロジェクト・ウィザードで指定するオプションと、プロジェクトの「プロジェクト・プロパティ」ダイアログ・ボックス(「プロジェクト」ウィンドウでプロジェクト・ノードの右クリック・メニューから「プロパティ」を選択)のオプションに基づいてビルド・スクリプトが生成されます。

1. 「プロジェクト」ウィンドウで「HelloWeb」プロジェクト・ノードを右クリックし、「実行」([F6])を選択します。Webアプリケーションを実行すると、IDEによって次の手順が実行されます。

* アプリケーション・コードのビルドとコンパイル(後述の注意を参照)。プロジェクト・ノードのコンテキスト・メニューから「ビルド」または「消去してビルド」を選択すると、このステップを個別に実行できます。
* サーバーの起動。
* サーバーへのアプリケーションのデプロイ。プロジェクト・ノードのコンテキスト・メニューから「デプロイ」を選択すると、このステップを個別に実行できます。
* ブラウザ・ウィンドウでのアプリケーションの表示。

*注意:* プロジェクトはデフォルトで「保存時にコンパイル」機能が有効になっている状態で作成されているので、アプリケーションをIDEで実行するときに先にコードをコンパイルする必要はありません。


. アプリケーションの実行の進行状況を示す出力ウィンドウが開きます。出力ウィンドウの「HelloWeb」タブを見てください。このタブでは、IDEで実行されるすべての手順を追跡できます。問題がある場合は、このウィンドウにエラー情報が表示されます。

image::images/app-output-tab.png[]


. サーバーのステータスを示す出力ウィンドウが開きます。出力ウィンドウで、使用しているサーバーの名前が付いているタブを見てください。

*重要:* GlassFishサーバーの起動に失敗した場合は、手動で起動し、プロジェクトを再度実行してください。サーバーは、「サービス」ウィンドウでサーバー・ノードを右クリックし、「起動」を選択することで手動で起動できます。

サーバーの出力ウィンドウは、Webアプリケーションの実行の問題に関する詳細な情報を提供します。サーバーのログも役立つ場合があります。これらは、サーバーのドメイン・ディレクトリにあります。「表示」>「IDEのログ」を選択して、IDEのログを表示することもできます。

image::images/gf-output-tab.png[]


. 
デフォルトのブラウザで ``index.jsp`` ページが開きます。IDEがサーバーの出力を表示する前に、ブラウザ・ウィンドウが開くこともあります。

image::images/result1.png[]


. 
テキスト・ボックスに名前を入力し、「OK」をクリックします。 ``response.jsp`` ページが表示され、単純な挨拶のメッセージが表示されます。

image::images/result2.png[]


== トラブルシューティング

_プロジェクトをビルドして実行しました。 ``index.jsp`` の「OK」ボタンをクリックすると、 ``response.jsp`` を使用できないことを示すエラー・ページが表示されます。_

「プロジェクト」タブまたは「サーバー」タブでIDEの「出力」ウィンドウ([Ctrl]-[4])を確認しましたか。どんなエラー・メッセージがありましたか。プロジェクトで使用しているJDKは何ですか。サーバーは何ですか。JDK 7にはGlassFish 3.xまたはTomcat 7.xが必要です。「プロジェクト」ウィンドウでプロジェクトのノードを右クリックし、「プロパティ」を選択します。JDKは、「ライブラリ」カテゴリの「Javaプラットフォーム」フィールドにあります。サーバーのバージョンは、「実行」カテゴリにあります。最後に、link:https://netbeans.org/projects/samples/downloads/download/Samples/Java%20Web/HelloWebEE6.zip[+サンプル・プロジェクト+]をダウンロードし、自分のプロジェクトと比較します。

_プロジェクトをビルドして実行しましたが、「Hello,!」しか表示されず、名前が表示されません。_

<jsp:setProperty> タグに ``value=""`` 属性が含まれていませんか。これは ``index.jsp`` フォームで渡す値を上書きし、空の文字列に置き換えます。 ``value`` 属性を削除してください。

_プロジェクトをビルドして実行しましたが、「Hello, null!」と表示されます。_

まず、IDEの出力ウィンドウをアプリケーションとサーバーの両方について確認し、サーバーのログを確認します。サーバーが稼働しているかどうかを確認してください。アプリケーションがデプロイされているかどうかを確認してください。サーバーが稼働中で、アプリケーションがデプロイされている場合は ``org.apache.jasper.JasperException: java.lang.NullPointerException`` が発生しているかどうかを確認してください。これは通常、コード内で値が正しく初期化されていないことを意味します。このチュートリアルでは、これはJSPファイル内のプロパティ名の入力誤りを示しています。プロパティ名では大文字と小文字が区別されることに注意してください。

link:/about/contact_form.html?to=3&subject=Feedback:%20Introduction%20to%20Developing%20Web%20Applications[+このチュートリアルに関するご意見をお寄せください+]


== 関連項目

これで、Webアプリケーション開発入門のチュートリアルは終わりです。このドキュメントでは、NetBeans IDEを使用して単純なWebアプリケーションを作成し、サーバーにデプロイし、その表現をブラウザに表示する方法を示しました。また、アプリケーションでJavaServer PagesとJavaBeansを使用してユーザー・データを収集、維持、および出力する方法も示しました。

NetBeans IDEでのWebアプリケーションの開発の詳細は、次のリソースを参照してください。

* link:quickstart-webapps-struts.html[+Struts Webフレームワーク入門+]。NetBeans IDEを使用して、Strutsフレームワークを使用するWebアプリケーションを開発する基本的な手順を示します。
* link:../../trails/java-ee.html[+Java EEおよびJava Webの学習+]