Java-10 ?>

Java-10

 TODO管理アプリケーションの構築

本章では、TODO管理アプリケーションを構築しながらJavaによるWebアプリケーション構築の技術を学習していきます。本章で構築するアプリケーションでは、MVCモデルにそったアプリケーション開発で必須となるDAO、DTO、DB操作、サーブレット、JSPを利用しています。

ウェブアプリプロジェクトの作成

Java9で作成した手順同様に動的Webプロジェクトを新規作成します。プロジェクト名はibc_todoとしてください。

スクリーンショット 2017-03-31 午後6.18.50

以降はこのプロジェクトにファイルを追加していく流れで作業を進めていきます。

どのようなアプリケーションにするか

アプリケーション構築の際には、アプリケーションの基本となる機能の洗い出しと動作を定義することから始めます。まずはアプリケーションの基本部分をデザインしてから、次に一通り動くところまで作成します。
基本機能となるTODO管理アプリケーションを機能一覧から作ります。機能一覧を作成した後は、その機能一覧に乗せた機能ごとにJSPとサーブレット、Javaのロジックを作り、1つの機能を組み立てる一連の作業手順を学びます。

今回作成するアプリケーションは、タスクと期限を入力して管理するTODO(タスク)管理アプリケーションです。TODO管理アプリケーションを作るにあたり、まず必要な開発環境を準備します。そして、アプリケーションで実装する画面と機能を洗い出すため、必要となる作業を考えます。
タスクを管理する画面ですので、現在行っているタスクの一覧画面があって、他にもタスクの登録画面、タスクが終わったら完了とする画面も必要です。また、途中で期限が変わる場合や、タスクの内容が少し変わり、タスクの内容を一部だけ更新する場面も考えられます。

このようにひとつのアプリケーションを構築していくに当たって、必要な機能、どんなことを実現したいのか、まずはこのアプリケーションの目的を明確にして、アプリケーションの仕様を纏めていきます。一般的には要求仕様書という形で資料として纏めていきます。仕様書の作成などにも一通り目を通しておきましょう。

システム開発の仕様書テンプレートや参考サイトのまとめ
http://chusho-it.net/post_productdoc.html

TODO管理アプリの機能一覧表

機能名 機能概要
一覧表示 TODOリストの一覧を表示する
新規追加 タスクを1件追加する
更新 タスクの情報を更新する
削除 選択したタスクを削除する

この機能一覧は、アプリケーションの実装を行っていく上で大切な情報となります。これらの機能が、利用ユーザーがアプリケーションを操作する単位となりますので、アプリケーションの実装に入る前には必ず纏めておきましょう。

画面の遷移からアプリケーションの組み立てを考える

Webアプリケーションは、利用ユーザーがブラウザからリクエストしたURLを元にサーバーのアプリケーションが動作して、その結果がブラウザへ返されます。そのため、Webアプリケーションでは必要な画面数と、求められるアクションの数からアプリケーションの全体像を把握した方が良いでしょう。

TODOアプリケーションでどのような画面が必要かを洗い出し、その画面を表示するのに必要なリクエストの種類を、機能一覧と照らし合わせて決めていきます。この段階でよく描かれる図として、画面遷移図というものがあります。
画面遷移図は、アプリケーションの動作を、表示される画面とそこから呼ばれる操作(アクション)で画面の動きを矢印でつないで図示したものです。今回作成するアプリケーションに必要な機能は先程一覧にしましたので、今度は必要な画面を洗い出して、画面と画面をアクション、例えば一覧画面から新規登録を行いたい場合は新規登録アクションでつなぎます。

スクリーンショット 2017-03-27 午前11.43.35

この画面遷移図を作る段階で、機能一覧から画面の作りを考慮して再構成をしていきます。新規登録、変更処理、削除は詳細画面を1つ挟んだところから行います。一覧画面ではタスクの一覧表示のみを行います。また、更新と登録処理は全く別の処理ですが、画面から渡される情報はほぼ一緒と考え、登録処理として1つに纏めています。変更後の機能一覧は以下のようになります。

画面遷移図を作成した後のTODO管理アプリの機能一覧表

機能名 機能概要
一覧表示 TODOリストの一覧を表示する
詳細画面 TODOリストから選択したタスク1件の詳細を表示する
新規追加 タスクを登録する
更新 タスクの情報を更新する
削除 選択したタスクを削除する

必要な機能を一覧で出した後に、必要な画面を洗い出して再び機能一覧を考え直す作業を行います。この作業は機能の作りやすさ、コードの増減や可読性を考慮して何度も再考されます。

画面の基本レイアウトを作る

最初に画面のデザインを考え、基本レイアウトを定めます。今回はBootstrapが提供したデザインとレイアウトをそのまま使います。まずは簡単に短いテキストと画面上部にメニューバーを出すHTMLを作ります。ここではHTML、CSS、CSSフレームワーク(Bootstrap等)の解説は行いませんが、ウェブ上には無料でこれらの技術を学習できるサービスが多々ありますので、それらを利用して知識を身につけてください。Webアプリケーションを構築する上では、HTMLの知識は必須になります。

初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選
https://goo.gl/f50FmP
Bootstrapを使った基本レイアウト

このHTMLファイルを確認すると以下のレイアウトが確認できます。

スクリーンショット 2017-03-27 午後0.09.32

各画面共通のコンテンツをインクルードする

まずは、基本レイアウトをJSPに置き換えます。
base.jsp

先程のHTMLにpageディレクティブを追加しています。このままでも表示に問題ないのですが、複数の画面を作っていく際に、先程のBootstrap用の宣言やメニューバーの記述は各画面で共通するものです。すべての画面に先程のタグを書いてしまうと、例えばBootstrapのバージョンを変更したい場合や、メニューバーの内容を修正する場合に、複数のファイルに対して同じ修正をしなければならず、非常に手間のかかる作業となってしまいます。

JSPには他のJSPやHTMLを取り込んで表示するインクルード機能があるので、これを使用して変更に強い構成にしていきます。具体的には、<head>内に記載したBootstrapのCSSやJavascript定義を宣言するタグと、<nav>部分の2箇所を切り取って、2つのJPSを作成します。

<head>の共通部分JSP(header.jsp

メニューバーのJSP(nav.jsp

この2つのファイルを基本レイアウト部分からインクルードします。base.jspを以下のように修正します。

共通部分をインクルードした基本レイアウト(base.jsp

共通部分は別JSPファイルに切り出し、必要箇所で適宜呼び出すようにするとファイルがスッキリして管理もしやすくなります。

※前章でも少し解説しましたが、下記サイトの解説も参考にしてください。

個別の画面レイアウト

TODO管理アプリケーションの画面構成をみていきましょう。先程紹介した画面遷移図から、一覧画面と詳細画面について定義していきます。

(1)一覧画面

一覧画面は次のような画面になります。1行に1つのタスクが表示され、それが番号順に表示されます。タスク1行の内容は、番号、タイトル、期限、更新日付、ユーザー名、現在の状況の順です。これらの登録されたタスクの内容はデータベースに登録されている項目から抽出して表示します。

スクリーンショット 2017-03-31 午後6.27.11

タスクの更新・削除は、一覧表の右側の[詳細画面へ]リンクから詳細画面に移動して行います。タスクの番号をアプリケーションに渡すことで、どのタスクに対して詳細表示するかを判断します。

また、メニューバーではタスクの新規追加、タスク一覧の再表示を行うリンクを用意し、どの画面からでも呼び出せるようにします。

(2)詳細画面

詳細画面は、一覧画面で選択したタスクの詳細情報を表示します。この画面ではタスクの編集と新規追加で併用することにしました。ただし、更新用の画面では一覧画面から選択したタスクの内容を表示して編集させるのに対し、新規登録はデータベースにまだ登録していないタスクをこれから入力するものなので、データベースから検索した結果は用いません。

これを考慮して、新規登録ではタスク番号は仮に0番として、サーブレットとJSPでもタスク番号が0番かで新規登録か更新処理であるかを判断します。次に新規登録の画面と更新用の画面を表示します。入力部分は差がありませんが、番号はアプリケーション側で自動的に振った値を利用しますので画面からは入力しません。新規登録も同様な考えになるので、新規登録画面では番号の欄に、(新規)を表示します。

更新画面

スクリーンショット 2017-03-31 午後6.36.22

新規登録画面

スクリーンショット 2017-03-31 午後6.36.44

(3)削除機能について

削除機能は、詳細画面にて[削除]ボタンを押すことで表示されているタスクを削除します。削除後は一覧画面に遷移します。

TODO管理アプリケーションで扱うテーブルと定義

今回のアプリケーションでは以下の2つのテーブルを定義します。

todo_listテーブルの項目定義

項目名 DataType 概要
id INT 行番号。他の行と番号は重複せず、自動的に番号を割り振る。AutoIncrement
title VARCHAR(256) TODOタスクのタイトル名
task VARCHAR(512) TODOタスクの内容
limitdate DATETIME TODOタスクの期限
lastupdate DATETIME 最後に更新した日時
userid VARCHAR(64) TODOタスクのユーザーID
status INT タスクの状況。タスクのラベルはテーブルstatuslistに作成。

status_listテーブルの項目定義

項目名 DataType 概要
status INT ステータス番号。todo_listと項目名をあわせておく外部キー項目。
label VARCHAR(128) ステータスの表示ラベル

データベースの構築は以下のリンクから手順を確認して、完了しておいてください。

データベース構築

上記のテーブル構成を元にtestスキーマ上に二つのテーブルを作成しておいてください。作成方法は下記サイトを確認ください。

MySQL Workbenchを使ってテーブルを作成する
https://goo.gl/Yv9QBq
MySQL Workbench の使い方 – DB設計・管理ツール
http://pb-times.jp/p_51d78b8a02ce1

アプリケーションの設定

データベースの接続に関する設定を行っていきます。この設定は各アプリケーションのプロジェクトごとに行います。

[1]アプリケーション設定を行う
作成するアプリケーションの設定ファイルを追加します。/WebContent/META-INFにてEclipseからXMLファイルを作成し、名前をcontext.xmlとします。このファイルと配置場所はあらかじめTomcatにより定められており、Webアプリケーションが利用するTomcatの追加設定をTomcatが自動的に読み取ります。

スクリーンショット 2017-04-01 午前3.08.50

context.xml

この設定ファイルにて、アプリケーションからコンテナに対してデータベース接続を宣言し、さらに接続設定を行います。

[2]JDBCドライバをコンテナに配置する
JDBCドライバを配置します。JDBCドライバとはJavaからSQLを実行するには呼ばれるデータベース接続ライブラリのことで、それぞれのデータベースに対応したJDBCドライバを導入する必要があります。今回はMariaDBを利用しますので、MariaDB用のJDBCドライバであるmariadb-jdbc-clientを用います。

ライブラリ追加ファイルのダウンロード
http://i-b-c.jp/java/wp-content/uploads/2016/10/lib.zip

ダウンロードしたlibファイルを展開して、同梱されているファイル群を/WebContent/WEB-INF/libの中に配置します。

スクリーンショット 2017-04-01 午前3.32.14

以上でDBアクセス設定は完了です。

MVCの要素について

MVCパターンとは、アプリケーションの設計モデルの1つで、処理を行うモデル(Model)、表示を行うビュー(View)、クライアントからの要求を受けてモデルとビューを制御するコントローラー(Controller)で構成されます。
これをWebアプリケーションに当てはめると、モデルはJavaBeansや通常のJavaクラス、ビューはJSP、コントローラーはクライアントからのリクエストを受けるサーブレットに当てはまります。コントローラーであるサーブレットはリクエストされたURLやパラメータを受け取り、どの処理を行うかを判断してモデルであるJavaBeansの処理を実行します。モデルの実行結果を受けて表示する画面をサーブレットが判断して、JSPへフォワードします。JSPはサーブレットから渡された情報を表示して処理が完了します。

MVCパターンを導入するメリットは、ビジネスロジックと画面レイアウトの実装を分離出来ることです。メインの処理はモデルに実装して、モデルでは画面出力を行わず、画面に表示する値を返すまでにとどめます。処理の結果はビューであるJSPへ渡され画面を表示します。ユーザーからの入力はコントローラーが受け取り、何らかの処理が要求された場合はモデルに依頼し、出力が必要な場合はビューに処理が移ります。

このように役割ごとに実装内容を分離することでインターフェースが明確になり、インターフェースが明確になればお互いの層に対する影響度も明らかになりますので、テストやデバッグも容易になります。

今回構築するアプリケーションでは以下のようなファイルを作成していきます。

スクリーンショット 2017-04-01 午前5.57.46

以下の参考サイトを確認してください。

MVCモデルという言葉をよく聞きますが何のことですか?
http://www.atmarkit.co.jp/fjava/javafaq/j2ee/j2e07.html
(Java での)MVCモデル メモ
http://cartman0.hatenablog.com/entry/2015/12/17/045635
サーバーサイドJavaでMVCフレームワークの理解をする(全4回)
http://qiita.com/kyogom/items/4f5407ba8a8b20487025

DAO、DTOについて

DAOは、データアクセスをビジネスロジックから排除し、データアクセスオブジェクト(DAO)としてカプセル化します。
データアクセスの手段や実装が変わっても、DAO自体がビジネスロジックに公開しているインタフェースは変わりませんので、ビジネスロジックの変更が発生しません。 DAOはデータ保存先の、アダプタのようなものになります。
もし、データアクセスに関わるロジックがビジネスロジックの中にあった場合を考えてみます。

データアクセスの手段や実装が変わると、ビジネスロジック中からデータアクセスをしている個所を見つけだし、変更していかなければなりません。それは時間もかかり、困難な作業になります。 DAOパターンは「データアクセス部分をまとめて整理整頓する技術」とも言えます。

DTOは、データ転送オブジェクト(Data Transfer Object)の略です。データベースに格納されているレコードを表します。単純に、テーブルに対してクラスを定義、列に対してフィールドを定義していきます。今回は更新対象となるtodo_listテーブルの項目を定義したTODO.javaがDTOに相当します。

DAO、DTOともにJavaのオブジェクト指向を上手く活用したデザインパターンと呼ばれる技術です。このようにJavaのクラウをデザインパターンにそって実装することによって、データ保存先の変更やテーブルで扱う項目の追加、削除が発生した際に、修正範囲が限定されます。

【Java】頼むからDTOをしっかりと実装して欲しいお話
https://goo.gl/6LHN7e
【JavaBeans】BeanとDTOとEntityとVOとFormの違いって何?
http://yyyank.blogspot.jp/2013/07/javabeansbeandtoentityvoformwhat-is.html

アプリケーションの実装

まずはソースファイルをパッケージで分けていくために、以下のパッケージを作成します。

todo.dao
todo.dto
todo.filter
todo.web

スクリーンショット 2017-04-01 午前7.10.06

TODO.javaの作成

今回構築するアプリケーションのDTOに相当する、TODO.javaクラスを該当パッケージ内に作成し、以下のコードを実装してください。

次にDAOクラスを作成し、データベースアクセス処理を実装します。DAO.javaクラス、及びTodoDAO.javaクラスを該当パッケージ内に作成して以下のコードを実装してください。

Javaプログラムからデータベースへの接続及びSQLの発行などについて、以下のサイトで確認してください。

それでは次に、一覧画面に相当する部分のJSPとサーブレットを作成しましょう。

JSPはWebContent配下に保存してください。

index.jsp

メニューバー部分もリンクを修正するため、以下のコードで上書きしてください。

nav.jsp

search.jsp

一覧画面のコントローラーであるSearchServlet.javaのクラスを該当パッケージ内に作成して、以下のコードを実装してください。

続いて詳細画面の実装に入ります。

detail.jsp

DetailServlet.javaクラスを作成して、以下のコードを実装してください。

同じく更新用、新規登録用、削除用のサーブレットクラスを作成していきます。

RegisterServlet.javaクラスを作成して、以下のコードを実装してください。

InputServlet.javaクラスを作成して、以下のコードを実装してください。

DeleteServlet.javaクラスを作成して、以下のコードを実装してください。

これで、TODO管理アプリケーションで使用するクラスが一通り完了しました。

次に共通処理部分であるフィルタークラスを実装します。

該当パッケージ内にRequestEncodingFilter.javaクラスを作成し、以下のコードを実装してください。

アプリケーションの動作確認

web.xmlの作成

/WebContent/WEB-INF配下にweb.xmlを作成してください。既に作成済みの場合、以下の内容で上書き保存してください。

web.xml

サーバー起動

それではここまでに作成したアプリケーションが正しく動作するか、サーバーを起動して確認していきましょう。

スクリーンショット 2017-04-01 午前7.49.09

サーバー起動後、以下のURLにアクセスしてアプリケーションを確認してください。

http://localhost:8080/ibc_todo/

スクリーンショット 2017-04-01 午前7.51.59

タスク一覧の参照ボタンを押下して一覧画面に遷移します。

スクリーンショット 2017-04-01 午前7.53.26

詳細画面へのリンクから詳細画面へ遷移して、更新、削除処理を試してください。

またメニューバーのタスクの新規登録から新規登録画面へ遷移して、登録処理を試してください。

一通り動作確認が済んだら、TODO管理アプリケーションの構築は完了です。

まとめ

JavaによるWebアプリケーション構築の流れを一通り確認してきました。実際のアプリケーションは、応用知識、各種フレームワークの考え方、難しく感じる部分が多々あるかと思います。分からない部分は何度も読み返したり、参考サイトを確認したりしながら理解を深めてください。覚えることは沢山ありますが、作りながら学び、実際に手を動かしながら学習を進めることで知識も定着してきます。

基礎編の知識をマスターしていることが前提になりますので、基礎の部分もしっかり復習していきましょう。
次章では、Java9で作成した簡単なアプリケーションを公開する手順を紹介します。