新卒5人が1ヶ月でニュースサイト作ってみた

1. 開発背景

　2023年4月に新卒入社し、3ヶ月間、Java言語を中心にWeb開発の研修を受けてきました。その中の残り1ヶ月、研修の集大成として、新人5人で協力してGigazine風のニュースサイト「Kidazine」を作成しました。Webアプリ開発に携わったメンバーの一人を除いて全員が未経験でしたが、研修で得た知識を活用し、集団で開発を進めました。

2. アプリ概要

様々なカテゴリーのニュースを扱うWebサイトです。
記事を掲載するサイトと、記事を作成・編集するサイトに分かれています。

• 記事トップ画面
  • 記事トップ画面にはログインなしでアクセス可能
  • 記事をクリックすると、記事詳細を閲覧可能

• 記事詳細画面
  • 記事の内容や人気記事ランキング、関連コンテンツの閲覧が可能

• 編集者画面
  • 編集者の画面では、ログインすることで作成した記事の一覧や人気カテゴリランキングを閲覧が可能

• 記事作成・編集画面
  • 記事の登録・編集・削除が可能

3. 機能

ゲスト画面

• ヘッダー
  • 最新記事の通知
  • RSSの取得
• 記事ページ
  • 人気記事ランキング
  • 最新40件の記事表示
  • 関連記事、関連コンテンツの表示
  • サイト内検索
  • カテゴリ検索
  • 広告表示
• お問い合わせ内容の送信
  • 誤字脱字の指摘
  • ネタの垂れ込み
  • その他のお問い合わせ

編集者画面

• 編集者アカウント登録機能
• 記事関連機能
  • 登録
  • 編集
  • 削除
• 記事一覧表示
• 問い合わせ一覧表示
• 人気カテゴリランキング

4. 作成期間

1週目 (要件定義、 詳細設計)

まず、ニュースを投稿・閲覧する上で必要な機能を洗い出し、機能一覧や画面遷移図を作成しました。
次に、完成した機能一覧をもとにメンバーごとにスケジュールを決めました。スケジュールが決まったことにより、やるべきことが明確になり作業を行いやすくなったと感じました。
今回はページごとにタスクを割り振ったため、メンバーそれぞれが実装を担当するページの詳細設計に着手しました。

1週目の実施項目は以下となります。

• 機能一覧作成
• スケジュール表作成
• 画面遷移図作成
• 画面一覧作成
• DB定義書作成
• 要件定義書作成
• 各ページ詳細設計

2週目 (実装 part1)

1週目の段階で、要件定義、詳細設計は完了していたため、2週目からは実装に移りました。
実装する前に、ディレクトリ構成やファイル名、変数名に関してのルールを設け、各自実装に着手しました。

ゲスト画面

• ヘッダー

  • RSS取得機能
  • 通知機能

• トップページ

  • 記事40件取得
  • 前の記事を見る機能

• 記事詳細ページ

  • 記事の本文（テキスト、画像、リンク）の表示
  • 人気記事ランキング10件表示
  • 関連記事、関連コンテンツ表示
  • 前の記事、次の記事表示
  • 人気動画6件表示
  • 記事をTwitterでシェアする機能
  • 記事のタイトルとURLをコピーする機能
  • SNSアイコン表示

• トップ・記事詳細ページ共通

  • サイト内検索機能
  • 過去の記事、カレンダー表示
  • カテゴリ検索機能
  • 広告表示

• フッター

  • タブ表示
  • お問い合わせページ表示

編集者ページ

• ログイン機能
• アカウント登録（メール認証）機能
• ヘッダー表示
• ログアウト機能
• 記事の編集、更新、削除機能

3週目 (実装 part2、結合テスト)

2週目と同様、実装に取り組みました。

ゲスト画面

• ヘッダー

  • 通知機能
  • SNSアイコン

• 記事詳細ページ

  • 最新ニュース40件表示

• フッター

  • お問い合わせ内容の送信

編集者ページ

• 記事の編集、更新、削除機能
• マイページ内の記事一覧表示
• マイページ内のお問い合わせ一覧表示
• 人気のカテゴリーのグラフ表示

5. 設計

ワイヤーフレーム

<ゲスト側画面>

<編集者側画面>

DB定義書

EDITOR(編集者ユーザテーブル)
EDITOR_ID	NUMBER	PK	編集者IDシーケンスから取得
EDITOR_LOGIN_ID	VARCHAR2(20)	UNIQUE, NN	編集者ログインID（半角英数字）
EDITOR_PASSWORD	VARCHAR2(128)	NN	編集者パスワード
EDITOR_MAIL_ADDRESS	VARCHAR2(128)	UNIQUE, NN	編集者メールアドレス
EDITOR_NAME	VARCHAR2(128)	NN	編集者氏名

TMP_EDITOR(一時編集者テーブル)
TMP_EDITOR_ID	NUMBER	PK	一時編集者IDシーケンス
TMP_LOGIN_ID	VARCHAR2(20)	UNIQUE, NN	一時編集者ID
TMP_PASSWORD	VARCHAR2(128)	NN	一時編集者パスワード
TMP_MAIL_ADDRESS	VARCHAR2(128)	UNIQUE, NN	一時編集者メールアドレス
TMP_NAME	VARCHAR2(128)	NN	一時編集者氏名
TMP_CREATE_DATE	DATE	NN	一時編集者作成日時
TMP_TOKEN	VARCHAR2(128)	NN	一時登録用トークン

ARTICLE(記事テーブル)
ARTICLE_ID	NUMBER	PK	記事IDシーケンスから取得
EDITOR_ID	NUMBER	FK,NN	編集者ID(編集者ユーザー
テーブルの編集者ID参照)
ARTICLE_TITLE	VARCHAR2(128)	NN	記事タイトル
ARTICLE_MAIN	LONG	NN	記事本文
ARTICLE_CREATE_DATE	DATE	NN	記事作成日
ARTICLE_UPDATE_DATE	DATE		記事更新日
DELETE_FLG	NUMBER	NN, CHECK(1 or 0)	削除フラグ(1が削除済み)

ARTICLE_CATEGORY(記事カテゴリーテーブル)
ARTICLE_ID	NUMBER	FK,NN	記事ID
CATEGORY_ID	NUMBER	FK,NN	カテゴリーID
SORT_ORDER	NUMBER	NN	並び順
DELETE_FLG	NUMBER	NN,CHECK(1 or 0)	削除フラグ(1が削除済み)

ARTICLE_IMAGE(記事画像テーブル)
ARTICLE_ID	NUMBER	FK,NN	記事ID(ARTICLEテーブルの記事ID参照)
IMAGE_PATH	VARCHAR2(128)	NN	画像パス
IMAGE_ORIGINAL_NAME	VARCHAR2(128)	NN	元の画像名
THUMBNAIL_FLG	NUMBER	NN, CHECK(1 or 0)	サムネイルフラグ（１ならサムネイル）
DELETE_FLG	NUMBER	NN, CHECK(1 or 0)	削除フラグ(1が削除済み)

ARTICLE_ACCESS_COUNT(記事アクセス数テーブル)
ARTICLE_ID	NUMBER	FK,NN	記事ID(ARTICLEテーブルの記事ID参照)
ACCESS_COUNT	NUMBER	NN	アクセス数
TARGET_DATE	DATE	NN	対象日

TIP_OFF_SOURCE(ネタのタレコミテーブル)
TIP_OFF_SOURCE_ID	NUMBER	PK	ネタのタレコミテーブルIDシーケンスから取得
TIP_OFF_SOURCE_MAIL_ADDRESS	VARCHAR2(128)	NN	情報提供者メールアドレス
TIP_OFF_SOURCE_TITLE	VARCHAR2(128)	NN	タレコミネタのタイトル
TIP_OFF_SOURCE_MAIN	VARCHAR2(2000)	NN	タレコミネタの本文
TIP_OFF_SOURCE_CREATE_DATE	DATE	NN	タレコミ作成日

INDICATE(誤字脱字の指摘テーブル)
INDICTE_ID	NUMBER	PK	誤字脱字の指摘テーブルシーケンスIDから取得
INDICATE_MAIL_ADDRESS	VARCHAR2(128)	NN	情報提供者メールアドレス
INDICATE_TITLE	VARCHAR2(128)	NN	誤字脱字タイトル
INDICATE_MAIN	VARCHAR2(2000)	NN	誤字脱字本文
INDICATE_CREATE_DATE	DATE	NN	誤字脱字作成日

INQUIRY(その他の問い合わせ)
INQUIRY_ID	NUMBER	PK	その他の問い合わせIDシーケンスから取得
INQUIRY_MAIL_ADDRESS	VARCHAR2(128)	NN	情報提供者メールアドレス
INQUIRY_TITLE	VARCHAR2(128)	NN	問い合わせタイトル
INQUIRY_MAIN	VARCHAR2(2000)	NN	問い合わせ本文
INQUIRY_HIGH_PRIORITY	NUMBER	NN, CHECK(1 or 0)	優先度が高い問い合わせ
INQUIRY_CREATE_DATE	DATE	NN	その他問い合わせ作成日

MOVIE(動画テーブル)
MOVIE_URL	VARCHAR2(512)	NN	動画URL
MOVIE_PATH	VARCHAR2(128)	NN	サムネイル画像パス
MOVIE_TITLE	VARCHAR2(128)	NN	動画タイトル

ADVERTISEMENT(広告テーブル)
ADVERTISEMENT_URL	VARCHAR2(512)	NN	広告URL
ADVERTISEMENT_PATH	VARCHAR2(128)	NN	広告画像パス

CATEGORY_MST(カテゴリーマスターテーブル)
CATEGORY_ID	NUMBER	PK	カテゴリーID
CATEGORY_NAME	VARCHAR2(128)	NN	カテゴリー名
CATEGORY_COLOR	VARCHAR2(32)	NN	カテゴリーカラー

EMAIL(Eメールテーブル)
EMAIL_ADDRESS	VARCHAR2(128)	NN	メールアドレス
SUBJECT	VARCHAR2(128)	NN	件名
CONTENT	VARCHAR2(256)	NN	本文
SEND_DATE	DATE	NN	送信日時

6. 使用技術

フロント：Bootstrap v5.0.2、Charts.css v0.9.0、Push.js v1.0.9、jQuery v3.3.1
バックエンド言語：Java8（サーブレット・JSP）
データベース：Oracle
Webアプリケーションサーバー：Tomcat-8
デプロイ先環境：Linux CentOS
ソースコード管理：Git, GitHub
開発マシン：Mac Ventura(13.3)
エディタ：Eclipse2023-03

7. 振り返り

Keep（継続すること、よかった点）

・朝会で当日の目標を設定し、計画通りに進めることができた。
・朝会と夕会で進捗報告を行い、情報共有とスケジュールの調整を円滑に進められた。
・バッファを設けることで、トラブルに対応できた。
・スケジュールを前倒しできたときに、次の日にやることを進めることができた。

Problem（問題点、反省点）

・DB定義の段階で、必要な情報の洗い出しが足りなかった。そのせいで実装の段階で設計のやり直しが発生した。
・詳細設計のレビューをグループ内のみで行ったため、機能の抜け漏れが発生した。
・スケジュールの進捗に個人差があり、遅れている人のケアができていなかった。
・得意・不得意に応じてタスクの割り振りを考えるべきだった。

Try（次回に向けて、改善点）

・全員で詳細設計のレビューする時間を設ける。
・定期的に話し合いの場を設け、進捗の遅れをメンバーに周知する。
・グループ内でさらにペアを組み、一人にならないようにする。
・一日の終わりにはプルリクエストを提出し、進捗の見える化をする。

苦労した点

・初めて扱う技術が多く、調べることに時間を費やした。
・メンバーごとに完成イメージが異なり、設計時に認識のずれが生じた。
・人によってコードの書き方が違うので、読みやすさに違いが生じた。
・使える技術に制限があるなか、本家再現という仕様を満たさないといけなかった。

8. まとめ

今回の研修を通して、以下のことが特に重要であるとわかりました。

• タイムマネジメント
• 要件定義
• 進捗確認

この経験を今後に活かしたいです。

<参考>
・プログラミング学習歴１ヶ月半からWebアプリを開発してみた
　https://qiita.com/shogo-1988/items/72334b27a5b7f8e43ff8