<4D F736F F D A B C982E682E98F6F90C88A6D E646F63>

(1)

2011 年度卒業論文

WEB アプリケーションによる出席確認システムの作成

文学部人間関係学科 4 年学籍番号 08500027 山口久子

(2)

1. はじめに ··· 1

2. WEB アプリケーションとは ··· 1

2.1 WEB アプリケーションの仕組みと構造 ··· 1

2.2 WEB アプリケーションの利点 ··· 2

3. サーバーサイドプログラムと Java アプリケーション ··· 2

3.1 Applet ··· 3

3.2 Servlet ··· 3

3.3 JSP（Java Server Pages） ··· 4

4. 出席確認システムの作成 ··· 5

4.1 プログラムの概要 ··· 5

4.2 使用したツール ··· 5

4.2.1 Eclipse ··· 5

4.2.2 Tomcat（Apache） ··· 5

4.2.3 Ant ··· 5

4.2.4 PostgreSQL ··· 6

4.3 プログラムの構成と流れ ··· 6

4.4 JEF フレームワークでの処理 ··· 8

5. まとめ ··· 11

参考文献 URL

資料

(3)

1. はじめに現在、iPad やスマートフォンといった比較的小さな持ち運びできる端末が普及してきている。その背後には、スペックの低い端末でも「今までのパソコンのように利用することができる」といった点が絡んでいる。例えば WEB メール等のインターネット上で動くプログラムは、ダウンロードする必要がない。インターネットさえできれば、日本中どこからでもアクセスすることが可能である。このように、URL を入力して、そのページを表示するだけで利用できることが、WEB アプリケーションの特徴の一つである。本論文では、まず、WEB アプリケーションについて概要や構造を説明し、その利点について述べる。そして、実際にプログラムを作成し、その活動を通して WEB アプリケーションがどういったものか具体的に説明する。そして最後に、WEB アプリケーションの今後の展開について述べ、まとめとする。 2. WEB アプリケーションとは WEB アプリケーションとは、Web の仕組み・機能を使ったインターネット、もしくはイントラネット（企業内ネットワーク）上で提供されるアプリケーションソフトウェアである。例を挙げるなら、Gmail や Yahoo！メールといった WEB メール、ショッピングサイトといった普段私たちがインターネットで利用しているサービスの多くが WEB アプリケーションであると言える。 2.1 WEB アプリケーションの仕組みと構造 WEB アプリケーションと一言で言っても、WEB メール、ショッピングサイト、電子掲示板、多くのシステムが存在する。しかし、ほとんどのサービスが「クライアント」、「サーバ」、「データベース」によって成り立っている。図１基本的な WEB アプリケーションリクエストレスポンス照合クライアント

(4)

まず、クライアントはサーバにリクエスト（パラメータ）を送る。受け取ったサーバは、それに対応したレスポンスを返す。もし、データベースとの照合が必要であれば照合を行い、サーバが応答する。（図１）サーバには HTTP 通信を行う WEB サーバと、クライアントの要求を受けてプログラムを実行するアプリケーションサーバがある。一般的なアプリケーションサーバは、図２のように役割ごとにファイルが分けられている。出力に関する「プレゼンテーション」、実際の処理を行う「ビジネスロジック」、データベース内のデータを照合する「データアクセス」とそれぞれ役割を有している。図２一般的なアプリケーションサーバ内部の構成 2.2 WEB アプリケーションの利点先に述べたように、WEB アプリケーションはブラウザがあれば、どこでも利用することができる。そのため、自分のパソコンにプログラムをダウンロードする必要がない。アップデートの必要もなく、インターネット環境さえあれば気軽に利用できるその敷居の低さが最大の利点である。 3. サーバサイドプログラムと Java アプリケーションローカルにダウンロードして動作するアプリケーションをデスクトップアプリケーションやスタンドアロンアプリケーションと呼ぶのに対して、サーバ側で動作するプログラムをサーバサイドプログラムと呼ばれている。ここでは、WEB ブラウザやサーバ上で働く代表的な Java プログラムについて述べる。

Model

処理・制御

View

ユーザーインターフェース

Controller

データベースへの接続プレゼンテーションビジネス_ロジック _アクセスデータ

(5)

3.1 Applet（アプレット）

アプレットは、WEB ブラウザにダウンロードされて動作する Java プログラムである。Java プラグインを必要とすることや、クライアント側でしか動かないなどといった点から、現在ではあまり利用者は多くない。しかし、ローカルへダウンロードをする必要がなく、URL にアクセスするとすぐ利用できることなど現在のサーブレット技術の前身であった。 3.2 Servlet（サーブレット）サーブレットとは、サーバ上で動作する比較的小さな Java プログラムである。サーブレットの特徴には、以下の 3 点が挙げられる。まず、動的な処理を返すことができる点である。通常 HTML 等の WEB ページは、クライアントのリクエストに対して静的な画像ファイルやテキストを返している。それに対し、サーブレットはクライエントのリクエストに対して動的に結果を返す。例えば、Google 等の検索エンジンであれば、検索したい言葉を入力して「検索」のボタンをクリックするだけで、その言葉が含まれた関連の WEB ページを表示することができる。これは、「検索ワードを受け取る」「検索を行う」というプログラム処理に加え、「検索結果を整形して返す」という動的な出力処理が行われている。図３検索エンジンの仕組み次に、サーブレットが基本的に Web ブラウザなどの Web クライアントに対するサービスを提供しているという点が挙げられる。サーブレットは HTTP プロトコルという Web の通信方式に従って利用されることがほとんどであり、多くのアプリケーションサーバで提供されているものが HTTP サーブレットである。検索ワード検索実行検索エンジン _{リクエスト} レスポンスサーブレットサーバ検索ワードを受け取り、検索処理を実行結果のリストを整形して返す検索エンジンの呼び出しキーワードを渡す

(6)

３つ目に、サーブレットにはアプリケーションサーバが必要であるという点である。Java のサーバサイドアプリケーションを実行するサーバはアプリケーションサーバと呼ばれ、クライアントのリクエストを受けとり、レスポンス（応答）を返している。

3.3 JSP（Java Server Pages）

JSP は Java プログラムを静的な HTML に埋め込んで実行する、HTML の出力に適した技術だ。WEB サーバ側で動作する点については、サーブレットと同様である。しかしサーブレットは HTML を出力する場合も Java で記述する必要があるが、JSP の場合は<％％>タグを使用することにより、画面出力をより簡単に行うことができる。表１サーブレットと JSP の HTML 記述の比較サーブレット J S P import java.io.*; import javax.servlet.*; import javax.servlet.http.*;

public class HelloWorld 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>Hello World!</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>Hello World!</h1>"); out.println("</body>"); out.println("</html>"); }

}

<%@ page contentType="text/html;charset=Shift_JIS" %> <html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> <% out.println(new java.util.Date()); %> </body> </html> （※赤字の部分が、JSP）

(7)

表１は、どちらも「Hello World!」と表示させるプログラムである。このように HTML 出力をメインとした開発の場合は JSP に利点があり、逆に複雑なプログラムを作成する際には JSP では煩雑になってしまう。そのため、現在は双方の利点を汲み、サーブレットと JSP を組み合わせて利用する方法が主流となっている。 4. 出席確認システムの作成 4.1 システムの概要まず学生が出席ボタンをクリックし、クリックした時点の日時を取得して出席の処理を行う。「学生側が入力した出席日時」と「教師側が予め決めていた予定日時」が一致するかを確認し、教師側のページで科目別に出欠確認（出席であれば○、欠席であれば×）を表示する。 4.2 使用したツール 4.2.1 Eclipse Eclipse とは、コンパイラ、テキストエディタ、デバッガを単体で行うことのできるソフトウェアの統合開発環境の一つである。Java 開発者に多く利用されているが、プラグインを入れることによって C や PHP といった他のプログラミング言語を導入することも可能である。 4.2.2 Tomcat（Apache） Tomcat は、サーブレットと JSP の開発、実行に関わる比較的軽量なアプリケーションサーバである。WEB サーバとしての設定オプションが少ない、静的なコンテンツの処理が低速であるという不利点はあるが、広く利用されている有名なアプリケーションサーバである。 Tomcat の起動、停止は[コントロールパネル]の[管理ツール]の中にある[サービス]から行う。ソースを書き換えた際には、Tomcat を忘れず再起動する必要がある。 4.2.3 Ant Ant は Java プログラムのビルドツールである。ファイル間の依存性をあらかじめ記述しておくことで、複数のファイルをコンパイルや結合する時の複雑な構築処理を行うことが

(8)

できる。今回は、Eclipse で作成したプログラムをアプリケーションサーバへコピーする際に利用する。 4.2.4 PostgreSQL PostgreSQL は WEB システムのバックエンドデータベースとして多く使用されている、リレーショナルデータベース管理システム（RDBMS）である。データベース管理システムは大量のデータを保持し、常にバックアップとログを保存しているため異常事態発生時にも大事なデータを残しておくことが可能である。さらに、リレーショナルデータベースはデータを Excel のような表で管理することができるため、馴染みがあり扱いやすい。しかし、フィールドを分割したり統合したりすることはできないため、データの入出力の際にはプログラムに工夫が必要となる場合もある。 4.3 プログラムの構成と流れ今回のプログラムでは、フレームワーク JEF（JavaEasyFramework）を使用している。フレームワークとは、必要な基本的機能をまとめているもので、プログラミングする際に枠組みとして利用する。まず、学生側と教師側双方で行う処理はログインである。ID とパスワードをデータベース内のデータと照合し、一致しているなら科目リストを表示する。もし不一致であれば、エラーページが表示され、もう一度ログイン画面へ戻って再度入力し直す。次にログイン後の学生側の流れ（図４）について述べる。学生側の受講科目リストには、出席登録ボタンと取消ボタンがある。出席登録ボタンを押した場合、選択した科目のコードを受け取り、履修者の出席日時データベースの最後に取得した現在日時を書きこむ。取消ボタンは誤って登録してしまった場合、最後の出席登録データを削除することができる。教師側の画面では、このように登録された出席を科目ごとに閲覧することが可能である。教師側の流れ（図５）でも、まずは最初に科目リストを表示する。科目名をクリックすると科目コードが送信され、その科目の講義予定日、受講者の名前と出欠が表示される。出欠判断処理はデータベース内の講義予定日（教師側）と出席登録日時（学生側）を照らし合わせて、一致してれば○、不一致であれば×を表示する。

(9)

登録クリック・科目コードの送信取消クリック１４回目の出席を追加 14 回目の出席を削除【ログイン画面】【受講科目リスト】【出席登録確認画面】【出席取り消し確認画面】図４学生側の流れ・ID/ パスワードをデータベースと照合・現在の日時を登録・最終出席日を削除

(10)

図５教師側の流れ 4.4 JEF フレームワークでの処理 JEF フレームワークでの処理には、３つのポイントがある。まず、１つ目にパラメータの受け取りである。例えば科目コードなどを受け取って、プログラム内において使用することが挙げられる。まずプログラム内に receiveParameters クラスで返す変数を記述し、getParameter で変数にパラメータの初期値をセットする。【ログイン画面】【担当科目リスト】【受講者出欠一覧表】・ID/パスワードをデータベースと照合・科目コードの送信 →選択した科目の受講者のデータを取得講義計画と出席日時を照合出席→○ 欠席→×

(11)

プログラム側の記述次に javaScript を<head>タグの間に挿し込み、<form>タグを設定する。<form>タグでは action を埋め込み、処理を行う。HTML 側に記入する際は”_kcode”のように変数名の前にアンダーバーがつくことに注意しなければならない。 HTML 側の記述（head 内） HTML 側の記述（body 内）２つ目に HTML の出力制御が挙げられる。<jef>タグはプログラム内でセットしたパラメータを表示する簡単な方法である。プログラム内の write クラスによって処理の順番を決めることができる。

public void receiveParameters() {

cmd = getParameter("cmd"); kcode = getParameter("kcode"); } <script language="JavaScript" type="text/JavaScript"> <!-- function setSubmit(sw,code) {

document.form1._kcode.value = code; document.form1. _cmd.value = sw; document.form1.submit(); }

//--> </script>

</form>

public void write(String key,String exHtml){ if(key.equals("rishu")){ rishu(exHtml); }else if(key.equals("list")){ list(exHtml); } }

<jef name = “rishu”> 最初に表示される

<jef name =”list”> 次に表示される

</jef> </jef>

(12)

プログラム処理を行う場合、この<jef>タグで囲まれた場所を丸々取り込んで処理を行なって返す。

処理した変数などを HTML 内に表示するためには埋め込む必要があり、そのために利用されるのが putParameter である。putParameter は putParameter(“埋め込むための文字列”, 埋め込み値)で記述される。そして、処理の最後に output(exHtml);と記述することで、HTML を出力することができる。３つ目はデータベースアクセスである。まず、データベース定義を作成し、項目ごとに名前をつける。さらに、データベースを読み取るためには、少なくとも１つ以上のキー項目を設定しなくてはならない。キー項目をセットすることによって、データベース内の情報を取り出すことが可能になる。（図６） Databese 定義 id ・・・・・・ pass ・・・・・・ name ・・・・・・

void rishu(String exHtml){

putParameter("kamoku",”科目名を表示”); output(exHtml); } <html> <body> %_kamoku% </body> </html> 科目名を表示 DatabasePack （読み書き） Database read id pass name yama yama 山口 ka a キー項目 Database 取り出し図６データベースアクセス（図７）

(13)

図７ PostgreSQL のスクリーンショット 5. まとめ WEB アプリケーションは多くの人が利用しているが、その構造や仕組みを知る人は少ない。それは開発環境の発展と使いやすいインターフェース、サービスの賜である。今回の出席確認システム開発は JSP などを利用して HTML と組み合わせることで、より簡単に作成することができた。さらに出力が目に見えやすい形となり、とても開発しやすい環境であった。特にサーブレット技術に関しては、Java と HTML という２つの技術を組み合わせており、一見すると２倍の勉強量が必要となり不利なのではないかと考えられる。しかし、出力とプログラムを分けることにより、逆に編集しやすくなっている。さらに加えて言うと、Java は開発環境やツール、フレームワークが豊富で開発初心者に優しい。開発者とユーザー双方の利点が合致した環境であり、昨今の携帯端末の普及で WEB アプリケーションの需要がさらに高まっていくことを踏まえると、今後さらに発展していくと考えられる。参考文献 URL わかりやすい Java 入門編，川場隆，秀和システム，2009 年わかりやすい Java オブジェクト指向編，川場隆，秀和システム，2010 年基礎からのサーブレット/JSP 改訂版，宮本信二，ソフトバンククリエイティブ株式会社，2009 年１０日でおぼえる JSP/サーブレット入門教室第２版，山田祥寛，株式会社翔泳社，2004 年新版 Web アプリケーション構築１，谷川健，株式会社 SCC，2007 年 Javadrive，http://www.javadrive.jp/，2011 年 11 月 30 日確認 Let's Postgres，http://lets.postgresql.jp/，2011 年 12 月 2 日確認 TECHSCORE，http://www.techscore.com/，2011 年 12 月 2 日確認