Eclipse で Web アプリをビルドする

5 分

Eclipse には、静的および動的な Web プロジェクトをビルドするためのプロジェクトテンプレートが用意されています。静的 Web プロジェクトには、HTML およびクライアント側の JavaScript コードを含むファイルが含まれます。動的 Web プロジェクトには通常、サーバー上で実行される Java Server Pages (JSP) を含むファイルが含まれます。 Azure App Service では、静的および動的 Web プロジェクトの両方がサポートされます。

このユニットでは、Eclipse を使用して動的な Web プロジェクトを作成する方法の基本について学習します。次のユニットでは、Azure Web アプリとしてデプロイできる動的 Web プロジェクトを作成するための演習を完了します。

動的 Web アプリを作成する方法

動的 Web アプリを作成するには、Eclipse の [File](ファイル) メニューで [New](新規作成) を選択し、[Dynamic Web Project](動的 Web プロジェクト) を選択します。

Screenshot of the New menu in Eclipse. The user has selected the Dynamic Web Project command.

[Dynamic Web Project](動的 Web プロジェクト) ウィザードが起動し、プロジェクトの基本的な詳細を入力するように求められます。必須項目はプロジェクト名のみです。ウィザードには、その他のすべてのプロパティと構成の詳細の既定値が表示されます。ただし、Web アプリで使用する機能を決定するために、ターゲットランタイムを確認する必要があります。次のスクリーンショットでは、ユーザーは [Apache Tomcat v8.0] サーバーを選択しました。このサーバーは、ローカルでテストおよびデバッグする場合に便利です。 Web アプリをテストした後は、Azure にデプロイできます。

Screenshot of the Dynamic Web Project wizard in Eclipse.

静的および動的な Web ページを作成する方法

動的 Web アプリを作成したら、[Project Explorer](プロジェクトエクスプローラー) ウィンドウを使用して、HTML ファイル、JSP ファイル、CSS スタイルシートなどのリソースをプロジェクトに追加します。たとえば、新しい JSP ページをプロジェクトに追加するには、[Project Explorer](プロジェクトエクスプローラー) ウィンドウでプロジェクト名を右クリックし、[New](新規作成) を選択して、[JSP File](JSP ファイル) を選択します。

Screenshot of Eclipse. The user is creating a new JSP file for the dynamic web project.

Eclipse により、Web ページの基本的な定型コードが生成されます。その後、HTML エディターを使用して、Web ページのメイン部分を定義する HTML マークアップを作成できます。エディターには作業を支援するため、IntelliSense スタイルのプロンプトとコード補完機能が用意されています。

Screenshot of the HTML editor in Eclipse, showing IntelliSense-style prompts.

動的 Web ページには、HTML マークアップと Java コードが混在しています。 JSP タグを使用して Java コードを Web ページに追加します。たとえば、次の手順で、これらのタグを使用する方法とタイミングについて説明します。

Java ライブラリをインポートするには、<%@ page ... %> ディレクティブを使用します。次の例では、ページの先頭にディレクティブを追加することによって、java.util ライブラリがインポートされます。
```
<%@ page import ="java.util.*" %>
```
静的変数を宣言するには、<%! と %> タグのペアを使用します。変数の初期化も同時に行うことができます。たとえば、次のコードの抜粋では、counter は整数の変数であり、currencies は java.util ライブラリで使用できる各通貨の詳細を含むセットです。
```
<%! int counter;
 Set<Currency> currencies = Currency.getAvailableCurrencies(); %>
```
これらの静的変数の値は一度だけ初期化され、Web アプリの各呼び出しの間で保持されることに注意してください。
手続き型コードを追加するには、<% と %> タグのペア内にコードを含めます。手続き型コードで通常の HTML マークアップをラップすることができます。たとえば、次のコードの抜粋では、for ループによって currencies セットの内容が反復処理され、各反復処理中に HTML 段落が出力されます。 counter 変数には実行された反復処理回数が記録されます。"NNN" は一時的なプレースホルダーで、次のコードの抜粋では置き換えられます。
```
<% counter = 1;
 for(Currency currency : currencies){ %>
 Currency is NNN 
<% counter++;
 } %>
```
Java 関数または式の結果を表示するには、<%= と %> 式タグのペアを使用します。たとえば、次のコードの抜粋では、前のコードの抜粋の "NNN" プレースホルダーが、通貨の文字列表現に置き換えられています。
```
<% counter = 1;
 for(Currency currency : currencies){ %>
 Currency is <%= currency.toString() %> 
<% counter++;
 } %>
 There are <%= counter %> currencies available.
```

次の JSP ページには完全な例が示されています。ここでは、java.util ライブラリの Currency.getAvailableCurrencies メソッドの使用により通貨の一覧が取得されます。このコードでは、通貨を HTML 段落のセットとして表示する HTML マークアップが生成され、表示される通貨の数をカウントした概要が最後に示されます。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import ="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Currency Lister</title>
</head>
<body>
  <%! int counter;
      Set<Currency> currencies = Currency.getAvailableCurrencies(); %>
  
  <% counter = 1;
   for(Currency currency : currencies){ %>
        <p>Currency is <%= currency.toString() %> </p>
  <%    counter++;
    } %>
  <p> There are <%= counter %> currencies available.</p>

</body>
</html>

このコードによって生成される出力は、次のセクションで示します。

Web アプリをローカルでテストする方法

Web アプリをテストするには、[Run](実行) メニューの [Run](実行) を選択するか、またはツールバーにある [Run](実行) ボタンを選択します。 Web アプリの実行に使用するサーバーの指定を求めるメッセージが表示されます。既定値は、プロジェクトの作成時に指定したサーバーランタイムと同じものです。

Screenshot of the Run On Server window in Eclipse. The user has selected the local Tomcat server.

[Finish](完了) を選択して Web アプリを開始します。サーバーが現在停止している場合は、起動されます。その後、Web アプリが実行され、Eclipse のブラウザーウィンドウに結果が表示されます。結果は次の図のようになります。

Screenshot of the static web app running in the browser window in Eclipse.

続行

動的 Web アプリを作成する方法

静的および動的な Web ページを作成する方法

Web アプリをローカルでテストする方法

フィードバック