前のパートに戻る 完了して次のパートへ  

  0-7 SNS風Webサービスの設計を考える

このパートでは、本教材のSNS風Webサービスがどのような設計であるかを解説します。

なお、本パートで説明している内容を全て覚えてから先に進む必要はありません。

各章でコードを書きながら、徐々に機能を把握していけば充分です。

各章を進めていて、もしWebサービスの全体像がわからなくなった時には、このパートの内容を見返してもらえればと思います。

画面


ここから各画面のイメージと機能の概要を説明します。

1. ナビバー

各画面の上部で共通して表示するナビバーです。

ログイン前であれば、ユーザー登録・ログインが行えます。

ログイン後であれば、記事投稿が行えます。

また、ユーザーアイコンを押すと、マイページ・ログアウトのメニューが表示されます。

なお、マイページとは、ログイン中のユーザー自身の「ユーザーページ」のことです。

2. 記事一覧画面

記事一覧は、本教材のWebサービスのトップページであり、投稿された記事を新しいものから順に表示します。

自分が投稿した記事であれば、各記事右上のメニューから更新・削除が行えます。

また、

  • 記事タイトルを押すと、記事詳細画面へ
  • ユーザーアイコンやユーザー名を押すと、ユーザーページへ
  • 各タグを押すと、タグ別の記事一覧画面へ

遷移します。

その他、ハートマークを押すと、いいねができます(ログイン中のみ)。 なお、本教材のWebサービスでは自分が投稿した記事に対してもいいねができる仕様としています。

3. 記事詳細画面

記事詳細は、記事一覧での記事1件分を表示します。

それ以外は、記事一覧と同じです。

4. 記事投稿・更新画面

記事投稿画面では、タイトル、タグ、本文を入力し、投稿するボタンを押すと記事が投稿できます。

記事更新画面も、ボタン名が「更新する」であること以外は同じです。

5. タグ別記事一覧画面

タグ別記事一覧画面では、タグ名と記事の件数を表示します。

それ以外は記事一覧画面と同じです。

6. ユーザーページ

ユーザーページでは、そのユーザーのフォロー数、フォロワー数、書いた記事一覧を表示します。

また、そのユーザーをフォロー・フォロー解除するためのボタンが表示されます。

ただし、表示されているユーザーがログイン中のユーザー自身の場合はフォローボタンは表示されません。

いいねタブを押すと、そのユーザーがいいねした記事一覧が表示されます。

フォロー数を押すと、そのユーザーがフォロー中のユーザー一覧が表示されます。

フォロワー数を押すと、同様にそのユーザーのフォロワーの一覧が表示されます。

7. ユーザー登録画面

ログイン前であれば、ユーザー登録が行えます。

ユーザー登録は、以下の2つの方法が選べます。

  • Googleアカウントを使う
  • ユーザー名、メールアドレス、パスワードを入力して登録する

ユーザー登録後は、ログイン状態になり、トップページ(記事一覧画面)へ遷移します。

ただし、Googleアカウントを使った登録の場合は、さらに以下の画面でユーザー名を登録する必要があります。

(メールアドレスに関しては、Googleアカウントのメールアドレスが自動入力されます)

8. ログイン画面

ログイン画面では、以下の2つの方法からログインが行えます。

  • Googleアカウントを使う
  • メールアドレス、パスワードを入力してログインする

9. パスワード再設定メール送信リクエスト画面


ログイン画面の「パスワードを忘れた方」を押すと、以下の画面へ遷移します。

この画面でメールアドレスを入力し、メール送信ボタンを押すと、パスワード再設定画面のURLが記載されたメールが届きます。

10. パスワード再設定画面


メールのURLをブラウザで表示すると、以下のパスワード再設定画面が表示されます。

ここでパスワードを再設定すると、ログイン状態になり、トップページ(記事一覧画面)へ遷移します。

テーブル設計


次に本教材のWebサービスで扱う、データベースの各テーブルについて説明します。


1. usersテーブル

usersテーブルはユーザーを管理します。

usersテーブルはLaravelに最初から用意されているテーブルですが、本教材では以下の2点を変更しています。

1点目はnameにユニーク制約を追加しています。

ユニーク制約とは、このテーブル内で他のレコードと重複させないという制約です。

本教材では、nameをtwitterで言うところの@から始まるユーザー名のようにID的に使用するため、ユニーク制約を追加します。

なお、データベースではテーブル内のデータ1件1件のことを一般的にレコードと呼びます。

2点目はpasswordにnull許容を付けて、パスワードが空の状態を認めています。

これは、Googleアカウントを使ったユーザー登録の場合、本教材のWebサービスではパスワードを設定不要にしているためです。

2. articlesテーブル

articlesテーブルは記事を管理します。

3. likesテーブル

likesテーブルは「誰が」「どの記事を」いいねしているかを管理します。

usersテーブルとarticlesテーブルを紐付ける中間テーブルとなります。

4. tagsテーブル


tagsテーブルはタグ名を管理します。

同じタグ名のレコードが重複することの無いよう、nameにはユニーク制約を付けます。

5. article_tagテーブル

article_tagテーブルは「どの記事に」「何のタグが」付いているかを管理します。

articlesテーブルとtagsテーブルを紐付ける中間テーブルとなります。

6. followsテーブル

followsテーブルは「どのユーザーが」「どのユーザーを」フォローしているかを管理します。

usersテーブルとusersテーブルを紐付ける中間テーブルとなります。

ER図

以上のテーブルをER図として整理すると、以下の通りとなります。

ER図の見方がわからない方は以下のサイトなどを参考にしてください。

以上で、本章は終了です。

次の章からは、記事一覧画面を作成していきます。

議論

0 質問

このコースの評価は?