2017.1.8 まなびん
アプリ開発・ウェブ開発

非エンジニアでもわかるSNSアプリの作り方

サルでもバカでも小学生でもわかるようにSNSの作り方を解説したいと思います。

SNSとタイトルに入れましたが、SNSに限らず一般的なウェブサービスなら考え方は全く同じです。

非エンジニア向けにSNSやウェブサービスがどうやって作られているのかを書いているので、具体的なプログラミングの話ではなく概念的な話が中心です。ギークの方はQiitaでも見ておいて下さい(^_^;)

そもそもウェブサイトはどのように作られるのかを理解する

SNSをどうやって作るのかを理解する前にそもそもウェブサイトがなぜ見れるのかを理解しないといけません。

みんながいつも見てるウェブサイトはどういう仕組で見れるのか？小さなお店のホームページとFacebookとは何が違うのか？

そもそものところから理解しましょう。

ウェブサイトはネット上に公開されているhtml文章

基本的にはウェブサイトはインターネット上に公開されいる、サーバーに置かれているhtml文章です。

で、そのhtmlファイルをスマホやパソコンで見てるわけです。

パソコンやスマホはサーバーに対してhttpリクエストを送ります。

するとサーバーはhttpレスポンスを返します。

普通にインターネットを見るときは大体サーバーはhtml文章をレスポンスとして返します。

図にするとこんな感じ

サイトを作る人はhtmlファイルをサーバーに置いておいて、

サイトを見る人はhtmlファイルをスマホやパソコンで閲覧するわけです。

とても簡単です。

サーバーとは何なのか？

ざっくりいうとサーバーはインターネット上に公開しているコンピューターです。

その名の通りサーブ(serve)してくれるコンピューターです。(意味がわからない人は英和辞典で調べてね(^_^;))

何かを要求したら何かを返してくれます。

さっきの例はhttpリクエストに対してhttpレスポンスを返すウェブサーバーの仕事ですが、メールサーバーやデータベース・サーバーなどサーバーの中には色んな仕事をしてくれるサーバーがあり、これをサービスとかデーモンと呼んだりします。

色んなサービスを一台のサーバーに集約することもできますが、色んな理由で別の分散させたりすることもあります。

サーバのことを詳しく知りたい方はこちらの記事もおすすめです。

ウェブサイト制作で借りるべきサーバは？サーバの役割と種類を解説してみた。

サーバーとクライアントの関係

サーバーに対して、そこに接続する端末のことをクライアントと言います。

スマホも、パソコンもクライアントです。

図にするとこんな感じ

サーバーの話はまた別の記事で詳しく書きますが、基本的には一台のサーバーに色んなクライアントが接続して、サーバーが提供するサービスを受けることができるようなイメージです。

ちなみにサーバーも普通のパソコンと同じようにスペックがありますので、スペックに応じたキャパの上限があります。

一般的に「サーバーが落ちる」時はサーバーのスペック以上にクライアントからのリクエストがあって処理できなくなるような自体の場合です。パソコンがフリーズするのと同じようなイメージでサーバーも負荷をかけると止まります。

サーバーが止まらないように監視したり、止まったら原因を突き止めて修復するような作業を保守と言います。

話がそれましたが、ウェブサイトを作るにはまずサーバーを構築して立ち上げて、そこにサービスを追加して、その上にアプリ(SNSなど)を構築するって流れになります。

htmlとプログラミング言語

さてサーバーが返すhtmlをクライアントが描画してそれを閲覧するわけですが、一番手っ取り早くサイトを公開する方法はhtmlファイルをサーバー上に置いておくことです。

htmlはメモ帳でも書ける簡単なファイルなので、テキストエディタでhtml構文の文章を作って拡張子を.htmlにしたら公開できてしまいます。

htmlサンプル

<html>
<head><title>My html</title></head>
<body>
<h1>htmlとは</h1>
 <P>htmlとは</P>
 <a href="index.htm">トップページに戻る</a>
</body>
</html>

すごく簡単なのですが、htmlファイルは静的なファイルなので動的なページ生成ができないという欠点があります。

動的なページというのはどういうものかというと、条件に応じて出力する内容を変えるというものです。

動的なサイトの例を挙げましょう

グルメサイトの場合、「東京都」と言う絞込をした時に、条件分岐させて東京都のお店一覧を表示させる。

求人サイトの場合、「18歳〜20歳」までの求人情報を表示させる。

SNSだと、自分の友達一覧を表示させる。

などなど。

 

こういう動的な動作を行うために必要になってくるのがプログラミング言語です。

このあたりからちょっとウェブアプリっぽくなってくるし、小さな飲食店のウェブサイトとは違ってくるところです。

ウェブで使われるプログラミング言語

静的なテキストを出力することしかできないhtmlに対して、プログラミング言語では動的に出力する内容を変えたりすることができます。

簡単な例で言うとさっきのhtmlの例をこんな感じに編集して拡張子をphpにするだけで現在時刻を表示するページができあがります。

<html>
<head><title>My php</title></head>
<body>

<h1<php echo date(); ?></h1>
 <P>phpとは</P>
 <a href="index.php">トップページに戻る</a>
</body>

</html>

ウェブサービスには動的な描画が必要不可欠ですし、SNSやウェブサービスを作ろうとしたら同時にプログラミング言語の習得が必要不可欠になります。

弊社が基本的にウェブのサービスで使用する言語はRubyですが、そのほかにも色んな言語があります。

どんなプログラミング言語でも動的な動作をさせることが可能ですが、ウェブアプリに向いてる言語とそうじゃない言語があったり、また言語によって得意な分野や苦手な分野があったりします。

例えば、NodeJSという言語はSocket.IOというウェブソケットを簡単に扱える仕組みが用意されているので、双方向通信に向いていたりします。例えばチャットや通知機能を作る時には向いてるかもしれません。

PHPという言語は大体どんなサーバーでも動くことが多いので簡単なサイト作るのには大変便利です。

データベースがないと保存できない

プログラミング言語で動的な出力ができるようになっても、ユーザーの情報を保存できなければSNSとして機能しません。

そこでデータベースの登場です。

データベースは簡単に言うとテキストやらファイルやらを保存してくれるサービスです。

SNSで言うとプロフィールの登録をイメージしてもらえたらわかりやすいかもしれませんが、みんなのプロフィール情報を保存しているのがデータベースです。

有名なところでOracleやMySQL、PostgreSQLなどで、これらを操作するのもプログラミング言語です。

データベースがデータを保存してくれるおかげで、ユーザーが送信した内容などをサーバーに預けることができるわけです。

とあるグルメサイトのスクショですが、例えばこのスクショに表示件数が見える機能がありますが、これはデータベースに登録されている件数が表示されてるわけです。

ユーザーがクリックしたページで、プログラムがデータベースに問い合わせて結果を返してるイメージです。

図にするとこんな感じ↓

登録フォームを例にするとこんな感じです。

  1. ユーザーがサーバーに対してhttpリクエストを送る
  2. サーバーのプログラムが出力したhtml文章をhttpでレスポンスを返す
  3. html文章で書かれたフォームをクライアント端末が描画する
  4. ユーザーがフォームを入力して、またサーバーへhttpリクエストを送る
  5. サーバーがhttpリクエストに応答してデータベースに内容を書き込む

ちょっと複雑になってきましたが仕組みはとてもシンプルです。

  • ウェブサーバーがhtmlを返す
  • データベースが保存する
  • プログラムが操作する

データを保存することができるデータベースですが、当然データ数が多くなればなるほど重くなってきます。

規模が拡大してきたらさばけなくなるので、そこからはインフラエンジニアという役職の人が出てきたりと、プログラマー以外にも登場人物が増えてきます。

例えば、Facebookくらいになるとユーザー数だけで16億人以上らしいので、膨大なデータをコンマ数秒で検索してくる彼らの技術は凄いわけです。

モバイルアプリと連携させる

さてさっきのところまででウェブのSNSの作り方で必要な材料は大体そろったのですが、モバイルアプリになるとまた複雑になってきます。

モバイルアプリはブラウザ以外、基本的にはhtml文章を描画しません。

モバイルアプリはモバイルアプリの言語で書かれていますし、モバイルアプリはhtmlで書かれたフォームを使ったりすることもしないわけです。

でも、色んなクライアントでデータは共有する必要があるのでサーバーは必要になるわけです。

この場合のサーバーの仕事は、「データベースへの要求と応答」のみです。

モバイルアプリにはAPI開発が必要

APIの定義はちょっとややこしいですが、ざっくり言うとリクエストを送ったら何かを返す ものです。

例えば、例えば「自分のプロフィールをAPIにリクエスト」すると「自分のプロフィールを返してくれる」ものです。

ウェブ版はhtmlをレスポンスとして返してたわけですが、モバイルだとhtmlの描画をしないので、別のフォーマットをレスポンスします。

最近ではJSONが多いみたいです。

 

JSONはhtmlのように色んなタグとか画像の情報が入ってるわけではなくて、必要な情報だけがシンプルなフォーマットで書かれています。

jsonの例はこんな感じ

{
 "title": "Example",
   "type": "object",
   "properties": {
     "firstName": {
       "type": "string"
     },
    "lastName": {
      "type": "string"
    },
    "age": {
      "description": "Age in years",
      "type": "integer",
      "minimum": 0
    }
 },
 "required": ["firstName", "lastName"]
}

ブラウザ以外がサーバーからデータを取る時は必要なデータだけでいいし、そのデータを解釈しやすいフォーマットの方がいいのでJSONみたいな構文のデータでやりとりされるわけです。

モバイルアプリで登録フォームを例にするとこんな感じです。

  1. クライアント(今回の場合はモバイルアプリ)がフォームを描画する
  2. ユーザーがプロフィールを内容を書き込んで送信する
  3. サーバー側のAPIが内容を受け取ってレスポンスを返す
  4. クライアントがJSONのレスポンスを受け取って条件分岐
    1. 正常に処理されたら、成功メッセージを表示
    2. 失敗したら、失敗メッセージを表示

こちらも考え方は非常にシンプルですが、APIを作るのはいろんな問題があってそれなりにめんどくさいです。

代表的な例は認証です。

リクエストしたプロフィールが自分のものであった場合は正常なレスポンスを返し、そうじゃない場合は401などの認証エラーのステータスを返すわけですが、そもそもAPIへのリクエストが、”自分であること”をサーバーに伝える手段を何とかして自作しないといけないわけです。

この仕組が甘いと乗っ取りされる恐れもあるし、なりすましのアクセスを許可してしまう可能性もあるわけです。

APIを経由した認証に関しては近日技術顧問さんから色々伺う予定ですのでまたアップします。

まとめ

長々と書いてきましたが、SNSでモバイルアプリまで連携すると結構めんどくさいですという話でした。

気が向いたら次は認証の話とかプッシュ通知の話をやっていきたいと思います。

SNS構築のお問い合わせはこちらからどうぞ


Designed by Freepik

The following two tabs change content below.
Twitter のプロフィール
まなびん
会社の代表やってます。遊ぶように仕事やってます。
カテゴリー
アプリ開発・ウェブ開発
タグ

SNS

株式会社entershare