「EcliseでTomcatを登録し、JSPやServletを使用したWebシステムを開発したいが、やり方が分からないなぁ・・・」
このような疑問に対し、お答えします。
Eclipseは現場でもよくつかわれているツールですので、ご自宅などのローカルで環境を構築し、動作を確認したり学習したい方は多いでしょうが、環境構築に時間がかかってしまう場合がありますよね。
そこで本記事では、「EcliseでTomcatを登録し、JSPのサンプルコードを記述してテストプログラムを動かすまで」の手順を22枚の画像を使ってご紹介します。
この記事で分かること
- 静的Webコンテンツ、動的Webコンテンツの違い
- Webシステムを作るために必要なもの
- EclipseでWebコンテナ(Tomcat)を登録し、Eclipseで利用可能にする方法
- Eclipseを使って、Webシステム用プロジェクト の作成から実行までの流れ
この記事を参考に、サクッと環境構築をしていただき、時間を無駄にせず、各種検証や動作確認に時間を使えるお役立ていただければ嬉しいです。
※手順をコンパクトにご紹介するため、用語の説明は簡略化しておりますので、ご了承ください。
EclipseでWebコンテナ(Tomcat)を登録して利用可能にする手順
おもな手順
- 手順１ JSPファイルのエンコード設定
- 手順２ Tomcatの準備
- 手順３ Webシステムの作成と実行
詳しく手順を見ていく前に、少しだけ、用語の確認をしていきます。
静的Webコンテンツ、動的Webコンテンツの違いとは？
まず、Webシステムを開発するうえで、静的コンテンツと動的コンテンツの違いを少しおさらいします。
２つのWebコンテンツ
- 静的コンテンツ ⇒ 誰が見ても常に同じ内容
- 動的コンテンツ ⇒ 見る人・見るタイミングによって内容が異なる
本記事で記載しているWebシステムは、上記の2つのWebコンテンツのうち、動的コンテンツを見るために必要なシステムだとご理解ください。
※参考にさせていただいた記事
>> 静的コンテンツ/動的コンテンツの違いを１分で解説【初心者向け】
Webシステムを作るために必要なもの
次に、Webシステムを開発するために、必要なものを確認していきます。
Webシステムを開発するために必要なもの
- Webコンテナ ： (例)Apache Tomcat
- データベースサーバ： (例)MySQL Server
- 統合開発環境 ： (例)Eclipse
※Webコンテナ：Servletコンテナ、アプリケーションサーバともいわれる。
※Webコンテナ、データベースサーバー、統合開発環境とも、いろいろなソフトウェアがありますが、今回は例として、ひとつづつ挙げました。
少し詳しく説明します。
例えば、Webショップで、
Aさんの購入履歴に基づくおすすめ商品を表示する動的コンテンツであれば以下のような処理が行われるとします。
WebショップでAさんの購入履歴に基づくおススメ商品を表示する処理の例
- 処理1 ： 動的コンテンツのリクエストを受け取る（Aさんがおすすめ商品の表示をクリックする）
- 処理2 ： Aさんの購入履歴を踏まえてコンテンツを編集する（Aさんの購入履歴と同じような種類の商品一覧を作成する）
- 処理3 : 編集したコンテンツをユーザに返す（おすすめ商品一覧ページが表示される）
ざっくりというと、上記の処理で、
処理1をするのが、【Webブラウザ】→→【Webコンテナ】
処理2をするのが、【Webコンテナ】←→【データベースサーバ】
処理3をするのが、【Webコンテナ】→→【Webブラウザ】
ということになります。また上記の処理がどのようなものか、流れを見てみます。
処理の流れ
↓
【Webコンテナ】で【Servlet】がリクエストを受ける。
↓
【Servlet】が【データベースサーバ】と連携して処理をする。
↓
処理を【JSP】に転送する。
↓
【JSP】がレスポンス返す
↓
【Webブラウザ】で動的コンテンツが表示される。
超ざっくりいうと上記のような流れになります。
Webシステムが動作するうえで、「Webコンテナ」の役割が大きいということがお分かりいただければ、OKです。
Tomcat とは？
次に、Tomcatについて、少し詳しく見ていきます。
JSP/Servletで使われるWebコンテナがApache Tomcat（アパッチ・トムキャット、以降Tomcat）です。
これは、WebサーバーであるApacheにアプリケーションサーバーを組み合せたもので、現在もっとも広く普及してるものです。
普通、JSP/サーブレットを実際の運用に近い形で行おうとすると、ネットで接続された「クライアントのコンピュータ」と「サーバーのコンピュータ」の準備が
必要になります。
しかし、Tomcatは開発環境としてローカルな環境にWebサーバーおよびアプリケーションサーバーを構築して、ネットワークを介することなくWebアプリ開発を可能にします。
これにより、PCを複数台用意する必要がなく1台のPC上で、プログラムを作成→JSPを実行→ブラウザーでの確認といった一連の動作が行えるようになります。
そして、Eclipseではこれらを簡単に操作するための環境が準備されているため、簡単な設定をするだけで、Webシステムを開発できるということになります。
Tomcatについての詳細は以下書籍が大変詳しいです
EclipseでWebコンテナ(Tomcat)を登録し、Eclipseで利用可能にする方法
ここからは、実際の手順を画像を使ってご紹介します。
事前にEclipseのインストールが必要です。
>> EclipseのインストールからJavaの動作確認まで20枚の画像で紹介！
JSPファイルのエンコード設定
設定理由：JSPファイルの文字コードを設定することで、文字化けを防ぐため
Eclipseを起動 > ツールバー > [ウィンドウ] > [設定] > [一般] > [Web] > [JSPファイル] > [エンコード]を「UTF-8」を選択
Tomcatの準備
つづいては、Tomcatの準備をしていきます。
[ファイル] > [新規] > [その他]を選択します。
次に、[サーバー] > [サーバー] > [次へ]を選択します。
次に、サーバータイプは [Tomcat v8.5 サーバー] を選択> [完了]をクリック
パッケージ・エクスプローラーに[Servers]とい うプロジェクトが作成されることを確認します。
Eclipseを使って、Webシステム用プロジェクト の作成から実行までの流れをご紹介
少し、JSPについておさらいします。
JSPとは
- Java Server Pages の略語
- HTMLコードに埋め込む形でJavaのコードを記 述できる技術でWebシステムの画面(表示部分)を作成する際に便利
- JSPで記述されたプログラムはServletコンテナ で自動的にコンパイルしてくれるため、開発者 はコンパイルを意識しなくてもよい
- PHPやRubyなどのスクリプト言語と同様の手軽さで 開発ができる
Webシステムの作成と実行
つづいては、EclipseでJSPやServletを使用したWebシステムを開発するために、動的Webプロジェクトを作成しましょう。
[ファイル] > [新規] > [その他] > [Web] > [動的Webプロジェクト]を選択
次に、「新規動的Webプロジェクト」ポップアップが起動します。
次に、以下を選択します。
| プロジェクト名 | HelloJSP |
| ターゲットランタイム | Tomcat(Java8) |
—
「次へ」をクリックします。
[Webモジュールの設定ポップアップ]で[web.xmlデプロイメント記述子の生成]にチェックを入れます。
パッケージエクスプローラーで「HelloJSP」が作成されたことを確認します。以上でプロジェクトの作成は完了です。
続いてJSPファイルの作成をしていきましょう。
新規 > [その他] > [JSPファイル]を選択します。
[新規] > [その他] > [JSPファイル]を選択 > [完了]をクリックします。
「index.jsp」ファイルが作成されていることを確認します。
次に、JSPファイルのコードを記述します。エディタで以下のような記載となっていることを確認します。
<%@ page pageEncoding="utf-8" %> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>Hello JSP</title> </head> <body> </body> </html>
次に、の間に、
「Hello, JSP!!」
と記述して保存しましょう。
「Ctrl」+「s」でOKです。
記述は以下のようになっていればOKです。
<%@ page pageEncoding="utf-8" %> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>Hello JSP</title> </head> <body> <h1>Hello, JSP!</h1> </body> </html>
次に、エディタで右クリックし
>[実行]
>[サーバーで実行]の順にクリックします。
「サーバーで実行」のポップアップで[完了]をクリックします。
以下のようなポップアップがでたら、サーバーのタイムアウト時間を変更します。
「サーバー」をダブルクリックします。
タイムアウト > [開始(秒)] > 45」秒 → 「120」秒に変更します。
再度「開始」します。
「Hello, JSP!」と表示されることを確認しましょう。
ブラウザでも確認します。ブラウザのアドレスバーに「http://localhost:8080/HelloJSP/index.jsp」と入力します。
お疲れさまでした。これで、Tomcatのテストは完了です。
まとめ
本記事ではEcliseでTomcatを登録し、JSPのサンプルコードを記述してテストプログラムを動かすまでの手順を22枚の画像を使ってご紹介しました。
ご参考になれば幸いです。
【関連記事】
>> プログラミングの無料独学は可能。おすすめのWEB系言語3選
>> 無料あり：エンジニア歴20年の筆者がおすすめするプログラミングスクール
>> EclipseのインストールからJavaの動作確認まで20枚の画像で紹介！