Webの技術について¶
Webアプリケーションを開発する時には、Webの知識が必要不可欠です。ここではWebの世界がどういう技術で成り立っているか簡単に説明します。
Webの技術は日進月歩で進化していますが、基本となる技術要素のみを説明します。
Webの技術要素で特に重要なのはHTML、URL、HTTPの3つです。ブラウザーはこの3つの技術を駆使してWebページを見れるようにしてくれています。
HTML¶
HTMLとは「HyperText Markup Language」の略です。WebページのほとんどはHTMLで記述されています。HTMLは文書をコンピューターにうまく処理・分析させるための記述方法で、タグという記号を使って印付け（マークアップ）します。
Webページをみてもどこにタグがあるか分かりませんが、ブラウザーで表示されているWebページ上で「右クリック -> ページのソースを表示」をクリックするとそのページのHTMLが確認できます。（利用しているブラウザーによってソースを表示する方法は異なるので注意してください）
簡単な例を見て見ましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ページタイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>本文1</p>
<h2>見出し2</h2>
<p>本文2</p>
</body>
</html>
HTMLでは文書の内容を、必ず開始タグと終了タグで囲むと決まっています。たとえば「見出し1」は開始タグ（<h1>）と終了タグ（</h1>）で囲まれています。
<h1>見出し1</h1>
このHTMLはブラウザーで見ると下記のように表示されます。（ブラウザーがHTMLを解釈/処理して表示することを、レンダリングと呼びます）
表示されるのはbodyタグで囲まれた部分です。headタグはそのページのメタ情報を記述するタグでレンダリングされても画面上には表示されません。
参考:
URL¶
URLは「Uniform Resource Locator」の略です。Web上でコンテンツを一意に識別するための識別子のことを指します。
具体的にはブラウザーでアドレスバーに入力されてるものがURLです。
このURLのおかげで世界中に散らばるWeb上のコンテンツを一意に特定できます。Web上におけるコンテンツの住所みたいなものだとイメージしていただければ大丈夫です。
たとえば「https://docs.pyq.jp/index.html」 には下記のような意味があります。
「http://」
これは後述するHTTPでデータがやりとりできるという意味を表します。
この部分をスキーム（scheme）と呼びます。データをやり取りするための手段だとイメージでしてください。
http以外にもftpやmailto、fileなどさまざまなデータに合わせたスキームが存在します。
「docs.pyq.jp」
ホスト名を指します。ホストとは、そのコンテンツを管理するサーバーなどをさします。
ホスト名は「ドメイン」や「IPアドレス」などで表現されます。
「/index.html」
具体的なコンテンツの名前です。ホスト内部でのファイルのパスを指し示します。
ブラウザーはURLのおかげで、「どういう手段」で「どのホスト」の「どのコンテンツ」を表示するかを判別できています。
参考:
HTTP¶
HTTPは「HyperText Transfer Protocol」の略です。URLのところでスキーム（http://）はデータをやりとりたするめの手段だと説明しました。
その手段を実現するための決まりごとをプロトコルと呼びます。つまりHTTPは「HyperText」のデータをやり取りするためのプロトコルです。
HTTPでのデータを送受信は、クライアントとWebサーバーの間で行われます。クライアントは「HTTPリクエスト」をWebサーバーに送信し、サーバーはそのリクエストを処理して「HTTPレスポンス」をクライアントに返却します。
代表的なクライアントは、ブラウザーです。ブラウザーはHTTPに乗っ取ってデータの送受信をしWebページを表示しています。
ブラウザーは大雑把に下記のような順序でWebサーバーとデータをやりとりします。
ブラウザーはHTTPリクエストのメッセージを組み立てる
ブラウザーはURL（Webサーバー）に対してHTTPリクエストを送信する
WebサーバーはHTTPリクエストを解析する
Webサーバーはリクエストの内容に応じたHTTPレスポンスを組み立てる
WebサーバーはHTTPレスポンスをブラウザーに返却する
ブラウザーは受け取ったHTTPレスポンスを解析する
ブラウザーは解析した内容を画面に表示する（HTMLであればレンダリングして表示する）
PythonでもHTTPに準拠したデータの送受信をすることで、HTTPクライアントとして振る舞うことができます。
HTTPメソッド¶
「HTTPリクエスト」は単純にコンテンツを取得する以外の方法も提供します。
その方法のことを「HTTPメソッド」と呼びます。ブラウザーでURLを入力してWebページを表示する時は「GET」というHTTPメソッドを利用します。
GETはサーバーにあるコンテンツを取得する場合に使われるメソッドです。
たとえばクライアントからデータを送りたい場合には「POST」を利用します。良くWebページに設置されてるお問い合わせフォームのように、主にデータをWebサーバーへ送信する目的で利用されます。
HTTPメソッドの代表的なものを下記に列挙します。
GET ... Webサーバーに対してヘッダーとコンテンツを双方をリクエスト
HEAD ... Webサーバーに対してヘッダーのみを要求
POST ... Webサーバーに対して新しいデータを送信
PUT ... Webサーバーにある既存のデータを更新する
DELETE ... Webサーバーにある既存のデータを削除する
参考:
CSS¶
CSSは「Cascading Style Sheet」の略です。Webが普及にするにつれ、文書構造を表現することに特化していたHTMLはよりデザイン性が求められるようになりました。
そこで登場したのがCSSです。CSSは文書に色をつけたり、文字を大きくしたり背景に色をつけたりといった視覚的な情報をHTMLとは別に記述することで、Webページをより見栄えの良いコンテンツにしてくれる技術です。
現在では多くのWebページでHTMLとセットで使われてる技術の1つです。
CSSを利用することで文書構造をそのままに、Webページのデザインを自分の好みに変更できます。
CSSを利用した簡単な例をみてみましょう。CSSは別ファイルに置いたものを読みこむ、またはHTMLの中に直接埋め込むことで適用できます。ここでは直接埋め込む方法で記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ページタイトル</title>
<! -- CSSの記述 -->
<style type="text/css">
body {background-color: #eee;}
h1#header1 {color: red;}
h2#header2 {color: blue;}
p.content {border:1px solid #000;}
</style>
</head>
<body>
<h1 id="header1">見出し1</h1>
<p class="content">本文1</p>
<h2 id="header2">見出し2</h2>
<p class="content">本文2</p>
</body>
</html>
CSSをHTMLに直接埋め込む時は<style>タグを利用します。
これをブラウザーで表示すると下記のようになります。背景色は灰色に見出し1は赤色に見出し2は青色に本文部分は黒い枠線で囲まれています。
CSSセレクター¶
CSSセレクター はCSSを適用したいタグを指定するめの記述方法のことです。
HTML内の特定のタグを装飾したい場合には、CSSにCSSセレクターを記述することで実現できます。
たとえばHTMLタグのid属性やclass属性を利用して特定のタグだけを装飾できます。
class属性... HTMLの中で特定のタグを指定する時に利用（重複可能）id属性... HTMLの中で唯一のタグの指定する時に利用（重複不可）
id属性は同じHTMLの中で1回しか利用してはいけません。 一方class属性は特定のタグをグループ化するために複数タグで利用可能です。
上記HTMLにあるh1タグとpタグについて見てみましょう。
# id属性の例
<h1 id="header1">見出し1</h1>
# class属性の例
<p class="content">本文1</p>
<p class="content">本文2</p>
この2つのタグをCSSセレクターで表現すると下記のようになります。
# id属性「header1」を持つh1タグのみにCSSを適用
h1#header1 {color: red; font-size: 140%}
# class属性「contents」を持つpタグのみにCSSを適用
p.content {border:1px solid #000;}
id属性を表現する時は「#」記号を使います。class属性を表現する時「.」記号を利用します。
CSSセレクターを利用することで、細かい単位でタグにCSSを適用することができようになります。
参考:
