初めてのプライベート開発 その1

仕事で途中からの開発に参加した経験はあるのですが、要件定義からの開発をしてみたくてプライベートでWebアプリ制作に挑戦しています。

4月初頭にrails newしたはいいものの、要件定義やDB設計を調べたり、仕事でバタバタしたりして間が空いてしまい、rubyrailsのコマンドを少し忘れているので、もう一度開発環境準備から始めてここに備忘録を残していきたいと思います。

ちなみにプロジェクトは要件定義も含めてすべてBacklogで管理しています。仕事でも使っていて使いやすいので。

要件定義

まず作りたいと思っているのは、見た映画を登録して管理できる、映画のアルバムみたいなアプリです。
で、それにフォローやいいねとかできて他の人とシェアできるといいなと。

そのうえで、ざっくりとどういう仕様にしたいかというのをリストアップしていきました。

必要な機能を考える

要件を出してアプリの方向性が固まってきたら、最低限必要な機能を洗い出します。
こんな感じになりました。

  • 会員登録
    • ユーザー名
    • メールアドレス
    • パスワード
  • ログイン
    • ユーザー名またはメールアドレス
    • パスワード
  • ユーザー情報編集
    • ユーザー名
    • アカウント名
    • メールアドレス
    • パスワード変更
    • 自己紹介文
    • アカウント削除
  • 見た映画管理
    • 作品登録
      • タイトル
      • 作品画像(自動or手動)
      • 監督、出演者など(手動)
      • コメント(公開or非公開)
      • 好きなシーン(公開or非公開)
      • タグ
      • 鑑賞した映画館
      • 鑑賞した日
    • 閲覧
    • 編集
    • 削除
  • タイムライン
    • フォローする
    • フォローした人の最新投稿を表示
      • 投稿者のアイコンとユーザー名
      • 作品画像
      • タイトル
      • コメント
        • コメントのやり取りでコミュニケーションができる
      • 何分前に投稿したか
      • いいね
  • 検索
    • キーワード検索
      • タイトル、監督など、コメント、好きなシーンからマッチ
    • タグ検索
  • お問い合わせ
  • プライバシーポリシー
  • 利用規約

ワイヤーフレーム作成

出した機能をもとにワイヤーフレームを作り、実際の画面のイメージを膨らませていきます。
これはBacklogを開発しているヌーラボのサービスである、Cacooを使いました。
Cacooって4,5年前に使った頃はかなり動作が重くて保存がしにくかったので使わなくなっていたんですが、久しぶりに触ってみたら結構改善されていました。
FlashからHTML5に移行したからかな。なにはともあれサクッと図を作るには重宝するサービスです。

PCとスマホ用のワイヤーフレームを作って、スマホはProttでリンクを貼ったときのページ遷移も確認してなるべくページに漏れがないように作っていきました。
Prottずっと使ってみたくて、初めて使ってみましたが、ページ漏れがないか確認するにはとても便利です。リンクのアニメーションも選べて動作も軽いので使いやすいです。

画面遷移図作成

ワイヤーフレームでページのイメージができたので、Railsのクラス名、アクション名を意識しながらURLパスを決めていきます。
こんな感じにしました。

f:id:khanamoto:20180426174749p:plain

デザイン

デザインは同僚のデザイナーにお願いしました。
開発と同時進行でページのデザインとロゴ作成をしてもらいます。

データベース設計

次はたぶん最初の肝になるデータベース(DB)の設計です。
DBの本を数冊読んだり、仕事の開発でDBからデータ取ってきたり、テーブル構造みたりしてたのでRDBMSの基本は理解できてましたが、1から設計となるとまた少し違いました。

論理設計

エンティティの抽出と定義をして、テーブル形式で表現していきます。
一通りできたら正規化をしてテーブルを分割します。
それができたらER図にして、リレーションにおかしいところや漏れがないか確認します。
こんな感じになりました。

f:id:khanamoto:20180426175653p:plain

物理設計

パフォーマンス等の詳しい部分は正直まだ時間がかかりそうなので、とりあえず以下を行いました。

  • データ型の決定
  • 制約条件の決定


ここまでで要件定義、画面設計、DB設計が一通りできたので、開発環境を整備して開発に入っていきます。
次回は開発環境について書こうと思います。


参考

初めての個人WEBサービスを作り始める前にやるべき設計

Ruby on Rails実践講座 - Twitterの簡易クローンを開発する - シラバス(Cyllabus)

STEP2-9.データベースを設計してみる / チームラボ オンラインスキルアップ課題

若手プログラマー必読!5分で理解できるER図の書き方5ステップ