Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Web入門
- 2. 本⽇の流れ 2 • 進め⽅ • URL(URI) • HTTP • REST • Webアプリとは • Webアプリの構造
- 3. 本⽇の流れ 3 • 進め⽅ • URL(URI) • HTTP • REST • Webアプリとは • Webアプリの構造
- 4. 進め⽅｜各回について 4 • スライドで（頑張って）説明しつつ，実際に動かしてもらう • スライドが⾯倒すぎたら変えるかも。。。 • 極⼒頑張ります︕ • 基本的には仮想環境上で作成 • そこらへんも知りたければ話します • フォルダ構成については検討中 →現状ネストし過ぎ
- 5. 進め⽅｜スライドや発⾔について 5 • スライドの⾊使いや強調などは（極⼒）以下に従う • ⻘⽂字 ︓覚えた⽅が良いと思われる単語 • 太⽂字 ︓強調① • オレンジ⽂字︓強調②（①でクドい時に使⽤） • 下線 ︓違いに注意︕ • ⼝頭での説明は（やっぱり極⼒）以下を意識 • 知っておいた⽅が良さそうな単語は積極的に利⽤ →⽌めてくれて構わないです
- 6. 本⽇の流れ 6 • 進め⽅ • URL(URI) • HTTP • REST • Webアプリとは • Webアプリの構造
- 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はセキュリティの都合で違うポート番号の場合もある
- 11. 本⽇の流れ 11 • 進め⽅ • URL(URI) • HTTP • REST • Webアプリとは • Webアプリの構造
- 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)を適当に変更してステータスコードと テキストフレーズの変化を確認しよう
- 17. 本⽇の流れ 17 • 進め⽅ • URL(URI) • HTTP • REST • Webアプリとは • Webアプリの構造
- 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サイトのこと • ユーザーごとに違ったマイページを表⽰する， ログイン前とログイン後で表⽰内容を変える，など • 動的に⽣成されたページは動的ページという（らしい） • 静的（いつ誰に対しても同じ）なページは静的ページという • 全てが全て動的である必要はない
- 22. 本⽇の流れ 22 • 進め⽅ • URL(URI) • HTTP • REST • Webアプリとは • Webアプリの構造
- 23. Webアプリの構造｜３要素 23 • Webアプリは以下の３要素から構成される • Webサーバー ︓クライアントからのリクエストを処理する • APサーバー ︓動的ページの⽣成をする • DBサーバー ︓データの書き込み，取り出しを⾏う Webサーバー APサーバー DBサーバー
- 24. Webアプリの構造｜３要素の連携 24 • 静的なもののみを返せば済む場合 Webサーバー APサーバー DBサーバー リクエスト レスポンス
- 25. Webアプリの構造｜３要素の連携 25 • 動的なものを返す必要がある場合 Webサーバー リクエスト レスポンス APサーバー DBサーバー 作成要求 データ要求 データ送信ページ送信
- 26. 本⽇の流れ 26 • 進め⽅ • URL(URI) • HTTP • REST • Webアプリとは • Webアプリの構造
- 27. おしまい