まなびの森

WebやITに関係した学習記録です。

【イラスト図解式 この一冊で全部わかる Web技術の基本】 「2-6.DNS」を読んで

【イラスト図解式 この一冊で全部わかる Web技術の基本】
「2-6.DNS」を読んで

「イラスト図解式 この一冊で全部わかる Web技術の基本」の第2章6節についての要点、自分なりの知識の整理、この2点を述べていきます。

1.要点

DNS(Domain Name System)とは
ドメインを利用してコンピュータへ接続するために必要な工程
ドメインIPアドレスへと変換するしくみ

DNSサーバーとは
DNSサービスを提供するサーバー

2.知識の整理
この節を読んで、以下2点について気になったので調べてみました!

以前、こちらの記事にてドメインIPアドレスの関連性について述べました!

 

web773.hatenablog.com

おさらいすると、両者ともにインターネット上の住所を表し、
ドメイン:人が読みやすい文字列表示(例:YouTube.com)
IPアドレス:コンピューターが管理しやすい数字表示(例:111.111.111.11)

f:id:Web773:20210619220640p:plain

f:id:Web773:20210619223557p:plain


そして、
DNSサーバー】
ブラウザ側から送られたドメインに対応したIPアドレスをブラウザに送信
【ブラウザ】
受信したIPアドレスをWebサーバーに送信→ファイルが送られページ閲覧

という流れでWebページは閲覧できましたね。
DNSサーバーはIPアドレスドメインの対応関係を管理しているサーバーでした!

調べてみると、全世界のドメインアメリカにあるICANN(Internet Corporation for Assigned Names and Numbers、通称アイキャン)という非営利法人が管理していました。

f:id:Web773:20210629084053p:plain

ICANNの概要(ICANN

レジストリとは、Windowsや各種ソフトウェアなど、パソコンに関する設定情報が保管されているところ

レジストリとは、ICANNから認定を受け、ドメインおよびDNS情報のデータベース管理や整理をする管理組織
例)JPRS(.jp)、Versign(.net/.com)など

(2021/06/29 ご指摘をいただき、修正しました!)

www.icann.org


ICANNは、コンテンツそのものには関与しないものの、世界中のインターネットに影響を与える組織なんですね。

ドメイン作成っていろんなサービスがあるので、その会社が管理していると思っていたのですが、世界規模で管理している組織があったとは!初めて知りました!

【出典】
イラスト図解式 この一冊で全部わかるWeb技術の基本
JPRS用語辞典
ICANN公式サイト
ドメインよくある質問(SAKURA internet)

【イラスト図解式 この一冊で全部わかる Web技術の基本】 「2-5.URLとドメイン」を読んで

【イラスト図解式 この一冊で全部わかる Web技術の基本】
「2-5.URLとドメイン」を読んで

「イラスト図解式 この一冊で全部わかる Web技術の基本」の第2章5節についての要点、自分なりの知識の整理、この2点を述べていきます。

1.要点
URL(Uniform Resource Locator)

Webサイトの場所、インターネットやLANなどのネットワーク上にあるデータやファイルの場所とそれらの取得方法を指定するために利用される
アドレス、Webアドレスとも呼ばれる

ドメイン
IPアドレスの別名
1ドメインにつき1つの意味
同じドメインは世界中に1つも存在しない
ドメインについては以下記事参照

web773.hatenablog.com

 

2.知識の整理

  • URL構文の分解してみた

URLの構造を分解して一つ一つの役割を見ていくことで、URLが何を示しているかわかると思ったので調べてみました!

  • URL構文の分解してみた

f:id:Web773:20210628094136p:plain

URLの構造の分解(株式会社アーティス、2018)



プロトコル名「http:」
ブラウザが指定するプロトコル
通常、Webサイトの場合はHTTPプロトコルor HTTPSプロトコル
インターネットを使ってアクセスする時のルールなので絶対必要
ほかにはmailto:(メールを開くとき)ftp:(ファイルを転送するとき)がある

②ホスト名+ドメイン名(これら合わせてFQDN)「www.asobou.co.jp」
アクセスする際のサーバーを指定するために必要なもの
ホスト名 www
ドメイン名 asobou.co.jp
ホスト名とは、ネットワーク上のコンピューターにアクセスするときに使う識別用の文字列
ドメイン名とは、インターネット上のネットワークを特定するための文字列

ディレクトリ名「about」
サーバー内のフォルダ名とそのフォルダの位置を表す文字列
フォルダの中にフォルダを入れるとファイルがどんどん増えていく
その際は「/」で区切ることで階層を増やせる

④ファイル名「index.html」
拡張子のついた文字列
例でいうと、aboutフォルダの中にあるindex.htmlファイル ということ

新たにページを追加するときには、③ディレクトリ名④ファイル名 を新たに命名する

▽すごーくざっくりまとまっているのがこちら

web773.hatenablog.com

▽もっとより専門的にまとめられているのがこちら

developer.mozilla.org


3.考えたこと
シンプルな命名を心がけたい!

調べているうちに、コーダーだけでなく、ユーザーにとってもわかりやすいURL構造が必要だと感じました。

ディレクトリ名とファイル名は、コーダーに命名が委ねられることが多いです。
諸先輩方が実務で使われているような命名チートシートが流通したり、調べてもすぐ見つけられたり、名前はつけやすくなっています。
環境は十分整っていますよね!
あとはコーダーが活用し切れるかってとこですよね。。うっ!

数をこなしてこそわかることもありますが、まずは簡潔な命名を心がけたいと思います。
例えるなら、「Webページを見たことがない人でもページの修正のイメージができる!」くらいのもので!

【出典】
イラスト図解式 この一冊で全部わかるWeb技術の基本
URL とは何か- MDN Web Docs
分かりやすいURL構造を設計しよう「ディレクトリ名・ファイル名の付け方」
URL構造をユーザーと検索エンジンにわかりやすく伝える6つのポイント

【イラスト図解式 この一冊で全部わかる Web技術の基本】 「2-4.IPアドレスとポート番号」を読んで

【イラスト図解式 この一冊で全部わかる Web技術の基本】
「2-4.IPアドレスとポート番号」を読んで

「イラスト図解式 この一冊で全部わかる Web技術の基本」の第2章4節についての要点、自分なりの知識の整理、この2点を述べていきます。


1.要点
IPアドレス

インターネットに接続されたコンピュータを特定して、データの行き先を管理するために利用されている識別番号

ポート番号
コンピューターが提供するサービスを指定するための番号
IPアドレスは住所、ポート番号は部屋番号のイメージ
Webサーバーのポート番号は80番

2.知識の整理
以下、3点について気になったので調べてみました。

  • IPアドレスとは(おさらい)
  • TCP/IPの層構造から見るポート番号
  •  ポート番号から見たブラウザとサーバーのやりとり

 

IPアドレスとは、スマートフォンやパソコンなど、ネットワーク上の機器に割り振られたインターネット上の住所です。
そして、DNSサーバー(世界中のドメインIPアドレスの対応関係を管理しているサーバー)がWebブラウザに送るものです。
データを受け取るのがブラウザ側で、ブラウザ側がわかりやすいように数値表示になっていましたね。(思い出してきた!)

 

web773.hatenablog.com

 

  • TCP/IPの層構造から見るポート番号

インターネットでは複数のプログラムが同時に進行しています。
ポート番号はそれらを識別するトランスポート層プロトコルです。
それぞれのプログラムで重複しないように番号を振り分けています。

  •  ポート番号から見たブラウザとWebサーバーのやりとり

f:id:Web773:20210627071951p:plain

ポート番号の機能と役割(CMAN)

Webサーバー側で表示されるポート番号はサービスを識別するため、固定された番号です。
一方、ブラウザ側で表示されるポート番号はセキュリティ上の観点で毎回異なるため、その都度変動するようになっています。

f:id:Web773:20210627073239p:plain

ブラウザとWebサーバーのやりとり(CMAN)

ページが表示される全体の流れとしては、
①ブラウザ側がWebサーバーに要求する(サーバー80番に要求する)
②Webサーバーが応答する(指定されたポート45789番に該当するものを送る。今回はWebページをブラウザに送る)
③ブラウザ側が該当ページを表示し、ポートを閉じる(ポート45789番を閉じる)

先ほど、「ブラウザのポート番号は毎回異なる」と記述しました。
このポートの開閉によってセキュリティが守られているのです。
うまくできているな〜と思います。(めっちゃ上から目線笑)

f:id:Web773:20210627074439p:plain

代表的なポート番号一覧(CMAN)

 


80番はよく見る印象があるなと思っていました!
検索していちばん目に入りますもんね。なるほど。。。
ほかのものは意識してこなかったので、ちょっと探してみたくなりました!

明日は、URLとドメインについてまとめます!

【出典】
イラスト図解式 この一冊で全部わかるWeb技術の基本
用語集 「ポート(PORT)とは?」
◆ポート番号の役割

【イラスト図解式 この一冊で全部わかる Web技術の基本】 「2-3.TCP/IP」を読んで

【イラスト図解式 この一冊で全部わかる Web技術の基本】
「2-3.TCP/IP」を読んで

1.要点
役割ごとに4つの階層に分かれている
アプリケーション層とは
Webブラウザやメールソフトなどのアプリケーションごとのやりとりを規定

TCPUDPとは
TCP(Transmission Control Protocol)
UDP(User Datagram Protocol)
トランスポート層に位置する
アプリケーション層のやりとりに応じてデータの処理をしている

2.知識の整理
今回、気になった3つのトピックについてまとめていきます。

  • TCP/IPの概要(もうちょい深掘り)
  • 4つの階層の役割について
  • TCPUDPの違い

 

  • TCP/IPの概要(もうちょい深掘り)

TCP/IPとは、インターネットを含む多くのネットワークの中で世界標準的に使われている通信プロトコルのことです。
TCP(Transmission Control Protocol)とIP(Internet Protocol)という2つの中核をなすプロトコルから名付けられています。
実際には、いくつかの補助的なプロトコルUDPARP、ICMP)も含んでいます。

  • 4つの階層の役割について

f:id:Web773:20210626121549p:plain

TCP/IPの定義(アイティーエム)

f:id:Web773:20210626121841p:plain

TCP/IPの階層別の名称とプロトコル(アイティーエム)


第1層:ネットワークインターフェイス
同一のネットワーク内でデータを転送する役割

第2層:インターネット層
複数のネットワーク間での転送を担う役割

第3層:トランスポート層
データを適切なアプリケーションに振り分ける役割

第4層:アプリケーション層
アプリケーションで扱うデータのフォーマットや手順を決める役割

この4つの階層のプロトコルがすべて機能して初めて通信ができます。

以下は、階層を通ったデータの流れの図です。

f:id:Web773:20210626142224p:plain

データの流れ(アイティーエム)

上図のパソコンのイラストは、Webブラウザ、Webサーバーです
アプリケーション層どうしでもサービスの要求と応答がなされています。
(関連:【イラスト図解式 この一冊で全部わかる Web技術の基本】「1-6.Webページが表示される流れ」でわかった壮大さ

f:id:Web773:20210626150142p:plain

TCPUDPの違い(アイティーエム)

TCPはコンピュータどうしがお互い確認しながら通信を行うのに対し、UDP(User Data Protocol)は確認がない一方的な通信です。
用途によって使い分けます。


今回、いろいろなサイトや本を調べましたが、なかなか自分のものにならず、だいぶ苦戦してしまいました!
解釈違いのものもあるかもしれません。。。
ご指摘もお待ちしています。

明日は、IPアドレスとポート番号についてまとめます。

【出典】
イラスト図解式 この一冊で全部わかるWeb技術の基本
プロトコルとは?初心者でもわかるIT用語解説!
TCP/IP(Transmission Control Protocol/Internet Protocol)
TCP/IPとは?通信プロトコルの階層モデルを図解で解説
TCPとUDPの違いと使い分け(第18回)

【イラスト図解式 この一冊で全部わかる Web技術の基本】 「2-2.インターネットの標準プロトコル」を読んで

【イラスト図解式 この一冊で全部わかる Web技術の基本】
「2-2.インターネットの標準プロトコル」を読んで

「イラスト図解式 この一冊で全部わかる Web技術の基本」の第2章2節についての要約、自分なりの知識の整理、この2点を述べていきます。


1.要約
プロトコル

ネットワークに接続された機器どうしの通信であらかじめ決められた共通のルールや手順

TCP/IP(Transmission Control Protocol/Internet Protocol)
インターネットにおけるさまざまなサービスを実現するためのプロトコルの集まり

HTTPもTCP/IPの一部

2.知識の整理
TCP/IPにはさまざまな種類があります。
それぞれの違いは何だろう?と疑問に感じたので調べてみました。

TCP/IPの種類>
・HTTP(Hyper Text Transfer Protcol)
WebブラウザとWebサーバーの間で使用
データ送受信するためのプロトコル

HTTPS(Hyper Text Transfer Protcol Secure)
HTTP通信をより安全に(Secure)行うためのプロトコル

FTP(File Transfer Protocol)
コンピュータ間でファイルをやりとりするときに使用
ファイル送受信するためのプロトコル

SMTP(Simple Mail Transfer Protocol)
電子メールを送信するときに使用
メール送信する用のプロトコル

・POP(Post Office Protocol)※現在、Version3であるためPOP3ともいう
ユーザーが自分のメールサーバーから自分のメールを取り出すときに使用
メール受信用のプロトコル

IMAP (Internet Message Access Protocol)
メールをサーバー上で保持できる
インターネットでメールを受信して管理するためのプロトコル

・NTP (Network Time Protocol)
通信時間による誤差を最小化する機能がある
ネットワーク上にある全ての機器の時刻を同期させるためのプロトコル

DNS (Domain Name System)
ドメイン名とIPアドレスの対応を管理する作業を行う
ドメインIPアドレスの管理のためのプロトコル

TCP (Transmission Control Protocol)
データの順序や内容を保証し、確実なデータ転送ができる
正確性や信頼性の高いデータの送信に用いられるプロトコル

UDP (User Datagram Protocol)
動画や音楽のストリーミング、オンラインゲームなどで使用される
TCPと同じくデータの送信に用いられるが、正確性よりも速さを重視したプロトコル

・IP (Internet Protocol)
ネットワーク上で各機器にIPアドレス(住所)を割り当て、それをもとにして対象にデータを送り届けるためのプロトコル

DHCP (Dynamic Host Configuration Protocol)
ネットワーク上の各機器にIPアドレスを割り当てるプロトコル
これがなかったら自分でIPアドレスを設定しなければならない。

・CMP (Internet Control Message Protocol)
誤りの通知や通信状態について通知をする
通信が可能な状態か確認するためのプロトコル

代表的なものだけでも13種類もありました!
たくさん種類がありますが、どれも役割が異なるんですね。

そういえば、先ほどWi-Fiは繋がっているのにサイトが表示されない現象が起きたんですが、その際に「DNSアドレスが見つかりません」という表示が出ました。

f:id:Web773:20210625103751j:plain


前までは、このような知識がわからなかったので「えっ!?なにこれ!怖い無理やめる」みたいな思考だったんですが、
今は「なるほど、、ブラウザとサーバーとのやりとりに時間がかかってしまっているんだな、しばらく待って無理そうならWi-Fi再起動してみようかな」と冷静に対処できました。ちょっと成長しているかも!

異なるメーカーの機器どうしでもやりとりができるようにするため

プロトコル(Protocol)には「取り決め、ルール」という意味があります。
今回の場合、意訳ですが、「ネットワーク上の共通言語」と捉えた方がわかりやすいです。

この世にあるたくさんのメーカーはさまざまな製品を販売しています。
ルーター、ポケットWi-Fi、据え置き型のWi-Fiなど、種類も多く便利ですよね。
生活や仕事のスタイルに合わせて1人で複数所持している方もいるかと思います。

それも相まって、メーカーそれぞれでルールが違うとすごくややこしくなりませんか?
同じメーカーの同じ機種しか使えないという制限があると、世界中でネットワークが構築されている意味がありません。

したがって、どんな製品を使ってもいいような共通のルールがあるというわけです。

明日はTCP/IPの階層構造について触れます!

【出典】
イラスト図解式 この一冊で全部わかるWeb技術の基本
プロトコルとは?初心者でもわかるIT用語解説!
キタミ式イラストIT塾 基本情報技術者 令和03年

【イラスト図解式 この一冊で全部わかる Web技術の基本】 「2-1.Webを実現するコンピュータネットワーク」を読んで

【イラスト図解式 この一冊で全部わかる Web技術の基本】
「2-1.Webを実現するコンピュータネットワーク」を読んで

「イラスト図解式 この一冊で全部わかる Web技術の基本」の第2章1節についての要約、自分なりの知識の整理という2点を述べていきます。

1.要約
コンピュータネットワーク
コンピュータがお互いに結びついて情報のやりとりをするしくみ

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

クライアント
サーバーから提供された情報やデータを利用する役割をもつコンピュータ

Webサイトが見られるのはサーバー(Webサイト)とクライアント(Webブラウザ)がやりとりしているため

インターネットとは
小さな範囲でネットワークがひとつひとつ接続され、世界中のネットワークが繋がった環境のこと

2.知識の整理

  • インターネットを使えるようにするためには?

インターネットを希望する場所で使えるようにするためには業者との契約が必要です。
お金もかかりますし、それなりの知識が求められます。
ですが、こういうのって調べても無限に情報が出てきたり、あまりよくわからない用語もあったりと、ハードルが高いですよね。

最低限ここまでわかっていれば大丈夫!という内容を簡単にまとめます。

以下からは「固定回線」の話になります。
(ポケットWi-Fi、据え置き型のWi-Fiは当てはまりません)

  • インターネットを使えるようにするためには?

回線業者とプロバイダ業者、両方の業者と契約が必要
インターネットはすでに世界中で使えるような状態に整備されています。
ということは、あとはわたしたちで使えるように準備していくだけです!

f:id:Web773:20210624094727p:plain

インターネットが使えるしくみ(NTT)



回線プロバイダという用語が出てきましたが、この2つの違いは役割です。

回線は、ユーザーがインターネットに接続するために必要な設備のことです。
住居形態によって異なります。
プロバイダは、いわゆる〇〇光と呼ばれるような、ユーザーと回線事業者の提供する回線の上で必要になるインターネット接続サービスのことです。

つまり、回線は設備そのものプロバイダはそれを利用して提供されるサービスになります。
この両方が機能してこそインターネットがつながります。
なかには、この両者が一体になったもの(契約が1回で済むもの)もあり、現在はこのタイプが主流になってきているようです。
例)ドコモ光、auひかり、SoftBank光、So-net

こんな感じです!
いろんな情報がありますが、しくみは結構シンプルなんです。

利用する環境や個々の目的によって最適なものが異なってくるため、きちんと調べていきましょう!

3.おまけ(※あくまで個人の意見です)
プロバイダ、回線は自分で調べて契約がおすすめ!

わたしは1年間、プロバイダの訪問販売をしていました。
当時は、扱っていた商材を押し付けないように、利用環境や目的に合っている方、本当に必要とされている方のみに対応するよう注意はしていました。
しかし、なかには押し付けて売りつけてしまう、そういう風なやり方が存在するのも事実です。
たとえ本人はそのつもりがなくても、言葉の受け取り方の違いもありますし、正直、この仕事がある限り避けられない問題です。
ただ、ノルマがあるところがほとんどなので、そういうふうな振る舞いになってしまうんだと思います。(わたしも実際にありました。)
こんなわたしが言うのも何ですが、年単位での契約、かつ結構な金額になる固定費ですし、後悔する要因を最小限にしたければ、自分で調べて契約することをおすすめします!

【出典】
イラスト図解式 この一冊で全部わかるWeb技術の基本
インターネットサービスプロバイダー(ISP)とは

【イラスト図解式 この一冊で全部わかる Web技術の基本】 「1-10.Webの設計思想」を読んで

【イラスト図解式 この一冊で全部わかる Web技術の基本】
「1-10.Webの設計思想」を読んで

「イラスト図解式 この一冊で全部わかる Web技術の基本」の第1章10節についての要約、自分なりの知識の整理という2点を述べていきます。

1.要約
設計思想
・Restful
4つの原則からなるシンプルな設計
シンプルな構造
やりとりや情報の示し方が統一
Webアプリもこの考え
▽4つの原則
統一インターフェース、アドレス可読性、接続性、ステートレス性

セマンティックWeb(semantic:意味、意味論)
W3Cティム・バーナーズ=リーが提唱
Webページの情報に意味を付け加えたもの
コンピュータが、自律的に情報の意味を理解して、処理できるようになる
XMLという言語での構成
情報を検索するときの精度を上げることができる
特定の種類の情報を集めて活用できる

2.知識の整理
身近なセマンティック検索
1より、セマンティックWebの目的をまとめると、
①Webページに記述された内容の意味をコンピュータに理解させる
②コンピュータによる自動的な情報の収集と分析
以上の2つがあります。

セマンティックWeb自体は2000年代前半に普及され始めた概念です。
しかし、論文等を見る限り、浸透しないという考えの方が多かったです。(費用の問題?)
そのため、現状として、AIの発展や自然言語処理技術の普及により、セマンティックWebとは異なるアプローチもされているようです。

セマンティック検索
一方、これに関連する概念に「セマンティック検索」がありました。
検索エンジンで活用されているので、一つ例を紹介します。

f:id:Web773:20210623071123p:plain

セマンティック検索の例(住友電工情報システム)

詳しく説明すると、
検索エンジンは検索文と意味が近い表現を含むファイルを表示
②ヒット箇所は多いが、検索文の意味からは遠いため下位にファイルを表示(「畑で」野菜を育てるため)
③検索でヒットした箇所の周辺に頻出する表現を表示(「気付き支援」)

よく見かけ、何気なく使っていますが、これがあるおかげでついでに見てみようと勝手に手が動いている時があります。笑

細かい概念はもう少しあるのですが、今回は省略します。

コンテンツの質が重要
サイトを作成する段階で「ユーザーが知りたいことは何か」を見据える必要があります。

検索結果上でコンテンツの上位に表示されると、アクセス率の向上につながりますよね。

わたしも普段何気なく検索するとき、反射的に上から見ていきます。
いきなり5ページに飛ぶことはまずないです。笑
また、よほどのことがない限り、出てきた検索結果をすべて見るということはありません。
引っかかった数ページを見て満足しちゃいます。
多分皆さんもそうなのではないでしょうか?
それくらい検索結果の表示順位って重要です。

ブログやサイトを運用する方が口すっぱく「SEO対策」というのはきっとそのためだと思います。
ユーザーが求めている情報をコンテンツで網羅することがそのまま満足度、アクセス数に繋がっていきます。
内容を考える際はその点にも注意しなければいけませんね。

【出典】
イラスト図解式 この一冊で全部わかるWeb技術の基本
セマンティック検索とは?特徴やSEOへの影響を解説!
セマンティック検索とは?セマンティックウェブの概念と検索結果の表示例を解説