4 復習サーバーサイドの具体的技術 Java による JSP/Servlet 銀行系等の大規模で信頼性の必要なシステム向け. PHP お手軽にサイトを作るサーバーサイド言語. C に似ている. Ruby on Rails 最も有名なモダンフレームワーク伝統的な CGI (Common Gateway Interface) Perl, Ruby, C 等でサーバー側処理をするもの. いまどきは見かけない. 4

5 復習データの保持業務や娯楽等を継続的に利用するため, クライアントサイド, サーバーサイドそれぞれにデータを保持する機能がある. クライアントサイドクッキーウエブストレージサーバーサイドサーバー OSのファイルにデータを直に読み書きいまどきは, あまり行わない. データベースを利用 5

6 復習 + データ保持の例一連の処理 ( セッション ) の識別過去の行動を保持たとえば閲覧した商品のリスト等作業途中のデータ保存例えばゲームにおける艦隊構成や武装作業履歴購入した商品のリスト共同作業データの共有個人に紐付けされたデータの保持クレジットカード番号, ポイントの残高等 6

7 復習 -- サーバーと対話 HTTP リクエスト / レスポンスは複数回行われる. 無論,JS も使えるが. サーバー側のデータが使えるので, 例えば, 端末を変えても処理が継続できる. 途中まで大学でやって, あとは家の PC でやるとか. ブラウザ JS プログラム web storage 等選択肢を送る結果が返ってくる入力画面準備サーバープログラムサーバー側のデータ 7

8 復習サーバーとの対話ユーザーの入力手段 form というタグを用いて, 受け取りページを指定して, 自身の入力情報とともに HTTP リクエストを送る. 無論, 受け取りページは処理能力がなければいけない. ( 通常,PHP や Servlet で書かれる ) 出力手段受け取りページに結果が埋め込まれた形で,HTTP レスポンスが返ってくる. その結果をブラウザが表示する. 入力したページとは別のページに移動していることを注意.( ページ遷移と呼ばれる ) サーバーもクライアントも一連のページであるという情報を ( 細工無しでは ) もっていない. 8

9 復習 Form の典型様式メッセージを受け取るページを指定. このページはリクエスト処理の能力がないといけない. get もしくは post を指定. 違いは後述. <form action=" method="post"> Topic: <input type="text" name="topic" size="20"> <br> <textarea rows="5" cols="22" name="feedback"> </textarea> <br> <input type="submit" value="send"> </form> ユーザーの入力値を最終的に受け取りページに送るための呪文. ユーザー入力場所の指定. 詳細は後述. 9

10 復習 GET と POST GET 本来はサーバーからのデータ取得リクエストに用いる. よって, クライアント側から原則データを送ることはできない. しかし,URL 自体にデータを付記することで, データを無理やり送ることが可能となっている. 送ったデータは URL を見ただけで丸見え. POST サーバーにデータを送る本来のリクエスト. リクエストの本体 ( ヘッダーより下 ) に送るデータが付記される. 一応, ぱっと見にはデータは見えないが, 暗号化されていない HTTP は簡単に傍受できるので, 実際にはデータは丸見え. 10

11 復習クライアントからデータを送る POST を使えば任意のデータをサーバーに送れる. しかし, パラメータ名と値の対として, データを送るのが一般的.( 一般に key-value データと呼ばれる ) 以下の arg1 と arg2 がそれぞれパラメータ名以下の 7 と 5 がそれぞれの値サーバーは, これらパラメータの値に基づいて, サーバー側で計算 ( 含む検索等 ) を行い, その結果を新しいページとして返すのが普通. 11

12 共通点 JSP どちらもサーバーで実行される. JSP and Servlet すなわち, クライアントに届いた時にはただの HTML コレが JavaScript との大きな違い HTML に Java っぽいものを埋め込む. 雰囲気は JavaScript に似てるが, 上記のようにサーバー内で実行される. php はコレに考え方が似ている. オリジナルのクラス等を作成する場合は,Servlet との連携が必要. Servlet Java そのもの. main メソッドは書かないのが普通. そもそもスーパークラスがフレームワーク的にできている. Java の print 機能で HTML の行を表示しないと, クライアント側で解釈不能になる. どちらかといえば,JSP のサブルーチン的に使われるのが普通. 12

13 <HTML> <HEAD> <TITLE> JSP loop </TITLE> </HEAD> <BODY> <ul> <% int i; for(i=0; i<10; i++){ %> <li> number <%= i*3 %> <% } %> </ul> </BODY> </HTML> サンプル // Simple Servlet import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class Another extends HttpServlet { } public void doget( HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { response.setcontenttype("text/html"); PrintWriter out = response.getwriter(); out.println("<html>"); out.println("<head>"); out.println("<title>another!</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>another!</h1>"); out.println("</body>"); out.println("</html>"); } 13

14 動的なページ生成 JSP/Servlet 等のサーバーサイド処理は, 動的なページ生成と呼ばれることがある. これは, サーバーおいてあるファイルを単に閲覧するだけの単純なウエブページに比べ, プログラムで処理して, ページを原則毎回生成しているからである. たしかに上記の通りだが, クライアントに届いた時点では, 単なる HTML になっている. よって,JavaScript 等を含むクライアント到着後にも動的にページが変化するものに比べれば, 静的といえる. 14

15 JSP の基礎 HTML 等に Java を記述する. <% と %> で Java をはさむ. 単なるウエブサーバーは JSP(Java 入り HTML) を解釈できないので, 別途,Web コンテナと呼ばれるプログラムを準備する. tomcat6 は Web コンテナの一種. 内部的には埋め込まれた Java 記述を Java コンパイラがコンパイルして, ページを動的に生成している. 15

16 復習セットアップしてほしい構成いわゆる,LAMP + Java/Servlet Lenovo : クライアント Firefox 等 : ウエブブラウザ HTTP CentOS 6.5 : サーバー MySQL 5.1 : データベース apache 2.2 : ウエブサーバー PHP 5.3 : モジュール Tomcat6 : アプリケーションサーバーコレが Web コンテナ JVM : モジュール 16

17 JSP ページの配置の仕方次回のセットアップに従い, 少なくとも,httpd と tomcat6 を起動されてることを確認.( 詳細は次頁 ) 以下を実行し, 適当なフォルダを作成 # cd /var/lib/tomcat6/webapps # mkdir jindai 注 # は root での実行です. フォルダ名 ( 上記では jindai) はなんでもいいが英字にすること. JSP のファイルを作成して ( 後述 ) 上記のフォルダに入れる. 仮に hiratuka.jsp とする. 適当なブラウザで以下の URL を見れば,JSP が動く. 注は各自実際のアドレスに置き換えてください. できれば友達等の他のマシンから見てもらうのがよい. 17

18 httpd, tomcat6 の起動確認以下のコマンドで確認できる. running と出ないと動いてないので, どっか問題がある. 18

19 JSP のページ作成ファイル名は英数字, 拡張子は.jsp にする. 作成は Linux 側で emacs や vi で行うしかない. 仮想マシンの人は Win で作成して転送してもよい. 作成したファイルは httpd や tomcat が読めるように以下の設定を行う. # chmod a+r hiratuka.jsp ファイルの中身は基本 html だが,JSP としての記述は後述. Java 部分は <% %> で囲うのが基本. 19

20 JSP ページの要素以下のような要素を HTML ファイルに埋め込める. ノリは <script> に似てる. 名前構文概要 Directive なんか %> ページ単位の処理法指定.charset 等. 宣言 <%! なんか %> 変数, 定数, メソッド宣言 Scriptlet <% なんか %> 実行される処理 Expression 式 <%= なんか %> = 以降の式の値に置き換えられる Action Tag <jsp: なんか > 定型的な処理をタグ形式で記述コメント <%-- なんか --%> コメント文,HTML 式のコメント文 <!- -> は使わないこと. 20

21 暗黙オブジェクト以下のようなオブジェクト ( インスタンス ) が宣言なしで使える. 主にウエブとの情報共有に用いられる. 宣言部 (<%! %>) では使えないことを注意. オブジェクト名 application config exception 概要コンテナに関する情報等設定ファイルへのアクセスページ内で発生した例外情報を管理 out クライアントにデータを出力する手段.out.println はよくつかう. page JSP ページそのもの. pagecontext ページ単位で利用可能な情報. request response http リクエストへのアクセスを提供 http レスポンスを修正する場合に利用 session セッションの情報, 次回以降. 21

22 サンプルによる記述の実際 scriptlet.jsp よくある例.Javaをhtmlの中にかけます. dclvar.jsp 変数を宣言して使います. dclmethod.jsp メソッドも宣言できます. 22

23 page contenttype="text/html; charset=utf-8" %> <%-- 標準ライブラリを使う場合, 以下のようにする必要があり自作のライブラリや 3rd party のライブラリを使う場合は Servlet のところで解説 --%> page import="java.util.arraylist" %> page import="java.util.hashset" %> <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>scriptlet.jsp</title></head><body> <ol> <% ArrayList<String> a=new ArrayList<String>(); // リストです HashSet<String> s=new HashSet<String>(); // 集合です a.add("tako"); // なんとなく海産物が思いつく a.add( ika ); a.add( awabi ); a.add("ikura"); a.add("tako"); // 重複してます a.add("uni"); a.add("ika"); // 重複してます // s は集合だから重複分は追加されない for(string i: a){s.add(i);} /* 実際みてみると, ちゃんと重複はカウントされてない */ for(string i: s){ out.println( <li> +i); } %> <ol></body></html> 23

24 非標準クラスの利用 (JSP) 通常の Java 同様に java.lang 以外のクラスを利用するには, import をする必要がある. 以下が標準的な書式である. JSP では java.lang 以外でも, 以下が import なしで利用できる. javax.servlet.*, javax.servlet.jsp.*, javax.servlet.http.* page contenttype="text/html; charset=utf-8" %> <%-- java.lang 以外のライブラリを使う場合, 以下のようにする必要があり自作のライブラリや 3rd party のライブラリも同様 --%> page import="java.util.arraylist" %> page import="java.util.hashset" %> <!DOCTYPE html> <html> <head> 以下, 略 24

25 宣言部での変数 <%! %> の宣言部で宣言された変数は tomcat が動作している限り, 存在し続けるらしい. よって, 原理的には異なるページ間の情報共有にもつかえそうだ. しかし, この変数は並列処理に対して安全ではない (Thread safe ではない ) ので, そのような使い方はお勧めしない. 一連の処理における情報共有では, 後述の session, 一般的な情報共有には後日話すデータベースを利用すべき. 25

26 復習 HTTP の詳細 Hyper Text Transfer Protocol 基本的に以下のやりとりの対となるクライアント ( ブラウザ ) 側からリクエストを送るサーバー側からレスポンスがくるレスポンス, リクエストともに内容はテキストファイルである. よって, 直接, 人間が目視で読むことが可能. HTTP レベルでは, リクエストに対するレスポンスが対応付いているだけである. 同じブラウザからの連続したリクエストである等の一連の処理 ( セッション ) の識別はプログラムによって, プログラマが管理しないといけない. 26

27 復習もっとも基本的な例ブラウザが見たいページをリクエストして, そのページのデータがレスポンスとして返ってくる. ブラウザリクエスト : あるページを指定レスポンス : ページの内容 27

28 復習リクエストの種類以下の 5 つがあるが, 最初の 2 つがよく使われる. GET サーバー側にある情報をクライアントが取得 (get) する POST サーバー側にクライアントが情報を送る (post) HEAD PUT DELETE 28

29 復習リクエストの構造以下の 3 つのパートからなる. リクエストラインどんなリクエストを送るかを示した部分. メッセージヘッダメッセージ送り元であるクライアントの特性等のデータ群. Host のデータは必須. 表示可能な言語, ブラウザの種類, 受信可能なデータの種類等を含む. メッセージボディ送るメッセージの内容, 必ず空行が一行いる. GET の場合は空行一行のみ. ヘッダとボディの間には空行がある. 29

30 復習リクエストの例 GET / HTTP/1.1 Host: User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:32.0) Gecko/ Firefox/32.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: ja,en-us;q=0.7,en;q=0.3 Accept-Encoding: gzip, deflate Cookie: ながいので略全日空のサイト Connection: keep-alive GET / HTTP/1.1 Host: User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:32.0) Gecko/ Firefox/32.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: ja,en-us;q=0.7,en;q=0.3 Accept-Encoding: gzip, deflate Referer: Cookie: 長いので略 Connection: keep-alive 神大のサイト Cache-Control: max-age=0 30

復習ブラウザ上の表示との対応 GET / HTTP/1.1 Host: www.kanagawa-u.ac.jp User-Agent: 略 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.

31 復習ブラウザ上の表示との対応 GET / HTTP/1.1 Host: User-Agent: 略 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: ja,en-us;q=0.7,en;q=0.3 Accept-Encoding: gzip, deflate Referer: Cookie: 長いので略 Connection: keep-alive 31

32 復習リクエストライン等の構造 GET /~kaiya/wa/ HTTP/1.1 Host: www0.info.kanagawa-u.ac.jp GET /webstation/index.html HTTP/1.1 Host: 32

33 復習レスポンスの構造以下の 3 つのパートからなるステータスラインリクエストが成功したか否かの情報. メッセージヘッダーサーバー側の情報等メッセージボディレスポンスの中身.GET の場合,HTML のページデータが入る. HTML だけでなく, プログラムも封入される場合がある. ボディとヘッダーの間には空行があり. 33

34 復習レスポンスの例 HTTP/ OK Date: Mon, 15 Sep :00:06 GMT Server: Apache/ (Scientific Linux) Last-Modified: Thu, 28 Aug :46:13 GMT Etag: "a1b81-686d-501b924552e21" Accept-Ranges: bytes Content-Length: Connection: close Content-Type: text/html 神大のサイト <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 以下, 長いので略 34

35 復習レスポンスの結果の種類 200 リクエストが成功した 304 ページは更新されてない 400 リクエストが不正 403 アクセスが禁止されている 404 そんなページは無い 35

36 復習サーバーにデータを送付する POST 等に代表されるリクエストとともにサーバーにデータを送付する方法については, 中盤以降に解説します. とりあえずは,GETに代表されるページデータを取得する仕組みを理解しておいてください. なお, ブラウザでなくても,TCP を理解するプログラムであれば, 直接, リクエストをウエブサーバーに送り, ページデータを取得することができる. たとえば,telnet コマンド等. wget コマンドも, そのように作られている. 36

37 JSP からの request/response へのアクセス request, response ともに暗黙オブジェクトとしてアクセスできる. それぞれに型は以下の通り javax.servlet.http.httpservletrequest request javax.servlet.http.httpservletresponse response 上記インタフェースで実装が要請されるメソッドは実装されている. それぞれ詳細は API マニュアルを見ること. 37

38 form 等から入力と request request から parameter のとりだしサンプル参照 getparm.html getparm.jsp form があるページにて input タグ等を通して, ユーザー入力を key-value で取得. action 属性で受け取り側の JSP ページを指定 JSP ページにて暗黙オブジェクト request に getparameter メソッドを使って,key-value の value を String として得る. value が配列の場合,getParameterValues() メソッドを利用. 38

39 response の設定クライアントに返す情報が設定できる. 例えば, ページの encoding: UFT-8 や US-ASCII 等. クッキーの設定にも使える.( 次回 ) 39

40 html 以外の生成 JSP に限らず,response の結果として, テキストファイルや PDF 等も生成できる. その際,contentType を指定する必要がある. サンプル barchart.jsp 単なるテキストファイル page contenttype="text/plain; charset=utf-8" %> <% for(int i=0; i<20; i++){ out.print(string.format("%02d ", i)); for(int j=0; j<i; j++){ out.print("*"); } out.println(); } %> 40

41 以上今回は演習は無し 41

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション http://www0.info.kanagawa-u.ac.jp/~kaiya/wa/ dotcampus ショートコード 212834 ウエブアプリケーション ( 主に情報 3 年生向け ) 2017/9/21 海谷治彦 1 目次まえおき概要ウエブアプリケーションとは? 普通のアプリやクライアントサーバーとの違い HTTP ウエブアプリケーションを支える言語等 HTML5, CSS3, JavaScript