ゲームのトロフィー機能のように、人生における実績をトロフィーとして記録するウェブサービスをつくりたいという気持ちを数年前から抱いています。
自分が今までつくってきたものと比べて規模が大きいものになりそうなので、まずはプロトタイプからつくることにしました。
個人開発では初めてそれなりに設計をしてからつくり始めたので、今回は設計フェーズを振り返ってみます。
前回の記事
名前を決める
まずは名前をつけねばということで、安直ですがMy Trophyとしました。
いい感じのドメインが取れたら、ドメイン名自体をサービス名にするのもありですね。
ユビキタス言語を定義
サービス内で使用する用語について、ユビキタス言語を定義しました。
| 日本語 | 英語 | 品詞 | 説明 |
|---|---|---|---|
| ユーザー | user | 名詞 | サービスの利用者 |
| トロフィー | trophy | 名詞 | 人生においてなにかを達成した証 |
| 達成 | achieve | 動詞 | トロフィーの条件を満たす |
妙に少ないですが、ひとまず変数名に悩みそうなものを定義していたものと思われます。
画面案を作成
自分の脳内イメージを可視化するために、手書きで画面案をつくりました。
レスポンシブデザインにすることを想定し、最初からスマホ基準でデザインしています。
また、僕はUIフレームワークとしてVuetify.jsを採用することが多いので、マテリアルデザインを意識しています。
- ホーム（未ログイン時）
- ホーム（ログイン時）
- トロフィー
- 作成/編集
ページ一覧を作成
サービスを構成するページの一覧をつくりました。
| 名前 | パス | 認証 | 説明 |
|---|---|---|---|
| インデックス | / | サービスの説明とログインボタンを表示 | |
| ホーム | /home | ✓ | 自分のトロフィーの一覧を表示 |
| ユーザー | /user/:user_id | ユーザーのトロフィーの一覧を表示 | |
| トロフィー | /trophy/:trophy_id | トロフィーを表示 |
/homeというパスを定義しているのは、Twitterなどのサービスの最近の傾向にならっています。
未ログイン状態で/homeにアクセスすると/にリダイレクトし、ログイン状態で/にアクセスすると/homeにリダイレクトするといった具合です。
画面案ではトロフィーの作成/編集を行なう画面もありましたが、それはページ遷移ではなくダイアログで実装することにしました。
アクター一覧を作成
サービスを利用するアクターの一覧をつくりました。
| アクター | 説明 |
|---|---|
| ユーザー | すべてのユーザー |
| 未ログインユーザー | ログインしていないユーザー |
| ログインユーザー | ログインしているユーザー |
管理者アカウントのようなものはないので、単にログインしているかしていないかという分け方です。
ユースケース一覧を作成
アクターごとのユースケースの一覧をつくりました。
| 名前 | アクター |
|---|---|
| 他人のトロフィーの一覧を表示 | ユーザー |
| 他人のトロフィーを表示 | ユーザー |
| 他人のユーザーを表示 | ユーザー |
| ログイン | 未ログインユーザー |
| ログアウト | ログインユーザー |
| 自分のトロフィーの一覧を表示 | ログインユーザー |
| 自分のトロフィーを表示 | ログインユーザー |
| 自分のユーザーを表示 | ログインユーザー |
| 自分のトロフィーを投稿 | ログインユーザー |
| 自分のトロフィーを更新 | ログインユーザー |
| 自分のトロフィーを削除 | ログインユーザー |
プロトタイプということで必要最低限の機能に絞っていますが、実際には自分のユーザー情報を更新したり、他人をフォローしたりする機能がほしいですね。
API一覧を作成
サービスで利用するAPIの一覧をつくりました。
| メソッド | パス | 認証 | 説明 |
|---|---|---|---|
| GET | /users | ユーザーの一覧を取得 | |
| POST | /users | ✓ | ユーザーを作成 |
| GET | /users/:user_id | ユーザーをIDで取得 | |
| GET | /trophies | トロフィーの一覧を取得 | |
| POST | /trophies | ✓ | トロフィーを作成 |
| GET | /trophies/:trophy_id | トロフィーをIDで取得 | |
| PUT | /trophies/:trophy_id | ✓ | トロフィーを更新 |
| DELETE | /trophies/:trophy_id | ✓ | トロフィーを削除 |
いわゆるRESTful APIってやつです。
テーブル定義を作成
サービスで使用するデータベース（MySQL）のテーブル定義をつくりました。
- users
| カラム名 | 型 | PK | NN | UQ | 外部キー | 説明 |
|---|---|---|---|---|---|---|
| id | INT unsigned | ✓ | ✓ | ID | ||
| name | VARCHAR(50) | ✓ | 名前 | |||
| VARCHAR(256) | ✓ | ✓ | メールアドレス | |||
| created_at | DATETIME | ✓ | 作成日時 | |||
| updated_at | DATETIME | ✓ | 更新日時 | |||
| deleted_at | DATETIME | 削除日時 |
- trophies
| カラム名 | 型 | PK | NN | UQ | 外部キー | 説明 |
|---|---|---|---|---|---|---|
| id | INT unsigned | ✓ | ✓ | ID | ||
| title | VARCHAR(13) | ✓ | タイトル | |||
| description | VARCHAR(280) | 詳細 | ||||
| achieved_on | DATE | ✓ | 達成日 | |||
| user_id | INT unsigned | ✓ | users.id | ユーザーID | ||
| created_at | DATETIME | ✓ | 作成日時 | |||
| updated_at | DATETIME | ✓ | 更新日時 | |||
| deleted_at | DATETIME | 削除日時 |
ORマッパーとしてGORMを使いたかったので、テーブル定義もそれに引っ張られている感がありますね。
トロフィーのタイトルを13文字にしているのは、Yahoo!ニュースの見出しが13文字なので、それだけあればギリギリ主題は伝えられるだろうという判断です。1
