Web入門

1. 年末年始勉強会１回⽬鈴⽊貴⼤（たかぴー）

2. 本⽇の流れ 2 • 進め⽅ • URL(URI) • HTTP • REST • Webアプリとは • Webアプリの構造

4. 進め⽅｜各回について 4 • スライドで（頑張って）説明しつつ，実際に動かしてもらう • スライドが⾯倒すぎたら変えるかも。。。 • 極⼒頑張ります︕ • 基本的には仮想環境上で作成 • そこらへんも知りたければ話します • フォルダ構成については検討中 →現状ネストし過ぎ

5. 進め⽅｜スライドや発⾔について 5 • スライドの⾊使いや強調などは（極⼒）以下に従う • ⻘⽂字 ︓覚えた⽅が良いと思われる単語 • 太⽂字 ︓強調① • オレンジ⽂字︓強調②（①でクドい時に使⽤） • 下線 ︓違いに注意︕ • ⼝頭での説明は（やっぱり極⼒）以下を意識 • 知っておいた⽅が良さそうな単語は積極的に利⽤ →⽌めてくれて構わないです

7. URL｜よく⾒るURLの構造 7 • http://example.com/domains • <スキーム名>://<ホスト名>/<パス> と分解できる • 実際にはホスト名の後に『:80』が省略されている • プロトコルに対応するポート番号は省略できる︕ • HTTPは80番， HTTPSは443番（ウェルノウンポート） • やってみようのコーナー • 上のURLをブラウザで⼊⼒してみよう • ポート番号を明⽰して⼊⼒してみよう • プロトコルをHTTPSにして試してみよう

8. URL｜スキーム名について 8 • スキーム名では，通信プロトコルを指定する • http, https, ftpなど • ftpを指定することあるんだろうか。。。︖

9. URL｜ホスト名について 9 • 通信をしたいサーバーの名前のこと • 『https://www.example.com』だったら，www.example.com という名前のサーバーと通信をしたい • ⽂脈によって指しているものが違うので注意 1. あるネットワーク上の特定の１つの計算機の場合 2. インターネット上の特定の１つの計算機の場合 • 同じものをドメイン名と呼ぶこともある • IPアドレスに対応付けた⽂字列＝ドメイン名，特定の計算機の名前＝ホスト名，くらいの気持ちで，同じものを指している（と思っている）

10. URL｜ポートについて 10 • 計算機の外部と通信を⾏うための港みたいなもの • XXXX番の港ではA社向けの商品， YYYY番の港ではB社向けの商品〜，みたいなイメージ • ポート番号を指定してサーバーを起動する • 提供側の所望のアプリのポート番号は知らなければならない • A社向けの製品がB社の港に来たら困るよ〜 • HTTPは80番，SSHは22番，HTTPSは443番など⼤体決まってる • SSHはセキュリティの都合で違うポート番号の場合もある

12. HTTP｜HTTPとは 12 • Hyper Text Transfer Protocol の略 • Webを介してデータのやり取りをするためのプロトコル • クライアントがサーバーに対してリクエストを投げ，サーバーはクライアントに対してレスポンスを返すリクエストレスポンスクライアントサーバー（鯖）

13. HTTP｜リクエストの中⾝ 13 • 以下の３要素から構成される • リクエストライン︓リソースのパスとそれに対するメソッド， HTTPのバージョンが記載 • ヘッダー ︓付加情報を『フィールド名︓値』の組が記述 ex) OS情報，cookie情報 • ボディ ︓パラメータが記述リクエストラインヘッダーボディ

14. HTTP｜レスポンスの中⾝ 14 • 以下の３要素から構成される（構成要素はリクエストと同じ） • ステータスライン︓HTTPのバージョン，ステータスコード，テキストフレーズが記載 ex) （status code, text phrase) = (200, OK), (404, Not Found) • ヘッダー ︓リクエストの場合と同様 • ボディ ︓リソースの内容を記述ステータスラインヘッダーボディ

15. HTTP｜やり取りをみてみよう① 15 • Chromeで簡単にクライアントとサーバーのやり取りを確認可能 1. どのページでもいいので右クリック 2. 「検証」をクリック 3. 「Network」をクリック 4. ブラウザで『http://www.example.com』と⼊⼒しエンター 5. Nameの「www.example.com」をクリック 6. ぽちぽちしてみましょう

16. HTTP｜やり取りをみてみよう② 16 • curlコマンドでもう少し⽣な状態のやり取りをみてみよう 1. shellで「curl --verbose http://www.example.com」と⼊⼒ 2. 「＞」が先頭にある⾏はリクエスト，「＜」が先頭にある⾏はレスポンスなので確認しよう 3. URL(URI)を適当に変更してステータスコードとテキストフレーズの変化を確認しよう

18. REST｜RESTとは 18 • Representational State Transferの略 • WebAPIの設計モデルのこと • この規則に基づいて作成していこう︕的なもの • RESTの原則に則って作成されたAPIをRESTful APIと⾔う • 原則全てを満たしてなくてもRESTfulであると呼んだりする • 今どきのAPIは⼤体RESTful（だと思っている）

19. REST｜RESTの設計原則 19 • URL(URI)は名詞のみで構成（操作を含めない） ✘ ︓http://dummyhostname/getUsers ◯ ︓http://dummyhostname/users • リソースに対する操作は（リクエスト）メソッドを介して⾏う • GETやPOSTなど • ステートレス • セッションの状態を保持しないということ • リンクを⽤いた状態遷移

20. 本⽇の流れ 20 • 進め⽅ • URL(URI) • HTTP • Rest • Webアプリとは • Webアプリの構造

21. Webアプリとは 21 • 動的にHTMLを⽣成して返す機構を備えたWebサイトのこと • ユーザーごとに違ったマイページを表⽰する，ログイン前とログイン後で表⽰内容を変える，など • 動的に⽣成されたページは動的ページという（らしい） • 静的（いつ誰に対しても同じ）なページは静的ページという • 全てが全て動的である必要はない

23. Webアプリの構造｜３要素 23 • Webアプリは以下の３要素から構成される • Webサーバー ︓クライアントからのリクエストを処理する • APサーバー ︓動的ページの⽣成をする • DBサーバー ︓データの書き込み，取り出しを⾏う Webサーバー APサーバー DBサーバー

24. Webアプリの構造｜３要素の連携 24 • 静的なもののみを返せば済む場合 Webサーバー APサーバー DBサーバーリクエストレスポンス

25. Webアプリの構造｜３要素の連携 25 • 動的なものを返す必要がある場合 Webサーバーリクエストレスポンス APサーバー DBサーバー作成要求データ要求データ送信ページ送信

27. おしまい

Web入門

You are reading a preview.

Check these out next

Web入門

More Related Content

Slideshows for you (20)

Recently uploaded (20)

Web入門