Learn Http Requests & Responses for Test Engineer
40
WebアプリケーションとHTTP通信 Takashi MORIYAMA
-
Upload
takashi-moriyama -
Category
Internet
-
view
269 -
download
0
Transcript of Learn Http Requests & Responses for Test Engineer
WebアプリケーションとHTTP通信
Takashi MORIYAMA
はじめに
この講座の目的
● Webアプリケーションにおける HTTP通信周辺の機能と役割を理解し、それらに起因する（orしない）問題切り分けを可能にすること
この講座のゴール
● HTTPの基本概念の理解● HTML/CSS/JavaScriptとブラウザ● HTTPサーバーとアプリケーションサーバーの役割の理解● HTTP Cookie, HTTP ヘッダー,リクエストメソッドの概念理解● SSL（https）についての概念理解● Ajax, 非同期通信とJSONの理解
講座の理解に要求される技術レベル
● http://~~といわれて、どこに記述されているものかわかっている● APサーバー, HTTPサーバーという単語を聞いたことがあり、
おそらくそれを使ったであろうサービスを開発・テストした自覚がある
ここまで理解しているとこんなケースで役立ちます
● 特定のブラウザで動かない● クリックしたけど反応がない● 文字化けする● 文字化けが再現しない● Internal Server Errorとか出てますけど● 予定一括が動かない● JavaScriptエラーが発生する
Webアプリケーションとは？
HTTP通信を利用してネットワーク上にあるサーバーとクライアントのデータのやり取りを行うアプリケーション。
クライアントでは、サーバーから受け取ったデータ（HTML/CSS/JavaScriptなど）を解釈し、処理をおこないます。
ネットワーク
クライアント サーバー
データを要求します。データを受け取ったら解釈して処理します
要求された内容に応じて結果を返します
HTTP通信
HTTPとは
要約
● HTTPは情報をやりとりするためのルールである。
● HTTPはリクエストメソッドやエラーコード、ヘッダーなど
を持つことで、単純なデータのやり取り以上のことができる
● 具体的には、データに種類をつけてそれを要求することで、
欲しい種類のデータをやりとりすることが出来る
RFC 2616の概要よりハイパーテキスト転送プロトコル (HTTP) は、分散・共同体ハイパーメディア情報システムのアプリケーションレベルプロトコルである。 このプロトコルは、リクエストメソッド、エラーコード、ヘッダ等の拡張を経て、ネームサーバや分散オブジェクト管理システム等、ハイパーテキストのために使う以上に多くの作業のために用いる事ができる、一般的でステートレスなプロトコルである。 HTTP の特徴として、データ表現のタイプ付け、及びネゴシエーションがあり、これによって転送されるデータの独立性が確立されるようなシステムが構築できる。
HTTPのもう少し具体的なイメージ
日本語でみてます
データ送るから必要な結果ください！
スマホで見ています！
HTTPのもう少し具体的なイメージ
日本語のページを送りますね日本語でみてます
スマホで見ています！
スマホ用のページを送ります
データ送るから必要な結果ください！
送信先が見つかりませんでした
HTTPのもう少し具体的なイメージ
日本語でみてます
このページをください
スマホで見ています！
日本語のページを送りますね
スマホ用のページを送ります
そのページはないんです・・・
データ送るから必要な結果ください！
HTTPヘッダー
リクエストメソッド
HTTPレスポンス
レスポンスステータス
まとめ
● サーバーとクライアントのやりとりをやりとりするルールがHTTP● HTTPでは通信の種類や自身の情報（言語やブラウザ情報などなど）を
指定することができる● クライアントは、送られてきたデータを元に処理を行う
クライアントでは何をどう処理しているか？
ここからは、1つ1つの登場人物がどんなことをしているかを解説していきます。
クライアントは受信したデータを”解釈”して動く
クライアントでは、ブラウザを通してWebアプリケーションを利用します。
Webアプリケーションにおいては、HTMLとCSSとJavaScriptがブラウザ上での主な処理を担っています。
もちろんCSVをダウンロードしたり、PDFを表示したりもできますが、
基本的にはこれらがWebアプリケーションの根底くらいに
理解しておくといいです。
HTML
Hyper Text Markup Language の略。すごい版テキストをつくるマークアップ言語。
基本的なブラウザの表示内容や構造を扱います。
<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>
<h1>こんにちは世界</h1><p>これがHMTLです</p>
</body></html>
CSS
Cascading Style Sheet の略。多段的に適用出来るスタイル。
HTMLに対してレイアウトや色など、装飾を行う役割を果たします。
HTMLにも一部装飾の機能がありますが、それを分離してCSSに持たせようというのが基本的な思想です。
h1 { color : red;}
p { padding : 20px;}
#hoge p { padding : 30px;}
JavaScript
HTML/CSSだけでは出来ない機能（主に動的な処理）を担うために使われています。後述するAjaxもJavaScriptによるものです。
HTML/CSS/JavaScriptとブラウザ
HTML/CSS/JavaScriptは、データを受け取ったブラウザが「解釈」することによってアプリケーションとして機能します。※この解釈をする基盤を「レンダリングエンジン」と呼びます。Gecko やTridentなどがあります
しかし、標準的なルールはあるものの、
完全に統一されているわけではないため
ブラウザごとの解釈の違いが発生してしまう場合があります。
補足：HTML5について
リッチなアプリケーションを作成するために、現行のHTML4.4をさらに拡張したもの。
ブラウザにキャッシュされたDBのような機構をもったり、
Flashなどの技術を使わずに動画を再生させたり、
グラフィックの描画を可能にしたり
ということが提唱されています。
バズワードとして使われる際には、CSS3などを利用した
「ネイティブアプリに限りなく近いWebアプリケーション」
ということを指していたりします。
サーバー側は何をしているか
次はサーバー側について解説していきます。
サーバー側は、通常送られてきたリクエストをHTTPサーバーが処理します。
httpサーバーは、来たリクエストを元にサーバーアプリケーションに処理をさせたり、ファイルやページをそのまま送り返したりしています。
ネットワーク
クライアント HTTPサーバーアプリケーション
ファイルやページ
HTTPサーバーの役割
HTTPサーバーは、リクエストされた内容を返すときに、一緒にレスポンスコードというものも返します。通常3桁の数字で、代表的なものとしては以下のようなものがあります。
この4つくらいは覚えておいて損はないでしょう
● 200 : OK （要求されたものがあったので送ります。)
● 304 : not modified （あったけど更新されてないから送りません）
● 404 : not found （ファイルが見つかりません）
● 500 : Internal Server Error （アプリケーションがリクエストを処理できません）
HTTPで指定していることの細かい内容
さきほどは
HTTPでは通信の種類や自身の情報（言語やブラウザ情報などなど）を指定することができる
と書きました。これについてもう少し詳しくみていきます。
具体的には
● HTTPヘッダー● リクエストメソッド● HTTP Cookie
について説明していきます。
HTTPヘッダーについて
HTTPヘッダーにはリクエストヘッダーとレスポンスヘッダーがあります。
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8Accept-Encoding:gzip,deflate,sdchAccept-Language:ja,en-US;q=0.8,en;q=0.6Connection:keep-aliveCookie:JSESSIONID.277bd7cd=cf082a4aa199a341aeb166d1449e6b0f; screenResolution=1920x1080; PLAY_SESSION=717aac686ee3eb6e4de0e2a9423a4ac0fea8179e-%00username%3Amoriyama_t%40worksap.co.jp%00%00___AT%3A01e109cace32485819c49eddc96900d247796eeb%00Host:shurosvr14:9010Referer:http://shurosvr14:9010/User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36
e.g:モチベーション爆発日報に Chromeからリクエストを送ったヘッダーはこうなります。
リクエストヘッダーとして付加される内容
コンテンツの種類 : HTMLなのかjavascriptなのかといった情報
文字コード ：要求している文字コード
言語 ：日本語、フランス語
ブラウザの情報 ：レンダリングエンジンやバージョン
リクエストメソッド ：GET, POSTクッキー情報 ：キャッシュされた情報
お作法的なものもありますが、以下の様な内容を送っています。
レスポンスヘッダーとして付加される内容
ステータスコード : 200,304,404,500
大体一緒ですが、先ほど紹介した
レスポンスコードはレスポンスヘッダーにのみあります。
リクエストメソッドについて
HTTPリクエストを送る際には、リクエストメソッドを指定します。
GETとかPOSTとかいうやつです。一杯ありますが、今回は割愛します。
リクエストメソッドに応じてHTTPサーバーは応答を返します
それ以外の振る舞いの違いとしては、POSTメソッドで取得したコンテンツはブラウザ上にキャッシュしてはいけないルールがあるため、キャッシュされません。
Cookieについて
HTTP通信にはCookieという概念があります。
もともとHTTPはState-less（状態を持たない）通信だったのですが、
情報の保持をやっぱりしたい、という要望があり生まれました。
ログインセッション情報の保持などに利用されています。
あまりセキュリティについて考慮されていないという問題があり、
盗まれると個人情報を流出したりするリスクがあります。
SSLについて
HTTP通信では基本的にデータがやりとりされるため、もし間のネットワーク通信を傍受されてしまうと情報が流出してしまいます。
SSLはそれを解決する方式で、
https://からはじまるURLはSSLを利用しています。
公開鍵方式という方法を採用していて、
「このカギを使って暗号化してくれれば安全だよ。復号するキーはうちでしかもってないから」
っていう方式です。
あとすこしです。
ちょっといつ役にたつかわかりにくい小難しい話をしてしまいました。
最後に、HTTPの中でも「非同期通信」と呼ばれる方式について説明したいと思います。
非同期通信とは 概念的説明 1
ネットワーク
クライアント サーバー
通信を送って返ってくるまではなにもできない！
非同期通信の前に同期通信とはなにかを説明します。
通常のHTTP通信は同期通信ですが、リクエストを送信するとレスポンスが返ってくる（≒ページが再描画される）までは処理を継続できません。（たとえ送信ボタンを押してから別の入力項目を操作しても、ページが再描画されると反映されてませんよね）
これがリクエストとレスポンスが同期している状態です。
非同期通信とは 概念的説明 2
ネットワーク
クライアント サーバー
通信を送っても操作できるよ！
非同期通信ではその逆で、リクエストを飛ばしてもレスポンスを待つことなく
処理を行うことができます。
といってもピンとこないので例を出してみます。
わかりやすい例：GoogleMap
Google Mapは地図のロードを非同期で行っています。
この部分の地図をロードするリクエストが発生
まだロードされてないけど千葉がみたいから動かしちゃった
座標は動いたままロードされた地図が表示された
わかりやすい例：もしGoogleMapが同期通信なら
この部分の地図をロードするリクエストが発生
地図がロードされたら東京に戻っちゃった・・・
まだロードされてないけど千葉がみたいから動かしちゃった
非同期通信の意味的説明
画面遷移を行うことなく、一部のコンテンツのみの更新や、サーバーへのデータ反映を行うことが出来ます。
これにより、ユーザーが意識しないまま処理を行ったり、ページ遷移を減らすことでストレスを軽減したり、高速に処理ができるようになります。
たとえば以下のようなものは非同期通信を利用することで高いUXを実現しています。
● 自動セーブ機能● ページ送り（一部を描画することでコンテンツ量を減らし高速化）● 次のページの先読み（予め裏でコンテンツをロードしておく）
Ajaxについて
Asynchronous JavaScript + XMLの略です。
HTTPの非同期通信は多くの場合Ajaxによって行われています。
ちなみに別にXMLじゃなくてもいいです。
要するに、JavaScriptを利用して非同期通信を行うしくみのことを指しています。
実践編
概念の理解はここまで。少しだけ実践的に考えるやり方を紹介して終わります。
ここまで理解しました。何がわかる？
● 特定のブラウザで動かない
=>ブラウザの解釈が異なっている。JavaScript?CSS?どっちかだね。
開発者ツールを開いて差分を確認してみよう。
ここまで理解しました。何がわかる？
● クリックしたけど反応がない
=>ブラウザはちゃんとサーバーにリクエストを送信出来てるかな？
=> HTTPサーバーはきちんと受け取ってる？レスポンスコードは？
Access.logをみてみよう
=> JavaScriptは返却結果をきちんと描画できてるかな？
ここまで理解しました。何がわかる？
● 文字化けする● 文字化けが再現しない
=> ブラウザは文字コードをどう”解釈”してる？
=> リクエストとレスポンスの文字コード指定はどうなっているかな？
=> どの通信で文字化けしてる？全部？非同期だけ？
=> 他のブラウザだとどうなるかな？
ここまで理解しました。何がわかる？
● Internal Server Errorとか出てますけど
=> これはサーバーがリクエストを処理出来ない状態だなぁ。
サーバーが異常終了してしまっているのかな？
ここまで理解しました。何がわかる？
● ボタンを教えてもレスポンスが動かない
=>どの処理だろう？非同期通信かな？
=> Ajaxリクエストはきちんと飛んでいるかな？
=> レスポンスは帰ってきてるかな？
開発者ツールで見てみよう。
ここまで理解しました。何がわかる？
● JavaScriptエラーが発生する
=> ブラウザの解釈に違いはあるかな？
=> 取得したJavaScriptはきちんと更新されてる？304が返ってきてない？
以上です。
概念について細かい理解をしていなくても、おおまかに知っていることで問題へのあたりが圧倒的につけやすくなります。
興味のない領域に見えても、実はわかっていないと上手く出来ないことも多かったりします。
とりあえず食わず嫌いせずに一旦わかろうとしてみて、わかったことだけでも使っていけばよくなっていく様が目に見えてわかるはずです。
参考文献
Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)
技術評論社 (2010/4/8)
Studying HTTPhttp://www.studyinghttp.net/
いまさら聞けない、“Ajax”とは何なのか？ (1/3) - ＠IThttp://www.atmarkit.co.jp/ait/articles/0708/23/news134.html
3 Minutes Networkinghttp://www5e.biglobe.ne.jp/%257eaji/3min/
![Distributed Systems Fundamentals [Fall 2013]Du/Ds/Assets/Lectures/Lecture2.pdf–AJAX: asynchronous requests –XMLRPC, SOAP: web service API requests 6 Client Server requests responses](https://static.fdocuments.net/doc/165x107/5ebc43b9250c0f2ebf0838f3/distributed-systems-fundamentals-fall-2013-dudsassetslectureslecture2pdf.jpg)
