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

# 1. 開発背景

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

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

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

![スクリーンショット 2023-06-28 16.20.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486832/769573bf-810d-290e-ac74-5b4ae89649ba.png)

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

![スクリーンショット 2023-06-28 14.54.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486832/ba15c07b-f818-97df-59c8-6b59de288680.png)


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

![スクリーンショット 2023-06-28 16.23.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486832/7202a624-9415-5bc7-969c-b70573261353.png)

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

![スクリーンショット 2023-06-26 20.31.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486832/e3cd202e-2f3d-964d-f19c-961663d427b7.png)

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

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

# 4. 作成期間

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

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

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

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

## 2週目 (実装 part1)

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

#### ゲスト画面

- ヘッダー
  - RSS取得機能
  - 通知機能

- トップページ
  - 記事40件取得
  - 前の記事を見る機能

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

- トップ・記事詳細ページ共通
  - サイト内検索機能
  - 過去の記事、カレンダー表示
  - カテゴリ検索機能
  - 広告表示

- フッター
  - タブ表示
  - お問い合わせページ表示

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


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

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

#### ゲスト画面

- ヘッダー
  - 通知機能
  - SNSアイコン

- 記事詳細ページ
  - 最新ニュース40件表示

- フッター
  - お問い合わせ内容の送信

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

# 5. 設計

## ワイヤーフレーム

#### <ゲスト側画面>

![スクリーンショット 2023-06-26 13.55.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486832/9c03b93d-8a0b-8134-4c4c-b253d1cdcaa4.png)

#### <編集者側画面>

![スクリーンショット 2023-06-26 15.31.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3486832/00f38249-d9ce-54b6-c14e-ebfaf2b29bff.png)



## 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