Download - レシピを保存しよう! By 石原 和音 @CreW 今日の目標 WebApplication において、ファイルを用 いた入出力ができるようになる 保存することの意味がわかるようになる
レシピを保存しよう!
By 石原 和音 @CreW
今日の目標
WebApplication において、ファイルを用いた入出力ができるようになる 保存することの意味がわかるようになる ストリームの使い方がわかるようになる
前回までの復習
しつこいけど、WEBアプリって何でした? 人を幸せにするコンセプトをもっている
奥様 WEB のコンセプトを思い出そう
奥様 WEB コンセプト主婦の日々の料理をバラエティー豊かに オリジナル料理に注目
「オリジナルレシピ投稿掲示板」
• みんなにこんな美味いオリジナル料理を食べてもらいたい(投稿)
• もっと色んなオリジナルレシピが知りたいたい(閲覧)
現行「奥様WEB」の深刻な問題
自分が投稿したレシピを自分で見るだけ 過去に投稿されたレシピを見ることが
できない
実は掲示板じゃなかった!!!!
じゃあ、どうしよう?
投稿されたレシピを保存できるようにしよう
具体的な手段 ファイル データベース などなど
今回は「ファイル」を使って実装しましょう
2つのサーブレット役割分担
レシピを投稿する → ToukouServlet.java レシピの投稿を受け付ける 受け付けたレシピをファイルに書き込む 感謝のメッセージの HTML を出力する
レシピを一覧表示する→ IchiranServlet.java レシピをファイルから読み出す レシピ一覧の HTML を出力する
レシピって何だ?
レシピ 作者の名前 投稿日時 料理の名前 内容
レシピ? 作者の名前 投稿日時 料理の名前 レシピ?
新・奥様WEBの構成webappwebapp
htmlhtml
okusamaokusama
texttext
WEB-INFWEB-INF
classesclasses
toukou.html
ToukouServlet.java
IchiranServlet.java
index.html
recipes.txt
レシピ投稿サーブレット
レシピ一覧サーブレット
投稿フォーム画面
レシピ保存ファイル
奥様WEBトップページ
toukou.html
<form name="recipe" 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="content" >
<input type="submit" name="submit" value=" 投稿 ">
<input type="reset" name="reset" value=" リセット ">
</form>
ToukouServlet.java: doPost()
/** * レシピの投稿を受け付ける * ( 投稿には、 HTTP POST メソッドを用いる ) */ public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { //***** レシピの投稿を受け付ける *****
//HTTP リクエストのパラメータから、レシピ情報を取り出す String contributor = request.getParameter("contributor"); // 投稿者 String title = request.getParameter("title"); // タイトル String content = request.getParameter("content"); // レシピ内容 // 日本語コードを正しい形に変換する contributor = convertToUnicode(contributor); title = convertToUnicode(title); content = convertToUnicode(content); // 投稿された時刻を取得する String date = (new java.util.Date()).toString();
//***** 受け付けたレシピをファイルに書き込む *****
// 改行を正しい形に変換する //( 改行が含まれると、書き込んだ際、 1行に収まらなくなってしまう ) contributor = convertReturnCode(contributor); title = convertReturnCode(title); content = convertReturnCode(content); // ファイルに書き込むためのストリームを作成する BufferedWriter writer = new BufferedWriter( new FileWriter(recipeFilePath, true) ); // この true はファイルへの追記を意味する // レシピを、 contributor, title, date, content の順で書き込む writer.write(contributor); writer.newLine(); writer.write(title); writer.newLine(); writer.write(date); writer.newLine(); writer.write(content); writer.newLine();
// ストリームを閉じる writer.close(); //***** 感謝のメッセージの HTML を出力する *****
//HTML 出力の準備をする response.setContentType("text/html; charset=EUC-JP"); // 文字化けを防止 PrintWriter out = response.getWriter(); //HTML の出力に必要な PrintWriter を作成する
// 感謝の HTML を出力する out.println("<html>"); out.println("<head><title> ありがとうございました。 </title></head>"); out.println("<body bgcolor='#33CCFF' text='#000000'>"); out.println("<font size='big'><b> 投稿ありがとうございました。 "); out.println("<br> おいしい料理ができたら、また教えてくださいね☆ </b></font><br><br>"); out.println("[ <a href=\"IchiranServlet\"> レシピ一覧画面へ </a> ]"); out.println("</body>"); out.println("</html>"); //HTML 出力のあとかたづけをする out.close(); }
← レシピの投稿を受け付ける
← 受け付けたレシピをファイルに書き込む
← 感謝のメッセージの HTML を出力する
レシピの投稿を受け付ける
//***** レシピの投稿を受け付ける *****
//HTTP リクエストのパラメータから、レシピを構成する情報を取り出すString contributor = request.getParameter("contributor"); // 投稿者String title = request.getParameter("title"); // タイトルString content = request.getParameter("content"); // レシピ内容 // 日本語コードを正しい形に変換するcontributor = convertToUnicode(contributor);title = convertToUnicode(title);content = convertToUnicode(content); // 投稿された時刻を取得するString date = (new java.util.Date()).toString();
受け付けたレシピをファイルに書き込む
//***** 受け付けたレシピをファイルに書き込む *****
// 改行を正しい形に変換する//( 改行コードが含まれると、書き込んだ際、1行に収まらなくなってしまう )contributor = convertReturnCode(contributor);title = convertReturnCode(title);content = convertReturnCode(content);
// ファイルに書き込むためのストリームを作成するBufferedWriter writer = new BufferedWriter( new FileWriter(recipeFilePath, true) ); // この true はファイルへの追記を意味する
//レシピを、 contributor, title, date, content の順で書き込むwriter.write(contributor);writer.newLine();writer.write(title);writer.newLine();writer.write(date);writer.newLine();writer.write(content);writer.newLine();
// ストリームを閉じるwriter.close();
今日の最重要ポイント
ストリームとはなんやねん?
ストリームとはデータの流れである 一直線 方向がある
例えば… ( 奥様 WEB の例 )
奥様 WEBサーブレット
レシピファイル激辛カレー\n末
ストリームの分類
1. 何を?2. どこから?/どこへ?3. どのように?
1:何を?
バイト列
文字列
ペイントソフト 画像ファイル0xEF0xC20x4B0x240x8C0xD30x33
奥様 WEBサーブレット
レシピファイル激辛カレーの作
2:どこから?/どこへ?
さまざまなものを入出力先として扱える
ファイル
ネットワーク
キーボード・・・
<HTML><
GET tou プログラムこんにちは。\n
ファイル
ネットワーク
ディスプレイ・・・
入力 出力<HTML><
GET tou
エラーが起こり
末広涼子\n激辛
3:どのように?
例えば… ( バッファリングの例 )
出力先
激辛カレー末広良子2002年5月23日カレールーを3倍入れ
バッファー出力する情報
奥様 WEBサーブレット 末広涼子\n激辛
ーレカ辛激
子涼広末
ここで使うストリーム
今回は、文字列(何を?)を、ファイルに(どこから?/どこへ?)
保存しよう。その際、バッファリング(どのように?)
を行おう。 文字列をファイルに保存する
FileReader, FileWriter バッファリング機能を付加する
BufferedReader, BufferedWriter
これで作られたストリーム// ファイルに書き込むためのストリームを作成するBufferedWriter writer = new BufferedWriter( new FileWriter(recipeFilePath, true) );
// ファイルに書き込むためのストリームを作成するFileWriter fileWriter = new FileWriter(recipeFilePath, true) ;BufferedWriter writer = new BufferedWriter(fileWriter);
文字列をファイルに書き込むストリームを作成(追記す
る)
バッファー機能を付加するストリームを作成
激辛カレー末広良子2002年5月23日カレールーを3倍入れー
レカ辛激
末広涼子\n激辛
子涼広末
奥様 WEBサーブレット 末広涼子\n激辛
受け付けたレシピをファイルに書き込む
//***** 受け付けたレシピをファイルに書き込む *****
// 改行を正しい形に変換する//( 改行コードが含まれると、書き込んだ際、 1行に収まらなくなってしまう )contributor = convertReturnCode(contributor);title = convertReturnCode(title);content = convertReturnCode(content);
// ファイルに書き込むためのストリームを作成するBufferedWriter writer = new BufferedWriter( new FileWriter(recipeFilePath, true) ); // この true はファイルへの追記を意味する
//レシピを、 contributor, title, date, content の順で書き込むwriter.write(contributor);writer.newLine();writer.write(title);writer.newLine();writer.write(date);writer.newLine();writer.write(content);writer.newLine();
// ストリームを閉じるwriter.close();
IchiranServlet.java: doGet()
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { //HTML 出力の準備をする response.setContentType("text/html;charset=Shift_JIS"); // 文字化け防止 PrintWriter out = response.getWriter(); //HTML を出力するためのPrintWriter を作成する // ページの頭部分のHTML を出力する out.println("<html>"); out.println("<head><title> 奥様 Web : 全レシピ </title></head>"); out.println("<body bgcolor=\"#33CCFF\" text=\"#000000\">"); out.println("<center><font size=5><b> おくさま Web</b></font></center>"); out.println("<hr>"); // レシピ一覧の HTML を出力する BufferedReader reader = new BufferedReader(new FileReader(recipeFilePath)); // ファイルを読み込むストリームを作成する while(true) { //contributor, title, date, content の順で読み込む String contributor = reader.readLine(); if( contributor == null ) { // 読み込めなかったらファイルの終わりなので、無限ループをぬける break; } String title = reader.readLine(); String date = reader.readLine(); String content = reader.readLine(); // レシピの HTML を出力する out.print("<p><b><font size=4>"+contributor+" さんオリジナル </font></b></p>"); out.println("<p><font size=5> 「 "+title+" 」のレシピ </font></p>"); out.print("( 投稿時刻: "+ date + ")<br>"); out.println("<p>" + content + "</p>"); out.println("<hr>"); } reader.close(); // ストリームを閉じる // ページの尻尾部分の HTML を出力する out.println("</body>"); out.println("</html>"); //HTML 出力のあとかたづけをする out.close();}
IchiranServlet.java: doGet()
// レシピ一覧の HTML を出力する BufferedReader reader = new BufferedReader(new FileReader(recipeFilePath)); // ファイルを読み込むストリームを作成する while(true) { //contributor, title, date, content の順で読み込む String contributor = reader.readLine(); if( contributor == null ) { // 読み込めなかったらファイルの終わりなので、無限ループをぬける break; } String title = reader.readLine(); String date = reader.readLine(); String content = reader.readLine(); // レシピの HTML を出力する out.println("<p><b><font size=4>"+contributor+" さんオリジナル </font></b></p>"); out.println("<p><font size=5> 「 "+title+" 」のレシピ </font></p>"); out.println("( 投稿時刻: "+ date + ")<br>"); out.println("<p>" + content + "</p>"); out.println("<hr>"); } reader.close(); // ストリームを閉じる
読み込み
出力
ストリームの作成
ストリームを閉じる
ファイルに保存するとはどういうこと?
保存ってどうすること? 書き込む+読み出す=保存(広義)
保存する目的は?なぜ嬉しい? 書き込んだ情報を読み出して初めて嬉しい
ハードディスクの空き容量が減っても嬉しくない
Linux ユーザの僕は MSWord のファイルを貰っても嬉しくない
どうやったらうまく読み出せる?→ どういうルールで書かれたのか知っている必要がある
保存のルール
呼び方 ファイルフォーマット ファイル形式
奥様 WEB でのファイルフォーマット作成者名前料理のタイトル投稿日時内容
をそれぞれ1行ずつ
末広涼子┓激辛カレー┓Wed May 23 17:30:24 JST 2002 ┓用意するもの: <BR> たっぷりのカレー粉 <BR> 赤唐辛子… ┓石原和音┓キムチグラタン┓Wed May 23 17:34:11 JST 2002 ┓材料 <BR> ご飯(多少古くてもよい) <BR> チーズ… ┓O岩元┓対話システム論ラーメン┓Wed May 23 17:36:02 JST 2002 ┓UI 論、 TUT 、認知心理学、 KJ 法等をベースにグルワと… ┓
ホントにルール守られてる?
while(true) { //contributor, title, date, content の順で読み込む String contributor = reader.readLine(); if( contributor == null ) { // 読み込めなかったらファイルの終わりなので、無限ループをぬける break; } String title = reader.readLine(); String date = reader.readLine(); String content = reader.readLine();
// レシピを、 contributor, title, date, content の順で書き込むwriter.write(contributor);writer.newLine();writer.write(title);writer.newLine();writer.write(date);writer.newLine();writer.write(content);writer.newLine();
実習です
重要な言葉は定義しましょう ファイル形式を決めましょう
では、がんばってください!
Presented by
CreW
ブラウザ投稿サーブレット
主婦が「投稿」ボタンを押すと
一覧サーブレット
レシピファイル
新・レシピの行方
主婦が一覧画面を見ると
HTTP POST
doPost()
HTTP GET
doGet()
レシピを見ることができる!
ブラウザ奥様 WEB サーブレット
旧・レシピの行方
主婦が「投稿」ボタンを押すとHTTP POST でレシピが投稿される
doPost()
×
レシピの HTML がブラウザに送られる
doPost() の処理が終了すればサーバ側のレシピは
消滅
主婦には今自分が投稿したレシピが見えている
プログラムの構成
index.html インデックス(案内とリンク) toukou.html 投稿フォーム画面 ToukouServlet.java レシピ投稿サーブ
レット IchiranServlet.java レシピ一覧サーブレット recipes.txt レシピ保存ファイル