サーブレット&JSPの基本｜ひとこと広場の機能設計と開発準備

サーブレット&JSPの基本｜ひとこと広場の機能設計と開発準備

ログインして、ひとことを投稿する。ServletとJSPの総復習として、実践的なWebアプリを完成させよう

ここまで、ServletとJSPを使ったWebアプリケーション開発の基本を学習してきました。

フォームから送信された値をサーブレットで受け取る方法、サーブレットからJSPへ処理を渡すフォワード、別のURLへ移動させるリダイレクト、そしてリクエストスコープ、セッションスコープ、アプリケーションスコープの使い方などです。

これらの知識は、1つずつ学習しているときは理解しやすいものです。しかし、実際のWebアプリケーションでは、複数の知識を組み合わせて1つの機能として動かします。

そこで、ここからはひとこと広場というWebアプリケーションを作りながら、これまで学んだ内容を総復習していきます。

ひとこと広場は、ログインした利用者が、日々の出来事や気持ちを短い文章で投稿し、ほかの利用者の投稿も閲覧できるWebアプリケーションです。

たとえば、今日はJSPの表示が分かってきました、Servletの流れを復習しました、エラーが解決して少し自信がつきました、のような短い文章を投稿できます。

今回作成するアプリケーションは、実際のSNSや掲示板に比べると、とてもシンプルです。データベースやファイル保存は使わず、Servlet、JSP、スコープの基本を確認するための学習用アプリケーションとして作成します。

ただし、ログイン、ログアウト、投稿、閲覧、エラーメッセージ表示など、Webアプリケーションらしい重要な機能は含まれています。

最初からすべてを一気に作ると、ファイル数や処理の流れが多くなり、混乱しやすくなります。そのため、全部で5本の記事に分けて、少しずつ完成させていきます。

この記事では、1本目として、ひとこと広場の全体像を確認し、開発の準備としてJavaBeansとトップ画面を作成します。

ひとこと広場で作成する機能

ひとこと広場では、主に4つの機能を作成します。

主な機能

ログイン機能では、入力されたパスワードをもとに認証を行います。

今回は学習用のシンプルな構成にするため、パスワードは全ユーザー共通で1234とします。利用者名は自由に入力できる形にします。

ログインに成功すると、メイン画面へ進めます。メイン画面では、短いひとことを投稿したり、ほかの利用者が投稿した内容を閲覧したりできます。

ログアウト機能では、ログイン状態を終了します。ログイン状態の管理には、後の記事でセッションスコープを使います。

ひとこと投稿機能の考え方

ひとこと投稿機能では、利用者が入力した短い文章を投稿として扱います。

投稿には、投稿した利用者名と投稿内容の2つの情報を持たせます。

投稿情報の例

投稿機能を使うには、ログインしている必要があります。

ログインしていない利用者が直接メイン画面へアクセスしようとした場合は、トップ画面へ戻すようにします。このしくみは、後の記事で作成します。

また、投稿が空の場合は、投稿を受け付けずにエラーメッセージを表示します。この処理も、後の記事で追加します。

ひとこと閲覧機能の考え方

ひとこと閲覧機能では、投稿されたひとことを一覧で表示します。

表示順は、新しい投稿が上に来るようにします。

投稿順と表示順の例

このように、新しい投稿を上に表示すると、最近の投稿がすぐに分かります。

投稿されたひとことは、アプリケーションが終了するまで保存します。今回はデータベースやファイルを使わないため、後の記事ではアプリケーションスコープを使って投稿リストを管理します。

画面遷移の全体像

ひとこと広場は、トップ画面から始まります。

トップ画面では、利用者名とパスワードを入力してログインします。ログインに成功すると、ログイン結果画面が表示され、そこからメイン画面へ進みます。

メイン画面では、ひとことの投稿と閲覧を行います。ログアウトリンクをクリックすると、ログアウト画面へ移動します。

画面一覧

ログインに失敗した場合は、ログイン結果画面に失敗メッセージを表示し、トップ画面へ戻れるようにします。

図1：ひとこと広場の画面遷移

この図から分かること

ひとこと広場は、トップ画面から始まり、ログインを経てメイン画面へ進むWebアプリケーションです。

メイン画面では、ログイン中の利用者がひとことを投稿し、ほかの利用者の投稿も閲覧できます。

ログアウトするとログアウト画面が表示され、トップ画面へ戻れます。

この画面遷移を先に確認しておくと、後の記事で作成するサーブレットやJSPの役割が理解しやすくなります。

学習用アプリケーションとしてシンプルに作る

ひとこと広場は、ServletとJSPの復習を目的とした学習用アプリケーションです。

そのため、実務で使う本格的なアプリケーションのように、すべての異常系や保存処理を作り込むわけではありません。

開発方針

この構成にすることで、ServletとJSPの基本的な連携を確認しやすくなります。

完成したアプリケーションはとてもシンプルですが、ログイン状態の管理、投稿データの共有、JSPへの画面表示など、Webアプリケーション開発で大切な要素が含まれています。

5本の記事で作成する流れ

ひとこと広場は、5本の記事に分けて作成します。

一度にすべての機能を作ると、作成するファイルが多くなり、どのファイルが何を担当しているのか分かりにくくなります。

そのため、まずは全体像と土台を作り、そのあと機能ごとに追加していきます。

記事ごとの作成内容

この記事では、1本目として、ひとこと広場の機能と画面遷移を確認し、開発に必要な土台を準備します。

具体的には、動的WebプロジェクトHirobaを用意し、利用者情報と投稿情報を表すJavaBeansを作成し、トップ画面であるindex.jspを作成します。

開発準備で行うこと

ひとこと広場の開発準備として、次の作業を行います。

開発準備の内容

以降の記事では、このHirobaプロジェクトを使って作業を進めます。

トップ画面を表示するときのURLは、次のようになります。

http://localhost:8080/Hiroba/

このURLでトップ画面が表示できれば、開発準備の第一段階は完了です。

図2：ひとこと広場の開発準備

この図から分かること

ひとこと広場の開発では、まず動的WebプロジェクトHirobaを作成します。

Javaのクラスはsrc/main/javaに作成し、画面として表示するJSPはsrc/main/webappに作成します。

User.javaやShortMessage.javaのようなJavaBeansは、modelパッケージに配置します。トップ画面であるindex.jspは、ブラウザから直接リクエストするため、src/main/webapp直下に保存します。

HirobaをTomcat11_Java25に追加して実行すると、http://localhost:8080/Hiroba/ からトップ画面を表示できます。

「Hiroba」用に動的Webプロジェクトを作成する

まずはEclipseで新しい動的Webプロジェクトを作成します。操作は、ファイル → 新規 → 動的Webプロジェクト の順に進めます。

作成画面が開いたら、プロジェクト名を入力します。ここでは、学習用プロジェクト名として 「Hiroba」 を使います。

次に、ターゲット・ランタイムを選択します。ここでは Tomcat11(Java25) を選びます。ターゲット・ランタイムは、このプロジェクトをどのサーバー環境で動かすかを表す設定です。サーブレットやJSPは単体で実行するのではなく、Tomcatのようなアプリケーションサーバー上で動作するため、この設定はとても重要です。

入力と選択が終わったら、完了 をクリックします。これで study 「Hiroba」という名前の動的WebプロジェクトがEclipse上に作成されます。

動的Webプロジェクトをサーバーへ追加する

プロジェクトを作っただけでは、まだTomcat上で動かせる状態にはなっていません。次に必要なのが、作成した 「Hiroba」 をサーバーへ追加する作業です。

Eclipseのサーバー ビューを操作していきます。サーバー ビューが画面にない場合は、「ウィンドウ」→「ビューの表示」→「サーバー」を選択すると画面に表示されます。

Eclipseのサーバー ビューを開き、Tomcat11_Java25 を選択します。

そのあと右クリックして、追加および除去 を選びます。

すると、左側に 使用可能、右側に 構成済み という一覧が表示されます。ここで、使用可能 の一覧に study が表示されているはずです。study を選択して 追加 をクリックします。

すると、「Hiroba」 が 構成済み の側へ移動します。これで、Tomcat11_Java25 に 「Hiroba」 を登録できたことになります。「完了」をクリックします。

この操作は、Eclipseに対して、このプロジェクトをこのサーバーで動かしますと教えるための大切な設定です。プロジェクトが存在していても、サーバーに追加していなければ実行対象として扱われません。

JavaBeansを作成する理由

ひとこと広場では、利用者情報と投稿情報を扱います。

利用者情報には、利用者名とパスワードがあります。

投稿情報には、投稿した利用者名と投稿内容があります。

これらを別々の変数だけで扱うと、情報のまとまりが分かりにくくなります。そこで、JavaBeansとして1つのインスタンスにまとめます。

作成するJavaBeans

User.javaは、ログイン処理で利用します。

ShortMessage.javaは、ひとこと投稿と閲覧で利用します。

どちらも、modelパッケージに作成します。

利用者情報を持つJavaBeansを作成する

まず、利用者情報を表すUser.javaを作成します。

User.javaには、利用者名を表すnameと、パスワードを表すpassを用意します。

利用者に関する情報を持つJavaBeansの例

ファイル名： User.java

package model;

import java.io.Serializable;

public class User implements Serializable {
    private String name;
    private String pass;

    public User() { }

    public User(String name, String pass) {
        this.name = name;
        this.pass = pass;
    }

    public String getName() {
        return name;
    }

    public String getPass() {
        return pass;
    }
}

User.javaは、modelパッケージに作成します。

このクラスは、利用者名とパスワードを1つのインスタンスとしてまとめるためのJavaBeansです。

ログイン処理では、フォームから送信された利用者名とパスワードを使ってUserインスタンスを作成します。ログインに成功した場合は、このUserインスタンスをセッションスコープに保存します。

User.javaのポイント

User.javaでは、nameとpassという2つのフィールドをprivateにしています。

Userが持つ情報

引数なしコンストラクタと、利用者名とパスワードを受け取るコンストラクタを用意しています。

また、nameとpassを取得するために、getNameとgetPassを用意しています。

今回のサンプルでは、フォームから受け取った値をコンストラクタで設定するため、setterは用意していません。

投稿情報を持つJavaBeansを作成する

次に、ひとこと投稿に関する情報を持つJavaBeansを作成します。

ここでは、投稿情報を表すクラス名をShortMessageとします。

ShortMessage.javaには、投稿した利用者名を表すuserNameと、投稿内容を表すtextを用意します。

ひとこと投稿に関する情報を持つJavaBeansの例

ファイル名： ShortMessage.java

package model;

import java.io.Serializable;

public class ShortMessage implements Serializable {
    private String userName;
    private String text;

    public ShortMessage() { }

    public ShortMessage(String userName, String text) {
        this.userName = userName;
        this.text = text;
    }

    public String getUserName() {
        return userName;
    }

    public String getText() {
        return text;
    }
}

ShortMessage.javaも、modelパッケージに作成します。

このクラスは、1件分のひとこと投稿を表します。

たとえば、山田さんが今日はJSPを復習しましたと投稿した場合、userNameには山田、textには今日はJSPを復習しましたが入ります。

ShortMessage.javaのポイント

ShortMessage.javaでは、投稿者名と投稿内容を1つのインスタンスにまとめています。

ShortMessageが持つ情報

ひとこと広場では、投稿内容だけでなく、誰が投稿したのかも表示します。

そのため、投稿本文だけでなく、利用者名も一緒に保存します。

複数の投稿を扱うときは、ShortMessageインスタンスをリストに追加して管理します。

ArrayListの基本

ひとこと広場では、投稿された複数のひとことを一覧で表示します。

複数の投稿をまとめて扱うために、ListインタフェースとArrayListクラスを使います。

ArrayListは、複数のインスタンスを順番に格納できるクラスです。

たとえば、複数の利用者名を格納する場合、次のように書けます。

ArrayListの基本的な使い方の例

import java.util.ArrayList;
import java.util.List;

public class ArrayListSample {
    public static void main(String[] args) {
        // ArrayListインスタンスの生成
        List<String> nameList = new ArrayList<>();

        // Stringインスタンスを格納
        nameList.add("山田");
        nameList.add("青山");
        nameList.add("佐藤");

        // 格納したStringインスタンスを順に取得
        for (String name : nameList) {
            System.out.println(name);
        }
    }
}

この例では、List<String>として、、Stringインスタンスだけを格納するリストを作成しています。

nameList.addで要素を追加し、拡張for文で先頭から順番に取り出しています。

ひとこと広場では、StringではなくShortMessageインスタンスを格納するリストを使います。投稿が増えるたびにShortMessageインスタンスをリストへ追加し、メイン画面で順番に表示します。

ジェネリクスで格納する型を指定する

ArrayListを使うときは、どの型のインスタンスを格納するのかを指定できます。

この仕組みをジェネリクスと呼びます。

たとえば、List<String>と書くと、Stringインスタンスを格納するリストという意味になります。

ひとこと広場では、投稿情報をShortMessageインスタンスとして扱うため、後の記事では次のような形でリストを使います。

List<ShortMessage> messageList = new ArrayList<>();

リストで扱う型の例

ジェネリクスを使うと、リストにどの種類のインスタンスを入れるのかが分かりやすくなります。

また、取り出すときにも、意図した型として扱いやすくなります。

トップ画面を作成する

次に、ひとこと広場のトップ画面を作成します。

トップ画面は、アプリケーションに最初にアクセスしたときに表示される画面です。

ここでは、まずシンプルに、ひとこと広場へようこそという見出しだけを表示します。

ログインフォームは、次の記事で追加します。

トップ画面を出力するビューの例

ファイル名： index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ひとこと広場</title>
</head>
<body>
<h1>ひとこと広場へようこそ</h1>
</body>
</html>

index.jspは、src/main/webappディレクトリの直下に作成します。

このファイルは、ブラウザから直接リクエストするトップ画面です。

WEB-INFフォルダの中ではなく、webapp直下に置く点に注意しましょう。

index.jspの保存場所

index.jspは、src/main/webappディレクトリに作成します。

保存場所の考え方

トップ画面は、Webアプリケーションにアクセスしたときに最初に表示される画面です。

そのため、ブラウザから直接アクセスできる場所に配置します。

後で作成するログイン結果画面やメイン画面などは、サーブレットからフォワードして表示するため、WEB-INF/jspに配置します。

デフォルトページとは

Webサイトを利用するとき、URLの末尾にindex.jspやindex.htmlを付けなくてもトップ画面が表示されることがあります。

これは、アプリケーションサーバがデフォルトページを探してくれるためです。

デフォルトページとは、ファイル名やURLパターンを省略したURLでリクエストされたときに、自動的に使用されるファイルのことです。

たとえば、次のURLでアクセスしたとします。

http://localhost:8080/Hiroba/

このURLでは、index.jspというファイル名を指定していません。

しかし、Tomcatはあらかじめ決められた順番でファイルを探します。その中でindex.jspが見つかると、そのファイルを使って画面を表示します。

Tomcatが探すデフォルトページ

Apache Tomcatでは、ファイル名が省略された場合に、あらかじめ決められた候補を順番に探します。

代表的には、次のような順番で探します。

デフォルトページの検索順

Hirobaプロジェクトのwebapp直下にindex.jspを作成しておけば、http://localhost:8080/Hiroba/ でアクセスしたときに、そのindex.jspが表示されます。

つまり、URLの末尾にindex.jspを書かなくても、トップ画面を表示できます。

図3：デフォルトページとしてindex.jspを表示する流れ

この図から分かること

ブラウザからhttp://localhost:8080/Hiroba/へアクセスすると、ファイル名を指定していないリクエストがTomcatへ送られます。

Tomcatは、デフォルトページの候補を順番に探します。その中でindex.jspが見つかると、index.jspを使ってトップ画面を表示します。

この仕組みにより、URLの末尾にindex.jspを付けなくても、ひとこと広場のトップ画面を表示できます。

デフォルトページへのアクセス方法

index.jspを作成したら、次の方法でトップ画面を表示できるか確認します。

実行方法

ここで注意したいのは、JSPファイルそのものを選択して実行するのではなく、プロジェクトHirobaを選択して実行する方法です。

動的Webプロジェクトを選択してEclipseの実行機能を使うと、ファイル名を省略したURLへのリクエストになります。

そのため、デフォルトページであるindex.jspが表示されます。

ブラウザの表示例

index.jspを直接指定しても表示できる

index.jspはwebapp直下に保存しているため、ファイル名を指定してアクセスすることもできます。

アクセスできるURL

どちらのURLでも、トップ画面が表示されます。

ただし、Webサイトのトップ画面としては、http://localhost:8080/Hiroba/ のようにファイル名を省略してアクセスできる形を確認しておくとよいでしょう。

1本目で作成したファイル

この記事では、ひとこと広場の全体像を確認し、開発準備として3つのファイルを作成しました。

作成したファイル

また、複数の投稿を扱う準備として、ArrayListの基本的な使い方も確認しました。

後の記事では、User.javaをログイン機能で使い、ShortMessage.javaを投稿と閲覧機能で使います。

動作確認で見るポイント

最後に、ここまでの準備ができているか確認しましょう。

確認ポイント

まずは、トップ画面が正しく表示されることを確認します。

ここまでできれば、ひとこと広場の土台は完成です。

次の記事では、index.jspにログインフォームを追加し、ログイン処理を行うLoginLogic.javaとLogin.java、ログイン結果を表示するloginResult.jspを作成していきます。