web基礎
for debug web
Table of contents
1. HTTP
2. Web界隈の最近のはやりもの
ブラウザ
Web
Webシステム概観
マインドマップ参照
webに関わる多数の仕様
HTTP(Highper Text Transfer Protocol)
● 処理の起点はクライアント
➡サーバから能動的に通信を行えない
 ➡サーバからデータ送信する仕組み
  ajax(随時ポーリング)
  commet
➡HTML5ではWebSocketが導入
HTTP(Highper Text Transfer Protocol)
● 1回の行ってこい(リクエスト、レスポンス)で完結
➡本来は状態維持できないので、画面間で
データを単純には受け渡しできない。
 ➡セッションやDatabase(サーバ側)
 ➡cookie
 ➡HTML5ではDatabase(ブラウザ側)が可能
HTTP(Highper Text Transfer Protocol)
● すべて文字列(型がない)
➡サーバサイドでプログラムに取り込む際にコン
バート、バリデーションが必要
 ➡Webフレームワークの機能の一つ
➡盗聴が可能
 ➡SSL、TLSによる暗号化
Fidller wireshark
体感HTTP
Fiddler(Microsoft謹製ツール)
➡.netが必要。インストールして起動するだけで
HTTP通信をキャプチャ
➡最近Oreillyから解説書が発売され
HTTP Status Code
参考:http://ja.wikipedia.org/wiki/HTTPステータスコード
番号 概要 意味
100~102 Informational 情報 リクエストは受け取られた。処理は継
続される。
200~207, 226 Success 成功 リクエストは受け取られ、理解され、受
理された。
300~307 Redirection リダイレクション リクエストを完了させるために、追加
的な処理が必要
400~418
422~426
Client Error クライアントエラー クライアントからのリクエストに誤りが
あった。
500~510 Server Error サーバエラー サーバがリクエストの処理に失敗し
た。
よくでてくるやつら
番号 概要 意味 エラーの原因
200 OK 正常終了 -
302 リダイレクト 別ページへの移動 -
400 bad request クライアント側の要求がいけ
てない
401 認証エラー (ベーシック or ダイジェスト)
認証失敗
認証情報の設定、入力した値
が誤っている
403 拒否 サーバがリクエストを受け付
けたが、返信を拒否した
404 not found アクセスしようとしているペー
ジはない
<a>や<form>のさしている
URLが誤っている
500 サーバエラー サーバ側で問題が発生してい
る。
DBが落ちてる、プログラムエ
ラーなど
503 サービスUnavilable サービスが使用できない サーバ負荷が高い
redirect vs forward(transfer)
別資料参照
HTTP メソッド
<form>タグで指定されるあれ
RESTFulはメソッドとURLの活用してWebサービスを作ろうという考え
種類 概要 用途
GET <a>タグによるリンク。
<form>にてGET指定された
submit
URL上にパラメータとして表示。
同じURLを入力すれば同じページが開
く
POST <form>にてPOST指定された
submit
秘密の情報を送る場合、
ファイルをアップロードする場合
PUT <form>にてPUT指定された
submit
<form>にてPUT指定されたsubmit
データの更新処理
DELETE <form>にてDELETE指定され
たsubmit
<form>にてDELETE指定された
submit
データの削除処理
HTTP2.0
● 現在策定中
● ベースはSPDY(Google)
➡HTTPS通信が基本
➡Webページの読み込み速度を50%改善(目
標)
➡多重化:一度のTCP接続で複数リクエスト処理
➡ブラウザ、サーバで徐々に実装が進んでいる
HTML5
● 2014年正式勧告をめざしている
→ブラウザの実装状況はまちまち
● タグ要素を追加して、HTMLとしての表現力アッ
プ。
● HTMLとは言いつつ、Javascriptを含めてより
WindowsFormアプリなどに近づいた。
HTML5
● semantic web
機械に解釈できるWeb
Web検索において、より有効なデータを引っ
張ってこれるようになる。
→<section>
● adobe flashの代替
→<canvas>
動画や画像の表示、図形描画
HTML5
● input要素の追加
○ date
○ tel
○ email
○ url
○ number
○ スライダー
HTML5
● Web Socket
相互通信
● Web worker
スレッド処理
● Web Storage
クライアントDB
javascriptフレームワーク
● jQuery
● node.js
● Angular.js
CSS3
表現力のアップ、マルチメディア対応
● セレクタ
● 2D,3D対応
● アニメーション
● 印刷
● 音声
http://www.htmq.com/css3/
DB
● 従来のRDB
MySQL(Oracle)→MariaDB
● 分散DB
PostgreSQL
MySQL
Oracle ExaData , Grid
NoSQL
● Cache
● ビッグデータ
Hadoop(Google)
Cassandra(Facebook)
ドキュメント指向(JSON)
MongoDB
CouchDB
HTML Tips
● Tips
<base>タグ
リンクなどの基底のURLを指定
デフォルトはホストとなっている
<head> <base href="http://host"> </head>
<a href="index.html>
↓
<a href="http://host/index.html>
HTML TIps2
● <form enctype="multipart-formdata">が必須
● ファイルアップロードはリモートにあるサーバとの
間で行う
→サーバ側でクライアント上のパスを持っていて
も何の意味もない
参考文献
● HTTPの教科書

Web基礎