[ITパスポート試験]Webページの仕組み[無料講座・例題付き！]

2020年1月12日2021年6月14日

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

くろん

インターネットと言うとウェブサイトも関連が深いと思うけど、どういった仕組みで表示されるんだにゃ？

モナ

今回はどのようにWebコンテンツを見られるかを学習するニャ！

1. Webページ
2. Webページ・例題
- 2.1. 問題
- 2.2. 解説(クリックで展開)
3. 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だけで実現することはできません。

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

具体的に良く出題される技術は以下の通りです。

アプレット

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

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

サーブレット

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

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

カズ

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

CGI

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

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

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

カズ

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

便利な仕組み、Cookieとは

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

くろん

なんか美味しそうな名前だにゃ

キュー

例えばamaz〇nで買い物をしたとき、2回目以降は自動で住所や電話番号が表示されたり、IDやPWが記憶されるアレやな

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

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

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

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

キュー

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

Webサイトにおける重要語句

以下は試験でも良く問われる語句です。あわせて押さえておきましょう。

XML・・・ユーザが独自の要素を定義できるマークアップ言語になります。これによって文書中のデータの意味などを定義することができます
CSS・・・Webページのスタイルを指定することができます。特定の要素に色を付けたり、文字サイズを変更したりなどが可能です。

ドメイン名

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

具体的には2進数で

11000000 01001101 00001101 11110011

と表現したり、10進数で

192.77.13.243

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

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

ではこれを

https://www.example.com

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

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

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

ドメイン名と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サイトの更新情報を簡易的にまとめて通史する仕組みになります。