Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTTPをしゃべろう~Firefoxになるために~
Search
tera
October 01, 2016
Technology
0
170
HTTPをしゃべろう~Firefoxになるために~
平成28年10月1日(土): CookHack #1 〜火狐(フォクすけ)とパイを焼きまくれ!〜 にて話しました
tera
October 01, 2016
Tweet
Share
More Decks by tera
See All by tera
ピッてやるとシュッてなるやつを作った話
tera
0
190
Pythonを読む
tera
0
210
importを理解したかった
tera
0
550
RustでShell作ろう
tera
0
880
Other Decks in Technology
See All in Technology
技術イベントはなんとかひねり出す 日経の技術広報の取り組み/techpr3
nishiuma
0
230
イチから学ぶdbt / Learn dbt from scratch
shinyaa31
0
160
10 Years of Kubernetes Patterns Evolution
bibryam
1
100
CI/CDがあたりまえの今の時代にAPIテスティングツールに求められていること / CI/CD Test Night #7
k1low
12
3.1k
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
1.5k
こんなに簡単!AWSマルチアカウント
takuya_terada
0
120
SaaS型Webサービス「カオナビ」のチーム開発でPackage by Featureを取り入れた話/Implementing Package by Feature in kaonavi
kaonavi
0
120
中学生でもわかる深層学習
e869120
14
4.6k
KubeCon EU 2024 : Knative Maintainers Session
salaboy
0
380
戦略的DDDを実践するための跳躍力 / OOC 2024
pictiny
6
4.3k
中央集権体制からDataOpsへの転換 / centralized-to-dataops-transformation
pei0804
7
1.6k
TypeScript Quiz (Encraft #12 Frontend Quiz Night)
uhyo
6
840
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Gamification - CAS2011
davidbonilla
76
4.5k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
Fireside Chat
paigeccino
19
2.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
How STYLIGHT went responsive
nonsquared
92
4.7k
Transcript
HTTPをしゃべろう ~Firefoxになるために~ By @tera_3939
自己紹介 • お名前 • @tera_3939 • 所属 • Firefox学生マーケティングチーム •
Rustはむつかしい…… • Webできない……
はなすこと • 自己紹介 • Firefoxが何をしているか知る • HTTPについて • リクエスト •
レスポンス • 実際にしゃべる
Firefoxになるためには
まず何をしているか知ろう
Firefoxが何をしているのか HTTP・HTTPS とかで リソースを取ってくる レンダリングエンジンで ちょめちょめ Webページを表示 詳しくは:“ブラウザの仕組み: 最新ウェブブラウザの内部構造” http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
Firefoxが何をしているのか HTTP・HTTPS とかで リソースを取ってくる レンダリングエンジンで ちょめちょめ Webページを表示 今回は ここになる 詳しくは:“ブラウザの仕組み:
最新ウェブブラウザの内部構造” http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
くわしいひとへ • 今回HTTPSのお話はないです • HTTP/2のお話もないです • (というか僕がまったくわからない)
HTTPとは • HyperTextTransferProtocol • ステートレス • C/Sモデル • リクエストとレスポンスで成り立っている •
テキストデータでやり取り • TCPで80番ポート • 今はもう大概HTTPS
しくみ クライアント サーバー リソースちょーだい あいよ リクエスト レスポンス
実際に見てみる • Firefoxの開発ツール(F12)のネットワークで確認
リクエスト • クライアントからサーバーに要求をする • /index.htmlをちょーだい、とか
要求例 GET /hoge/fuga.html HTTP/1.1 // request-line Host: foobar.co.jp // header-field
request-line • どんなリクエストなのか表す • データを取得するだけとか、データを送信したいとか
request-line method SP request-target SP HTTP-version CRLF SP: 半角スペース CRLF:
改行文字
request-line • method • サーバーに要求する動作の指定 ex) GET, POST • request-target
• 要求するコンテンツの場所 ex) /, /img/hoge.png • HTTP-version • 使用するプロトコルのバージョン ex) 1.1
header-field • リクエスト自身の情報を表す • HostとかUser-Agentとか
header-field field-name “:” OWS field-value OWS OWS: 省略可能な半角スペース
header-field • field-name • HostとかUser-Agentとか • field-value • ドメイン名とか
レスポンス • サーバーからの応答 • 問題ないよとか、そんなもんねぇよとか
応答例 HTTP/1.1 200 OK // status-line Date: Tue, 20 Sep
2016 14:25:52 GMT // header-field Content-Type: text/html ...
status-line HTTP-version SP status-code SP reason-phrase CRLF SP: 半角スペース CRLF:
改行
status-line • HTTP-version • HTTPのバージョン ex) HTTP/1.1とか • status-code •
サーバーの応答結果 ex) 200とか404とか • reason-phrase • status-codeに対応した単語とか ex)OKとかNOT FOUNDとか
header-field • field-name • Content-TypeとかDateとか • field-value • text/htmlとか
まとめると
リクエストを送ると GET /hoge/fuga.html HTTP/1.1 // request-line Host: foobar.co.jp // header-field
応答が来る HTTP/1.1 200 OK // status-line Date: Tue, 20 Sep
2016 14:25:52 GMT // header-field Content-Type: text/html ...
これをさえあれば • HTTPがしゃべれる!!
これをさえあれば • HTTPがしゃべれる!! =Firefoxになれる!!!
実際に“なってみる“
telnet • TCPを話せる • 相手につないでテキストデータを送れる • デフォルトのポート番号は23番
$ telnet domain.name 80
None
Firefoxになった!!(?)
5分9厘ぐらいは……
まとめ • Firefoxは偉大
詳細 • RFC(Request for Comments) • HTTP/1.1は7230~7235に書いてある(らしい) • 結構みっちり決まってる •
英語(死)