Webアプリケーションとは何か

2017-06-03 Java勉強会向け資料

Transcript

1. /40 8FCΞϓϦέʔγϣϯ ͱ͸Կ͔ʁ 2017/06/03 ⽊村 憲規 1
2. /40 ͸͡Ίʹ Webアプリケーションの開発をする前に 裏側の仕組みについて把握しましょう 2
3. /40 ΫϥΠΞϯταʔόʔϞσϧ Webブラウザ Webサーバー 3
4. /40 ΫϥΠΞϯταʔόʔϞσϧ Webブラウザ Webサーバー 1. リクエスト 4
5. /40 ΫϥΠΞϯταʔόʔϞσϧ Webブラウザ Webサーバー 1. リクエスト 2. レスポンス 5
6. /40 63-
   (Uniform Resource Locator) リソースの場所を表す リソース：HTMLや画像ファイルなど 6
7. /40 63-
   (Uniform Resource Locator) https://www.example.com/index.html プロトコル ホスト名 パス 7
8. /40 )551
   ͱ )5514 HTTP (HyperText Transfer Protocol) WebブラウザとWebサーバの間でHTMLなどの コンテンツの送受信に⽤いられる通信プロトコ ル 8
9. /40 )551
   ͱ )5514 HTTPS (HTTP over SSL/TLS) メッセージを平⽂のままで送受信する標準の HTTPと異なり、SSL/TLSプロトコルを⽤いて、 サーバの認証・通信内容の暗号化・改竄検出な どを⾏う。 9
10. /40 )551ϦΫΤετ Webブラウザ Webサーバー 1. リクエスト 2. レスポンス 10
11. /40 )551ϦΫΤετ • HTTPリクエストの構成要素 • リクエストライン • ヘッダ • ボディ 11
12. /40 %&.0 • telnet で example.com に接続してみる 12
13. /40 %&.0
    ղઆ リクエスト レスポンス 13
14. /40 %&.0
    ղઆ リクエストライン ヘッダー GETメソッドではBody不要 空⾏ 14
15. /40 %&.0
    ղઆ メソッド パス バージョン 15
16. /40 ϝιου GET POST PUT DELETE HEAD OPTION TRACE CONNECT 16
17. /40 ϝιου GET POST PUT DELETE HEAD OPTION TRACE CONNECT 17
18. /40 ϝιου GET POST PUT DELETE HEAD OPTION TRACE CONNECT URLで⽰されたリソースを サーバーから取得する クライアントからサーバー へデータを投稿する 18
19. /40 )551Ϩεϙϯε Webブラウザ Webサーバー 1. リクエスト 2. レスポンス 19
20. /40 )551Ϩεϙϯε • HTTPレスポンスの構成要素 • レスポンスライン • ヘッダ • ボディ 20
21. /40 %&.0
    ղઆ レスポンスライン ヘッダ 空⾏ ボディ 21
22. /40 εςʔλείʔυ ステータスコード 内容 100番台 情報 200番台 成功 300番台 リダイレクションメッセージ 400番台 クライアントエラー 500番台 サーバーエラー HTTP レスポンスコード - HTTP | MDN https://developer.mozilla.org/ja/docs/Web/HTTP/Status 22
23. /40 8FCϒϥ΢βͷ໾ׂ HTTPレスポンスはテキストであり、 Webブラウザが適切に解釈し表⽰し ている 23
24. /40 8FCϖʔδΛߏ੒͢Δཁૉ • HTML • CSS • JavaScript 24
25. /40 )5.- • HyperText Markup Language • タグによって⽂章の意味付けや構造を定義する • タグに囲まれた⽂章を要素と呼ぶ 25
26. /40 $44 • Cascading Style Sheet • HTMLの要素に対して、フォントサイズや⾊、 背景⾊といった装飾をおこなう 26
27. /40 +BWB4DSJQU • Webブラウザが提供する DOM (Document Object Model) API を介して HTML要素の操作 を⾏う • AjaxによりWebサーバーと⾮同期通信を⾏う 27
28. /40 8FCΞϓϦέʔγϣϯͱ͸ʁ Webブラウザ Webサーバー 28
29. /40 8FCΞϓϦέʔγϣϯͱ͸ʁ Webブラウザ Webサーバー 操作 29
30. /40 8FCΞϓϦέʔγϣϯͱ͸ʁ Webブラウザ Webサーバー 操作 リクエスト 30
31. /40 8FCΞϓϦέʔγϣϯͱ͸ʁ Webブラウザ Webサーバー レスポンス の⽣成 操作 リクエスト 31
32. /40 8FCΞϓϦέʔγϣϯͱ͸ʁ Webブラウザ Webサーバー レスポンス の⽣成 操作 リクエスト レスポンス 32
33. /40 8FCΞϓϦέʔγϣϯͱ͸ʁ Webブラウザ Webサーバー HTML CSS JavaScript レスポンス の⽣成 操作 リクエスト レスポンス 33
34. /40 8FCΞϓϦέʔγϣϯͱ͸ʁ Webブラウザ Webサーバー HTML CSS JavaScript レスポンス の⽣成 操作 表⽰ リクエスト レスポンス 34
35. /40 8FCΞϓϦέʔγϣϯͷఆٛ クライアントからのリクエストごと にサーバー側の処理で状況に合わせ たWebページが⽣成されることによ り、何かしらの機能が提供されるア プリケーション 35
36. /40 8FCΞϓϦέʔγϣϯ։ൃͷର৅ൣғ Webブラウザ Webサーバー HTML CSS JavaScript レスポンス の⽣成 操作 表⽰ リクエスト レスポンス 36
37. /40 <ࢀߟ>
    ϒϥ΢βͷ։ൃ ऀπʔϧʹ͍ͭͯ 37
38. /40 ΍ΓͱΓͷத਎ΛݟΔ ブラウザに組み込まれている「開発者ツール」 でHTTPのやりとりの中⾝を確認できます。 ブラウザによって起動⽅ 法や使い⽅は異なります 38
39. /40 ΍ΓͱΓͷத਎ΛݟΔ 1. ブラウザを起動し http://www.example.com を表⽰する 2. 開発者ツールを起動する (Google Chromeの場合は右クリックà検証) 3. ブラウザでスーパーリロード (Shift + F5) を ⾏う 39
40. /40 ΍ΓͱΓͷத਎ΛݟΔ リクエスト レスポンス 40