自分流

なんちゃってエンジニアによる自分用メモ

お題で開発

まずは設計【お題で開発:1】

投稿日:

お題が決まりました!

 

何かしらの投稿サービス
期間一ヶ月

 

と言うわけで作っていくんですが、

いきなりプログラムを書き出すと漂流してしまうので道しるべを書きます。

開発の前段階の設計と呼ばれるフェーズですね。

 

やってみるとわかりますが頭の中が整理され、何を作るのかが明確になります。

この工程をやらずにプログラムを書き出すと、途中で挫折する可能性が増えるので、きちんとやっておきましょう。

 

僕はWebサービスを一人でリリースする。というのは初なので制作工程から全て実験です。

ツッコミ大歓迎なのでよろしくお願いします。

 

アイデア出し

まずここですね。

何を作るかわかっていないのに作れるわけありません。

今回ですと「投稿サービス」、「制作期間一ヶ月」という決まりごとがあります。

今回は期間優先なので、自分の実力を鑑みて無理のない範囲のものを作ります。

 

とはいえ、面白くないもの作ってもしかたないので、ちょっとだけひねりました。

いろんな案が浮かんでは消えますw

 

自分の中で出た案は

  • 画像投稿サイト
  • 音声投稿サイト
  • 動画投稿サイト
  • ゲーマーだけのSNS
  • Twitterクローン

あんまりひねりありませんが
色々考えた結果、Twitterクローンを作ることにしました。

 

設計

作るものが決まったら設計します。

設計なんて難しそう!!って僕も思ってましたがそんなこともなく、これから作るものはこんな感じだよね。っていう参考資料ですね。

まぁ一人で作ってるんだし、完璧求めてても仕方ないのでゆる〜くいきましょう。

 

画面一覧

どんな画面構成なのか頭の中で簡単に考えます。

慣れてくればその状態で実装できるかもしれません・・・が!

頭の整理もかねて一回アウトプットした方がいいです。

 

まずはこんな感じで必要となる画面と、画面の遷移を起こします。

 

仕事なら何かしらのツールで電子化した方がいいんでしょうが、一人でやる分には手書きだけでいいと思います。

大きなもの、変更が大きくかかるようなものであれば、一人で作るにしても清書した方がいいとは思います。

 

本来はここでのアウトプットがワイヤーフレームだったりするんでしょうね。

 

機能一覧

画面と同時に必要となる機能を洗い出します。

  • 新規登録
  • ログイン
  • プロフィール編集
  • プロフィールに画像投稿
  • 一覧表示
  • 新規つぶやき
  • つぶやきへのコメント
  • コメントへのコメント
  • つぶやき、コメントに画像添付
  • いいね

 

今回作らない機能

  • Eメールアドレスは使わない(今は管理できない。今後使用したい)
  • つぶやきの削除(整合性大変そう)
  • コメントの削除(整合性大変そう)
  • つぶやき、コメントの編集(サービス的に不要)
  • Twitter、Facebook認証(そのうち)
  • 検索(仕様考えるの大変そう。できればやる)
  • フォロー

 

作る機能と同じぐらい、作らない機能を明確化するのは大事です。

 

設計全般に言えることですが、慣れれば精度は上がります。

これはどんなことにでも言えますね。

 

DB設計

必要な画面・機能が出揃ったら、必要となるデータベースの設計をします。

とはいえ、画面が出揃っていると結構簡単に作れると思います。

例えばプロフィール画面を見ると、ユーザーが持つべき情報がわかります。

  • ユーザー名
  • ユーザーID
  • パスワード
  • 画像
  • プロフィール

これらを元にデータベースを考えていきましょう。

説明は後述

 

こちらはER図という書き方が一般的なので、WWW SQL Designer というツールを使わせてもらい作成しました。

WWW SQL Designer のデモ

 

各テーブルの説明

ありがちなデータベースになりました。

各テーブルの内容は以下の通り

 

users

ユーザー情報を管理する

id(PK) 主キー
login_id ログインID、ログイン時に必要。一意な値
password パスワード、ログイン時に必要
name ユーザーの呼称。一意な値でなくてOK
profile ユーザーの説明文
image 画像のパス
created データの作成日時
updated  データの編集日時

 

tweets

投稿情報を管理する

id(PK) 主キー
user_id(FK) usersのid、どのユーザーか。
kami, naka, shimo 投稿の本文
image 画像のパス
created データの作成日時
updated  データの編集日時

 

comments

投稿に対するコメントを管理する

id(PK) 主キー
user_id(FK) usersのid、どのユーザーか。
tweet_id(FK) 投稿のid、どの投稿か。
comment_id(FK) コメントのid、どのコメントか。
message コメント本文
image 画像のパス
created データの作成日時
updated  データの編集日時

 

like

いいねを管理する

id(PK) 主キー
user_id(FK) usersのid、どのユーザーか。
tweet_id(FK) 投稿のid、どの投稿か。
comment_id(FK) コメントのid、どのコメントか。
created データの作成日時
updated  データの編集日時

 

 

 

なんとなーく頭の中でプログラムを考えながら、色々と想像して作ってみました。

commentsテーブルのcomment_idなんてアンチパターンな気がしますが、考えすぎても仕方ないので、とりあえずこれで作っていこうと思います。

 

※PK(primary key):主キー。一意な値。今回はAUTO_INCREMENTで連番を振る

※FK(foreign key):外部キー。一意な値。他のテーブルのPK

 

まとめ

まずは設計!

何を作るかを決めた後は画面を考えてみるのがいいと思います。

画面が決まれば機能が決まり、機能が決まればデータが決まる。

ここで作った設計図は開発する際においての道しるべになります。

 

ここでの工程が上流工程と呼ばれる部分になりますね。

最初から全てを決めておくのは難しいかもしれませんが、考えてみているかどうかで後の工程の進みやすさが段違いになります。

 

次からはいよいよ作っていきましょう!

 

-お題で開発
-, , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

環境構築【お題で開発:2】

前回設計が終了したので、開発していき・・・たいところですが。 開発環境をきちんと準備しておかないと、のちのち死にます。 昔であれば、XAMPPやLAMPP、MAMPでテスト環境を開発機に直に構築してい …

プロフィールの編集機能の実装【お題で開発:5】

前回ログイン機能を作りました。 今回はプロフィールの編集機能を作っていきます。 これも基本的な部分ですね。     目次1 プロフィール編集機能に必要な機能1.1 画像のアップロー …

お題で開発はじめました 【お題で開発:0】

最近Twitterをはじめました!かじです。こんにちは。   定期的に新しい環境を学びたくなる僕は、入門書を一通り読んで満足してしまうのですが、正直身になっていないのでその先を常々悩んでいま …

ツイート一覧機能の実装【お題で開発:7】

前回ツイート機能を作りました。 今回はツイート一覧機能を作っていきます。   タイムライン を作ってみたいですが どういう仕組みかパッと浮かばないので、昔ながらの10件ずつ表示してページ送り …

ユーザーの新規登録機能の実装【お題で開発:3】

前回環境構築も済み、意気揚々と開発! あんまり頭の中で構築できておらず、 不安しかありませんがハマりながら作っていきます。 やればなんとかなるでしょうし、やらなければなんともならないですからね。 &n …

Top