演習 - Eclipse で Web アプリをビルドする - Training

10 分

Azure Toolkit for Eclipse をインストールした後、Java Web アプリをビルドして Azure にデプロイするために使用できる環境が整います。

この演習では、Eclipse を使い、Java Server Pages (JSP) を使用して Web ページの動的コンテンツを生成する Java Web アプリを作成します。このページには、現在の日付と時刻が、Web アプリに接続している Web ブラウザーを実行するクライアントコンピューターの IP アドレスと共に表示されます。 Apache Tomcat サーバーを使用して、Web アプリをローカルでテストします。

新しい Web アプリを作成する

まだ実行されていない場合は、Eclipse を起動します。
[ファイル] メニューで、[新規] を選択してから、[動的 Web プロジェクト] をクリックします。
[新規動的 Web プロジェクト] ウィザードの [動的 Web プロジェクト] ページで、[プロジェクト名] ボックスに「SampleWebApp」と入力します。 [ターゲットランタイム] が Apache Tomcat v8.0 に設定されていることを確認してから、[完了] をクリックします。

Note

Apache Tomcat v8.0 ランタイムがリストされていない場合は、[新規ランタイム] をクリックしてダウンロードします
[プロジェクトエクスプローラー] ペインで、[SampleWebApp]、[Java リソース] の順に展開し、[src] を右クリックして [新規] を選択してから [JSP ファイル] をクリックします。
[新規 JSP ファイル] ウィザードの [JSP] ページで、親フォルダーが SampleWebApp/WebContent に設定されていることを確認します。 [ファイル名] ボックスに、「index.jsp」と入力してから、[完了] をクリックします。
コードエディターウィンドウが表示され、index.jsp ファイルが示されます。ページの head セクションで、次のように、タイトルの HTML マークアップを Sample Web App に変更します。
```
<head>
    <meta charset="UTF-8">
    <title>Sample Web App</title>
</head>
```
ページの body セクションで、以下に示すコードを追加します。
```
<body>
    <%! DateFormat fmt = new SimpleDateFormat("dd/MM/yy HH:mm:ss"); %>
    <p>Today's date is <%= fmt.format(new Date()) %></p>
    <p>Your IP address is <%= request.getRemoteAddr() %></p>
</body>
```
このコードでは、現在の日付を取得し、それを書式設定して表示します。また、このコードでは、クライアントの IP アドレスを要求メッセージから抽出して出力します。

ページの先頭付近にある (ページの言語とコンテンツの種類を指定する) 最初の @page ディレクティブの後に、次のコードに示すように、2 つの @page ディレクティブを追加します。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import ="java.util.*" %>
<%@ page import ="java.text.*" %>

これらのディレクティブにより、java.util および java.text ライブラリがインポートされます。ページの body のコードでは、これらのライブラリが使用されます。

完成したコードはこのようになるはずです。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import ="java.util.*" %>
<%@ page import ="java.text.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample Web App</title>
</head>
<body>
    <%! DateFormat fmt = new SimpleDateFormat("dd/MM/yy HH:mm:ss"); %> 
    <p>Today's date is <%= fmt.format(new Date()) %></p>
    <p>Your IP address is <%= request.getRemoteAddr() %></p>
</body>
</html>

[ファイル] メニューの [保存] をクリックします。

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

[実行] メニューで、[実行] をクリックします。
[サーバーで実行] ウィザードで、[ローカルホストの Tomcat v 8.0 サーバー] を選択してから、[完了] をクリックします。

Note

最近、Tomcat をインストールした場合は、使用できる既存のサーバーがない可能性があります。この場合は、[手動で新規サーバーを定義] を選択して、[Tomcat v8.0 サーバー] を選びます。
Tomcat サーバーで実行が開始されると、いくつかのメッセージが表示されます。 Eclipse では、Web アプリケーションの出力が IDE 内のブラウザーウィンドウに表示されます。これは以下に示す図のようになるはずです。
選択した URL に移動するボタン ([サンプル Web アプリ] ウィンドウの URL の横にある緑色の矢印) をクリックして、ページを更新します。ページが再生成され、Java コードが再実行されると、時間の変化が見られるはずです。

お疲れさまでした。サンプル Web アプリを作成し、Eclipse を使用してローカルにデプロイしました。次の演習では、Azure に Web アプリをデプロイします。

続行

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

新しい Web アプリを作成する

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

フィードバック