Servletにメッセージを送ろ
う！
杉浦学・山下純一・北川敦規
今日の目標です
サーブレットとブラウザのメッセージ送受信
ブラウザでサーブレットにメッセージを送信できる
サーブレットでメッセージを受信できる
実習で実際にアプリを作れるようになる
Webアプリケーションとは？
先週の復習です！
Ｑ：Webアプリケーションってなんでした？
Ａ： Webアプリは人を幸せにするコンセプトを持っている
単なる動的なページはWebアプリではない
Ex.)掲示板なら・・・・
もしコンセプトなければ
人は幸せにならない
コンセプトがなければ
→Webアプリとは言えない
掲示板にコンセプトをつける
Ｑ：「掲示板」にコンセプトをつけるとしたら、
どんなものが考えられますか？
Ａ：
題材：奥様支援Webアプリケーション
主婦の日々の料理をバラエティー豊かに
オリジナル料理に注目
「オリジナルレシピ投稿掲示板」
みんなにこんな美味いオリジナル料理を食
べてもらいたい（投稿）
もっと色んなオリジナルレシピが知りたい
たい（閲覧）
利用シナリオ
デモってみましょう
投稿者：末広 涼子
料理名：スペシャルカレー・ブチキレ風味
作り方：①ルーにWASABIを入れます
②ご飯は無洗米でいいです
③具はＢＳＥ
メッセージの送受信モデル
GET toukou.html
クライアント
（末広涼子）
<html><body><form
><text=></html>
toukou.html
POST UketoriServlet
投稿者="末広涼子"・・・
サーバー
Webブラウザ
<html><body>スペ
シャルカレー</html>
UketoriServlet.class
Get? Post?
Ｑ：先ほどの図でＧｅｔとPostが出てきました。
役割の違うところはなんでしょう
Ａ：
Ｇｅｔ HTMLをもらうための要求
Ｐｏｓｔ メッセージを送って、処理した結果
のHTMLをもらうための要求
メッセージ送信編
入力から送信まで
GET toukou.html
クライアント
（末広涼子）
<html><body><form
><text=></html>
POST UketoriServlet
投稿者=末広涼子・・・
toukou.html
Webブラウザ
サーバー
メッセージを発信する仕組み
<html><body bgcolor="#33CCFF">～
<form name="form1" method="post"
action="../servlet/UketoriServlet">
<font size="+1">お名前：</font>
<input type="text" size="15“ name="contributor">
<font size="+1">料理名：</font>
<input type="text" size="20" name="title" >
<font size="+1">作り方</font>
<textarea cols="50" rows="25" name="recipe" >
<input type="submit" name="submit" value="投稿">
<input type="reset" name="reset" value="リセット">
</form></body></html>
フォームのはじめ
<form name="form1" method="post"
action="../servlet/UketoriServlet">
メッセージを入力する為の部品を書く
それらを送信する為の部品を書く
</form>
action ・・・ 送信先
入力の為の部品
<input type="text"
size="15“ name="contributor">
type ・・・ 部品の種類
<textarea cols="50" rows="25"
name="recipe" >
name ・・・各部品固有の名前
送信の為の部品
<input type="submit"
name="submit" value="投稿">
<input type="reset"
name="reset" value="リセット">
送信される形式
Postで送ったHttpリクエストは、
POST ../servlet/UketoriServlet HTTP/1.1
Length: 54
contributor=末広 涼子＆title＝スペシャルカレー・ブチキレ風味
&recipe=①ルーにwasabiを入れます②ご飯は無洗米でいいです
③具はＢＳＥ・・・・
な形で送られました。めでたし、めでたし。
メッセージ送信編 終了
メッセージ受信編
受信から返答まで
クライアント
（末広涼子）
UketoriServlet.class
<html><body>スペ
シャルカレー</html>
サーバー
Webブラウザ
送られてきたメッセージ
contributor=末広 涼子＆title＝スペシャルカレー・ブチキレ風味
&recipe=①ルーにwasabiを入れます②ご飯は無洗米でいいです
③具はＢＳＥ・・・・
すると・・・アプリケーションサーバー
（ＴｏｍＣａｔ）が「ハッシュテーブル」にマッピン
グしてくれます
ハッシュテーブル？
文字を鍵（Key)として
値（Value）を取得することができる
今回の場合・・・
Key
Value
Contributor = 末広 涼子
Title
= スペシャルカレー・ブチキレ風味
Recipe
= ①ルーにwasabiを入れます
②ご飯は無洗米でいいです
③具はＢＳＥ・・・・
Servletの２つの部分
UketoriServlet.class
サーバーから
（ハッシュテーブル）
ブラウザーへ
受け取りプログ
ラム
HTML生成
プログラム
ｐublic class UketoriServlet extends HttpServlet {
/**
doPost() メソッドは、POSTリクエストがブラウザー
からプログラムに発信されたときに呼び出されるメソッド
**/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletExceptio
{
/**
送信されたメッセージが格納されたハッシュテーブルから、
キーを指定してバリューをそれぞれの変数に格納する
**/
String contributor = request.getParameter("contributor");
String title = request.getParameter("title");
String recipe = request.getParameter("recipe");
contributor = transferUnicode(contributor);
title = transferUnicode(title);
recipe = transferUnicode(recipe);
//*****ここまででメッセージを受信できた*****
//*****ここからがメッセージを表示する為の部分*****
response.setContentType("text/html;charset=Shift_JIS");
PrintWriter out = response.getWriter();
out.println("<html>");
out.println("<body bgcolor=\"#33CCFF\" text=\"#000000\">");
out.println("<hr>");
//投稿者と現在の日付を出力する。
out.print("<b><font size=4><p>"+contributor+"さんオリジナル</font></b>");
out.print("(投稿時刻："+ new java.util.Date() + ")<BR/></p>");
//料理名を出力する。
out.println("<p><font size=5>「"+title+"」のレシピ</font> </p><hr/>");
//作り方を出力する
out.println(recipe+"</p><hr/>");
out.println("</body>");
out.println("</html>");
//*****ここまででメッセージを表示できた*****
}
}
受け取りプログラム
送信されたメッセージが格納されたハッシュテーブルから、
キーを指定してバリューをそれぞれの変数に格納します
String contributor = request.getParameter("contributor");
//キーcontributorのバリューを取得して文字列contributorに入
れる
String title = request.getParameter("title");
//キーtitleのバリューを取得して文字列titleに入れる
String recipe = request.getParameter("recipe");
//キーrecipeのバリューを取得して文字列recipeに入れる
投稿者の例でいうと・・・
String contributor=request.getParameter("contributor");
Key
Contributor =
文字列
contributor
Value
末広 涼子
文字列
contributor
末広 涼子
受け取りプログラム１
（文字コードの変換）
このままでは正常な文字列ではないので
文字化けするので、Unicodeに変換します
contributor = transferUnicode(contributor);
title = transferUnicode(title);
recipe = transferUnicode(recipe);
中略
private String transferUnicode(String s) throws
UnsupportedEncodingException{
return new
String(s.getBytes("8859_1"),"JISAutoDetect");
表示プログラム準備
（出力を日本語形式に）
出力を日本語形式に指定して、ブラウ
ザでの文字化けを解消する。
response.setContentType("text/html;ch
arset=Shift_JIS");
HTMLを生成プログラム
/ / デ ー タ の 出 力 に 必 要 な Pr i n t Wr i t e r を 作 成 す る 。
Pr i nt Wr i t er out = r es p ons e. g et Wr i t er ( ) ;
/ / * * HTMLタ
out . p r i nt l
out . p r i nt l
out . p r i nt l
グ と 受 信 し た メ ッ セ ー ジ を 出 力 す る **/
n( "<ht ml >") ;
n( "<b od y >") ;
n( "<hr >") ;
//投 稿 者 と 現 在 の 日 付 を 出 力 す る 。
out . p r i nt ( "<b ><f ont s i z e=4><p >"+ c o n t r i b u t o r + " オ リ ジ ナ ル < / f on t >
j a v a . ut i l . Da t e( ) + ") <BR/></p >") ;
//料 理 名 を 出 力 す る 。
ou t . p r i n t l n ( " < p > < f on t s i z e = 5 > 「 " + t i t l e + " 」 の レ シ ピ < / f on t > < / p > < h r / > " ) ;
//作 り 方 を 出 力 す る
out . p r i nt l n( r e c i p e +"</p ><hr />") ;
out . p r i nt l n( "</b od y >") ;
out . p r i nt l n( "</ht ml >") ;
</b> ( 投 稿 時 刻 ： "+ new
メッセージ受信編 終了
では。実習です。
自分でコンセプトがあって、人が幸せになるよう
な掲示板を考えて、実装しましょう。
投稿できる項目は３つくらい作ります。
ヒント：浮かばない人は、
「みんなの書評を見れる掲示板」でいいですよ
１．書名
２．作者
３．書評
今回の掲示板
・投稿書き込みが１回だけできるレシピ投稿掲示板
・保存もできません
（Ｓｅｒｖｌｅｔが生きている間のみ）
→1/4人前の掲示板
サブゼミの中で一人前に育てましょう
構造の復習
ディレクトリを作って関連ファイルを入れ
ましょう。それがWebアプリという宣言で
す。
（先回の復習）
今後は？
今後のサブゼミで書き込みを保存できるよ
うにします。
だんだん本格的になりますね。
お疲れ様でした。
来週からも頑張りましょう！
では、作業開始です。
なぜなら
ウェブに使われる文字コードは複数あって、
異なるコードが混在すると表示が混乱する。
そこで、あらかじめ出力文字コードを宣言して
おけば、ブラウザが正常に表示できる
<文字コード一覧 (名称・・・指定方式) >
シフトJIS ・・・Shift-JIS
JIS
・・・ iso-2022-jp
EUC
・・・ euc-jp
© Copyright 2024 ExpyDoc
