1 : ウェブページとは?

前の章:はじめに

Header1

0 : この章の目的

 ウェブページの仕組みについて大まかな理解を得る。


1 : ウェブページの謎

日頃使っているウェブページ。それがどのようにして動いているか分かりますか?
  • 投稿した文章はどのようにして表示されているのか?
  • メッセージアプリで送った画像はどこにあるのか?
  • そもそもウェブページは何をするものなのか?

分からないことは山のようにあると思います。

ですが、ウェブページでやっていることは、簡単に言えば2つあります。
それは、データの表示・保存です。


2 : Facebookの仕組み

 Facebookを例にデータの表示と保存を説明していきます。

 ① : データの表示


ウェブページはデータを表示させています。
ここでは、ウェブページがなにで表示されているのか見てみましょう!

Facebookのトップページは大体このようになっていると思います。
Fb1
では、実際にこのページを表示させているものを見てみましょう!
Google Chrome を使用している場合は、
上のバーの「View > Developer > ViewSource」を選択してみて下さい。(下の画像を参考にしてみて下さい) Chrome view developer viewsource
下のようなウィンドウが表示されると思います。 Fb code この長い文字列がページを表示させています。これがページにどのような文字や画像・動画を表示するのかを決めています。
※死ぬほど長いですが、探そうと思えば自分の名前なんかも見つかると思います。

上に出てきた文字や画像・動画の表示をさせているものをHTMLファイルと言います。

 ② : データの保存


ここまで、ウェブページのデータの表示を簡単に説明しました。
ですがウェブページはデータを表示させているだけではありません。

例えば Facebookの投稿 のように、利用者は自分の情報を発信できるようになっています。ウェブページ作成者のデータの表示だけではウェブページはできていません。
ウェブページはウェブページ作成者(提供者)のデータの表示利用者のデータの発信という相互の情報のやりとりでできています。

ウェブページ作成者(提供者)のデータは前のHTMLファイルで表示されています。
では、利用者の発信したデータはどのように処理されるのでしょうか?
利用者の発信した情報はどこに行くのか?

Facebookの投稿を例に見てみましょう。 Fb post 「投稿する」ボタンがクリックされると、その投稿に関する情報がウェブページの機械(サーバー)に送信されます。上の投稿の画面で言うと、「ユーザーは山田太郎、内容はHello World、場所は東京都新宿」などなど・・・ Fb save data before こうやって送信されたデータはどうなるのでしょうか?
送信されたデータは、ウェブページの機械(サーバー)の中にある情報を保存するExcelの表のようなもの(データベース)に保存されます。 Fb save data after Fb database このようにして、ユーザーが発信した情報はウェブページの機械(サーバー)の中にあるExcelの表(データベース)に保存されます。

こうやってデータベースに保存された情報が表示されることでFacebookではタイムラインが、Twitterではツイートが表示されています。
※ここで保存されたデータは、更新することも削除することもできます。


3 : まとめ

 ウェブページが行っていることはデータの表示と保存の2つ

 提供者のデータ表示と利用者が発信した情報の保存によって、提供者・利用者の双方間のデータのやりとりが行われている。


次の章でウェブページを作るのに使うフレームワーク(ソフトウェアのようなもの) Ruby on Rails を説明していきます。