Powered by NotePM

成果物設計解説資料

Published on 11/09/2022 11:17
  • 6100

成果物設計の4つのステップ

  1. 作りたいアプリを決める
  2. アプリに必要な機能をリストアップする
  3. レイアウトの設計をする
  4. データベースの設計をする
  5. デプロイする


①作りたいアプリを決める

まずはどのようなアプリを作るのか決めましょう。
就活に使う成果物に求められる最低限の条件は、アプリの制作背景を説明できることで、その上でオリジナリティのあるアプリが望ましいです。
なぜ作ろうと思ったのかを説明できて、尚且つ他にはないようなアプリ、若しくは既存のものと差別化できるようなアプリが理想となります。
(あくまでもスキル>アイデアであることは忘れずに)


↓ 今回は「音楽好きのための映画口コミサイト」を例に進めていきます。
083dfb40-21ff-11ed-a562-064017533d40.png?ref=thumb


Laravelで作れるアプリ例

  • ショッピングサイト
  • マッチングサービス
  • ブログサービス
  • 掲示板、口コミサイト
  • 予約サイト
  • SNS
  • チャットアプリ
  • Todoリスト
  • 勤怠管理システム
  • メールサービス

成果物のアイデアが浮かばない時は...

  • 自分の趣味や特技など、好きなことから探してみる
    • 特にニッチな分野は、既存のサービスも少ないため狙い目かも??
  • 日常生活を振り返って、不便に感じていることはないか探してみる
    • 起床から就寝までの行動の中で、何かしらのアプリを作成することで解消されるような「不便」はないか?
    • 自分だけではなく、家族や友人などにも話を聞いてみる
  • 普段利用しているサービスやアプリに、何か不満がないか考えてみる
    • 既存のアプリにはない機能を追加すれば、明確な差別化になるため◎


②アプリに必要な機能をリストアップする

作りたいアプリが決まったら、次にそのアプリに必要な機能をリストアップしましょう。
自分が実際に使うと仮定して、必要だと思う機能、あったら嬉しい機能を全て挙げます。
この時に、時間が足りない・自分のスキルでは実装不可能、などを理由に機能を減らす必要はありません。
まずは、自分が必要だと思った機能を全てリストアップしてください。


8a52e2c0-3006-11ed-b564-06720a606bea.png?ref=thumb



③レイアウトの設計をする

次に見た目の設計に取り掛かります。
カリキュラムでも使用したdiagrams.net、またはgoogle slideやpower pointなどを使用して、ワイヤーフレームを作成します。
ワイヤーフレームは、アプリに用意したいページの数だけ設計するのが理想です。例えば、メイン画面・詳細画面・作成画面・マイページの4ページを作成したい場合は、ワイヤーフレームも4ページ分作成できればベストです。

ここでは、色や余白の大きさなどの細かいところまで決める必要はありません(余力があれば、取り組みましょう)。

どのページにどの要素を配置するのか、をメインで考えるようにしてください。


  • トップページにサイドメニューバーを用意して、マイページに遷移できるようにする。
  • 投稿のユーザー名からユーザーのプロフィールを見れるようにする。

など、画面遷移の流れまで決めておくと、よりスムーズにコードを書き進めることができます。


注意点
設計に多くの時間を使えない場合は、ワイヤーフレームの作成は最低限に留めて、後述するデータベース設計に取り掛かってください。
設計の優先度としては、データベース設計>ワイヤーフレーム作成です。。


730a839c-2224-11ed-869c-064017533d40.png?ref=thumb
8469e92a-2224-11ed-aeeb-06720a606bea.png?ref=thumb



④データベースの設計をする

最後にER図を作成しましょう。ER図はデータベースのテーブルやリレーションなどを図式化したもののことです。データベース管理には様々な方法が用いられますが、今回は簡易的ER図を用います。

②アプリに必要な機能をリストアップするで、リストアップした機能を全て実装しようとした場合、下記のようなER図が出来上がります。

99c7a91c-3325-11ed-a00f-06720a606bea.png?ref=thumb


↑この図だけでは、それぞれのテーブル・リレーションの役割が分かりづらいと思うので、以降はそれぞれの機能と、その機能を実装するのに使用するテーブルとリレーションついて解説していきます。


1.ログイン機能・ユーザー新規登録機能

使用テーブル => usersテーブル
リレーション => なし
44a07f78-3009-11ed-9e53-064017533d40.png?ref=thumb
これは「カリキュラム9-3 認証機能」で実装したものと同じです。
認証機能で使用するusersテーブルは自分で新しく作るのではなく、デフォルトでついているusersテーブルを使用しましょう。
オリジナルのカラムを追加したい場合は、usersテーブルのマイグレーションを編集する形で追加してください。
今回のアプリでは、ユーザーの年齢とプロフィール画像を保存したいため、それぞれ追加していきます。


2.映画登録機能、映画ランキング機能

使用テーブル => moviesテーブル
リレーション => なし
88d513d2-3326-11ed-910f-06720a606bea.png?ref=thumb

映画の情報を格納するテーブルです。moviesテーブルには、画面に表示したい映画関連項目をカラムとして設定しています。
映画ランキング機能に使用するvote_averageカラムも追加しておきます。


3.映画音楽登録機能

使用テーブル => songsテーブル、moviesテーブル
リレーション => movies(1) : songs(多)
af2cb0b4-335b-11ed-944b-064017533d40.png?ref=thumb

一般的に、一つの映画には主題歌や劇中歌など複数の楽曲が存在していると思います。
そのため、映画音楽登録機能はmoviesテーブルとsongsテーブルの1体多のリレーションになります。
1対多のリレーションでは、「多」の方が外部キーを持ちます。そのため、今回はsongsテーブルにmovie_idという、moviesテーブルとのリレーションに使用する外部キーを追加しています。
外部キー名は紐付くテーブル名の単数系_idと決められているので、注意してください!


4.映画音楽アーティスト登録機能

使用テーブル => artistsテーブル、artist_songテーブル、songsテーブル
リレーション => artists(多) : songs(多)
6f47fd46-300e-11ed-92a4-064017533d40.png?ref=thumb
一つの楽曲を、複数の歌手が歌ったり、歌手・楽曲提供者など複数人の手によって楽曲が作り上げられるということはよくあります。そのため、songsテーブルとartistsテーブルの間には、まず1対多の関係が存在すると考えることができます。
一方で、1人のアーティストも複数の曲を歌ったり、複数の曲を作曲・提供することができます。そのため、artistsテーブルとsongsテーブルの間にも1対多の関係が存在すると考えることができます。

つまり、artistsテーブルとsongsテーブルの関係では、双方が「多」になる可能性があるので、この場合は多対多のリレーションとなります。

多対多のリレーションでは中間テーブルを作成しましょう。今回は、artist_songテーブルという中間テーブルを作成します。
中間テーブルでは紐付けたいテーブル同士の名前を単数系にして、アルファベット順で_(アンダーバー)で繋げましょう。

中間テーブル名の命名規則
 ◯ artist_song
 × song_artist
 × artists_songs
 × AritstSong
Copy

5.口コミ投稿機能

使用テーブル => reivewsテーブル、usersテーブル、moviesテーブル
リレーション => users(1) : reviews(多)movies(1) : reviews(多)
3d53045a-3326-11ed-a24f-06720a606bea.png?ref=thumb

口コミ機能では、誰がどの映画に対して投稿したものかを判別するために、リレーションを使用します。

まずはusers(1) : reviews(多) の関係から考えていきましょう。
1人のユーザーは複数の口コミを残すことができる一方で、1つの口コミを複数人のユーザーで投稿するというような機能は、今回は必要ないため、users(1) : reviews(多)の関係になります。

次にmovies(1) : reviews(多) について考えていきます。
1つの映画に対して複数の口コミがつくことはあり得ます。しかし、1つの口コミが複数の映画に紐づく、という機能はあまり一般的ではないため、movies(1) : reviews(多)とします。


6.口コミコメント投稿機能

使用テーブル => review_commentsテーブル、reviewsテーブル、usersテーブル
リレーション => reviews(1) : review_comments(多)users(1) : review_comments(多)
c65fbc86-301d-11ed-908d-06720a606bea.png?ref=thumb
口コミに対するコメントをつける機能です。
口コミと同様に、どのユーザーが投稿したのかを判別する必要があるので、usersテーブルとのリレーションを設定します。
また、どの口コミに対するコメントかを判別するために、review_commentsテーブルにreview_idカラムも追加しています。


7.口コミいいね機能

使用テーブル => likesテーブル、usersテーブル、reviewsテーブル
リレーション => users(多) : reviews(多)
3588e064-301f-11ed-86ec-064017533d40.png?ref=thumb
いいね機能は基本的に多対多のリレーションになります。ユーザーは複数の口コミに対していいねをつけることができて、口コミも複数のユーザーからいいねをつけてもらうことができるためです。

今回、注目してほしいのは中間テーブルの名前についてです。
中間テーブルの命名は原則として、紐付けたいテーブル同士の名前を単数系にして、アルファベット順で_(アンダーバー)で繋ぐことになっています。しかし、likesのように規則から外れた名前をつけることも可能です。

ただし、命名規則から外れた命名をする場合は、リレーションメソッドに設定を追記する必要があるので注意してください。
Laravel側はusersテーブルとreviewsテーブルの中間テーブルは、review_userという名前だと勝手に思い込んでくれています。しかし、今回はlikesという名前を使っているので、設定を上書きする必要があります。

参考資料 : 中間テーブルの命名について



⑤デプロイする

ある程度成果物の機能が実装できたら、作った成果物を世の中のユーザに使ってもらえるようにする、デプロイと呼ばれる作業を行うことが望ましいです。

デプロイを行う前は、アプリを使うためにはAWSでサーバを立ち上げる必要があり($php artisan serve --port=8080コマンド)、またアプリへの接続も製作者である学生の皆さん自身に限定されているため、例えば友達にアプリを使ってもらうなどのことができませんでした。デプロイを行った後はリンクが発行され、そのリンクからアプリにアクセスすれば世界中のどんな人でもみなさんが作ったアプリを使うことができるようになります

デプロイにはある程度の技術的知識が求められるため、カレッジに在籍している間にメンターのサポートを受けて行うことが望ましいです。カレッジではHerokuというサービスを用いてデプロイを行う方法を紹介していますので、成果物作成準備資料を参考にしながらメンターと相談しつつ進めてみましょう。