| ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 2008年01月06日 楽しいJava講座 - 初心者から達人へのパスポート vol.086 セルゲイ・ランダウ バックナンバー： http://www.flsi.co.jp/Java_text/ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ [このメールマガジンは、画面を最大化して見てください。] ======================================================== ◆ ０１．Tomcatのアプリケーション開発 ======================================================== では、前回作成したJSP（customerList.jsp）のソース・コード の解説をしておきましょう。 -------------------------------------------------------- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="Shift_JIS" %> <HTML> <HEAD> <TITLE>顧客リスト</TITLE> </HEAD> <BODY bgcolor="#77ffff" text="#fa5a00"> <H1>顧客のリスト</H1> <TABLE border="1" width="100%"> <TBODY> <TR> <TH>顧客番号</TH> <TH>氏名</TH> <TH>郵便番号</TH> <TH>住所</TH> </TR> <%@ page import="java.util.Vector" %> <%@ page import="jp.co.flsi.lecture.webapp.entity.*" %> <jsp:useBean class="jp.co.flsi.lecture.webapp.db.CustomerDbManager" id="CUSTOMERDB" scope="request" /> <% Customer aCustomer; Vector<Customer> customerList = CUSTOMERDB.getCustomerList(); for (int i = 0; i < customerList.size(); i++) { aCustomer = customerList.elementAt(i); %> <TR> <TD><%= aCustomer.getNum() %></TD> <TD><%= aCustomer.getName() %></TD> <TD><%= aCustomer.getZipCode() %></TD> <TD><%= aCustomer.getAddress() %></TD> </TR> <% } %> </TBODY> </TABLE> </BODY> </HTML> -------------------------------------------------------- 新しく出てきたコードだけを説明します。 まず、1行目の -------------------------------------------------------- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="Shift_JIS" %> -------------------------------------------------------- ですが、 <%@ で始まる文はJSPのディレクティブ(directive)と呼ばれ、Webコンテナー （JSPコンテナー）への命令を表します。つまり、ここではTomcatへの 命令を意味します。そして、そのうち <%@ page で始まる文はJSPの個々のページに対して指定する命令を記述します。 （つまり、この文がはいっているJSPファイルで生成しようとしている Webページにだけ影響する命令であり、他のJSPファイルのページには 影響がありません。） ここでは、language="java"によって、使用する言語をJavaに指定し （といっても現時点ではJavaしかないから、この属性は指定しなくても 同じなのだが）、contentType="text/html; charset=UTF-8"によって、 出力する文書の種類を指定しています。 contentType="text/html; charset=UTF-8"は、HttpServletResponseの setContentType()メソッド（vol.074のサーブレットの中で使っている ので、忘れた人は復習してください）に相当するもので、ここではこの JSPが出力するHTMLのエンコーディングをUTF-8に指定しています （Webコンテナーに指示しています）。 そして、pageEncoding="Shift_JIS"は、このJSPのファイルを記述して いる文字コードのエンコーディングがShift_JISであることをWebコンテ ナーに知らせています。 ┌注意─────────────────────────┐ 上記のlanguage属性の値としての"java"はすべて小文字で書く 決まりになっていますので、"Java"というように頭文字を大文字 にしたりしないように注意してください。 └───────────────────────────┘ そうすると、ページ・コンパイルのときには、このファイルはShift_JIS として読み込まれた後、Javaのプログラムに変換され（もちろんJavaの 内部コードはUnicodeなのでUnicodeに変換される）、そのプログラムの 中のHTMLを出力する部分はUTF-8のエンコーディングで書かれることに なります。 要するに、この指定では、JSPのファイルの読み込みのときはShift_JIS だが、HTMLの出力はUTF-8のエンコーディングで行われるわけです。 次に -------------------------------------------------------- <%@ page import="java.util.Vector" %> <%@ page import="jp.co.flsi.lecture.webapp.entity.*" %> -------------------------------------------------------- の部分ですが、これらはJavaのimport文を表します。 つまり、Javaの通常の文で -------------------------------------------------------- import java.util.Vector; import jp.co.flsi.lecture.webapp.entity.*; -------------------------------------------------------- と記述するのに相当します。 なお、JSPでは、java.lang.*のほかにjavax.servlet.*、 javax.servlet.jsp.*およびjavax.servlet.http.*も暗黙にimportされ ていますので、JSPファイルの中では明示的にimportする必要はありま せん。 続いて、<TABLE border="1" width="100%">から</TABLE>までの部分に ついて説明します。 これは、表を描くためのコードであり、通常のHTMLであれば、たとえば -------------------------------------------------------- <TABLE border="1" width="100%"> <TBODY> <TR> <TH>顧客番号</TH> <TH>氏名</TH> <TH>郵便番号</TH> <TH>住所</TH> </TR> <TR> <TD>T0001</TD> <TD>試験太郎</TD> <TD>111-1111</TD> <TD>某県某市某町1-1-1</TD> </TR> <TR> <TD>T0002</TD> <TD>試験花子</TD> <TD>112-1112</TD> <TD>なんとか県なんとか市なんとか町1-2-3</TD> </TR> <TR> <TD>T0003</TD> <TD>試験次郎</TD> <TD>113-1113</TD> <TD>ほにゃら県ほにゃら市ほにゃら町4-5-6</TD> </TR> </TBODY> </TABLE> -------------------------------------------------------- というふうに書けば
というデータが表形式で表示されます。 では、この表の要素を一つずつ解説していきましょう。 まず、 -------------------------------------------------------- <TABLE border="1" width="100%"> ................... ................... </TABLE> -------------------------------------------------------- のように<TABLE ...>と</TABLE>で囲まれた部分が表を記述する部分で、 その中の -------------------------------------------------------- <TBODY> ................... ................... </TBODY> -------------------------------------------------------- のように<TBODY>と</TBODY>で囲まれた部分が表の本体（body）部分を 表します。 なお、<TBODY>...</TBODY>と並んで使用されるタグとして <THEAD>...</THEAD>と<TFOOT>...</TFOOT>もあり、それぞれ表の ヘッダー部分とフッター部分を記述するために使いますが、 上記のJSPファイルの中では使っていません。 もし、これらのタグも使った場合は、 -------------------------------------------------------- <TABLE border="1" width="100%"> <THEAD> ................... ................... </THEAD> <TBODY> ................... ................... </TBODY> <TFOOT> ................... ................... </TFOOT> </TABLE> -------------------------------------------------------- というような書き方になります。（なお、字下げは見やすくするため のものであり、機能上は字下げしてもしなくても同じです。） また、<TABLE>タグに指定したborder属性は、表の外枠の線の太さを 意味します（borderを直訳すと境界線の意味になる）。 また、width属性は表全体の幅の大きさを意味し、ここで指定してい る100%というのは、Webブラウザーの幅に合わせて、目いっぱい（つ まり100%）の幅に広げることを意味します。 したがって、Webブラウザーの幅を広げるとそれに合わせて表の幅も 広がり、Webブラウザーの幅をせばめるとそれに合わせて表の幅もせば まります。 続いて<TBODY>...</TBODY>の中には複数の行（もしくは単数の行）を 記述していくのですが、行（Row）は -------------------------------------------------------- <TR> ................... ................... </TR> -------------------------------------------------------- のように<TR>と</TR>で囲むことで表現します。 （TRのTはTable、RはRowを意味します。） そして行の中には複数の列（または単数の列）のデータが入るわけ ですが、このデータ（Data）は -------------------------------------------------------- <TD>.....データ.....</TD> -------------------------------------------------------- のように<TD>と</TD>で囲むことで表現します。 （TDのDはDataを意味します。） そして、一つの行の中に複数の列のデータがあるときには、 -------------------------------------------------------- <TR> <TD>.....データ１.....</TD> <TD>.....データ２.....</TD> <TD>.....データ３.....</TD> </TR> -------------------------------------------------------- のような表現になります。 また、複数の行があるときには -------------------------------------------------------- <TR> <TD>.....データ１.....</TD> <TD>.....データ２.....</TD> <TD>.....データ３.....</TD> </TR> <TR> <TD>.....データ１'.....</TD> <TD>.....データ２'.....</TD> <TD>.....データ３'.....</TD> </TR> <TR> <TD>.....データ１".....</TD> <TD>.....データ２".....</TD> <TD>.....データ３".....</TD> </TR> -------------------------------------------------------- というような表現になります。 また、通常は、一行目に見出しを入れることが多いですが、 見出し（Heading）は<TD>...</TD>の代わりに<TH>...</TH>と 書くことによって表現されます。 （THのHはHeadingを意味します。） 見出しは通常、太字で表現されますが、実際の表現の仕方は Webブラウザーに依存します。 というわけで、 -------------------------------------------------------- <TABLE border="1" width="100%"> <TBODY> <TR> <TH>顧客番号</TH> <TH>氏名</TH> <TH>郵便番号</TH> <TH>住所</TH> </TR> <TR> <TD>T0001</TD> <TD>試験太郎</TD> <TD>111-1111</TD> <TD>某県某市某町1-1-1</TD> </TR> <TR> <TD>T0002</TD> <TD>試験花子</TD> <TD>112-1112</TD> <TD>なんとか県なんとか市なんとか町1-2-3</TD> </TR> <TR> <TD>T0003</TD> <TD>試験次郎</TD> <TD>113-1113</TD> <TD>ほにゃら県ほにゃら市ほにゃら町4-5-6</TD> </TR> </TBODY> </TABLE> -------------------------------------------------------- というふうに書くと、
というデータが表形式で表示され、１行目の顧客番号から住所まで が見出しになるのです。 ところで、customerList.jspの中では、実際の表のデータとしては Javaのコードで取り出した値を使っていますね。たとえば、 -------------------------------------------------------- <TD><%= aCustomer.getNum() %></TD> -------------------------------------------------------- というコードによって顧客番号の値を取り出して表のデータにして います。 <%=と%>ではさんだコードがどういう意味をもつのかは、vol.076 で説明しましたね。 また、複数行のデータを得るために、Javaのforループを使って、 -------------------------------------------------------- <TR> <TD><%= aCustomer.getNum() %></TD> <TD><%= aCustomer.getName() %></TD> <TD><%= aCustomer.getZipCode() %></TD> <TD><%= aCustomer.getAddress() %></TD> </TR> -------------------------------------------------------- の部分を複数回出力させるようにしていますね。 このとき、Javaの通常のコードを<%と%>で囲んでいることに注意 してください。 <%と%>で囲めば、Javaの通常のコードを書けることは、vol.076で 説明した通りです。 それから、jsp:useBeanというタグについては、vol.078で説明しま したね。忘れた人は、復習してください。 以上で、customerList.jspのソース・コードはすべて解読？できる ようになったはずです。 なお、JSPの詳細を独力で学びたい人は、下記URLから仕様書 （Specification）をダウンロードして読んでみください。 http://jcp.org/aboutJava/communityprocess/final/jsr245/index.html では次に、商品のリストをWebブラウザーに表示するアプリケーション を作ってみましょう。 前回作成した顧客のリストをWebブラウザーに表示するアプリケーション と仕組みはほぼ同様ですが、主な違いは、商品のリストには画像も表示 するという点です。 また、今度は、カテゴリーやキーワードで検索（商品の絞込み）ができる ようにします。 （ちなみに、前回のような顧客リストのアプリケーションはあくまで学習用 に作成したものであり、実際のWebアプリケーションでは使用されません。 顧客情報を処理するための実用的なアプリケーションについては、のちに セキュリティーのお話をするときに説明いたします。） なお、ここで使用する画像ファイルは、ホームページからダウンロード できるようにしておきますので、ご利用ください。 ただし、現実の商品の写真を使おうとすると、法的な問題にひっかかって しまうので、他のテスト用の画像ファイルで代用しています。 あるいは、読者が独自に作成した画像ファイルを使用してもかまいません。 さて、画像データはデータベースの中に保管することもできる（BLOBという 型を使用する）のですが、ちょっと扱いが面倒なので、通常は、別の場所 に画像ファイルとして保管しておいて、データベースにはその保管場所 （ファイル名など）を書き込んでおく、というやり方をします。 では、商品のリストをWebブラウザーに表示するアプリケーションを作っ ていきましょう。 まず最初に、Customerクラスのときと同様にして、下記のようなItemクラス を作成しましょう。 -------------------------------------------------------- package jp.co.flsi.lecture.webapp.entity; public class Item { private String num; private String name; private int price; private String image; private String category; private int quantity; public void setNum(String num) { this.num = num; } public String getNum() { return num; } public void setName(String name) { this.name = name; } public String getName() { return name; } public void setPrice(int price) { this.price = price; } public int getPrice() { return price; } public void setImage(String image) { this.image = image; } public String getImage() { return image; } public void setCategory(String category) { this.category = category; } public String getCategory() { return category; } public void setQuantity(int quantity) { this.quantity = quantity; } public int getQuantity() { return quantity; } } -------------------------------------------------------- 今日はここまでにします。 （次回に続く） 何か、わからないところがありましたら、下記のWebページまで質問を お寄せください。 ======================================================== ◆ ０２．演習問題 ================================================ 上のcustomerList.jspのソース・コードのうち、 -------------------------------------------------------- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="Shift_JIS" %> -------------------------------------------------------- を、 -------------------------------------------------------- <%@ page language="java" contentType="text/html; charset=Shift_JIS" pageEncoding="Shift_JIS" %> -------------------------------------------------------- に書き換えると、どうなるか確認してください。 （Webブラウザーでエンコーディングを確認してください。たとえば、 Internet Explorerなら、メニュー・バーの「表示」→「エンコード」 を選択することによって、どのエンコーディングが選ばれているかを 確認します。） ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ★ホームページ： http://www.flsi.co.jp/Java_text/ ★このメールマガジンは 「まぐまぐ（http://www.mag2.com）」 を利用して発行しています。 ★バックナンバーは http://www.flsi.co.jp/Java_text/ にあります。 ★このメールマガジンの登録／解除は下記Webページでできます。 http://www.mag2.com/m/0000193915.html ★このメールマガジンへの質問は下記Webページにて受け付けて います。わからない所がありましたら、どしどしと質問をお寄 せください。 http://www.flsi.co.jp/Java_text/ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ Copyright (C) 2008 Future Lifestyle Inc. 不許無断複製 |