# 概要
- 交換日記アプリを作るぞい

# 背景
- ユーザー
- 仲のいい大学生4人グループ（男3・女1）。
- グループのうち3人が長期留学に行く予定があり、「留学中も自分の悩みや考えを丸ごと共有できる場所」を維持したいというニーズがある。
- 事業
- 今回は留学に行く友人のために作るので、収益性を考えていない。
- プロダクト
- 時差があるので4人同時に電話することは難しい。
- 現状のSNSで「親しい友人グループ」内で「長文/重い話」を共有することに違和感がある。

# Goal
- Aさん
- 自分の考えていることや、感じてることの受け皿になる場所が欲しい。
- Bさん
- みんなが普段どんなことを考えているのかを知りたい。

# User Stories

| 誰が | 何したい | なぜならば |
| --- | --- | --- |
| Aさん | 交換日記を書きたい | 自分の考えてることを整理したいから。 |
| Aさん | 交換日記を渡したい | 友人に見てもらいたいから。 |
| Bさん | 交換日記を読みたい | 友人がどんなことを書いているか、自分の日記にどんなコメントをしたのか気になるから。|
| Bさん | 交換日記にコメントしたい | 自分の考えてることを伝えたいから。友人の日記に共感したいから。 |
| Cさん | 自分の日記にメモしたい | 日記が回ってこない間に、交換日記に書きたい内容をストックしておきたいから。 |
| Cさん | 日記の所在を確認したい | 日記が、現時点で誰のもとまで回っているのかを知りたいから。 |

# 仕様
## 概念の整理
- `グループ`
- ユーザーは必ず１つ以上のグループに所属する。
- `日記`
- 日記は必ず１つのグループに所属する。グループには複数の日記が存在し得る。
- 左側に日記を書く画面、右側にコメントを書く画面という仕様。
- 日記の記述順と状態に応じて編集権限が変わる。
- 日記を作成する際に、`日記タイトル`・ `記述順`・`何ページ`が設定できる。
- 記述順ごとにユーザーは日記を書いていく。記述順はランダムに決まる。
- 日記には`進行中/完了`という状態と、`ポスト`・`ページ`という概念がある。
- `進行中` :日記が新規作成されてから完了状態になるまでの状態。
- `完了` : 設定した周において、１番最後の順番となったユーザーが、日記を送信したあとの状態。
- `ポスト` : 自分の順番で作成したページのまとまり。
- `ページ` : 日記を構成する最小単位。日記を書く・読む行為はページ単位で行われる。
- 進行中の日記は１グループにつき１つしか存在し得ないものとする。

## 対象画面

トップ

| ページ名| URL | 概要 |
| --- | --- | --- |
| トップ | / | アプリのHome画面 |
| ログイン| /login | ログインする画面 |

グループ作成

| ページ名| URL | 概要 |
| --- | --- | --- |
| グループ作成 | /group | グループを作成する画面 |

ユーザーの招待・削除

| ページ名| URL | 概要 |
| --- | --- | --- |
| サインアップ招待 | /サブドメイン/diary | グループ作成後に、トップページにリダイレクトされるとポップアップで表示される。 |
| セッティング招待 | /サブドメイン/team/invitations | 後からユーザーをグループに招待したいときに、管理者のみが招待できる画面 |
| ユーザー削除 | /サブドメイン/team | 管理者のみがメンバー一覧から削除したいユーザーを選択することができる。|

招待の認証

| ページ名| URL | 概要 |
| --- | --- | --- |
| 招待認証 | /サブドメイン /team/invitations/member | 招待したユーザーを認証する画面 |

ログイン/サインアップ後のトップ

| ページ名| URL | 概要 |
| --- | --- | --- |
| 日記リスト | /サブドメイン/diary | 現在進行中の日記と、日記に含まれているポストが昇順に表示される画面 |
| 新規作成 | /サブドメイン/diary | 日記がない or 全て完了状態の場合、日記の新規作成をする画面 |

日記の新規作成

| ページ名| URL | 概要 |
| --- | --- | --- |
| 日記の新規作成 | /サブドメイン/diary/start | 日記を新規作成するための設定をする画面 |

ポストの新規作成

| ページ名| URL | 概要 |
| --- | --- | --- |
| ポスト新規作成 | /サブドメイン/diary/new | ポストを記述するための画面 |

日記の詳細表示

| ページ名| URL | 概要 |
| --- | --- | --- |
| 日記詳細ページ（右側） | /サブドメイン/diary/page(先頭) | 空白のページが表示される画面。writeボタンを押すと`ポストの新規作成`に遷移する |
| 日記詳細ページ（左側） | /サブドメイン/diary/page | 過去のページ画面。左側に作成した日記内容が表示され、右側にコメント欄が用意されている |
| 日記詳細ページ | /サブドメイン/diary/page | 過去のページ画面。左側に作成した日記内容が表示され、右側に過

## アカウントを作る
- `トップページ`からユーザーのメールアドレスを入力する。
- メールアドレスの重複があるとエラーとなる。
- 登録画面に再リダイレクトされる。
- エラーメッセージが表示される。
- メールアドレスに不備があるとエラーとなる。
- @がない。
- 一般的なメールアドレスを表現する正規表現と一致しない。
- 登録画面に再リダイレクトされ、エラーメッセージが表示される。
- 正しく入力されていると、`Sign Upボタン`をクリックすると`メール確認画面`が表示される。

- アカウント作成者が入力したメールアドレスに確認メールを送る。
- 確認メールを3時間以内にクリックしない場合はエラーとなる。
- トップページにリダイレクトされ、「有効期限が切れています」とエラーメッセージが表示される。
- 3時間以内にリンクをクリックすると、`グループ作成画面`に遷移する。

## グループを作る
- `アカウント登録者`はグループ名とグループid、名前、パスワードを入力する。正常に入力した場合、`Nextボタン`をクリックすると`ダッシュボード画面`に遷移する。
- グループ名、グループid、名前、パスワードのいずれか一つでも空白の場合はエラーとなる。
- グループidがすでに使われている場合はエラーとなる。
- パスワードが8文字以下の場合はエラーとなる。
- エラーの場合は`グループ作成画面`に再リダイレクトされ、エラーメッセージが表示される。
- グループを作成したユーザーを`管理者`とする。
- 管理者のみが、ユーザーの招待・削除の権限を持っている。

## ダッシュボード
### 初ログインの場合

#### 招待モーダルが表示される

- グループを作成して初めてダッシュボードに訪れたときに表示する。
- モーダルには`招待リンク`と`完了ボタン`、`スキップボタン`が表示されている。
- 完了ボタンを押すと、モーダルを閉じる
- スキップボタンを押すと、モーダルを閉じる

#### ヘッダーメニューの表示

- プロフィール編集画面のリンク
- 日記一覧
- 作成された日付が新しいものから順に表示されている。
- 日記が作成されていない場合は何も表示されない。

#### 日記の表示
- ダッシュボードのトップには`Startボタン`が表示される。
- クリックすると、`日記の新規作成ページ`に遷移する。
- 日記の新規作成はグループにいる全てのユーザーがクリックできる。

### 初ログインではない場合

#### ヘッダーメニューの表示
- プロフィール編集画面のリンク
- 日記一覧

#### 日記の表示
- ダッシュボードのトップページは横4colomunで並列されている。
- 1pに12rowまで表示される。
- 1pに表示できる数を越えると、2pが作られる。

##### `進行中`の日記が存在していない場合

- トップページには`日記を新規作成するボタン`と`過去の日記を振り返るボタン`が表示される。
- `日記を新規作成するボタン`をクリックすると、`日記の新規作成ページ`に遷移する。
- `過去の日記を振り返るボタン`をクリックすると、`日記一覧ページ`に遷移する。
- 日記の新規作成はグループにいる全てのユーザーがクリックできる。

##### 日記が`進行中`の場合

- `記述順`が自分の場合
- ダッシュボードに進行中の日記と、全てのポストが表示される。
- 日記にカーソルを合わせると、`日記を書く`・`前回の続きから読む`・`最初から読む`が表示される。
- `日記`をクリックすると、`日記詳細画面`に遷移する。
- `仮保存の日記がある場合` : `日記を書くボタン`が`続きを書くボタン`に変わっている。
- ポストをクリックすると、`ポストに紐づいた、最初のページ詳細画面` に遷移する。
- `ポスト新規作成画面`のリンクが表示される。

- `記述順`が自分ではない場合
- ダッシュボードに、「自分が閲覧可能な範囲のページ」が表示される。
- `閲覧可能範囲のページ` : 自分が最後の記述順となったポストよりも前のページ。
- 日記にカーソルを合わせると、`前回の続きから読む`・`最初から読む`が表示される。
- `日記`をクリックすると、`日記詳細画面`に遷移する。
- `ポスト`をクリックすると、`ポストに紐づく、最初のページ詳細画面`に遷移する。

## ユーザーを招待する

- 管理者からシェアされたリンクを開くと、`ユーザー招待ページ`に遷移する。
- 招待ページでは、名前（ニックネーム）・メール・パスワードの入力をする。
- いずれか一つでも空の場合は、エラーとなる。
- メールアドレスが重複した場合と、パスワードが8文字以下の場合もエラーとなる。
- 招待ページに再リダイレクトされ、エラーメッセージが表示される。正しい入力をやり直すと登録できる。
- 招待リンクを2日以内にクリックしない場合はエラーとなる。
- 管理者に再度招待リンクをシェアしてもらう必要がある。
- 正常に登録された場合は、`日記を交換しようボタン`をクリックすると`ダッシュボード`に遷移する。

## 日記詳細画面

- `<-`, `->`ボタンは「前のページ」「次のページ」
- `<<-`, `->>`ボタンは「一番古いページ」「最新のページ」

### 日記ステータスが`進行中`かつ、記述順が`自分`の場合

- 「自分が閲覧していない」ポストのうち、「最も古い」ポストに紐づいた「最初のページ」が表示される。
- ページを左にクリックすると過去ページに、右にクリックすると新しいページに移動することができる。
- `日記を書くボタン`をクリックすると、`ポストの新規作成画面`に遷移する。
- 新規作成したポストを`仮保存`した場合、`日記を書くボタン`が`日記の続きを書くボタン`に変更される。
- ポストを仮保存した場合、日記の最新ページが仮保存したページとなる。
- 過去に作成されたページの左側に、`入力フォーム`と`コメントボタン`が表示されている。コメントボタンをクリックすると、`完了ボタン`と`キャンセルボタン`が表示される。
- `完了ボタン` : 入力したコメントが日記に表示される。
- コメントが0文字、200文字以上の場合はエラーとなる。
- エラーメッセージが表示され、入力した内容は保持されたまま再リダイレクトされる。
- `キャンセルボタン` : 変更されずに現在のページに再リダイレクトされる。
- コメントの追加権限
- 前回の順番までのポストに対してコメントはできない。
- 各ユーザーは1pあたり1コメントしかできないものとする。
- コメントの編集権限
- 自分のコメント
- `日記を渡すボタン`をクリックするまでの期間は編集できる。
- 前回の順番までにコメントした内容は、編集できない。
- 他人のコメント
- 編集できない。

### 日記ステータスが`進行中`かつ、記述順が`自分ではない`の場合

- 自分が閲覧可能な範囲のページのうち、「最新のポスト」に紐づいた「最初のページ」が表示される。
- `閲覧可能範囲のページ` : 自分が最後の記述順となったポストよりも前のページ
- `ポスト新規作成ボタン`と`コメントボタン`が表示されない。
- 閲覧のみしかできない。
- 閲覧可能範囲ではないページのURLに直接アクセスできない。
- 権限がないので`日記詳細画面`にリダイレクトされる。

### 日記ステータスが`完了`の場合
- 「最初のポストに紐づいた最初のページ」が表示される。
- ポストを新規作成・ページにコメントする権限が与えられていない。
- `日記を書くボタン`が`次の日記を始めるボタン`に変わっている。
- クリックすると、`日記の新規作成画面`に遷移する。

## 日記の新規作成画面

- `タイトル`, `周（ポスト数）`, `メンバー`を設定する。
- タイトル
- 0文字の場合はエラー
- `日記の新規作成画面`に再リダイレクトされ、エラーメッセージが表示される。
- 周
- 入力された数字が0以下、100以上の場合はエラー
- `日記の新規作成画面`に再リダイレクトされ、エラーメッセージが表示される。
- メンバー
- メンバーの追加
- グループに登録されているメンバーから、交換日記したいメンバーを追加することができる。
- メンバーが1人（自分のみ）の場合はエラーとなる。
- 日記の新規作成画面にリダイレクトされ、招待モータルが表示される。
- メンバーの削除
- 日記の新規作成画面で、追加したメンバーを削除することができる。
- ただし、日記が作成されたあとにメンバーを削除することはできない。

- 表示される項目
- `順番`
- 順番はユーザーが設定せずに、ランダムで決まる。
- 一番最初の順番は日記の作成者とする。
- 正しく入力したあと、`日記を始めようボタン`をクリックすると、`ポスト新規作成画面`に遷移する。

## ポストの新規作成ページ

- ページあたりの行数と行あたりの文字数がデフォルトで決まっている。
- エディタを決めてから、考える。
- 実装しながら、考える。

- 日記を次の人に送信したいときは、`次の人に渡すボタン`をクリックすることができる。
- 文字数が0文字の場合はエラーとなる。ポスト新規作成ページに再リダイレクトされる。さらに、エラーメッセージが表示される。
- 正常にクリックできると、記述順は次のユーザーに移譲され、日記を渡したユーザーはダッシュボードに遷移する。
- 次のユーザーには`日記があなたに回ってきました！`というタイトルのメールが届く。記載されたリンクを踏むと、`日記詳細ページ`の「まだ閲覧していない最新ポストに紐づいた最初のページ」に遷移する。
- 日記を途中で中断したいときは`一旦休憩するボタン`をクリックする。
- テキストエリアに書いた内容は保持されたまま、日記詳細ページの先頭にリダイレクトされる。
- 日記詳細ページの先頭は`仮保存したポスト新規作成ページ`に変わっている。
- `日記の続きを書くボタン`をクリックすると、編集することができる。

### 日記を書く最後のユーザーの場合

- `次の人に渡すボタン`をクリックしたユーザーは、ダッシュボードに遷移すると、Javascriptで`次の日記どうするかページ`が表示される。
- `次の日記どうするかページ`にはサクセスメッセージと`次の日記を新規作成するボタン`と`ダッシュボードに一旦戻るボタン`が表示される。
- ダッシュボードに遷移したタイミングで、他のユーザー全員に`日記を書き終えたサクセスメッセージ`が届く。
- メールに記載されたリンクをクリックすると、ダッシュボードのトップページに遷移する。
- 日記が作成されていない場合は`次の日記どうするかページ`が表示される。日記が作成されている場合は閲覧可能な範囲の日記が表示される。
- `次の日記を新規作成するボタン`
- 次の日記が作成されていない場合は`日記を新規作成するページ`に遷移する。
- 既に作成されている場合は`ダッシュボード`に遷移して、「他の人が日記を作ってくれました！」というメッセージが表示される。
- `ダッシュボードに一旦戻るボタン`
- 次の日記が作成されていない場合は`進行中の日記が新規作成されていない場合`であるから、新規作成ボタンがトップページに表示される。
- 既に作成されている場合は自分が閲覧可能な範囲のページが表示される。
- 日記の新規作成周りのメール通知に関しては、`日記の新規作成ページ`に記載している。
### 日記を書く最後のユーザーではない場合
- `次の人に渡すボタン`をクリックしたユーザー
- ダッシュボードに遷移すると、サクセスメッセージが表示される。
- 遷移したタイミングで、日記の送信先のユーザーにメールで通知が届く。
- `日記を渡されたユーザー`
- メールにリンクが記載されている。
- リンクをクリックしたユーザーは、`グループページのトップページ`に遷移される。
- `日記詳細画面`に遷移する。

## ポストの仮保存ページ
- 日記ステータスが`進行中`かつ`自分の順番である`かつ、`ページを作成したが、投稿する前に保存した`場合、日記をWIP状態で保存することができる。

# いつから始めるか
7/11(木)から、rails new!

# どこまでやるか
- アカウント登録
- グループの作成
- ログイン/ログアウト
- 日記の作成
- 日記の一覧
- 日記の詳細
- ポストの投稿

までを1ヶ月で実装する。
それ以上は個人！

# 意気込み
- 友達が9月に留学に行ってしまうので、そこまでに交換できるようにしたい...!
- 本当は、フロント拘りたいけど難しそう:sob:
- 一年間で形にするぞい