TODO管理アプリ
作業予定を登録して、管理するアプリ
登録したタスクをカレンダーで確認できる
ヘッダーカラー、背景画像、フォントなどをユーザーが設定できる
使用技術
バックエンド（フレームワーク）：Java (Spring Boot)
フロントエンド：HTML/CSS、Bootstrap、JavaScript、jQuery
RDBMS：MySQL
IDE：Eclipse
ソースコード：https://github.com/MasahiroOgata/PrivateTodoLists
制作や使用技術についての所感
・jQuery
今回のアプリでは、蔵書アプリに比べてフロントエンドの処理が大幅に増えたことから、jQueryを利用することにしました。jQueryは、操作する対象をまず記述し、次いで適用するメソッドを書いていくため、何に対してどのような処理を行うのかがわかりやすいと思います。
jQueryによって、例えば、アプリ内の画面に操作確認やメッセージを表示するモーダルを用意してユーザーの操作に応じて内容を変更したり、ユーザーごとの設定を画面に反映させたり、日本の祝日をWeb上から読み込んでカレンダーに表示させるなどの処理を実装しています。場合によっては、JQueryでHTMLそのものから書き換えることもできるので、かなり思い通りの画面が作成できたように思います。
JQueryはそれなりに古い技術なので、この先、現場でどれほど使えるのか見通しがわからないのですが、Ajax通信にも対応しているため、今後RESTを実装する上でも活用できると考えています。
・苦労した点
当初、ユーザー登録が行われた時点でそのユーザー専用のDBテーブルを新規作成するという処理を考え、そのようなコードを書いたのですが、ユーザーごとにテーブルを分ける運用は極めて問題の多いやり方であるという指摘をもらったので、タスクの管理について全ユーザー共通の単一テーブルを利用するという一般的な方法に変更しました。
この過程で、テーブル定義に変更を加える操作には危険が伴い、なおかつ(MySQLでは)ロールバックの対象にもならないことが分かったので、Webアプリケーションの開発にあたっては、DDL(データ定義言語)の扱いには特に留意したいと思います。
一覧画面に個々のタスクを完了させるボタンを設置しており、押すとDBのレコードを更新する処理を呼び出すようになっています。初めはDBの更新後に一覧画面にリダイレクトするようにしていたのですが、ボタンを押すたびに画面が切り替わるのがユーザーにとって使いづらいと感じたため、RESTを実装して画面遷移なしでボタンや完了日の表示のみを変化させるようにしました。これだけでも大変でしたが、今後ページネーションやフィルターなどの機能と組み合わせようとすれば、さらに困難になると予想しています。
・工夫した点
JavaScriptのFullCalendarライブラリを用いて、タスクの期限日をカレンダー画面で確認できるようにしました。タスクや日付のセルをクリックすることで、モーダルを表示して概要を確認したり、詳細画面やタスクの新規登録画面に移動することができるようになっています。
それぞれのユーザーが、ヘッダーの色などのさまざまな画面表示に関する項目を設定できる機能を追加しました。この機能を作成するにあたって、画面設定の内容を保存するためのDBテーブルの設計に関してアドバイスをもらったので、それを参考に、もし今後設定項目の追加や変更があったとしても、テーブル定義に手を加えることなくフレームワークのみで対応できるような仕組みを作れたと思います。
また、ログイン中にアクセスするすべての画面で表示設定を適用するために、画面設定をDBから読み込んでHTMLに渡す処理をAOPで実装しました。各コントローラーのメソッドが呼び出される時点で毎回処理を実行することができるので、何度も同じ処理を書く必要がなくなっています。
・今後の課題
このアプリに関してはRESTの実装を第一に考えています。リスト画面だけでなくモーダル画面からでも画面遷移なしでタスクの完了操作をできるようにする他、ユーザーの新規登録などにもRESTを使用して、よりストレスなく利用できるアプリにしていければと思います。