はじめに
この記事のゴール
- URLを理解する
- Webページが表示されるまでの流れを理解する
- 静的コンテンツと動的コンテンツの違いを理解する
目次
1.URLの意味
2.Webページが表示される一連の流れ
3.静的コンテンツと動的コンテンツ
4.まとめ
1. URLの意味
**URL(Uniform Resouce Locator)**はインターネット上のコンテンツの住所のようなものです。
このURLには
1 どのやり取りの手順で
2 どのWebサーバーに
3 どのコンテンツを取得するか
以上の3つの情報が含まれています。図で示すとこんな感じです
このURLをもとにブラウザはサーバーから要求するコンテンツを取得していきます。
やり取りの手順には前回の記事で説明したHTTPとHTTPのセキュリティ面を高めたHTTPSの２つがありますがHTTPSについては後の記事で詳しく説明します。
2. Webページが表示される一連の流れ
これまでの記事で説明したことをまとめるとWebページの構成と表示される流れは次の通りです
１ Webページはハイパーテキストで書かれ、HTMLはタグによって文章を意味付けている
2 ブラウザで単語またはURLで検索しコンテンツをサーバーに要求する
3 サーバーは要求されたコンテンツがあればブラウザに返す
4 サーバーから受け取ったハイパーテキストをブラウザが人間用に解釈して画面に表示する
以上の流れでWebページは表示されます。
また。一度の転送で送られるファイルは一つとなっています。
HTMLをブラウザが解釈した結果、画像ファイルや別のWebページのファイルが必要になった場合は再度サーバーに要求します。必要なファイルがすべて揃った時点でブラウザは要求したWebページを画面に表示します。
3. 静的コンテンツと動的コンテンツ
3-1. 静的コンテンツ
まず言葉の意味から整理します。
何度アクセスしても毎回同じ情報が表示されるWebページを静的コンテンツと呼びます。
例えば、企業のHPやブログなどは、いつ訪れても同じ情報を表示する必要があるため、一般的には静的コンテンツで構成されることが多いです。
静的コンテンツは制作者が更新しない限り内容が変化しません。
しかし、Webが普及して閲覧するユーザーの状態や要求に応じて表示する内容を変化させる動的コンテンツの技術が誕生しました。
3-2. 動的コンテンツ
静的コンテンツに対して、アクセスしたときの状況に応じて表示される内容が変化するWebページを動的コンテンツと呼びます。
例えば、Amazonや楽天市場のようなショッピングサイトは毎回表示される商品は違うし、ユーザーの特性に合わせて商品をレコメンドします。また、ニュースサイトも毎回内容が変化しますね。他にも、掲示板や会員サイトなど動的コンテンツは多様です。
3-3. 動的ページの仕組み
Webサーバーがブラウザからの要求に応じてプログラムを起動させるための仕組みを**CGI(Common Gateway Interface)**と呼びます。
CGIについては、CGIとはで以下のように説明されています。
普通のホームページでやれることは「事前に作っておいたホームページのファイルを渡す」だけです。
誰から注文が来ても同じファイルを渡すことになります。
一方、CGIの仕組みで返されるページは作り置きではありません。
「このページをおくれ」な注文が来たときに、Webサーバ上にいるプログラムが、その場でホームページのファイルを作って返します。
ホームページのファイルを作るついでに他のお仕事をすることもあるでしょう。
CGIの仕組みで返されるホームページのファイルは、出来立てホヤホヤです。
お寿司屋さんのお寿司と同じです。
つまり、CGIをとして渡されるコンテンツは要求をされて初めてファイルが作られるので毎回違う内容がユーザー側に提供されるというわけです。
3-4. サーバーサイド・スクリプト
CGIから呼び出されるプログラムはサーバーサイドプログラムと呼びます。
一般的には文字列の扱いに長けたスクリプト言語で書かれるのですが、具体的にはPerl、Ruby、Python、PHPなどが挙げられます。
3-5. クライアントサイド・スクリプト
サーバーサイド・スクリプトに対してHTMLに埋め込まれて、ブラウザ上で読み込まれる際によびだされるプログラムをクライアントサイド・スクリプトと呼びます。
主に、Javascriptが用いられます。
4. まとめ
- URLとは、ネット上のコンテンツの住所である
- Webページはブラウザからサーバーへコンテンツを要求し、渡されたハイパーテキストを解釈して画面に表示する
- 静的コンテンツは毎回同じ情報を表示し、動的コンテンツはユーザーの状況によって表示内容を変化させる
以上です。最後まで読んでいただきありがとうございました！
お疲れさまです。。
参考文献
この記事は以下の情報を参考にして執筆しました。