はじめに

こんばんわ、きりです。
本記事はNablarchを使ってみようのサブ記事として作成しております。

前回はサーブレットの作成を行い、ブラウザからのHttpアクセスに対して、Javaのプログラムを実行することに成功しました。

今回はサーブレットとJSPファイルを使って画面の表示を行ってみようと思います。

本記事以外のコンテンツはこちらから閲覧可能です。

なるべく、初心者目線で作成するつもりですが、分かりづらい部分ありましたら、コメント頂きたいです。

動作環境

種類	バージョン
OS	Windows 11 Professional 21H2
Eclipse	2022 Full Edition

※Eclipseのダウンロードについては、こちらの記事をご確認ください。

前提

本記事はサーブレットの作成の記事で作成したプロジェクトを編集します。

JSPの作成

プロジェクト名を右クリック > 新規 > JSPファイル　をクリックします

作成場所とファイル名を指定して完了ボタンをクリックします。
今回はwebappフォルダの直下にHello.jspというファイル名で作成します。

JSPの変更

JSPを以下のように変更します。

Hello.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
  // Servletのデータ受け取り
  request.setCharacterEncoding("UTF8");
  String strMessage = (String) request.getAttribute("message");
%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
</head>
<body>
  <p>
  <%=strMessage%>
  </p>
</body>
</html>

<%
  // Servletのデータ受け取り
  request.setCharacterEncoding("UTF8");
  String strMessage = (String) request.getAttribute("message");
%>

の部分で、Javaソース内でセットした変数の値をstrMessageに代入しています。
今回はJavaソース内でmessageという属性に値が設定された想定でのコードです（Java側のコードは後ほど）

<body>
  <p>
  <%=strMessage%>
  </p>
</body>

こちらのソースでHTMLのコードに変数strMessageの値を埋め込んでいます。

サーブレットの変更

JSPの実装に合わせて、java側のコードも編集します。
JSP側ではmessageの属性が作成され値が設定されていることを期待しているため、以下のようにdoGetメソッドを編集します。

HelloServlet.java

protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
  // 呼び出し元Jspからデータ受け取り
  request.setCharacterEncoding("UTF8");

  // 呼び出し先Jspに渡すデータセット
  request.setAttribute("message", "HelloWorld");

  // Hello.jsp にページ遷移
  RequestDispatcher dispatch = request.getRequestDispatcher("Hello.jsp");
  dispatch.forward(request, response);
}

doGetのメソッドの引数にはHttpServletRequest型の変数とHttpServletResponse型の変数の2つが存在します。
requestはクライアントからのリクエスト情報が格納されています、responseにはクライアントへ返却するための値を設定します。

JSPを利用する場合は、フォーワードという仕組みを利用して画面表示を行います。
getRequestDispatcherにより、Hello.jspリソースのDispatcherを取得し、forwardメソッドにより処理を転送します。
転送時に引数として渡す、requestオブジェクトにmessage属性をセットしておくことで,jsp側で参照が行えるようになります。

getRequestDispatcher

Getパラメータの取得

サーブレット側でGETパラメータを取得する場合はrequestオブジェクトのgetParameterメソッドを指定します。
引数としてパラメータのキーを指定します。getParameterMapメソッドで一括でパラメータを取得することもできます。

以下のようにサーブレットのコードを変更してみます。

HelloServlet.java

protected void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    String name = request.getParameter("name");

    // 呼び出し元Jspからデータ受け取り
    request.setCharacterEncoding("UTF8");

    // 呼び出し先Jspに渡すデータセット
    if (name != null) {
      request.setAttribute("message", "Hello," + name);
    } else {
      request.setAttribute("message", "Hello");
    }

    // Hello.jsp にページ遷移
    RequestDispatcher dispatch = request.getRequestDispatcher("Hello.jsp");
    dispatch.forward(request, response);
  }

nameパラメータのた値を取得し、値がセットされている場合とされていない（null)場合で条件分岐し、セットされている場合は画面に表示するように変更しました。

ブラウザからパラメータをセットしてENTERします。

以下の画像の通り指定したnameが表示されました。

getParameter
getParameterMap

フォワードの応用

jspを利用する場合は上記のようにgetRequestDispatcherにJSPファイルのパスを指定しました。
getRequestDispatcherの引数には別のサーブレットを指定することもできるため、ひとつ実験してみます。

まずは、GoodbyeServletという新たなサーブレットクラスを作成します（作成方法はこちらをご確認ください)。

作成したGoodbyteServlet.javaのdoGetメソッドを一部変更します。

GoodbyeServlet.java

  protected void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    response.getWriter().append("Goodbye");
  }

画面にGoodbyeと表示します。

続いて、HelloServlet.javaのdoGetメソッドも変更します。

HelloServlet.java

  protected void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    String name = request.getParameter("name");

    // 呼び出し元Jspからデータ受け取り
    request.setCharacterEncoding("UTF8");

    // 呼び出し先Jspに渡すデータセット
    if (name != null) {
      request.setAttribute("message", "Hello," + name);
    }

    // Hello.jsp にページ遷移
    RequestDispatcher dispatch;

    if (name != null) {
      dispatch = request.getRequestDispatcher("Hello.jsp");
    } else {
      dispatch = request.getRequestDispatcher("GoodbyeServlet");
    }
    dispatch.forward(request, response);
  }

    if (name != null) {
      dispatch = request.getRequestDispatcher("Hello.jsp");
    } else {
      dispatch = request.getRequestDispatcher("GoodbyeServlet");
    }

上記の処理によりパラメータにnameが指定されていなかった場合ないGoodbyeServletへフォワードするように変更しました。

以下、動作確認結果です。

nameを指定しなかったのでさよならといわれてしまいました。

インクルードを使ったヘッダーの表示

インクルードはJSPファイルの中に別のJSPを埋め込む仕組むです。
例えば、複数の画面(jsp）において、共通のヘッダーやフッターを表示したい場合に利用します。

利用方法は以下のようなincludeディレクティブをJSPファイルの表示したい箇所に記載するだけです。

<%@include file = "ファイルのパス" %>

試してみましょう。
まずはHeader.jspというファイルを新規で作成します（作成方法はこちら)。
次にHeader.jspファイルを以下のように書き換えます。

Header.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
ヘッダー情報の表示
<hr style="text-align: left; margin-left: 0px; height:2; background-color:'red'; width:150"></hr>

Hello.jsp側も変更します。

Hello.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
  // Servletのデータ受け取り
  request.setCharacterEncoding("UTF8");
  String strMessage = (String) request.getAttribute("message");
%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ハロー</title>
</head>
<body>
  <%@include file= "Header.jsp" %>
  <p>
  <%=strMessage%>
  </p>
</body>
</html>

bodyタグ内に以下を追記してます。

<%@include file= "Header.jsp" %>

動作確認してみます。

画面に「ヘッダー情報の表示」という項目が追加されました。
※nameパラメータを渡さないとgoodbyeが表示されるので注意

最後に

今回はJSPファイルを使った基本的な画面表示の方法について整理しました。
次回は、ボタンやインプットなどをフォーム追加とサーブレット側での入力内容の取得する方法について、整理する予定です。

他の記事についてはこちらから御覧ください。

参考リンク