Introduction to Web

Introduction to Masanobu Naruse

HTTP/1.1 200 OK Cache-Control: public, no-store, max-age=0, no-cache, no-store, must-revalidate
Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html>

本題の前に

どんな木がある？

何の木？

Homage to knowledge

HTML Web

Web HTML HTTP URI

Agenda 1. Summary 2. URI 3. HTTP 4. HTML

サイト閲覧

何が起きてる？

Browser Server

Browser Server nrslib のサイトを見たい！

Browser Server nrslib のサイトを見たい！ https://nrslib.com をブラウザに入力！

Browser Server Request

Browser Server Request GET https://nrslib.com/ HTTP/1.1 Host: nrslib.com Connection: keep-alive
Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9, image/webp,image/apng,*/*;q=0.8,application/signed- exchange;v=b3 Accept-Encoding: gzip, deflate, br Accept-Language: ja,en-US;q=0.9,en;q=0.8 Cookie: _ga=GA1.2.1676611691.1531371612

Browser Server Request Response

Browser Server Request Response HTTP/1.1 200 OK Server: nginx Date:
Wed, 10 Apr 2019 03:21:30 GMT Content-Type: text/html; charset=UTF-8 Content-Length: 7641 Connection: keep-alive Set-Cookie: PHPSESSID=8cgpb0s6e570qrgjgdklaqcnf4; path=/ Expires: Thu, 19 Nov 1981 08:52:00 GMT Cache-Control: no-store, no-cache, must-revalidate Pragma: no-cache Link: <https://nrslib.com/wp-json/>; rel="https://api.w.org/" Vary: Accept-Encoding Content-Encoding: gzip ]{sG;̊<z6Xso&R(J5ҀΌ0$Uzg0O&@Gٱd/=aq-Mwst9=?`Ki6_. *** FIDDLER: RawDisplay truncated at 128 characters. Right-click to disable truncation. ***

テキストファイルのやり取り

Browser Server nrslib のサイトを見たい！ https://nrslib.com をブラウザに入力！

Request

Request Response

Web とは何か

インターネット = Web

歴史

Memex マイクロフィルムに保存スクリーンに投影

Memex マイクロフィルムに保存スクリーンに投影あるページから参照ページへ参照を辿ることができる

ハイパーテキスト

ハイパーテキスト超える

ハイパーテキスト複数の文書を相互に関連付け結びつける仕組み

ハイパーメディア

ハイパーメディアハイパーテキストを拡張テキストに限らず音声や動画などにも及ぶ

Web インターネットを使ったハイパーメディア

Uniform Resource Identifier

Uniform Resource Identifier 統一

Uniform Resource Identifier 統一資源

Uniform Resource Identifier 統一資源識別子

http://nrslib.com/blog

http://nrslib.com/blog http://nrslib.com/music

http://nrslib.com/blog http://nrslib.com/music http://nrslib.com/picture

http://nrslib.com/blog http://nrslib.com/music http://nrslib.com/picture http://nrslib.com/movie

http://nrslib.com/blog http://nrslib.com/music http://nrslib.com/picture http://nrslib.com/movie 識別子

http://nrslib.com/blog http://nrslib.com/music http://nrslib.com/picture http://nrslib.com/movie 識別子 Identifier

http://nrslib.com/blog

http://nrslib.com/blog nrslib.com/blog://http

http://nrslib.com/blog nrslib.com/blog://http //nrslib.com/blog:http

http://nrslib.com/blog nrslib.com/blog://http //nrslib.com/blog:http :http//nrslib.com/blog

http://nrslib.com/blog nrslib.com/blog://http //nrslib.com/blog:http :http//nrslib.com/blog //http:nrslib.com/blog

http://nrslib.com/blog Uniform 統一

Uniform Resource Identifier 統一資源識別子

Uniform Resource Locator

Uniform Resource Locator 統一資源場所

Uniform Resource Name

Uniform Resource Name 統一資源名前

urn:ISBN:0451450523

http://nrslib.com /isbn/0451450523 urn:ISBN:0451450523

http://nrslib.com /isbn/0451450523 urn:ISBN:0451450523 urn:ISBN:0451450523 は http://nrslib.com/isbn/0451450523 にある

http://nrslib.com /isbn/0451450523 urn:ISBN:0451450523 urn:ISBN:0451450523 は http://nrslib.com/isbn/0451450523 にある Name

http://nrslib.com /isbn/0451450523 urn:ISBN:0451450523 urn:ISBN:0451450523 は http://nrslib.com/isbn/0451450523 にある Name Location

URN は名前によって永続的な特定を可能にする

URL で十分永続的なので URL が主流に

URL URN URI

仕様

使える文字アルファベット数字一部記号

日本語は？

http://example.com/あ

http://example.com/あ http://example.com/%E3%81%82

%エンコーディング http://example.com/あ http://example.com/%E3%81%82

http://nrs:[email protected]:8000/search?date=20190908&type=all#i1 スキーム: http ユーザ情報: nrs:pass ホスト名: example.com ポート番号: 8000 パス:
/search クエリパラメータ: date=20190908&type=all フラグメント: i1 URL の構成

Cool URLs don’t change

Cool URLs don’t change https://www.w3.org/Provider/Style/URI.html

http://www.nsf.gov/cgi-bin/pubsys/browser/oldbrowse.pl

http://example.jp/home.jsp?jsessionid=99999999

1. プログラミング言語の拡張子（.pl, .jsp, etc.）を利用しない

1. プログラミング言語の拡張子（.pl, .jsp, etc.）を利用しない 2. 実装に依存（cgi-bin, etc.）したパス名を利用しない

1. プログラミング言語の拡張子（.pl, .jsp, etc.）を利用しない 2. 実装に依存（cgi-bin, etc.）したパス名を利用しない 3. セッションIDを含めない

1. プログラミング言語の拡張子（.pl, .jsp, etc.）を利用しない 2. 実装に依存（cgi-bin, etc.）したパス名を利用しない 3. セッションIDを含めない 4.
リソースを表現する名詞にする

リソースを表現する名詞にする http://example.jp/home.jsp?jsessionid=99999999

リソースを表現する名詞にする http://example.jp/home http://example.jp/home.jsp?jsessionid=99999999

ユーザビリティ

http://example.com/blog/x12s23ka09

http://example.com/blog/x12s23ka09 次の記事の URL は？

http://example.com/blog/0000000001

http://example.com/blog/0000000001 次の記事の URL は？

http://example.com/blog/2019/01/01

http://example.com/blog/2019/01/01 次の記事の URL は？

URL は重要視しよう

Hyper Text Transfer Protocol

Hyper Text Transfer Protocol ハイパーテキスト転送規約

Saluton ！？

Saluton ！？会話するには言語＝規約が必要

Hyper Text Transfer Protocol ハイパーテキスト転送規約

Browser Server Request HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 ...
<!DOCTYPE html> <html> ... GET http://nrslib.com HTTP/1.1 Host: nrslib.com ... Response

GET http://nrslib.com HTTP/1.1 Host: nrslib.com

HTTPメソッド

GET POST PUT DELETE HEAD OPTIONS TRACE CONNECT ETC.

GET リソースの取得

POST リソースの作成

PUT リソースの更新

DELETE リソースの削除

Create Read Update Delete

Create Read Update Delete POST

Create Read Update Delete POST GET

Create Read Update Delete POST GET PUT

Create Read Update Delete POST GET PUT DELETE

ブログに記事を投稿したい

？ブログに記事を投稿したい

POST ブログに記事を投稿したい

？ブログの記事を閲覧したい

GET ブログの記事を閲覧したい

？ブログの記事を更新したい

PUT ブログの記事を更新したい

？ブログの記事を削除したい

DELETE ブログの記事を削除したい

HTTPステータスコード

Browser Server Request Response HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8
... <!DOCTYPE html> <html> ... GET http://nrslib.com HTTP/1.1 Host: nrslib.com ...

ブログの記事を閲覧したい GET OK

ブログの記事を閲覧したい OK

ブログの記事を閲覧したい 200 OK

ブログの記事を閲覧したい GET NOT FOUND

ブログの記事を閲覧したい 404 NOT FOUND

1XX 情報 2XX 成功 3XX リダイレクション 4XX クライアントエラー 5XX サーバーエラー

代表的なステータスコード

200 OK

301 Moved Permanently

301 http://example.com/isbn/0451450523

301 http://example.com/isbn/0451450523 http://example.com/unicorn

302 Found

302 http://example.com

302 http://example.com http://example.jp

400 Bad Request

ユーザ作成しよう！ 400

成瀬 400

成瀬ユーザ名はアルファベットだけです！ 400

401 Unauthorized

403 Forbidden

ユーザ作成しよう！ 403

nrs 192.168.XXX.XXX 403

192.168.XXX.XXX 403 nrs ホワイトリスト 192.168.XXX.XXY 192.168.XXX.YYY :

192.168.XXX.XXX 許可されてません 403 ホワイトリスト 192.168.XXX.XXY 192.168.XXX.YYY : nrs

404 Not found

500 Internal Server Error

503 Service Unavailable

418 I’m a teapot

418 I’m a teapot ティーポットにコーヒーを淹れさせようとして拒否された場合に返却

https://www.google.com/teapot

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

ステートフル

アジェンダつくっておいて

わかりました

しばらくして

あの仕事終わった？

終わってます！ Agenda

ステートレス

あの仕事終わった？

え？何の話です？

HTTP はステートレスステートフル or

ステートフルの問題

Load Balancer

Add to Cart Item Load Balancer

Add to Cart Item Cart Item Load Balancer

Buy Cart Item Load Balancer

Buy Cart Item Cart Load Balancer

Buy Cart Item Cart !? Load Balancer

Add to Cart Item Load Balancer

Add to Cart Item OK Load Balancer

Load Balancer Buy Item

Load Balancer Item OK Buy

ログインは？

Browser ID: nrs PASS: XXX

Login Browser ID: nrs PASS: XXX

Login Browser ID: nrs PASS: XXX Session SessionId: ak1sAs23 Id:
nrs

Login Browser Session SessionId: ak1sAs23 Id: nrs

Browser Set-Cookie SessionId: ak1sAs23 Session SessionId: ak1sAs23 Id: nrs

Browser Session SessionId: ak1sAs23 Id: nrs Cookie SessionId: ak1sAs23

Browser Item Buy Session SessionId: ak1sAs23 Id: nrs Cookie SessionId:
ak1sAs23

Browser Item Buy SessionId ak1sAs23 Session SessionId: ak1sAs23 Id: nrs
Cookie SessionId: ak1sAs23

Browser Item Session SessionId: ak1sAs23 Id: nrs Cookie SessionId: ak1sAs23
SessionId ak1sAs23

Session SessionId: ak1sAs23 Id: nrs Browser Item SessionId ak1sAs23 Cookie
SessionId: ak1sAs23

Browser Item OK Session SessionId: ak1sAs23 Id: nrs Cookie SessionId:
ak1sAs23 SessionId ak1sAs23

HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 ... <!DOCTYPE html> <html>
...

HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Set-Cookie: SessionId=ak1sAs23 <!DOCTYPE html>
<html> ...

<html> ... リクエストライン or レスポンスラインヘッダ空行ボディ

<html> ...

HyperText Markup Language

文書構造をコンピュータに理解させたい

ドメイン駆動設計を検索

ドメイン駆動設計を検索初心者向けセミナー開催しました。たくさんのひとたちが来場してくれて大盛り上がりです。クリーンアーキテクチャのセッションをしました。とても難解な講義になりますが皆さんがんばってついてきてくれました。ボトムアップドメイン駆動設計というセミナーを開催しました。知識を得るのに熱心なお客様にたくさん集まって頂けて楽しいセッションでした。

ドメイン駆動設計を検索初心者向けセミナー開催しました。たくさんのひとたちが来場してくれて大盛り上がりです。クリーンアーキテクチャのセッションをしました。とても難解な講義になりますが皆さんがんばってついてきてくれました。ボトムアップドメイン駆動設計というセミナーを開催しました。知識を得るのに熱心なお客様にたくさん集まって頂けて楽しいセッションでした。どうしたものか

ドメイン駆動設計を検索 <section> <h1>初心者向けセミナー開催しました。</h1> <p>たくさんのひとたちが来場してくれて大盛り上がりです。</p> </secion> <section> </h1>クリーンアーキテクチャのセッションをしました。</h1> <p>とても難解な講義になりますが皆さんがんばってついてきてくれました。 </p>
</section> <section> <h1>ボトムアップドメイン駆動設計というセミナーを開催しました。</h1> <p>知識を得るのに熱心なお客様にたくさん集まって頂けて楽しいセッションでした。</p></section>

ドメイン駆動設計を検索 <section> <h1>初心者向けセミナー開催しました。</h1> <p>たくさんのひとたちが来場してくれて大盛り上がりです。</p> </secion> <section> </h1>クリーンアーキテクチャのセッションをしました。</h1> <p>とても難解な講義になりますが皆さんがんばってついてきてくれました。 </p>
</section> <section> <h1>ボトムアップドメイン駆動設計というセミナーを開催しました。</h1> <p>知識を得るのに熱心なお客様にたくさん集まって頂けて楽しいセッションでした。</p></section> タイトルだけ検索

ドメイン駆動設計を検索 <section> <h1>初心者向けセミナー開催しました。</h1> <p>たくさんのひとたちが来場してくれて大盛り上がりです。</p> </secion> <section> </h1>クリーンアーキテクチャのセッションをしました。</h1> <p>とても難解な講義になりますが皆さんがんばってついてきてくれました。</p>
</section> <section> <h1>ボトムアップドメイン駆動設計というセミナーを開催しました。</h1> <p>知識を得るのに熱心なお客様にたくさん集まって頂けて楽しいセッションでした。</p></section> タイトルだけ検索

プログラムで解釈しやすくなる

プログラムで解釈しやすくなる Browser

サンプル

Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> <title>Introduction</title>

Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> <title>Introduction</title> start tag 開始タグ end tag 終了タグ

Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> <title>Introduction</title> start tag 開始タグ end tag 終了タグ element 要素

Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> <title>Introduction</title> element 要素

Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> <meta charset=“utf-8” />

Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> <meta charset=“utf-8” /> 要素がないときの書き方

Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> <meta charset=“utf-8” /> attribute 属性

Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> ヘッダ

Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> ボディ

詳しいところはフロントエンドの講義で

最後に

この図を覚えてますか

Web HTML HTTP URI

Web HTML HTTP URI まだまだいっぱい木はある

知識を掛け算してユニークになろう

Auther nrs HomePage https://nrslib.com Twitter @nrslib

Introduction to Web

Introduction to Web

More Decks by nrs

Other Decks in Technology

Featured

Transcript