日本語でまなぼ！twitter風SNSアプリ開発！（MVCフレームワーク使用）

※当記事では、コードを一切使用しません。日本語で全て解説します。


今回はtwitterみたいなSNSアプリ開発を簡単に説明したいと思います！

自分はLaravelで作っていたので、MVCフレームワークを使う前提で解説します！


# この記事の最終ゴール

超簡易的なSNSアプリの作り方が頭で理解できることを目的としています。コードがかけるかどうかは別ですが、頭の中の日本語をプログラミング言語に翻訳するだけなのでハードルは結構下がると思います。

できること

- ログインor会員登録・ログアウトができる
- 誰かがツイートしたら全部タイムラインに反映される

これだけです。

イメージ画像はこちら

![スクリーンショット 2019-02-28 13.15.39.png](https://qiita-image-store.s3.amazonaws.com/0/238739/d267f7e3-87db-494c-59f6-1a98334d1e21.png)

# 注意点

MVCフレームワークを使用することを前提としています。

Laravelしか触ったことないので、他のMVCフレームワークには当てはまらないことがあれば教えてください！

# 早速作っていきましょう！！

## テーブル設計

最低限必要なものはユーザーを保管するusersテーブルとツイート内容を保管するtweetsテーブルです。

userが一人に対して、tweetが複数あるという1対多の形のリレーショナルデータベースです。

サポートURL: [リレーショナルデータベースとは](https://wa3.i-3-i.info/word11770.html)

idはいずれも、auto incrementで自動で番号が割り当てられるようにする。
created_atは新しいユーザーが作られた時、新しいツイートが作成された時の日時を入れるようにします。updated_atはいずれもデータが更新された時の最終更新日時を入れます。

![スクリーンショット 2019-03-02 14.07.03.png](https://qiita-image-store.s3.amazonaws.com/0/238739/69ea85c7-4b43-7de1-3f2c-bfd855cf79d6.png)


## 必要なページ

超簡易的なので、必要なページはこれだけです！
ユーザーの名前とかメールアドレス変更とかしたかったらそれ用のページが必要ですね！（あとで補足で説明します。）


![スクリーンショット 2019-03-02 14.04.25.png](https://qiita-image-store.s3.amazonaws.com/0/238739/3b2b54c4-ff87-eea6-94f0-ef31e84931b6.png)


## 処理の概要

![スクリーンショット 2019-03-02 14.09.01.png](https://qiita-image-store.s3.amazonaws.com/0/238739/6e9e2daa-2eb1-5ac8-cd2c-be53c932d049.png)

サポートURL: [HTTPとPOSTとGET](https://qiita.com/Sekky0905/items/dff3d0da059d6f5bfabf#get%E3%81%A8post)

### 処理詳細（ログイン）

もうなんかこれ以上説明しようがないような気がする。。。

バリデーションやログインのやり方は使用するフレームワークによって違うと思うので、それぞれ調べてください〜

![スクリーンショット 2019-03-02 14.26.43.png](https://qiita-image-store.s3.amazonaws.com/0/238739/417de29e-85cc-ed69-6d16-d9e29fd502b1.png)


### 処理詳細（会員登録）


![スクリーンショット 2019-03-02 14.26.51.png](https://qiita-image-store.s3.amazonaws.com/0/238739/1083c1ba-fc57-040c-ba3b-e6ffd4d1a1d9.png)


### 処理詳細（タイムライン）

ツイートをした時に、ツイート内容をtweetsテーブルに保存して`/timeline`にリダイレクトすると、
ビューにツイートが表示されているんですね〜〜

これがSNSの一番の特徴だと思います。

![スクリーンショット 2019-03-02 14.32.02.png](https://qiita-image-store.s3.amazonaws.com/0/238739/9e04f051-85f6-d6bd-47cd-9e536872911a.png)


# 補足（もっと高度なSNSを作るためには）

簡易的なSNSの作りかたは以上です。
でも、もっと高度なSNS作りたい人向けにもう少し説明します〜！


## twitterみたいに、スクロールをするとツイートを読み込んで表示してくれるようにする

あれ、`無限スクロール`っていうらしいです。
スクロールしたら、コンテンツを読み込んでくれるので、無限にスクロールできるねーってことだと思いますが、、、

jscroll.jsなど、様々なライブラリを活用して、作成することができます。

論理としては、こんな感じです。

1. 1ページに（例えば）30件のツイートを表示するとする
2. 下にスクロールしていって一番最後までツイートを見た
3. jscroll.jsが次の30件を読み込んで表示してくれる
4. さらに下にスクロールしていって一番最後までツイートを見た
5. jscroll.jsが次の30件を読み込んで表示してくれる
6. 表示できるツイートが全部なくなったら終わり


なぜこの仕組みがいいのかというと、
超大量のツイートを最初に全部取得して全部表示していると、超重くなっちゃうんですよね。
それを回避するためです！


# ユーザー情報を設定する画面を追加する

ツイッターアイコンみたいな感じでアバターを登録したいとか
名前を登録して、ツイートに併せて表示したいとか、
ユーザー情報の設定画面は欠かせないと思います。

そんなに難しくないので、アイコンの部分だけ説明します。


1. アイコンが設定される
2. コントローラで、写真を任意のディレクトリに移動する
3. usersテーブルのavatar_urlカラムに移動した写真があるURLを保存する
4. ビューでHTMLのimgを使ってsrcにそのavatar_urlを入れれば表示されます！

# タイムラインでツイート検索をする

検索は思ったより簡単です！

例えば、ツイート内容を検索する場合は、

1. 検索したい文字を入力する
2. コントローラにpostで送信
3. コントローラでpostで受け取り、バリデーションする
4. sql(SELECT * FROM user WHERE name LIKE "%検索したい文字%";)を実行してデータベースから該当するツイートを取得
5. 取得したツイートをタイムラインで表示する

サポートURL: [【SQL】意外と簡単!これならわかるLIKE句でのあいまい検索](https://www.sejuku.net/blog/73619#i-2)

# 終わりに

日本語と図だけで説明しましたが、いかがだったでしょうか...？

コードの書き方以前にそもそもあれってどうやって作ってるんだ？っていうのは多いと思います。
SNSの作り方がわかっていただければ幸いです。

Laravelですが、SNSの作り方を、コードで解説している記事も作成しましたので、
こちらも参考にしていただければと思います！

[日本語でまなぼ！twitter風SNSアプリ開発！（MVCフレームワーク使用）](https://qiita.com/n_oshiumi/private/8993ab268209d19f052e)