はじめに
初めまして。takunと申します。
この記事では個人的なWebアプリケーションを開発したプロセスと困難だった点についてまとめていく内容となっております。
私は4月から某SES企業にIT未経験での転職をした初心者エンジニアです。間違ったことや不適切な内容となってしまう可能性もあることをご承知ください。また、助言など頂けると嬉しいです。
また、心の声ダダ漏れな日記となっていますので苦手な方はご注意ください。
目次
① Webアプリケーション制作に至った経緯
② 概要・設計について
③ 開発で困難だった点と解決策。今後の追加機能について。
①Webアプリケーション制作に至った経緯
「ねえ、今日のご飯何がいい？」
こんなふうに聞かれてなんて答えるか困った経験はないですか。
親やパートナー、あるいは友人がこのように訪ねてきてうまく答えられず、、
私：うーん、なんでもいいよー
彼女：じゃあ、お蕎麦にしよっか
私：いや蕎麦はちょっと・・・
彼女：は？（怒
と喧嘩にもなりかねません。
そんな時にいい感じのメニューを考えてくれるアプリがあったらな・・・と思ったのがきっかけです。
その他以下のような人の手助けになるのではないかと思い、制作に取り組みました。
- なんとなく中華料理食べたいけど、何があったっけな
- 何食べたいとか考える暇もないほど忙しい
- ルーレットアプリに選択肢を登録するのも面倒臭い
②概要・設計について
今回のアプリ設計
開発環境はEclipseで言語はJavaとなっております。
アプリ名：メニュー提案アプリ(仮)
実現したいこと
- １クリックでランダムでメイン料理を表示できる
概要機能
- 条件なし検索ボタン。DB全件からランダムで１つのメニューを表示。
- 条件あり検索ボタン。おすすめメニューを１〜5つ、カテゴリやジャンルで絞り込んだデータからランダムに表示。
詳細設計(必要なプログラム、クラス)
- JSP
- ２つのsubmitボタン。色を分けてわかりやすく。
- 不正アクセス(null)、ジャンルかカテゴリどちらか１つでもnullの場合コメントを表示。
- requestスコープに格納されたメニュー名を表示。
- サーブレット
- submitのvalueをサーブレットで受け取り、内容に合わせてDAOでの処理を振り分ける。
- DAO
- DB接続処理
- クエリ文は上記よりvalueの値に合わせて、２つのメソッドを作成。検索条件なしメソッドと、検索条件ありメソッド。
- DBテーブル
- メニューID,メニュー名,ジャンルID,カテゴリ名ID
- ジャンルID,ジャンル名
- カテゴリID,カテゴリ名
完成したソースと画面はこちら
ソースコードはGitHub上に上げています。
機能は問題ない。問題ないんだけど・・・
フロントのスキルとセンスがなさすぎましたorz
今回のアプリではフロントを意識してBootstrapというCSSのフレームワークも活用してみたのですが、やや残念な感じに。。
チェックボックスの押しづらさや一度検索ボタンを押すと全てチェックした状態に戻ってしまう点、項目の見にくさが気になるので直したいのですが１日かけてうまくいかず(...これでも少しマシになりました)
今後も積極的に利用して改善していこうと思います。どなたかアドバイス頂けたら嬉しいです。
③開発で困難だった点と解決策。今後の追加機能について。
前回ほど全く知らない技術はなかったです。
しかし、DB接続における設定には難儀しました。
DB接続がうまくいかない
元々MySQL5.7インストール済みだったので、研修中に使っていた参考書を活用してあっさりEclipseと接続できるだろうと最初は思っていました。
以下の困難だった点と解決のため参考にしたページを紹介します。
- MySQLログイン時エラー、操作ができない
再インストールも試し、なんとか解決しました。
- Eclipse操作にてJDBCドライバの設定が繋がらない
→いろいろ調べましたが、なんだかんだファイルの配置とDAOの記述が間違っていたことが原因でした。
条件を絞るクエリ文を書く
これは困難だった点ではないですが、今後使い回せるかもしれないと思ったのでソースを残します。
String[] genre = request.getParameterValues("genre");
String[] category = request.getParameterValues("category");
int count = Integer.parseInt(request.getParameter("count"));
String sqlAdd = "WHERE (";
for (int i = 0; i < genre.length; i++) {
if (i == genre.length - 1) {
sqlAdd += "genre_name = '" + genre[i] + "') ";
} else {
sqlAdd += "genre_name = '" + genre[i] + "' OR ";
}
}
sqlAdd += "AND (";
for (int i = 0; i < category.length; i++) {
if (i == category.length - 1) {
sqlAdd += "category_name = '" + category[i] + "')";
} else {
sqlAdd += "category_name = '" + category[i] + "' OR ";
}
}
String sql = "SELECT menu_list.menu_name, \n" + "eating_genre_list.genre_name,\n"
+ "eating_category_list.category_name FROM eating_genre_list\n" + "JOIN menu_list \n"
+ "ON eating_genre_list.genre_id = menu_list.eating_genre_id\n" + "JOIN eating_category_list \n"
+ "ON menu_list.eating_category_id = eating_category_list.category_id \n"
+ sqlAdd
+" ORDER BY RAND() LIMIT ?";
pstatement = connection.prepareStatement(sql);
// INパラメータは以下の通り
pstatement.setInt(1,count);
// SQL発行し、抽出結果が格納されたResultSetオブジェクトから値を取得
rs = pstatement.executeQuery();
ポイントとしては、
・for文で要素分WHERE句以降の絞り込みを追加。ジャンルとカテゴリの２種類の絞り込みをANDで繋げるため、それぞれを()で括る。
※どちらかがnullだとエラーになります。このまま使う場合はnullチェック必要です。
・ORDER BY RAND()とINパラメータで取得件数を指定
追加機能を考察
● ドメインの取得、リリース
8/13追記：herokuに上記アプリをデプロイしました！
ぜひ、試しに使ってみていただけたら嬉しいです。
コメントなど頂けたら大喜びです。
● マイメニューリスト(段階的に実装)
- 良いと思ったメニューを保存できる機能
- 保存したメニューリストを表示する機能
- 保存したものでテーブル作成・ランダム抽出する機能
- ログイン機能も必要か
● CSS修正(段階的に実装)
- チェックボックスの押しづらさ
- 一度検索ボタンを押すと全てチェックした状態に戻ってしまう
- 各項目の見にくさ
おわりに
こんな新米エンジニアの記事をここまで見て頂けて嬉しいです。拙い文章で恐縮ですが、見ていただいてる方に分かりやすい内容となるよう努めていきます！
コメントやアドバイスなど頂けたら嬉しいです！