学習18日目:やっとJSPに入りました。

今日の学習時間。

  • Day:18
  • Today:4h
  • Total:104h

学習内容について。

昨日のようにサーブレットとHTMLを一緒に作成すると分業がしづらくなってしまう。なので、HTMLの中にJavaを書くという形のJSP(Java Server Pages)を使用する。

JSPの基本。

STEP
JSPのファイル作成。
  • フォルダの中に作成
  • 右クリック→「新規」→「JSPファイル」を選択
STEP
JSPテンプレートの選択。

雛形は自分で作成できる

  1. 「JSPテンプレート」と書かれたリンクをクリック
  2. 「新規」ボタンをクリック
  3. 名前:HTML5-JSP
    コンテキスト:新規JSP
    自動的に挿入:☑︎
    説明:HTML5-JSP
    パターン:(下記のコード)
  4. 「OK」をクリック
  5. 「JSPテンプレートの使用」に☑︎
  6. 「HTML5-JSP」を選んで「完了」をクリック
<%@ page language="java" contentType="text/html; charset=${encoding}" pageEncoding="${encoding}"%>
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="${encoding}">
        <title>Insert title here</title>
    </head>
    <body>

    </body>
</html>
STEP
動作確認。

JSPの場合は追加・変更してもTomcatを再起動する必要はない。

JSPはTomcatによってサーブレットに変換される。そして、そのサーブレットがTomca上で動作する。

変換されたサーブレットは下記の場所に保存される(macの場合)。

/Applications/Eclipse_4.6.3.app/Contents/workspace/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/work/Catalina/localhost/first_webapp/org/apache/jsp/test_jsp.java

変換されると下記のような長いコードになる。

 JSPの書式。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>JSPのテスト</title>
    </head>
    <body>
        <%-- 変数の表示 --%>
        <%
            int a = 3;
            int b = 2;
            int c = a + b;
        %>
        <p>c = <%= c %></p>

        <%-- 条件分岐 --%>
        <% int d = 40; %>
        <% if(d >= 60) { %>
            <p>合格です!</p>
        <% } else { %>
            <p>赤点です…補講を行います</p>
        <% } %>

        <%-- 繰り返し --%>
        <% for(int i = 0; i < 10; i++) { %>
            <p>i = <%= i %></p>
        <% } %>
    </body>
</html>
書式の構成要素
  • コメント:<%-- --%>
    • JSP用のコメントなので、HTMLのコメントにはならない
  • スクリプトレット:<% %>
    • Javaの命令をそのまま記述できる
  • スクリプト式:<%= %>
    • 定義した変数の中身をそのまま表示
  • JSP設定:<%@ %>
    • JSPの設定を記述
    • JSPページ全体の設定したいときは、<%@ page ... %>

練習問題を解いてみる。

条件
  • ループを使って掛け算の九九の計算式を表示
  • 81個の九九の計算式を表示
  • <ul>タグと<li>タグを使用
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>kuku</title>
    </head>
    <body>
        <ul>
            <% for(int i = 1; i <= 9; i++) { %>
                <% for(int j = 1; j <= 9; j++) { %>
                    <li><%= i %> × <%= j %> = <%= i * j %></li>
                <% } %>
            <% } %>
        </ul>
    </body>
</html>

スクリプレットやスクリプト式が入るとごちゃごちゃして見にくくなる。エディターの自動入力にも慣れる必要あり。

ローカル・ホスト の Tomcat8 (Java8) で必要な幾つかのポート (8080, 8009) がすでに使用中です。サーバーはすでに別のプロセスで稼働中であるか、システム・プロセスがそのポートを使用中である可能性があります。このサーバーを始動するには、他のプロセスを停止するか、ポート番号を変更する必要があります。

上記の警告が出てサーバーを始動できなかったが、ポート番号を変更したら稼働した。

コントローラとビューで役割を分けてみる。

import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class VCServlet
 */
@WebServlet("/VCServlet")
public class VCServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public VCServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        RequestDispatcher rd = request.getRequestDispatcher("/WEB-INF/view.jsp");
        rd.forward(request, response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

doGetメソッドのみ変更(それに伴い、import文も追加)。

doGetメソッド
  • サーブレットからビューとなるJSPを呼び出すのは、この2行のみ(doGetの)
    • getRequestDispatcherというメソッドを使用
    • 引数には、ビューとなるJSPファイルを指定
    • ビューにするJSPファイルは必ずWEB-INFフォルダの中に作成
      • WEB-INFはインターネット上に公開しないファイルを格納するためのフォルダ
      • 直接アクセスされると何かと不都合なことが多いから
  • forwardメソッドでレスポンスの画面としてJSPファイルを呼び出す

ビュー(JSP)ファイルを作成(下記コード)。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>test of view</title>
    </head>
    <body>
        <h1>Can you see this message?</h1>
    </body>
</html>

Tomcatを再起動し、動作確認。

今日の反省と明日の目標。

この辺りは一気に集中してガッと終わらせたいところですね。日にちを跨ぐと、前日にした部分との比較がややこしい。JSPに入ってから「おまじない」の出てくる頻度が上がった気がします。今はとりあえず、どんどん先に進めますが、おまじないの中身は解読したいところです。

明日も引き続き、JSPを進めていきます。

閉じる