---
# System prepended metadata

title: 概要

---

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

# 背景
- ユーザー
    - 仲のいい大学生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 | 過去のページ画面。左側に作成した日記内容が表示され、右側に過 

##  アカウントを作る
![s_20190711_110101097.jpg (22.3 kB)](https://img.esa.io/uploads/production/attachments/11448/2019/07/11/59152/23f85d94-cd34-4552-ad0a-4b43b308435c.jpg)
- `トップページ`からユーザーのメールアドレスを入力する。
    - メールアドレスの重複があるとエラーとなる。
        - 登録画面に再リダイレクトされる。
        - エラーメッセージが表示される。
    - メールアドレスに不備があるとエラーとなる。
        - @がない。
        - 一般的なメールアドレスを表現する正規表現と一致しない。
        - 登録画面に再リダイレクトされ、エラーメッセージが表示される。
- 正しく入力されていると、`Sign Upボタン`をクリックすると`メール確認画面`が表示される。

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

## グループを作る
![s_20190711_110122534.jpg (16.5 kB)](https://img.esa.io/uploads/production/attachments/11448/2019/07/11/59152/87b6786e-6e20-4dc6-8459-8db3df2b58d6.jpg)
 - `アカウント登録者`はグループ名とグループid、名前、パスワードを入力する。正常に入力した場合、`Nextボタン`をクリックすると`ダッシュボード画面`に遷移する。
     - グループ名、グループid、名前、パスワードのいずれか一つでも空白の場合はエラーとなる。
     - グループidがすでに使われている場合はエラーとなる。
     - パスワードが8文字以下の場合はエラーとなる。
         - エラーの場合は`グループ作成画面`に再リダイレクトされ、エラーメッセージが表示される。
- グループを作成したユーザーを`管理者`とする。
     - 管理者のみが、ユーザーの招待・削除の権限を持っている。

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

#### 招待モーダルが表示される
![s_20190711_110105915.jpg (16.8 kB)](https://img.esa.io/uploads/production/attachments/11448/2019/07/11/59152/0a9ce811-ae9e-460b-bc6b-342c60146bf8.jpg)

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

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

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

#### 日記の表示
![s_20190711_110128489.jpg (15.8 kB)](https://img.esa.io/uploads/production/attachments/11448/2019/07/11/59152/f9d89f34-e87c-41dd-b4c6-ceadfc93c9ae.jpg)
-  ダッシュボードのトップには`Startボタン`が表示される。
- クリックすると、`日記の新規作成ページ`に遷移する。
- 日記の新規作成はグループにいる全てのユーザーがクリックできる。

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

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

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

##### `進行中`の日記が存在していない場合
![s_20190711_110138836.jpg (15.4 kB)](https://img.esa.io/uploads/production/attachments/11448/2019/07/11/59152/a0416902-fbb0-4b7e-be66-1d24f6551bba.jpg)

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

##### 日記が`進行中`の場合
![s_20190711_110146830.jpg (18.9 kB)](https://img.esa.io/uploads/production/attachments/11448/2019/07/11/59152/bf784ee8-55f0-4ba2-bfcc-e883cb3eaa0d.jpg)

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

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

## ユーザーを招待する
![s_20190711_110207255.jpg (15.6 kB)](https://img.esa.io/uploads/production/attachments/11448/2019/07/11/59152/c78413f7-e638-49ad-9ace-3d520cec0768.jpg)

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

##  日記詳細画面


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

### 日記ステータスが`進行中`かつ、記述順が`自分`の場合
![s_20190711_110219056.jpg (18.2 kB)](https://img.esa.io/uploads/production/attachments/11448/2019/07/11/59152/df0d7d66-ee33-44c8-9117-38e2427f11d4.jpg)

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

### 日記ステータスが`進行中`かつ、記述順が`自分ではない`の場合
![s_20190711_110229905.jpg (17.7 kB)](https://img.esa.io/uploads/production/attachments/11448/2019/07/11/59152/37ac13fe-4dab-4285-865a-1be94a979caa.jpg)

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

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

## 日記の新規作成画面
![s_20190711_110224317.jpg (17.2 kB)](https://img.esa.io/uploads/production/attachments/11448/2019/07/11/59152/eb8e975e-a341-4c27-830b-7fad898c592d.jpg)

- `タイトル`,  `周（ポスト数）`, `メンバー`を設定する。
    - タイトル
        - 0文字の場合はエラー
        - `日記の新規作成画面`に再リダイレクトされ、エラーメッセージが表示される。
    - 周
        - 入力された数字が0以下、100以上の場合はエラー
        - `日記の新規作成画面`に再リダイレクトされ、エラーメッセージが表示される。
     - メンバー
         - メンバーの追加
             - グループに登録されているメンバーから、交換日記したいメンバーを追加することができる。
                 - メンバーが1人（自分のみ）の場合はエラーとなる。
                 - 日記の新規作成画面にリダイレクトされ、招待モータルが表示される。
         - メンバーの削除
             - 日記の新規作成画面で、追加したメンバーを削除することができる。
             - ただし、日記が作成されたあとにメンバーを削除することはできない。
             
- 表示される項目
     - `順番`
         - 順番はユーザーが設定せずに、ランダムで決まる。
         - 一番最初の順番は日記の作成者とする。
- 正しく入力したあと、`日記を始めようボタン`をクリックすると、`ポスト新規作成画面`に遷移する。

## ポストの新規作成ページ
![s_20190711_110236812.jpg (17.2 kB)](https://img.esa.io/uploads/production/attachments/11448/2019/07/11/59152/09ce7daf-9b45-45f3-be2f-e8bf2a057169.jpg)

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

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

### 日記を書く最後のユーザーの場合
![s_20190711_110151695.jpg (17.2 kB)](https://img.esa.io/uploads/production/attachments/11448/2019/07/11/59152/6b12c74c-ebdf-4f3f-bd38-700616551418.jpg)

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

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

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

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

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

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