<4D F736F F D A B C982E682E98F6F90C88A6D E646F63>

Size: px

Start display at page:

Download "<4D F736F F D A B C982E682E98F6F90C88A6D E646F63>"

あきみはにうだ
5 years ago
Views:

1 2011 年度卒業論文 WEB アプリケーションによる出席確認システムの作成文学部人間関係学科 4 年学籍番号山口久子

2 目次 1. はじめに 1 2. WEB アプリケーションとは WEB アプリケーションの仕組みと構造 WEB アプリケーションの利点 2 3. サーバーサイドプログラムと Java アプリケーション Applet Servlet JSP(Java Server Pages) 4 4. 出席確認システムの作成プログラムの概要使用したツール Eclipse Tomcat(Apache) Ant PostgreSQL プログラムの構成と流れ JEF フレームワークでの処理 8 5. まとめ 11 参考文献 URL 資料 -1 -

1. はじめに現在 ipad やスマートフォンといった比較的小さな持ち運びできる端末が普及してきているその背後にはスペックの低い端末でも今までのパソコンのように利用することができるといった点が絡んでいる例えば WEB メール等のインターネット上で動くプログラムはダウンロードする必要がないインターネットさえできれば日本中どこからでもアクセスすることが可能である

アプリケーションの今後の展開について述べまとめとする 2. WEB アプリケーションとは WEB アプリケーションとは Web の仕組み機能を使ったインターネットもしくはイントラネット ( 企業内ネットワーク ) 上で提供されるアプリケーションソフトウェアである例を挙げるなら Gmail や Yahoo!

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

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

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

6 3 つ目にサーブレットにはアプリケーションサーバが必要であるという点である Java のサーバサイドアプリケーションを実行するサーバはアプリケーションサーバと呼ばれクライアントのリクエストを受けとりレスポンス ( 応答 ) を返している 3.3 JSP(Java Server Pages) JSP は Java プログラムを静的な HTML に埋め込んで実行する HTML の出力に適した技術だ WEB サーバ側で動作する点についてはサーブレットと同様であるしかしサーブレットは HTML を出力する場合も Java で記述する必要があるが JSP の場合は <%%> タグを使用することにより画面出力をより簡単に行うことができる表 1 サーブレットと 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) -5 -

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

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

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

ログイン画面 ID/ パスワードをデータベースと照合担当科目リスト科目コードの送信

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

11 プログラム側の記述 public void receiveparameters() { cmd = getparameter("cmd"); kcode = getparameter("kcode"); 次に javascript を <head> タグの間に挿し込み <form> タグを設定する <form> タグでは action を埋め込み処理を行う HTML 側に記入する際は _kcode のように変数名の前にアンダーバーがつくことに注意しなければならない HTML 側の記述 (head 内 ) <script language="javascript" type="text/javascript">  </script> HTML 側の記述 (body 内 ) <form name="form1" method="post" action="%_action%"> <a href="#" onclick="setsubmit('add','%_kcode%')"> クリック </a> </form> 2 つ目に HTML の出力制御が挙げられる <jef> タグはプログラム内でセットしたパラメータを表示する簡単な方法であるプログラム内の write クラスによって処理の順番を決めることができる 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 を出力することができる void rishu(string exhtml){ putparameter("kamoku", 科目名を表示 ); output(exhtml); <html> <body> %_kamoku% </body> </html> 科目名を表示 3つ目はデータベースアクセスであるまずデータベース定義を作成し項目ごとに名前をつけるさらにデータベースを読み取るためには少なくとも1つ以上のキー項目を設定しなくてはならないキー項目をセットすることによってデータベース内の情報を取り出すことが可能になる ( 図 6) Databese 定義 id pass name DatabasePack ( 読み書き ) Database キー項目 id pass name read yama yama 山口 ka a 図 6 データベースアクセス ( 図 7) Database 取り出し -11 -

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

メディプロ1 Javaサーブレット補足資料.ppt

メディプロ1 Javaサーブレット補足資料.ppt メディアプロジェクト演習 1 Java サーブレット補足資料 CGI の基本 CGI と Java サーブレットの違い Java サーブレットの基本インタラクティブな Web サイトとは Interactive q 対話または双方向 q クライアントとシステムが画面を通して対話を行う形式で操作を行っていく仕組み利用用途 Web サイト, シミュレーションシステム, ゲームなど WWW = インタラクティブなメディア