Ryota400’s blog

エンジニアを目指して書いてます。

WEb技術基本

WEB技術とは

webの正式名称は World Wide WEB → 世界に広がるクモの巣 → 略してweb
web上の文書はハイパーテキストという言語で構成され、ハイパーリンクで繋がる
1つのwebページを、複数のwebページと関連付けることで、全体で大きな情報の集合とすることができる

・1つのドメインにある複数のweページの集まりをwebサイトと呼ぶ
ハイパーテキストを記述するための言語 HTML
・「タグ」で意味づけされて書いたものを人間が読みやすいように作り変えて表示してくれるのがwebブラウザ

WEBサーバー

webブラウザからの要求があると必要なコンテンツをブラウザに送信する役割 → 要求されたコンテンツがない場合、「無いですよ」で返答
→ 別のサーバーに要求するよう案内することも役割の一つ

HTTP(Hyper Text Transfer Protocol)

正解共通の仕様として決められたハイパーテキスト(コンテンツ)のやりとりの手順
送信手順だけでなく、要求されたコンテンツを持っていなかった場合の応答方法も含む
webサイトの移転を伝える、必要となる様々な手順を定義
正解共通の基準なので、どの種類のブラウザでもあらゆる種類のサーバーとの間で同じ手順でやりとりができる

webページ表示の流れ

1,HTTPを使ってアクセス
2,(例)www.aaaaa.jpという名前のwebサービスにアクセス
3,(例)cccc.htmlという名前のコンテンツを表示

静的
毎回同じものが表示される
製作者が更新しないと変化なし

メリット
①動的ページに比べるとセキュリティ対策が簡単。
②ページの表示速度が早い。
③サーバーダウンが起こりにくい。(同時アクセスが多すぎる場合)

デメリット
①更新の手間が掛かる。情報をすぐ更新しづらい。
②ユーザーごとに異なる情報を表示できない。

動的
検索した文字列に対し最新の検索結果を表示
コンテンツが随時追加される
ユーザーが書き込む度に結果が増える掲示板など

メリット
①常に最新の情報を表示できる。
②ユーザーの要求に応じて異なる情報を表示可能。
③更新が簡単。(CMSの場合など)
④結果的にコスト削減できる場合が多い。

デメリット
上手く制作しないと、Webページの表示スピードが遅くなる。

動的ページの仕組み
CGI common gateway interface
→webサーバーが、ブラウザからの要求に応じてプログラムを起動させるための仕組み

サーバーサイドスクリプト
CGIから呼び出されるプログラム
→一般的に文字列の扱いに長けたスクリプト言語で記述される
例) perl, Ruby, Python, PHP, javascript

クライアントサイド・スクリプト HTMLに埋め込まれ、ブラウザで読み込まれる際に起動する サーバーサイド・スクリプトの対になるもの 例) Javascript

Webの設計思想

RESTの原則

統一インターフェース
あらかじめ定義・共有された方法で情報がやりとりされる
例) HTTPを使います

アドレス可能性
すべての情報が一意なURL構文で示される
例) index.htmlのファイルをください。遷移先のURLを表示させる。

接続性
やりとりされる情報にはリンクを含めることができる
例) リンクをクリックしてその先のページに移動

ステートレス性
やりとりは1回ごとに完結し、前のやりとりの結果に影響を受けない
例)さっきの指示をもう一度してください→さっきの情報がわかりません

RESTの原則を守ったシンプルな設計のことを、 RESTfulなシステムと呼ぶ。APIの相互運用が円滑になる。

セマンティックWeb
ティム・バーナーズ=リーが提唱
webページの情報に意味(セマンティック)を付け加えたもの
XML文書の中にRDF言語で意味を記述。言葉の相互関係などはOWL言語で記述。
情報に関する意味を示す情報を、メタデータと呼ぶ。W3Cで標準化が進められている。

例) 住所が"埼玉",院長の名前が"埼玉" これを区別する  

"webアプリケーション"と"webシステム"の違い

webページとは
web上にある文書のこと

webサイトとは
特定のドメインの下にあるwebページの集まりのこと

webアプリケーションとは
webを介して人が利用するサービスを提供するもの
例)ショッピングサイト、ネットバンキングなど

webサービス
プログラムが利用するサービスを提供する
例) プログラムAPI

webを実現するコンピューターネットワーク

コンピューターネットワークとは
PC同士がお互いに接続して情報のやりとりをする仕組み

サーバー
ネットワーク上で情報やサービスを提供する役割を持つコンピューター

クライアント
サーバーから提供された情報やサービスを利用する役割を持つコンピューター
・インターネット接続にはプロバイダーが必要
・プロバイダー同士が接続することで世界中が1つのネットワークとして成立。

インターネットの標準プロトコル

プロトコル
機器同士が通信するときの決められたルールと手順
例) HTTPなど

TCP/IP ( transmisson contorl protocol / internet protocol ) プロトコルの集まりのこと
インターネットに接続可能な機器はすべて対応している。スマホも。

プロトコルの種類】
HTTP:webブラウザとサーバー
FTP:PC間でのファイルのやりとり
SMTP:電子メール送信用
POP:メール受信用

IPアドレスとポート番号

IPアドレス
コンピューターを特定、データの行き先管理
IPアドレスは必ず1つ = 住所のようなもの
32ビット、IPv4、10進数で表記
例) 192. 168. 1. 1

グローバルIP
ネットでの利用、ICANN管理
プライベートIP:LAN内での利用、個人・会社で自由
電話番号でいう、外線と内線のイメージ

ポート番号
PCの何を起動するかを特定する

【捉え方のイメージ】 コンピューター→マンション
IPアドレス→住所
ポート番号→部屋番号

URLとドメイン

例 http://example.com:80/test.html

1.スキーム名(http:):プロトコルを指定
主なスキーム名
http: WEBサイトを閲覧する際に利用されるプロトコル
https: httpを暗号化(SSL)しているプロトコル
ftp: ファイル転送で使用するプロトコル

2.ホスト名(example.com):接続先のドメイン
3.ポート番号(80):接続先のサーバーの指定。通常は省略される。決まっているため。
4.パス名(test.html):ディレクトリやファイルの指定

DNSとは

ドメインIPアドレスに変換する仕組み
(例)www.sbcr.jp(ドメイン) ---> 18.182.225.171(IPアドレス)
DNSドメインIPアドレスが紐付いて管理されている

HTTPメソッド

Image from Gyazo

GETとPOSTの違い
GETリクエストの内容はURLに含まれ、HTTPS通信でもその内容は暗号化されることはありません。
そのため、他人に見せたくない情報はGETリクエストでは送りません。

POSTの内容はURLには含まれず、リクエストボディに含まれます。
HTTPS通信の場合は暗号化されるので、リクエスト内容が他の人に漏れることはありません。

HTTPリクエストに対しサーバー内での処理結果

ステータスコードの5分類

100:リクエスト継続を通知
200:正常
301:リクエストされたコンテンツは移動しました
302:一時的に移動された
304:コンテンツ未更新、ブラウザに一時保存されたコンテンツが表示
400:リクエストが不正
404:コンテンツ未検出、ページが見つかりません
500:リクエスト処理中にサーバー内部でエラー発生
503:アクセス集中やメンテナンスで処理不可

HTTPSのやりとり

HTTPS通信では、SSLを使用して暗号化を行いWebサイトの安全性を高めている
通信の暗号化とは、決められた鍵を使って通信に暗号をかけることを言い、鍵がないと暗号が解除できないような仕組み

SSLは、Webページのデータを暗号化するほかに、サイトの運営者情報を確認することができる「SSLサーバ証明書」の利用が可能です。SSLサーバ証明書にはサイトの運営者を登録する必要があり、ユーザはこの証明書を見れば、運営者が信頼のできる相手かどうかを確認することができる

(例) オンラインショッピングを利用する際、サイトにSSLサーバ証明書が使われていない通信では、通信の内容が不正に取得・改ざんされるリスクがあります。オンラインショッピングでは名前や住所、クレジットカード番号などの個人情報を入力することが多いですが、SSLを使用していないと悪意ある第三者に情報が漏れてしまう危険性が高まります。

Image from Gyazo

HTTPとHTTPSの違い

HTTPとHTTPSの主な違いは通信内容が暗号化されていないか、されているかの違い

Google ChromeではHTTPSに対応したホームページを開くとブラウザのURLの左の方に「保護された通信」と表示、また「保護された通信」ではなく、組織名が表示される場合もある。

Image from Gyazo

Image from Gyazo

ステートフルとステートレス

ステートフル
直前にやりとりした相手などの状態を、以降のやりとりでも覚えていること。
(例) ショッピングサイトの買い物かご、データを一時保存

ステートレス
毎回リセットするものをステートレス(前回の状態を覚えていない)

Cookie クッキー

クッキー(Cookie)とは、Webサイトの訪問者の情報を一時的に保存するための仕組みであり、それぞれのユーザーの識別を目的としている。
具体的には、ユーザーの購買履歴や、利用している地域などがわかる会員証のようなものとよく例えられます。2回目以降同じサイトに訪れる際は、初めてレスポンスを受けとる際に付与されたクッキー(会員証)を元にサーバーがブラウザを特定します。 クッキー(Cookie)はパソコンやスマートフォンに保存されますが、ファイルサイズが小さいため空き容量を減らす原因にはなりません。

セッション

クライアントとサーバーで通信を行う場合であれば、クライアントからサーバーへ接続した時点でセッションが始まり、サーバーから切断するとセッションが終了します。この一連の流れを管理することをセッション管理という

(例) 商品を選ぶ→かごに入れる→購入の流れをセッションと呼ぶ

参考文献

【Web技術の基本】知っているつもりの専門用語まとめ - Qiita

静的ページ・動的ページとは?

http・httpsとの違いは?ウェブセキュリティの基本を解説|サイバーセキュリティ.com

【初心者向け】クッキーとキャッシュ。それぞれの違い、役割とは | ワードプレステーマTCD