入力フォームに入力した文字を表示する【Java Servlet】

Java

2020.05.18

2020.06.02

Tweet Facebook はてブ!

jsp は Java のコードを書ける HTML だと前回の記事では説明しました。

しかし、Java の処理コードを何でもかんでも JSP に書くのは愚策です。規模が大きい処理を jsp に書くのはメンテナンス性が低くなってしまいます。

プログラマにとっての HTML のようなマークアップ言語は理解不能で触りたくもない領域であるのと同じように、 HTML コーダーにとって Java というプログラムは見るだけで吐き気を催すような意味不明な文字の羅列だからです。

というわけで、畑が違うもの同士できるだけ分業することにします。

作業環境

Eclipse 4.4
Tomcat 8

入力フォームに入力 -> サーバーで処理 -> ブラウザ上で表示としたい

JSP とServlet 連携で単純な入力フォームの仕組みを構築していきます。

手順は以下の通り。

入力フォームを JSP で作る
フォームで入力されたデータを受け取って処理する Servlet を作る
Servlet から受け取ったデータを表示する JSP を作る

入力フォームをJSPで作る

以前の記事で説明したように JSP ファイルを作成します。

input.jsp という名前で JSP ファイルを作成します。


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>input</title>
</head>
<body>

<p>入力フォーム</p>
<form method="get" action="Output">
	<input type="text" name="text">
	<button type="submit">送信</button>
</form>

</body>
</html>

今回は上のようなソースコードを書きました。今回気をつけたいのは、charset が「UTF-8」になっているということです。これが UTF-8 なっていないと日本語が文字化けしてしまうため、面倒ですが三箇所のエンコードを UTF-8 になおしておきます。

form タグで囲った中に入力フォームを作ることができます。

ここでは HTML について細かい説明はおこなわないこととしますが、簡単に触れておきます。

HTML に慣れていないとややこしいと思うので、一度にすべてを覚える必要はないでしょう。

HTML タグ名	タグの意味や使い方
form	フォームであることを示す。
input	入力フィールドを作ることができるタグ。type 属性を text とすることで、文字列を入力できるフィールドになります。type 属性を submit とすることで送信ボタンにもなりますが、input タグで submit 属性を使うのは現在は非推奨です。
button	送信ボタンなどを作るためのタグ。type 属性を submit とすることで、送信ボタンになります。

入力フォームに打ち込んだデータがどこに送信されるかというと、form タグの action 属性に指定した URL への送信になります。大抵の場合、Servlet のファイル名を入れることになります。

今回は Output という Servlet をこれから作る予定なので、 Output にしておきます。

サーバーとの通信には種類がある

サーバーとの通信のことを「HTTP通信」といい、その方式のことを「HTTPメソッド」といいます。主に使われるのはGETメソッドとPOSTメソッドです。ほかにもHEAD/PUT/DELETEなど、いろいろな種類が用意されていますが、基本的にこの2つを覚えておけば問題ありません。

今回のフォームではGETメソッドを使用しますが、パスワードなどを送信するときは絶対にPOSTメソッドを使用するようにしましょう。

この理由は後述します。

フォームで入力されたデータを受け取る Servlet を作る

Servlet とはつまるところ、HttpServlet クラスを継承した Java クラスのことです。

Java のクラスファイルを作成するときは、パッケージの中に作成することになるので、まずはパッケージを用意します。

プロジェクトを右クリックして現れるメニューから新規 -> パッケージをクリックします。

パッケージ名を入力して完了をクリック。今回は hello というパッケージ名にしました。

上で作成したパッケージを右クリックして現れるメニューから新規 -> サーブレットを選択します。

Output という名前でクラスを作成します。

ファイルの中には doGet と doPost というメソッドが自動生成されていると思いますが、今回は GET 通信なので doGet というメソッドにコードを書きます。

上のようなソースコードを書きました。長くなってしまうので、 doGet メソッド以外は省略しています。

ここで重要になってくるのは request.setAttribute というメソッドです。

この関数はServlet と JSP 間のやりとりをスムーズにするために使われる関数で、引数1をキーワードとして、引数2の情報を持つことができます。

setAttribute したデータは getAttribute を使うことで取り出すことができます。

フォワードとリダイレクト

一般的に常時稼働を基本としたコンピュータのことをサーバーコンピュータと呼ぶのに対し、キーボードをつないで普通に使うパソコンのことを、クライアントコンピュータと呼びます。

Java を使ったクライアントとサーバー間の処理には、フォワードとリダイレクトが存在します。（一般的に使われる「リダイレクト」という言葉とは少し意味が違います）

フォワードは

クライアント : ページAをくれ（リクエスト）
サーバー : ページAか。くれてやるよ（レスポンス）

という処理で完結します。

それに対し、リダイレクトは

クライアント : ページAをくれ（リクエスト）
サーバー : ページAにきたならページBに行ってもらう（レスポンス）
クライアント : 自動的にページBをリクエスト
サーバー : ページBか。くれてやるよ。（レスポンス）

という処理がおこなわれます。ページAを要求したのにも関わらず、ページBへ行くようにサーバーから指示されるのです。

つまり、クライアントとサーバー間でのやりとりが複数回発生するため、パフォーマンスがよくありません。なので JSP とのやりとりは基本的にフォワードでするとよいでしょう。

というわけで今回使うのはフォワードです。リダイレクトにはリダイレクトなりに必要なときがあるのですが、今回はそのときではないのでその説明は割愛します。

Servlet から受け取ったデータを表示する JSP を作る

output.jsp という名前で JSP ファイルを作成します。


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
// サーブレット側で「msg」という属性にして渡しているので、
// msg という属性値から取得して、text という変数に代入
String text = (String)request.getAttribute("msg");
%>
<!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=UTF-8">
<title>output</title>
</head>
<body>

<p>入力された文字列</p>
<%=text %>

</body>
</html>

上のようなソースコードになりました。今回も忘れないように文字コードを UTF-8 にしておきます。

やっていることは単純で、入力された文字を受け取った文字を表示しているだけです。

DOCTYPE 宣言より下はプログラマではなくマークアップエンジニアの領域なので、プログラムを書くことはあまり好まれません。

自分でわかりやすくするためにも、可能であれば Java の処理は上にまとめておくことをおすすめします。

さて、Servlet のときもお伝えしたように、重要になってくるのは getAttribute という関数です。

Servlet 側で msg という属性に対して setAttribute したので、 JSP 側でデータを取り出すときも msg というキーワードをもとに getAttribute してデータを取り出します。

今回は取り出したデータを text という変数に代入してから、スクリプトレットを使ってブラウザ上に表示しています。

実行してみる

input.jsp を右クリック -> 実行 -> サーバーで実行の順でクリックし、Tomcat サーバーを起動します。

フォームが表示されているはずなので、とりあえず適当な文字を打ち込んで送信してみます。

実装通り、入力された文字がそのまま表示されるページが完成しました。

Servlet のレスポンスを表示するときも JSP と同じで、以下のような URL になります。

localhost:8080/プロジェクト名/サーブレットのファイル名

と、ここで気づいた方も多いと思いますが、URL の中に入力された文字がふくまれています。

これが GET 送信の特徴です。GET 通信は送信された内容を URL に含めているので、この URL をブックマークすればいつでもフォームに同じものを入力された状態を確認できます。

Amazon やヤフオクの検索結果をブックマークしてもフォームに入力し直す必要がないのは、 GETメソッドを使って通信しているからというわけです。

一方で平文で乗せてしまうので、ログインフォームなどを実装する際には適していません。

どちらを使うのが適切かを必要に応じて見極め、たとえばログインフォームを作るときは form タグの action 属性を「post」にし、Servlet 側では doPost メソッドの中に処理を記述するようにしましょう。

いい記事だと思ったらシェアしてくれるとうれしいです！

Tweet Facebook はてブ!

りまねをフォロー

GitHub Twitter RSS

入力フォームに入力した文字を表示する【Java Servlet】