Chapter 20

Micropostアプリを作成しよう

前章まではTODOアプリを作成してきましたが、本章ではその集大成としてMicropostアプリを作成します。
仕様に沿って、これまでに学んだ知識や技術を駆使して自身の力でアプリを作成してください。
Micropostアプリとは、つぶやきを投稿できるアプリのことで、ツイッターの簡易版をイメージしていただければと思います。

Micropostアプリの仕様

データベースの設計について

  • データベース

    Micropost

  • テーブル

    「Micropost」データベースに以下の3つのテーブルを用意し、アプリに必要なデータをこれらで管理します。

    • users

      Field Type Null Key Default Extra
      id int unsigned NO PRI NULL auto_increment
      name varchar(255) YES UNI NULL
      email varchar(255) YES UNI NULL
      password varchar(255) NO NULL
      isAdmin tinyint(1) YES 0
      created_at datetime YES NULL
      updated_at datetime YES NULL

      各カラムに入るデータは以下です。

      • id: 識別子
      • name: ユーザ名
      • email: メールアドレス
      • password: パスワード
      • isAdmin: 管理者権限の有無
      • created_at: データ作成日時
      • updated_at: データ更新日時
    • microposts

      Field Type Null Key Default Extra
      id int unsigned NO PRI NULL auto_increment
      content varchar(255) NO NULL
      user_id int NO NULL
      created_at datetime YES NULL
      updated_at datetime YES NULL

      各カラムに入るデータは以下です。

      • id: 識別子
      • content: 投稿内容
      • user_id: 投稿したユーザのID
      • password: パスワード
      • created_at: データ作成日時
      • updated_at: データ更新日時
    • relationships

      Field Type Null Key Default Extra
      id int unsigned NO PRI NULL auto_increment
      follower_id int YES NULL
      followed_id int YES NULL
      created_at datetime YES NULL
      updated_at datetime YES NULL

      各カラムに入るデータは以下です。

      • id: 識別子
      • follower_id: フォローしたユーザのID
      • followed_id: フォローされたユーザのID
      • created_at: データ作成日時
      • updated_at: データ更新日時

機能について

Micropostアプリがもつ機能は以下です。

  • ユーザ登録機能
  • ログイン/ログアウト機能
  • 投稿機能
  • ユーザの過去の投稿を一覧で表示する機能
  • 自身の過去の投稿を削除できる機能
  • 投稿数を表示する機能
  • 投稿日時を表示する機能
  • 全ユーザを表示する機能
  • ユーザを削除できる機能 ※管理者限定機能
  • ユーザをフォロー/フォロー解除できる機能
  • フォロー/フォロワー数を表示する機能
  • フォロー/フォロワーユーザを一覧で表示する機能
  • 他ユーザのプロフィールを閲覧できる機能
  • ユーザ情報を更新できる機能

各ページについて

  • トップページ (ログイン前)

    • URL: /
    • ヘッダー
      • MicroPost: トップページへの遷移リンク
      • Sign in: サインインページへの遷移リンク
    • 表示内容
      • Wellcomメッセージ
      • Sign up npw!: サインアップページへの遷移ボタン
  • サインアップページ
    トップページ (ログイン前) のSign up npw!押下で表示される。

    • URL: /accounts/signup
    • ヘッダー
      • MicroPost: トップページへの遷移リンク
      • Sign in: サインインページへの遷移リンク
    • 表示内容
      • ユーザ名、メールアドレス、パスワード、パスワード再入力用の入力フォーム
      • Sign up: サインアップ実行ボタン
  • サインインページ
    ヘッダーの「Sign in」押下で表示される。

    • URL: /accounts/signin
    • ヘッダー
      • MicroPost: トップページへの遷移リンク
      • Sign in: サインインページへの遷移リンク
    • 表示内容
      • メールアドレス、パスワード用の入力フォーム
      • Sign in: サインイン実行ボタン
  • トップページ (ログイン後)

    • URL: /
    • ヘッダー
      • Home: トップページへの遷移リンク
      • Users: サインインページへの遷移リンク
      • Account (押下で以下のメニューがプルダウン形式で表示される)
        • Profile: 自身のプロフィールページへの遷移リンク
        • Settings: ユーザ情報変更ページへの遷移リンク
        • Logout: ログアウト実行リンク
    • 表示内容
      • 画面左
        • プロフィール画像 (押下でプロフィールページへ遷移するリンクになっている)
        • ユーザ名
        • view my profile: プロフィールページへの遷移リンク
        • 合計投稿数
        • 合計フォローユーザ数 (押下でフォローユーザ一覧ページへ遷移するリンクになっている)
        • 合計フォロワーユーザ数 (押下でフォロワーユーザ一覧ページへ遷移するリンクになっている)
        • 投稿内容入力フォーム
        • Post: 投稿実行ボタン
      • 画面右
        • Micropost Feed
          1投稿ごとに以下が表示され、さらにそれが全投稿分表示される
          • プロフィール画像 (押下でプロフィールページへ遷移するリンクになっている)
          • ユーザ名 (押下でプロフィールページへ遷移するリンクになっている)
          • 投稿内容
          • 投稿日時
          • delete: 投稿削除実行ボタン
  • フォローユーザ一覧ページ
    トップページ、またはプロフィールページ内の合計フォローユーザ数を押下で表示される。

    • URL: /users/[ユーザID]/following
      例: ユーザIDが1のユーザのフォローユーザ一覧ページのURLは /users/1/following となる
    • ヘッダー
      • Home: トップページへの遷移リンク
      • Users: サインインページへの遷移リンク
      • Account (押下で以下のメニューがプルダウン形式で表示される)
        • Profile: 自身のプロフィールページへの遷移リンク
        • Settings: ユーザ情報変更ページへの遷移リンク
        • Logout: ログアウト実行リンク
    • 表示内容
      • 画面左
        • プロフィール画像 (押下でプロフィールページへ遷移するリンクになっている)
        • ユーザ名
        • view my profile: プロフィールページへの遷移リンク
        • 合計投稿数
        • 合計フォローユーザ数 (押下でフォローユーザ一覧ページへ遷移するリンクになっている)
        • 合計フォロワーユーザ数 (押下でフォローユーザ一覧ページへ遷移するリンクになっている)
      • 画面右
        • Following
          1フォローユーザごとに以下が表示され、さらにそれが全フォローユーザ分表示される
          • ユーザ名 (押下でそのユーザのプロフィールページへ遷移するリンクになっている)
  • フォロワーユーザ一覧ページ
    トップページ、またはプロフィールページ内の合計フォロワーユーザ数を押下で表示される。

    • URL: /users/[ユーザID]/followers
      例: ユーザIDが1のユーザのフォロワーユーザ一覧ページのURLは /users/1/followers となる
    • ヘッダー
      • Home: トップページへの遷移リンク
      • Users: サインインページへの遷移リンク
      • Account (押下で以下のメニューがプルダウン形式で表示される)
        • Profile: 自身のプロフィールページへの遷移リンク
        • Settings: ユーザ情報変更ページへの遷移リンク
        • Logout: ログアウト実行リンク
    • 表示内容
      • 画面左
        • プロフィール画像 (押下でプロフィールページへ遷移するリンクになっている)
        • ユーザ名
        • view my profile: プロフィールページへの遷移リンク
        • 合計投稿数
        • 合計フォローユーザ数 (押下でフォローユーザ一覧ページへ遷移するリンクになっている)
        • 合計フォロワーユーザ数 (押下でフォローユーザ一覧ページへ遷移するリンクになっている)
      • 画面右
        • Followers
          1フォロワーユーザごとに以下が表示され、さらにそれが全フォロワーユーザ分表示される
          • ユーザ名 (押下でそのユーザのプロフィールページへ遷移するリンクになっている)
  • 自身のプロフィールページ
    このページは他ユーザも閲覧できる

    • URL: /users/[ユーザID]
      例: ユーザIDが1のユーザのプロフィールページのURLは /users/1 となる
    • ヘッダー
      • Home: トップページへの遷移リンク
      • Users: サインインページへの遷移リンク
      • Account (押下で以下のメニューがプルダウン形式で表示される)
        • Profile: 自身のプロフィールページへの遷移リンク
        • Settings: ユーザ情報変更ページへの遷移リンク
        • Logout: ログアウト実行リンク
    • 表示内容
      • 画面左
        • プロフィール画像 (押下でプロフィールページへ遷移するリンクになっている)
        • ユーザ名
        • view my profile: プロフィールページへの遷移リンク
        • 合計投稿数
        • 合計フォローユーザ数 (押下でフォローユーザ一覧ページへ遷移するリンクになっている)
        • 合計フォロワーユーザ数 (押下でフォロワーユーザ一覧ページへ遷移するリンクになっている)
      • 画面右
        • Micropost Feed
          1投稿ごとに以下が表示され、さらにそれが全投稿分表示される
          • プロフィール画像 (押下でプロフィールページへ遷移するリンクになっている)
          • ユーザ名 (押下でプロフィールページへ遷移するリンクになっている)
          • 投稿内容
          • 投稿日時
          • delete: 投稿削除実行ボタン (自身が閲覧する場合のみ表示される)
  • 他ユーザのプロフィールページ
    他ユーザのプロフィールページを閲覧した際はフォロー/フォロー解除ボタンが追加で表示される。
    その他の仕様や表示内容は自身のプロフィールページと同様。

    • フォローしていないユーザの場合

    画面右側上部にFollowボタンが表示され、押下でそのユーザをフォローできる

    • フォローしているユーザの場合

    画面右側上部にUnFollowボタンが表示され、押下でそのユーザのフォローを解除できる

  • ユーザ一覧ページ
    ヘッダーの「Users」押下で表示される。

    • URL: /users
    • ヘッダー
      • Home: トップページへの遷移リンク
      • Users: サインインページへの遷移リンク
      • Account (押下で以下のメニューがプルダウン形式で表示される)
        • Profile: 自身のプロフィールページへの遷移リンク
        • Settings: ユーザ情報変更ページへの遷移リンク
        • Logout: ログアウト実行リンク
    • 表示内容
      • All Users
        1投稿ごとに以下が表示され、さらにそれが (自身を含む) 全ユーザ分表示される
        • ユーザ名 (押下でそのユーザのプロフィールページへ遷移するリンクになっている)
        • delete: 押下でそのユーザを削除できるリンク ※管理者権限を持つユーザが閲覧するときのみ表示される
  • ユーザ情報変更ページ
    ヘッダーの「Account」->「Settings」押下で表示される。

    • URL: /accounts/edit
    • ヘッダー
      • Home: トップページへの遷移リンク
      • Users: サインインページへの遷移リンク
      • Account (押下で以下のメニューがプルダウン形式で表示される)
        • Profile: 自身のプロフィールページへの遷移リンク
        • Settings: ユーザ情報変更ページへの遷移リンク
        • Logout: ログアウト実行リンク
    • 表示内容
      • Update your profile
        • ユーザ名、メールアドレス、パスワード、パスワード再入力用の入力フォーム
        • Save changes: ユーザ情報更新実行ボタン

ログアウトについて

ログアウトは、ヘッダーの「Account」->「Log Out」押下で実行される。

ヘッダーについて

ヘッダーはログイン前とログイン後の2パターンある。

  • ログイン前

    • MicroPost: トップページへの遷移リンク
    • Sign in: サインインページへの遷移リンク
  • ログイン後

    • Home: トップページへの遷移リンク
    • Users: サインインページへの遷移リンク
    • Account (押下で以下のメニューがプルダウン形式で表示される)
      • Profile: 自身のプロフィールページへの遷移リンク
      • Settings: ユーザ情報変更ページへの遷移リンク
      • Logout: ログアウト実行リンク

それでは、上記の仕様に沿ってMicroPostアプリを作成してみましょう。