はじめに

初めまして。takunと申します。
この記事では個人的なWebアプリケーションを開発したプロセスと困難だった点についてまとめていく内容となっております。

私は4月から某SES企業にIT未経験での転職をした初心者エンジニアです。間違ったことや不適切な内容となってしまう可能性もあることをご承知ください。また、助言など頂けると嬉しいです。
また、心の声ダダ漏れな日記となっていますので苦手な方はご注意ください。

目次

① Webアプリケーション制作に至った経緯
② 概要・設計について
③ 今後の必要な機能、知識について

①Webアプリケーション制作に至った経緯

２つ理由があります。
　
１つ目は研修中に制作したものとは全く違うWebアプリを作りたかった。

私：入力フォーム、ショッピングサイト、クイズゲームを作るのもいいけど似たようなものばっかりでなんかなあー。オリジナリティのあるアプリ作ってみたいな。
私：エンジニアとして人の役に立つものを作れないかな。何か困ってることある？
隊長(彼女)：あーそれなら作ってほしいのあるよ！

２つ目は案件参画に繋がるようなスキルセットとして活かしたかった。

私：研修終わってJavaSilverもとってみたけど、案件に参画するにはどうしよう。
私：やっぱり資格もいいけど、アプリ開発とかやった方がアピールポイントになります？
担当：そうですね。そっちの方を重きを置いていいかもです。
私：よっしゃ、基本情報技術者資格もとりつつやっちゃうぞー！

②概要・設計について

ーお詫びー

本来なら具体的な内容を記載したいのですが、今回スクレイピングを用いた内容となっております。著作権やサーバー負荷の観点からWeb上にソースコードは掲載していません。robots.txtではAllow:/となっていますが、念の為に情報元サイトへ確認メールを送っている状態です。(返信がきておりません...)
そのため一部文字を伏せさせていただきます。

テーマ決定から、大まかな設計を作る

今回、隊長から依頼された内容について、まず以下の内容をメモ帳に箇条書きで起こしてみました。
p.s.
開発環境はEclipseで言語はJavaとなっております。理由としては研修や資格勉強で親しんだ言語で、まずは１つの言語極めていきたいと思ったためです。

アプリ名(仮)
実現したいこと
- ○○の平均相場と合計金額が知りたい
概要(実現したいことに合わせて機能を挙げる)
- 検索した結果・合計金額を表示。
- 削除ボタンでカートの削除ができる。
詳細な機能(必要なプログラム、クラス)
- 検索入力をするためのテキストボックスを含めた画面(JSP)
- 不正アクセス(null)や空文字の場合コメントを表示。(JSP)
- sessionに格納された商品名と金額を表示。現在の合計金額を表示。(JSP)
- 検索キーワードをサーブレットで受け取り、検索クラスに引数として渡す。
- キーワードがnull,空文字ならばコメントをrequestに格納。
- 抽出した商品名と金額を格納するBeanを作成。これはListに追加し、sessionに格納。
わからないこと
- 情報の抽出の方法。
- アプリのリリースの手順。

よし、まずは情報抽出はどうやるかだな

いきなり今回のボス：情報抽出技術の壁

とりあえずググって調べる。使ってみる。

ググったら情報抽出にはスクレイピングって技術が必要そう！
jsoupっていうライブラリのjarファイルをビルドパスに配置すればいいのか。

上記サイトを参考にさせて頂きました。

HTML要素を抽出できるのか。よしサイト通りの動きになったぞ。
でも情報元のサイトの商品ページのURLがないと処理できなくないか？毎回入力キーワードで商品は変わるしどうしよう...
数日後...はっ！指定するパスをトップページURL+入力キーワードをくっつければいいんじゃ？

もちろん失敗。そしてまた調べる。

やっぱりそんなgoogle検索みたいに甘くないかあ。
ん？google検索エンジンを使えれば・・・

あるじゃーん！！
上記記事を大変参考にさせて頂きました。
特にビルドパスに配置するクラスライブラリ(gsonファイル)を見つけるのに苦労しました。

私にとって未知の技術を学び取り入れるのが最も時間を費やしました。
エンジニアはプログラミングする時間より調べ物する時間の方が長いというのは本当だったんだなと実感しました。

入力キーワードによる検索(表示)ゆれ問題

実際にコーディングし、googleAPIから目的の商品ページURLを取得。これで完成ハッピーエンドかと思いきや・・・
入力キーワードををカタカナでテストしてみると、なんと要素を抽出できずnullになってしまうことが！

嘘・・・だろ・・・(某オレンジ髪の死神代行風

どうやら、Webで使用するgoogle検索エンジンとAPIでのgoogle検索エンジンは仕様が異なるようで、同じキーワードで検索しても上位に表示される内容が若干違いました。
そんな時に友人でありSEとして先輩のSくんに相談してみました。

Sくん：ひらがなだったらカタカナ、カタカナだったらひらがなに変換するクラスを作ればいいんじゃない。

助言をもらい、文字変換クラスを作成。また、APIで取得した検索結果ページから抽出するURLは以下のようにコードを修正しました。

既存のコード：最上位のサイトから抽出する仕様
　　　　　　　　　　↓
修正後のコード：タイトル名で特定の文字列を含んだページのURLのみ抽出する仕様

これでテストしたところ問題なさそうだったので、一旦完成としました。

完成したクラス

サーブレットクラス
- 入力キーワードのnull・空文字チェック
- キーワードを文字変換クラスに渡す
- 戻り値のキーワードをスクレイピングクラスに渡す
- 戻り値のBeanをリストに追加し、sessionに格納
- 削除ボタンを押された時、セッションを破棄。新たなセッション生成しレスポンスする。
文字変換クラス
- 文字がカタカナなのかチェック。カタカナであれば、ひらがなに変換する。
スクレイピングクラス
- googleAPIメソッドにkeywordを渡し目的の商品ページURLを取得
- 取得したURLをスクレイピングメソッドでHTML要素を抽出
- Beanをインスタンス化し、抽出した要素を商品名・価格フィールドに格納。
Bean
- フィールドに商品名と価格を格納する変数。getterとsetter。
JSP
- formとinputタグでテキスト入力できるフォームを作成。
- nullや空文字チェック時のコメントを出力。
- リストから検索した商品名・価格一覧と合計金額を表示。
- formとinputタグで削除ボタンを作成。

③今後の必要な機能、知見について

ここまで作って実際に隊長に見てもらって、「すごーい！」との一言を頂けました。
本来であればリリースまでやってみたかったのですが、前述の-お詫び-にもある通り情報元サイトからの返信待ちとなっているので、現状はここでストップです。

もし進めるとしたら必要になる機能や知見について挙げてみます。
● セキュリティ対策
nullチェックしかできていないけど、サイバー攻撃のリスクを考えるともう少し工夫が必要だろうか。

● ドメインの取得、サーバーを用意
リリースとなると必要になりそう。詳しくどうやるのかわからない。

● フロントエンド、CSSの知見
完成したけど見た目がしょぼい。動的ページ作成もしてみたい。

おわりに

こんな新米エンジニアの記事をここまで見て頂けて嬉しいです。拙い文章で恐縮ですが、見ていただいてる方に分かりやすい内容となるよう努めていきます！
コメントやアドバイスなど頂けたら嬉しいです！