フォルックメンバーブログ

株式会社フォルックのメンバーが、起業/プログラミング/ルームシェア等に関して書いております。

【第二回:アプリケーションとは!?編】メルカリのようなWebサービスを6か月で作る方法!(仕事しながら)

みなさんこんにちわ!

イデア担当だったり開発担当だったりの藤田です

トイレ・食事・お風呂・寝る前にアイデアを考え、後は開発してます 笑

 

 

藤田初めまして!の方は前回の投稿読んでみてください

ただサービスを作る話には一切ふれてません w

 

 

ではさっそく

今回は「そもそもWebアプリケーションってなんやねん!?」

という疑問を解決します。

 

今からプログラミング初めたい!って方は参考にしてみてください

 

f:id:folook:20170417015526j:plain

 

ざっくり話すことは

  1. Webアプリケーションって!?
  2. アクセスしてから表示されるまでの流れ?
  3. まとめ

 

私も最初は意味不明でした・・・。

前職では営業をしてましたのでまったくの無縁でした。

 

最近まで分からなかったからこそ今からプログラミングをしたい人の気持ちがわかります!

ですので少しでもわかりやすく説明します!

 

Webアプリケーションってそもそも何!?

 結論から言うと

インターネットのネットワークを通して使用するアプリケーションソフトウェアです」

 

そんなことは知ってるわ!って思いますよね

順を追って説明していきます。

 

みなさんが使っている

全部正解です。Webアプリケーションです.

 

ただ分けるとすると、

iphoneandroidアプリ

② URLでアクセスするアプリ

の二つに分かれます。

 

今回は後者の「URLでアクセスするアプリ」(言い方変ですけどイメージつきますよね?)について詳しく話していきます!

 

アクセスしてから表示されるまでのみなさんの知らない裏側

 みなさんインターネットサーフィンをする中で

URLにアクセスをし、結果が表示されますよね!

 

そのアクセスをしてから結果が表示されるまでの流れを簡単に説明します!

 

さっそくですが下の図をみてください

 

f:id:folook:20170417010111p:plain

 

Aは、みなさんが目にしている表側の流れです。

Bは、みなさんが目には見えない裏側の流れです。

アクセスをしてからのサーバ(処理をする場所)側の見えないところでは様々な処理をしています。

 

では、順を追って説明していきます。

今回は分かりやすいようにレストランに例えて説明をしていきます。

ちょっとおしゃれなレストランをイメージしながら読んでいってください w

 

①アクセス(注文)

f:id:folook:20170417010643j:plainf:id:folook:20170417010731j:plain

 

スマホでクリックをしてアクセスをします(ex.商品の詳細ページがみたい!)

=レストランで店員に食事を注文します(ex.ステーキがほしい!)

 

②なんの処理?(何の料理?)

f:id:folook:20170417011318j:plainf:id:folook:20170417011553j:plain

 

スマホでクリックされたURLで何の処理かを判断します。(ex.商品の詳細ページの表示の処理をしてください)

=注文された食事を厨房に伝えます。(ex.ステーキを作ってください!)

 

③処理(調理)

f:id:folook:20170417011641j:plainf:id:folook:20170417012500j:plain

 

判断された処理を実行します。(ex.商品の詳細ページの処理を実行しようとする)

=ステーキを作る

 

3-1 . ファイル(マニュアル)

処理を実行するための必要な情報を取ります(ex.商品詳細ページの表示方法等)

=食事の作り方をみます。(ex.ステーキを作るためにはお肉と包丁とフライパンが必要です。)

 

3-2 . データベース(冷蔵庫)

処理に必要なデータを取りにいきます(ex.商品の画像等)

=冷蔵庫から食材を取る(ex.ステーキのお肉)

 

④結果(盛り付け)

f:id:folook:20170417013026j:plainf:id:folook:20170417012908j:plain

 

商品詳細ページの見え方、動きをつけます(ex.写真の配置、文字の大きさ、マウスを乗せた時の動き等)

=ステーキの盛り付けをします。(ex.オシャレに並べてパセリを乗せる)

 

⑤レスポンス(配膳)  

      f:id:folook:20170414125307p:plain      f:id:folook:20170417011505j:plain

 

 

スマホ・PCに結果を表示します(ex商品詳細ページが画面に現れる)

=食事をお客様に届ける

 

(※スマホの画像は私たちのサービスですw)

 

まとめ

f:id:folook:20170417010111p:plain

 

イメージつきました?w

分からんわ!って方はどしどしコメントください。

(頑張って改善します!)

 

以上のように、みなさんが何気なくアクセスして表示しているWebアプリケーションの裏側にはさまざまな処理がサーバで行われています。

 

次回は実際になんのプログラミング言語で作れば効率的かをお話します。

 

 

ではでは、私は開発に戻ります。

 

□・──────────────────────────・□
  ※リリース中サービス※

  街のリアルな情報が知れるサービス

  『Folook Town』(フォルックタウン)

   http://folook.co.jp/folooktown

□・──────────────────────────・□