Java初心者でもできたJSP + Eclipse + Jetty開発環境構築

仕事で少し必要に迫られてJavaでのWeb開発を手がけました。初心者には、単語の理解から開始で厳しかったですが、何とか出来ました:sweat_smile: 調査含めて、だいたい半日から1日程度です。
初心者のやっている手順なので、不備な点など多いかもしれません。

SAP関連の開発をしようとして、JDKインストールを以下の記事に記録しています(JDK以外もあり)。

- JDKのインストール：[Java初心者でもできるPCへのJCoを使ったSAPシステム接続環境構築](https://qiita.com/FukuharaYohei/items/d1f367a0fb6e6670378f)

#環境構築手順
##1. Eclipseダウンロード
[公式ページダウンロードサイト](https://www.eclipse.org/downloads/)からインストールファイルをダウンロード。インストールファイルを実行。

「Eclipse IDE for Java EE Developers」を選択。
<sup>「Eclipse IDE for Java Developers」と「Eclipse IDE for Java EE Developers」とで迷いましたが、記事[「JavaでWeb開発のEclipseは、Eclipse IDE for Java EE Developersを選ぼう」](http://javatechnology.net/tool/eclipse-ee-developers/)を見て判断
![10.EclipseInstall01.JPG](https://qiita-image-store.s3.amazonaws.com/0/134273/ea062a72-3862-5be5-b56c-42d6b1903110.jpeg)</sup>

インストール先の選択。
![10.EclipseInstall02.JPG](https://qiita-image-store.s3.amazonaws.com/0/134273/b6744ab5-a9dd-3a99-0860-410f9393fb17.jpeg)

使用許諾の承諾。
![10.EclipseInstall03.JPG](https://qiita-image-store.s3.amazonaws.com/0/134273/6bd0d9b2-4a61-92f5-fc17-44f20494dbd8.jpeg)

LAUNCHを押して1回失敗しましたが、再実行したらうまくいきました。
![10.EclipseInstall04.JPG](https://qiita-image-store.s3.amazonaws.com/0/134273/93a38ab4-692c-deae-363e-01b2104a7b99.jpeg)

Workspaceをデフォルトに設定。
![10.EclipseInstall05.JPG](https://qiita-image-store.s3.amazonaws.com/0/134273/0de6957e-5305-9372-2c4c-01797d4708ca.jpeg)

## Jettyプラグインの導入
メニュから Help -> Eclipse Marketplace を選択。

Eclipse Jetty3.9.0とRun-Jetty-Run 1.3.5-nightlyをインストール(使用許諾画面等は省略)。両者をインストール後に再起動しました。
![20.JettyInstall01.JPG](https://qiita-image-store.s3.amazonaws.com/0/134273/13eb19dd-1de4-1f6c-f478-545e52aeb2b0.jpeg)

#JSP作成・確認手順
##1. プロジェクト作成
Project Explorerで右クリックして New -> Project を選択。
![30.CreateJSP01.JPG](https://qiita-image-store.s3.amazonaws.com/0/134273/145ff899-eef0-0167-ed3f-3eea0f236498.jpeg)

Dynamic Web Project を選択。
![30.CreateJSP02.JPG](https://qiita-image-store.s3.amazonaws.com/0/134273/50bf833a-a8c8-3a00-bf17-1991d4dfb44d.jpeg)

Project nameを入力してFinish。
<sup>スクリーンショット上では項目「Target runtime」が「None」となっていますが、「J2EE Preview」を入力しておくと、後々に出る警告「The superclass “javax.servlet.http.HttpServlet” was not found on the Java Build Path 」が消えてくれます。</sup>
![30.CreateJSP03.JPG](https://qiita-image-store.s3.amazonaws.com/0/134273/ae336023-2097-6111-cc3e-883400efeb3b.jpeg)

##2. JSP登録
Project Explorerの「Web Content」フォルダで右クリックして、New -> Other を選択。
![30.CreateJSP04.JPG](https://qiita-image-store.s3.amazonaws.com/0/134273/37c8b5e2-af92-0af5-f57b-653cf4ef222f.jpeg)

JSP File を選択。
![30.CreateJSP05.JPG](https://qiita-image-store.s3.amazonaws.com/0/134273/13925aa2-88cc-60fe-d866-1d411f426159.jpeg)

ファイル名を入力して終了。
![30.CreateJSP06.JPG](https://qiita-image-store.s3.amazonaws.com/0/134273/8061f219-ecbe-0f45-4b64-de8cc2adad2c.jpeg)

JSPファイルは、こんなソースにしています。bodyタグに日時を出力するように記述。

```jsp:index.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%= new java.util.Date() %>
</body>
</html>
```

#3. Jetty起動
作成したJSPファイルで右クリックして、 Run As -> 2 Run Jettyを選択。
![30.CreateJSP08.JPG](https://qiita-image-store.s3.amazonaws.com/0/134273/6877e78b-cdc7-6d85-5764-cc6b1eed24b5.jpeg)

#4. ブラウザでアクセス
ブラウザでJSPを開きます。今回は、ポートをデフォルトの8080でプロジェクト名がHelloWorldなので、下記URLで開きます(ファイル名が"index.jsp"なのでHelloWorld以下は指定していません)。
http://localhost:8080/HelloWorld/

画面のように日時が表示されました！
![30.CreateJSP09.JPG](https://qiita-image-store.s3.amazonaws.com/0/134273/0cd7f5ce-e578-038f-0995-583a4785d4d6.jpeg)