2024-05-03

【初学者によるまとめ】この一冊で全部わかるWeb技術の基本　「Chapter１」＞「09. Webの標準化」

注意点
は個人的な見解になります

（参考書籍）

イラスト図解式この一冊で全部わかるWeb技術の基本

Amazon

（参考サイト）

インターネットアカデミー

Webの標準化 - W3CによってWebは標準化されている

標準化とは

標準化は「開発者の負担を減らす事」「ユーザーの使いやすさ向上」を目的に設けられている。
たとえば「HTMLをより良いモノにしよう!!」と熱意持った有志達が各々が開発した独自機能を搭載した"改良版HTML"を乱立していったとする
- （Webブラウザ開発者）全ての"改良版HTML"の表示に対応したブラウザを開発するのは骨が折れる。仮に100種類の"改良版HTML"が存在していたら、それらに対応するようにブラウザを改善していかなければならない。加えて、新たに"改良版HTML"が登場したらそれにも対応しないとならない。
- （Webページ制作者）どの"改良版HTML"を利用すればWebブラウザで問題なく表示されるのか分からない。"改良版HTML"の種類に合わせてWebページを開発をするという訳にもいかない。
- （Webページを閲覧しているユーザー）なんかWebブラウザによっては表示されるレイアウトが崩れたりしたりで違ってくるし、そもそも表示されないサイトもある。

標準化をすすめる団体

W3C（World wide web Consortium）がという団体が標準化を担っている
- 標準化の規格はあくまで「勧告」として発表されており、強制ではない。

2024-05-03

【初学者によるまとめ】この一冊で全部わかるWeb技術の基本　「Chapter１」＞「08. 動的ページの仕組み」

注意点
は個人的な見解になります

（参考書籍）

イラスト図解式この一冊で全部わかるWeb技術の基本

Amazon

（参考サイト）ウィキペディア東京情報大学

動的ページの仕組み - プログラムでHTMLを生成する

CGI（Common Gateway Interface）

Common Gateway Interface：「一般入り口界面（google翻訳）」 - WebサーバーがWebブラウザからの要求に応じてプログラムを起動させるための仕組み（主語は"Webサーバー"であり、Webサーバー内で行われる処理） - Webブラウザから'CGIプログラムが宛先となっているURL'をリクエストしてきた際に関係してくる - Webサーバー内ではWebブラウザへの転送内容に処理を施すためにCGIプログラムを実行する。（PCでWebブラウザプログラムを開くようなことをWebサーバー内では起こっている） - "静的ページ"の要求であればWebサーバーとしてはHTMLファイルを探して取得してWebブラウザに転送するだけで済んでいた。 - "動的"ページの場合はWebサーバーがCGIプログラムに対して、（まるでWebブラウザがWebサーバーにリクエストするかのように）処理の要求を行い、CGIプログラムはWebサーバーからの要求に対して処理を実行。そして処理結果をWebサーバに出力。その出力結果をWebサーバーが受け取ってWebブラウザに返している。

"動的"は"静的"の「リクエストされたWebページをそのままWebブラウザに転送する」こととは反して「リクエストの内容によってはユーザーに返すWebページを加工して転送する」ことを指す。この"Webページを加工して〜"を行うための仕組みが'CGI'にあたる。

サーバーサイド・スクリプト

CGIによって呼ばれるプログラムをサーバーサイド・スクリプトという。
- "CGI"は「WebサーバーからのCGIに対しての命令を受け取って、サーバーサイドスクリプトに実行処理を指示する仲介役ポジション」だから"プログラムを起動させる仕組み"という位置付け ※ここでいう"サーバーサイド・スクリプト"にはPerl、Ruby、Python、PHP、Javaなどが該当する

クライアントサイド・スクリプト

HTMLに埋め込まれておりWebブラウザに読み込まれた際に、Webブラウザで実行されるプログラムをクライアント・スクリプトという。
- こちらは「WebブラウザがWebサーバーで処理済みのコンテンツを表示する」のではなく、「WebブラウザでWebサーバーから未処理のコンテンツを処理して表示する」といえる ※Webブラウザによっては処理のためのプログラムが動かないこともある ※主にJavaScriptが該当する

2024-05-03

【初学者によるまとめ】この一冊で全部わかるWeb技術の基本　「Chapter１」＞「07. 静的ページと動的ページ」

注意点
は個人的な見解になります

（参考書籍）

イラスト図解式この一冊で全部わかるWeb技術の基本

Amazon

07. 静的ページと動的ページ - 変わらないページと変わるページ

静的ページ

何度アクセスしても同じものが表示されるWebページを静的ページと呼ぶ。
- 「静的＝静かで動かないさま」
情報提供する目的のサイトにおいては「いつもおなじ情報を提示する必要」があるため静的ページを表示させている。（企業情報、LPサイトなど）
- 歴史的背景より研究資料の閲覧が目的であったため静的ページが本来のWebページというものだった
- 「いつもおなじ情報」というのはより詳細にいえば「誰がどこでいつ見ても同じ内容である」というのが”静的”と言える。

共有者がHTMLに記述した通りそのままの内容が表示されるのが"静的ページ"といえる。

動的ページ

アクセスした時の状況に応じて表示されるのが動的ページと呼ぶ。
Googleなど検索サイトが最たる例。不特定多数のユーザーに対してそれぞれが検索したいワードに応じた検索結果が表示される。
- 他には掲示板サイト、オンラインショップサイトなど

それらは共通して「ユーザーから"検索ワード"、"書き込み内容"、"欲しい商品名"といった何かしらのデータが送信される」点にある。 → パラメータの有無が静的か動的かの違い？

2024-05-03

【初学者によるまとめ】この一冊で全部わかるWeb技術の基本　「Chapter１」＞「06. Webページが表示される流れ」

注意点
は個人的な見解になります

（参考書籍）

イラスト図解式この一冊で全部わかるWeb技術の基本

Amazon

Webページが表示される流れ - URLに応えてHTMLが転送される

URLを使ってWebサーバーにアクセス

Webページを取得するときには「何を取得したいか」などリクエスト内容を指定する必要がある。その際に用いられるのがURL（Uniform Resource Locator：統一資源位置指定子）。
Webブラウザが送信するURLには「どのやり取りの手順で」「どのWebサーバーに」「何のコンテンツを」取りに行くかの情報が含まれている。

（URLが含んでいる情報） URL +--「どのやり取りの手順で」（How） +--「どのWebサーバーに」（Where） +--「何のコンテンツを」（What）

↓↓↓↓↓↓↓↓↓↓

（例） https://be-early-bird53.hatenablog.com/about +--「https」（How） + ＞HTTPSを使った通信を希望している + +--「be-early-bird53.hatenablog.com」（Where） +　＞Webサーバーは「be-early-bird53.hatenablog.com」というやつ + +--「about」（What）　　＞「about」というコンテンツがあるはずだからそれを取得 ※'HTTPS'はHTTPのセキュリティ強化版

さらにほかの画像などを転送

一度のコンテンツの転送で送られてくるファイルは１つ
- Webブラウザによるコンテンツの解読の結果として画像や動画などが必要と判明した場合、画像ファイルや動画ファイルを取得するためにWebサーバに再度要求を行う。
  - ある１つのWebページを表示するのにWebブラウザからWebサーバーに対して何度もリクエストが送信されているということになる

（ざっくりWebページの表示の流れ） 1. ブラウザがWebサーバーにHTMLファイルを要求 2. Webサーバーが要求されたHTMLファイルを応答 3. ブラウザがHTMLを解釈し、画像ファイルが必要となる 4. ブラウザがHTMLに記載された画像ファイルのURLを使い、Webサーバーに対して画像ファイルを別途要求 5. Webサーバーが要求された画像ファイルを応答 6. ブラウザが受け取った画像ファイルをHTMLに組み込んで表示 7. この要領で .css、.js などのファイルも必要であればリクエストを送る

コンテンツは単一のHTMLファイルで成り立っているのではなく、HTMLを起点にリクエストを送ってあらゆるファイルを取得して仕上げている。よく言われる"HTMLは枠組み"というのは単にデザイン的な意味合いもあるかもしれないが、コンテンツ構築のためのリクエストを送信したりするコンダクター的なポジションのように思う。

2024-05-03

この一冊で全部わかるWeb技術の基本　「Chapter１」＞「05 WebサーバーとHTTP」

（参考書籍）

イラスト図解式この一冊で全部わかるWeb技術の基本

Amazon

WebサーバーとHTTP - Webを支える基本の仕組み

配信プログラム Web サーバー

Webサーバーはユーザーからの操作を経て Web ブラウザからのリクエストを受け取ると、そのリクエストに応えるためにコンテンツを取得しネットワークを通して Web ブラウザに送ってあげる役割を担う。
- 「Webブラウザからのリクエストに応じてWebページを取得してレスポンス」するだけであれば、WebサーバーにWebサイト（HTMLファイル群）を配置しておけば成立する。
  - ただし、ここにDBだったりが絡んでくると「Webブラウザ↔︎Webサーバー」の単一関係ではなくなる。

（ざっくり上記の流れ） 1. ユーザーがWebサイトを閲覧してハイパーリンクの要素を選ぶ＞（コンテンツ要求発生） 2. Webブラウザから'ユーザーが別コンテンツを見たがっている'というリクエストをWebサーバー宛に送信する 3. Webサーバーがそのリクエストを受け取る 4. Webサーバーがそのリクエストを確認して欲しいコンテンツをサーチし取得。そ 5. Webブラウザが欲しがっている取得したコンテンツをWebサーバーがWebブラウザ宛に送る ← これが"レスポンス" 6. Webブラウザがレスポンスを受け取ってWebページを表示 7. ユーザーがそのコンテンツを確認

このWebサーバーは"Apache"、"IIS"といったプログラムで先述の処理を実現している。
- PCに「WebサイトをHTML原文を表示するのではなく、人間にも分かりやすく解釈してからコンテンツとして表示する」ためのプログラムである'Webブラウザ'が必要なように、Webサーバーにも「Webブラウザからのリクエストを受け取って、リクエスト内容を基にWebサーバー内のファイルを取得してWebブラウザに送り返す」ためのプログラムが必要ということ。

やりとりの手順 HTTP

先述した（ざっくりとした流れ）のように一連の手順を定義した"通信の約束事"をHTTP（Hyper Text Transfer Protocol）という
この HTTP はコンテンツ（ハイパーテキスト）を送受信するためのやり取りの手順を世界共通の仕様として定義している。
- '404'などのコンテンツ取得が成立しなかった場合のメッセージも定義されている
- Webサーバーの設置場所が日本だろうがアメリカだろうがこのHTTPのルールに則ればそのサーバーにあるコンテンツを取得できる。また、人によって使用するブラウザが違うとなっても通信規格自体は統一されているから問題ないとなる。
  - ここでHTTPが無かったり、国によってHTTPの定義が異なるとなると当然やり取りが成立しないので"統一のルール"として設けられている。
  - さも当然のようにリクエスト＆レスポンスの流れでやり取りされているように記述したが、HTTPという規定のルールがあるからこそ成立している。

2024-05-03

この一冊で全部わかるWeb技術の基本　「Chapter１」＞「04. HTMLとWebブラウザ」

（参考書籍）

イラスト図解式この一冊で全部わかるWeb技術の基本

Amazon

HTMLとWebブラウザ - タグを使って文書に意味づけをする

記述言語 HTML

ハイパーテキストを記述するための言語がHTML（Hyper Text Markup Language）
- HTML の英語名の通り「ハイパーテキストを校正してただの文書ではなくより表現豊かにする」ための言語といえる。
- 他でも言われている通り、HTML はプログラミング言語では無い。制御構文がない為、マークアップ言語に分類される。
HTML ではタグと呼ばれるマークで表現し、ただの文書に意味づけをする。
- 具体的にはハイパーテキストの機能であるハイパーリンクの配置や、表の配置、Webページにおいてその文書が'タイトル'なのか'本文'なのかといった文書がどういった意味を持つかを指定するなど。
HTML で記述された文書や画像などをまとめて"コンテンツ"と読んだりする。

表示プログラム Web ブラウザ

ハイパーテキストはそのままでは「開始タグ＆閉じタグで文章を囲った意味づけをしたというものの可読性０の文書」なので人間がそのまま HTML を文章として読むには適していない。

＞＞＞そこでWeb ブラウザの存在 - HTML をそのまま文章として扱うのではなく、Web ブラウザという HTML を人間に分かりやすいように変換してくれるプログラムを介することで仕上がったコンテンツを見れる。 - 何気なく使用しているがプログラムなので「Web サイトをまともに見れるようにしてくれるアプリ」といえる。ブラウザの上に YouTube であったりのサイトが閲覧できている。

2024-05-03

この一冊で全部わかるWeb技術の基本　「Chapter１」＞「03. さまざまなWebの用途」

（参考書籍）

イラスト図解式この一冊で全部わかるWeb技術の基本

Amazon

さまざまなWebの用途 - Webサイトから高度なアプリへと発展

・Web は文書の表示から更に高度発展しデータの送受信など幅広いアクションが実現可能になっている。

文書の閲覧

１つのドメインにある複数の Web ページの集まりをWebサイトと呼ぶ。
- ローカル環境で開発している時の「http://localhost/~」であれ、１つのドメインにある（＝自分のPCにある） Web ページを作って Web アプリを製造しているので Web サイトにあたる。
Web サイト内の Web ページ同士はハイパーリンクによって相互につながり（アクセス関係）を持つ。 - これが Web のハイパーテキスト機能

ユーザーインターフェース

コンピューターの機能とユーザーのやり取りの橋渡しをする機能をユーザーインターフェース（UI：User Interface）という
- ユーザーと Web サイトの接点部分といえる
- UIがなかったらユーザは何も操作ができない。
  - ゲームコントローラーが無いがゲーム本体はあるようなイメージ
UIからユーザーが操作した内容を Web サーバーが受け取って、Web サーバーからその処理について他サーバーに操作を行う。
- ユーザーが Web 機能より表示された画面を発端に Web サイトのハイパーリンクを利用したあらゆるアクションが実行されるような仕組みづくりが可能
  - UI は昨今の Web サイトを見るにもっと高等な概念に思われるが CLI もインタフェースに違いない

プログラム用API

ソフトウェア同士のやりとりを橋渡しする機能をAPI（Application Programming Interface）という。
- API はユーザーが触れるところでは無い話。
- プログラム内で他プログラム（その Web サイトではない外部のソフトウェア）を組み込みたい時
- 他 Web サイトの機能を利用する（サイト内に組み込む）ための Web サイトにとっての UI 的部分が API といえる