レシピを保存しよう！ by 石原和音 @crew 今日の目標 webapplication...

レシピを保存しよう！

By 石原和音 @CreW

今日の目標

WebApplication において、ファイルを用いた入出力ができるようになる保存することの意味がわかるようになるストリームの使い方がわかるようになる

前回までの復習

しつこいけど、ＷＥＢアプリって何でした？人を幸せにするコンセプトをもっている

奥様 WEB のコンセプトを思い出そう

奥様 WEB コンセプト主婦の日々の料理をバラエティー豊かにオリジナル料理に注目

「オリジナルレシピ投稿掲示板」

• みんなにこんな美味いオリジナル料理を食べてもらいたい（投稿）

• もっと色んなオリジナルレシピが知りたいたい（閲覧）

現行「奥様ＷＥＢ」の深刻な問題

自分が投稿したレシピを自分で見るだけ過去に投稿されたレシピを見ることが

できない

実は掲示板じゃなかった！！！！

じゃあ、どうしよう？

投稿されたレシピを保存できるようにしよう

具体的な手段ファイルデータベースなどなど

今回は「ファイル」を使って実装しましょう

２つのサーブレット役割分担

レシピを投稿する → ToukouServlet.java レシピの投稿を受け付ける受け付けたレシピをファイルに書き込む感謝のメッセージの HTML を出力する

レシピを一覧表示する→ IchiranServlet.java レシピをファイルから読み出すレシピ一覧の HTML を出力する

レシピって何だ？

レシピ作者の名前投稿日時料理の名前内容

レシピ？作者の名前投稿日時料理の名前レシピ？

新・奥様ＷＥＢの構成webappwebapp

htmlhtml

okusamaokusama

texttext

WEB-INFWEB-INF

classesclasses

toukou.html

ToukouServlet.java

IchiranServlet.java

index.html

recipes.txt

レシピ投稿サーブレット

レシピ一覧サーブレット

投稿フォーム画面

レシピ保存ファイル

奥様ＷＥＢトップページ

toukou.html

<form name="recipe" method="post" action="../servlet/UketoriServlet">

 お名前： 

<input type="text" size="15" 　 name="contributor">

 料理名： 

<input type="text" size="20" name="title" >

 作り方 

<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(" 投稿ありがとうございました。 "); out.println(" おいしい料理ができたら、また教えてくださいね☆ "); 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. どのように？

１：何を？

バイト列

文字列

ペイントソフト画像ファイル0xEF0xC20x4B0x240x8C0xD30x33

奥様 WEBサーブレット

レシピファイル激辛カレーの作

２：どこから？／どこへ？

さまざまなものを入出力先として扱える

ファイル

ネットワーク

キーボード・・・

<HTML><

GET tou プログラムこんにちは。\n

ファイル

ネットワーク

ディスプレイ・・・

入力出力<HTML><

GET tou

エラーが起こり

末広涼子\n激辛

３：どのように？

例えば… ( バッファリングの例 )

出力先

激辛カレー末広良子２００２年５月２３日カレールーを３倍入れ

バッファー出力する情報

奥様 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);

文字列をファイルに書き込むストリームを作成（追記す

る）

バッファー機能を付加するストリームを作成

激辛カレー末広良子２００２年５月２３日カレールーを３倍入れー

レカ辛激

末広涼子\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> おくさま Web</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(""+contributor+" さんオリジナル "); out.println(" 「 "+title+" 」のレシピ "); out.print("( 投稿時刻： "+ date + ") "); out.println("" + content + ""); 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(""+contributor+" さんオリジナル "); out.println(" 「 "+title+" 」のレシピ "); out.println("( 投稿時刻： "+ date + ") "); out.println("" + content + ""); out.println("<hr>"); } reader.close(); // ストリームを閉じる

読み込み

出力

ストリームの作成

ストリームを閉じる

ファイルに保存するとはどういうこと？

保存ってどうすること？書き込む＋読み出す＝保存（広義）

保存する目的は？なぜ嬉しい？書き込んだ情報を読み出して初めて嬉しい

ハードディスクの空き容量が減っても嬉しくない

Linux ユーザの僕は MSWord のファイルを貰っても嬉しくない

どうやったらうまく読み出せる？→ どういうルールで書かれたのか知っている必要がある

保存のルール

呼び方ファイルフォーマットファイル形式

奥様 WEB でのファイルフォーマット作成者名前料理のタイトル投稿日時内容

をそれぞれ１行ずつ

末広涼子┓激辛カレー┓Wed May 23 17:30:24 JST 2002 ┓用意するもの： たっぷりのカレー粉 赤唐辛子… ┓石原和音┓キムチグラタン┓Wed May 23 17:34:11 JST 2002 ┓材料 　ご飯（多少古くてもよい） 　チーズ… ┓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 レシピ保存ファイル

レシピを保存しよう！ by 石原 和音 @crew 今日の目標 webapplication...

Documents

レシピを保存しよう！ by 石原和音 @crew 今日の目標 webapplication...