人生のトロフィーを記録するウェブサービスのプロトタイプを設計した

ゲームのトロフィー機能のように、人生における実績をトロフィーとして記録するウェブサービスをつくりたいという気持ちを数年前から抱いています。
自分が今までつくってきたものと比べて規模が大きいものになりそうなので、まずはプロトタイプからつくることにしました。
個人開発では初めてそれなりに設計をしてからつくり始めたので、今回は設計フェーズを振り返ってみます。

前回の記事

名前を決める

まずは名前をつけねばということで、安直ですがMy Trophyとしました。
いい感じのドメインが取れたら、ドメイン名自体をサービス名にするのもありですね。

ユビキタス言語を定義

サービス内で使用する用語について、ユビキタス言語を定義しました。

日本語 英語 品詞 説明
ユーザー user 名詞 サービスの利用者
トロフィー trophy 名詞 人生においてなにかを達成した証
達成 achieve 動詞 トロフィーの条件を満たす

妙に少ないですが、ひとまず変数名に悩みそうなものを定義していたものと思われます。

画面案を作成

自分の脳内イメージを可視化するために、手書きで画面案をつくりました。
レスポンシブデザインにすることを想定し、最初からスマホ基準でデザインしています。
また、僕はUIフレームワークとしてVuetify.jsを採用することが多いので、マテリアルデザインを意識しています。

  • ホーム(未ログイン時)

f:id:munieru_jp:20201011175112j:plain

  • ホーム(ログイン時)

f:id:munieru_jp:20201011175115j:plain

  • トロフィー

f:id:munieru_jp:20201011175118j:plain

  • 作成/編集

f:id:munieru_jp:20201011175148j:plain

ページ一覧を作成

サービスを構成するページの一覧をつくりました。

名前 パス 認証 説明
インデックス / サービスの説明とログインボタンを表示
ホーム /home 自分のトロフィーの一覧を表示
ユーザー /user/:id ユーザーのトロフィーの一覧を表示
トロフィー /trophy/:id トロフィーを表示

/homeというパスを定義しているのは、Twitterなどのサービスの最近の傾向にならっています。
未ログイン状態で/homeにアクセスすると/にリダイレクトし、ログイン状態で/にアクセスすると/homeにリダイレクトするといった具合です。
画面案ではトロフィーの作成/編集を行なう画面もありましたが、それはページ遷移ではなくダイアログで実装することにしました。

アクター一覧を作成

サービスを利用するアクターの一覧をつくりました。

アクター 説明
ユーザー すべてのユーザー
未ログインユーザー ログインしていないユーザー
ログインユーザー ログインしているユーザー

管理者アカウントのようなものはないので、単にログインしているかしていないかという分け方です。

ユースケース一覧を作成

アクターごとのユースケースの一覧をつくりました。

名前 アクター
他人のトロフィーの一覧を表示する ユーザー
他人のトロフィーを表示する ユーザー
他人のユーザーを表示する ユーザー
ログインする 未ログインユーザー
ログアウトする ログインユーザー
自分のトロフィーの一覧を表示する ログインユーザー
自分のトロフィーを表示する ログインユーザー
自分のユーザーを表示する ログインユーザー
自分のトロフィーを投稿する ログインユーザー
自分のトロフィーを更新する ログインユーザー
自分のトロフィーを削除する ログインユーザー

プロトタイプということで必要最低限の機能に絞っていますが、実際には自分のユーザー情報を更新したり、他人をフォローしたりする機能がほしいですね。

API一覧を作成

サービスで利用するAPIの一覧をつくりました。

メソッド パス 認証 説明
GET /users 条件にマッチするユーザーの一覧を取得する
POST /users ユーザーを作成する
GET /users/:id IDでユーザーを取得する
GET /trophies 条件にマッチするトロフィーの一覧を取得する
POST /trophies トロフィーを作成する
GET /trophies/:id IDでトロフィーを取得する
PUT /trophies/:id トロフィーを更新する
DELETE /trophies/:id トロフィーを削除する

いわゆるRESTful APIってやつです。

テーブル定義を作成

サービスで使用するデータベース(MySQL)のテーブル定義をつくりました。

  • users
カラム名 PK NN UQ 外部キー 説明
id INT unsigned ID
name VARCHAR(50) 名前
email 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