[ITパスポート]Webページの仕組み

2020年1月12日

今回はITパスポートで問われるWebページの仕組みについて学習します。

くろん
くろん
インターネットと言うとウェブサイトも関連が深いと思うけど、どういった仕組みで表示されるんだにゃ?
モナ
モナ
今回はどのようにWebコンテンツを見られるかを学習するニャ!

Webページ

今現在見ているサイト等はWeb上に存在するページという事で、Webページと呼ばれます。

Webページが私たちのもとに適切に表示されるにはいくつかの仕組みを覚えておく必要があります。

Webページを形成しているもの

このサイトを含め、よくあるブログやホームページなどはHTML(Hyper Text Markup Language)と呼ばれる言語で書かれています。

言語と聞くと、C言語やJavaScriptと言ったプログラミング言語を思い浮かべる方も多いかなと思いますが、HTMLはマークアップ言語と呼ばれるまた別の言語になります。

キュー
キュー
MarkUpは編集するって意味やから、元々ある文章に「ここは太字に」だとか「ここは色を赤に」とか記述していくってのが由来らしいで

HTMLでは<と>で囲まれたタグと呼ばれるものを使って構造を定義していきます。

簡単な例として、ブラウザ上で文字を赤くしたい場合は以下の様に記述します。

<html>
<head>
    <title>Hello,world</title>
</head>
<body>
    <p>
        サンプルテキスト、<span style="color: #ff0000;">この文字だけ赤く</span>する
    </p>
</body>
</html>

これをサイト上で表示させると以下のようになります。

キュー
キュー
実際にこれをブラウザで表示させたかったら、上のコードをメモ帳にコピペして拡張子を.htmlに変えてやれば表示出来るで!

そして、このHTMLで書かれた文章をネットワークを介して転送するためのプロトコルがHTTP(Hyper Text Transfer Protocol)になります。

カズ
カズ
プロトコルに関してはインターネットの仕組みで学習したね!

サイトを作りこむためには

HTMLを記述することで簡易的なWebサイトを作成することは可能ですが、コメントを残したりカウンターを設置したり、クリックしたら何かを表示させたりといった動きはHTMLだけで実現することはできません。

それらを実現するにはマークアップ言語とは別の技術を施す必要があります。

具体的な例としてアプレットとサーブレット及び、CGI(Common GateWay Interface)紹介します。

アプレット

アプレットはWebサーバから送られるプログラムで、ブラウザ上で実行されます。

Javaと呼ばれるプログラミング言語で記述されており、これにより簡単なゲームやチャットが実現可能です。

サーブレット

逆に、サーバ上でウェブページなどを動的に生成したりデータ処理を行うためのプログラムをサーブレットと呼びます。

こちらもJava言語で記述されています。

カズ
カズ
サーバからWebサイトへ送信されてサイト上で動くのがアプレット、サーバ上でそのままデータを処理するのがサーブレットだね!
 

CGI

CGIを利用することでWebサーバとブラウザ間でのデータ交換が可能となります。

例えば掲示板に書き込みをする場合、ユーザがブラウザ上に文章を書くことでブラウザからサーバに記述内容が送信されます。

次にそのサーバからブラウザに再度データが送信されることで、書き込んだ本人を含めた全てのユーザのブラウザ上にその文章を表示させることを可能とします。

カズ
カズ
具体的なプログラミング言語にはPerl、Python、Ruby等があるよ!

便利な仕組み、Cookieとは

Webサイトを利用していくにあたり、アプレットやサーブレットとは他に、ユーザ情報をパソコンに一時的に保存するCookieと呼ばれる仕組みもあります。

くろん
くろん
なんか美味しそうな名前だにゃ
キュー
キュー
例えばamaz〇nで買い物をしたとき、2回目以降は自動で住所や電話番号が表示されたり、IDやPWが記憶されるアレやな

Cookieはアクセスしたサイトにより作成されるファイルで、サイトの設定やプロフィール情報などの閲覧情報がブラウザに記憶されます。

2回目以降のアクセスはこの記憶された情報によって簡易的にログインが可能となります。

ただここで重要なのが、CookieはPWを始め住所や電話番号、氏名といった個人情報を保持するため、第三者がそれらの情報を閲覧したり利用して物を買うと言ったセキュリティ上の問題があります。

その為、誰しもが使う共用PCの場合ブラウザ上でCookieを無効化したり使用後に削除する必要もあります。

キュー
キュー
便利な反面危険もあるから使いどころを注意せなあかんってことやな

サイト・暗記事項

XML・・・ユーザが独自の要素を定義できるマークアップ言語になります。これによって文書中のデータの意味などを定義することが出来ます

CSS・・・Webページのスタイルを指定することが出来ます。特定の要素に色を付けたり、文字サイズを変更したりなどが可能です。

ドメイン名

前回、IPアドレスの概念を学びました。

具体的には

11000000 01001101 00001101 11110011

と表現したり、

192.77.13.243

と表現したりするのでした。

しかし人がそのIPアドレス上のサイトにアクセスしようとした場合、数字で覚えておくのは困難です。

ではこれを

https://www.qualification-master.work/

と表現したらどうでしょうか

数字だけの羅列よりは覚えやすいと思われます。

このサイト全体のアドレスをURLと呼び、さらにqualification-master.workの部分をドメイン名と呼びます。

ドメイン名とIPアドレスは1対1で対応しています。その為、ドメイン名で入力された場合にIPアドレスに変換する仕組みが必要となってきます。その仕組みのことをDNS(Domain Name System)と呼び、その変換を行うサーバをDNSサーバ、ドメイン名からIPアドレスに変換することを名前解決と呼びます。

ドメイン名の前のwww.に値する部分をホスト名と言い、ドメイン名に属するコンピュータ等の名前を示します。

一番頭につくhttps:はスキーム名と呼び、Webサーバとブラウザがデータを送受信するための使われるプロトコルを示しています。

ポート番号

IPアドレスによってホストを一意に定めることが出来ます。しかしそのコンピュータのどのプログラムにパケットを届けるかはIPアドレスだけでは特定できません。

どのプログラムにパケットを届けるかを決定するためにはポート番号を使用します。

IPアドレスを住所と例えることが多いと書きましたが、ポート番号は宛名にたとえることが出来ます。一般的なアプリケーションに用いられるポート番号はあらかじめ決められており、これらのポート番号をウェルノウンポートと呼びます。

キュー
キュー
例えばHTTPは80、DNSは53みたいな具合やな

Web・暗記事項

クローラ・・・インターネット上のWebサイトの情報を収取し、GoogleやYahooと言った検索エンジンに登録します。また、検索エンジンに登録されることをインデックスされると言います。

トラックバック・・・別のブログへリンクを貼った際、相手にリンクを貼ったことを知らせる機能になります。相手からリンクを貰う事を最近は被リンクと言います。

オートコンプリート・・・特定ページの入力フォームに対し、文章の一部を入力すると前回入力した情報が自動的に補完する機能になります。予測変換に似た動作になります。

RSS・・・ブログ等の各種のWebサイトの更新情報を簡易的にまとめて通史する仕組みになります。

スポンサーリンク

Webページ・例題

実際に例題を解いて問題に慣れていきましょう。

問題

問1

Webサイトによっては,ブラウザで閲覧したときの情報を,ブラウザを介して閲覧者のPCに保存することがある。以後このWebサイトにアクセスした際は保存された情報を使い,閲覧の利便性を高めることができる。このような目的で利用される仕組みはどれか。(H.28/春)

ア Cookie
イ SQL
ウ URL
エ XML

問2

インターネットでURLが “http://srv01.ipa.go.jp/abc.html" のWebページにアクセスするとき,このURL中の “srv01" は何を表しているか。(H.30/春)

ア "ipa.go.jp" がWebサービスであること
イ アクセスを要求するWebページのファイル名
ウ 通信プロトコルとしてHTTP又はHTTPSを指定できること
エ ドメイン名 “ipa.go.jp" に属するコンピュータなどのホスト名

解説(クリックで展開)

Webページ・まとめ

今回はWebページの仕組みについて学習しました。

言語やURLに関して用語が多いですが、しっかりと覚えてしまいましょう。

カズ
カズ
何回も手を動かして書いたり、問題を反復して解くと覚えられるよ!

次回は電子メールについて学習します。


スポンサーリンク








↓↓↓コスパ最強!筆者イチオシの通信講座↓↓↓
オンライン資格講座 スタディング
詳細はコチラ