Download presentation
Presentation is loading. Please wait.
2
Servlet にメッセージを送ろ う！ 杉浦学・山下純一・北川敦規
3
今日の目標です サーブレットとブラウザのメッセージ 送受信 ブラウザでサーブレットにメッセージを送信で きる サーブレットでメッセージを受信できる 実習で実際にアプリを作れるようにな る
4
Web アプリケーションとは？ 先週の復習です！ Ｑ： Web アプリケーションってなんでし た？ Ａ： Web アプリは人を幸せにするコンセプトを持っ ている 単なる動的なページは Web アプリではない Ex.) 掲示板なら・・・・ コンセプトがなければ → Web アプリとは言えな い もしコンセプトなけれ ば 人は幸せにならない
5
掲示板にコンセプトをつける Ｑ：「掲示板」にコンセプトをつけると したら、どんなものが考えられます か？ Ａ：
6
題材：奥様支援 Web アプリケーショ ン 主婦の日々の料理をバラエティー豊かに オリジナル料理に注目 「オリジナルレシピ投稿掲示板」 みんなにこんな美味いオリジナル料理 を食べてもらいたい（投稿） もっと色んなオリジナルレシピが知り たいたい（閲覧）
7
利用シナリオ デモってみましょう 投稿者：末広 涼子 料理名：スペシャルカレー・ブチキレ風 味 作り方：①ルーに WASABI を入れます ②ご飯は無洗米でいいです ③具はＢＳＥ
8
メッセージの送受信モデル クライアント （末広涼子） サーバー GET toukou.html toukou.html POST UketoriServlet 投稿者 =" 末広涼子 " ・・・ UketoriServlet.class スペ シャルカレー Web ブラウザ
9
Get? Post? Ｑ：先ほどの図でＧｅｔと Post が出てき ました。 役割の違うところはなんでしょう Ａ： Ｇｅｔ HTML をもらうための要求 Ｐｏｓｔ メッセージを送って、処理 した結果 の HTML をもらうた めの要求
10
メッセージ送信編 入力から送信まで クライアント （末広涼子） サーバー toukou.html POST UketoriServlet 投稿者 = 末広涼子・・・ Web ブラウザ GET toukou.html
11
メッセージを発信する仕組み ～ お名前： 料理名： 作り方
12
フォームのはじめ メッセージを入力する為の部品を書く それらを送信する為の部品を書く action ・・・ 送信先
13
入力の為の部品 name ・・・各部品固有の名前 type ・・・ 部品の種類
14
送信の為の部品
15
送信される形式 Post で送った Http リクエストは、 な形で送られました。めでたし、めでたし。 POST../servlet/UketoriServlet HTTP/1.1 Length: 54 contributor= 末広 涼子＆ title ＝スペシャルカレー・ブチキレ風 味 &recipe= ①ルーに wasabi を入れます②ご飯は無洗米でいいです ③具はＢＳＥ ・・・・
16
メッセージ送信編 終 了
17
メッセージ受信編 受信 から返答まで クライアント （末広涼子） サーバー UketoriServlet.class スペ シャルカレー Web ブラウザ
18
送られてきたメッセージ contributor= 末広 涼子＆ title ＝スペシャルカレー・ブチキレ風 味 &recipe= ①ルーに wasabi を入れます②ご飯は無洗米でいいです ③具はＢＳＥ・・・・ すると・・・アプリケーションサーバー （ＴｏｍＣａｔ）が「ハッシュテーブ ル」にマッピングしてくれます
19
ハッシュテーブル？ 文字を鍵（ Key) として 値（ Value ）を取得することができる 今回の場合・・・ Contributor = 末広 涼子 Title = スペシャルカレー・ブチキレ風味 Recipe = ①ルーに wasabi を入れます ②ご飯は無洗米でいいです ③具はＢＳＥ・・・ ・ Key Value
20
Servlet の２つの部分 UketoriServlet.class 受け取りプロ グラム HTML 生成 プログラム ブラウザーへ サーバーから （ハッシュテーブ ル）
21
ｐ 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(" "); // 投稿者と現在の日付を出力する。 out.print(" "+contributor+" さんオリジナル "); out.print("( 投稿時刻： "+ new java.util.Date() + ") "); // 料理名を出力する。 out.println(" 「 "+title+" 」のレシピ "); // 作り方を出力する out.println(recipe+" "); out.println(" "); //***** ここまででメッセージを表示できた ***** } }
22
受け取りプログラム 送信されたメッセージが格納されたハッシュテーブルから、 キーを指定してバリューをそれぞれの変数に格納します String contributor = request.getParameter("contributor"); // キー contributor のバリューを取得して文字列 contributor に入 れる String title = request.getParameter("title"); // キー title のバリューを取得して文字列 title に入れる String recipe = request.getParameter("recipe"); // キー recipe のバリューを取得して文字列 recipe に入れる
23
投稿者の例でいうと・・・ String contributor=request.getParameter("contributor") ; 文字列 contributor Contributor = 末広 涼子 Key Value 末広 涼子 文字列 contributor
24
受け取りプログラム１ （文字コードの変換） contributor = transferUnicode(contributor); title = transferUnicode(title); recipe = transferUnicode(recipe); 中略 private String transferUnicode(String s) throws UnsupportedEncodingException{ return new String(s.getBytes("8859_1"),"JISAutoDetect"); } このままでは正常な文字列ではないので 文字化けするので、 Unicode に変換します
25
表示プログラム準備 （出力を日本語形式に） 出力を日本語形式に指定して、ブラウ ザでの文字化けを解消する。 response.setContentType("text/html;chars et=Shift_JIS");
26
HTML を生成プログラム
27
メッセージ受信編 終 了
28
では。実習です。 自分でコンセプトがあって、人が幸せになる ような掲示板を考えて、実装しましょう。 投稿できる項目は３つくらい作ります。 ヒント：浮かばない人は、 「みんなの書評を見れる掲示板」でいいですよ １．書名 ２．作者 ３．書評
29
今回の掲示板 ・投稿書き込みが１回だけできるレシピ投稿掲示 板 ・保存もできません （Ｓｅｒｖｌｅｔが生きている間のみ） →1/4 人前の掲示板 サブゼミの中で一人前に育てましょう
30
構造の復習 ディレクトリを作って関連ファイル を入れましょう。それが Web アプリ という宣言です。 （先回の復習）
31
今後は？ 今後のサブゼミで書き込みを保存でき るようにします。 だんだん本格的になりますね。 お疲れ様でした。 来週からも頑張りましょう！
32
では、作業開始です。
33
なぜなら ウェブに使われる文字コードは複数あって、 異なるコードが混在すると表示が混乱する。 そこで、あらかじめ出力文字コードを宣言し て おけば、ブラウザが正常に表示できる シフト JIS ・・・ Shift-JIS JIS ・・・ iso-2022-jp EUC ・・・ euc-jp
Similar presentations
