Webそのものの基本と確認用のツール

- Firebugを中心に -

@wtnabe

本日のお品書き

今日は基礎的な内容です。

  1. Webそのものの基本要素をおさらい
  2. これらを Firefox + Firebug で目視
  3. console が便利すぎて震える

Webの基本要素 (0)

大きく分けると

  1. Webそのものを構成する要素
    • HTTP
  2. Webページを構成する要素
    • HTML, CSS, JavaScript, embedded object, ...

今日は 2 はほとんどやりません :-)

Webの基本要素 (1) HTTP

HTTPって何?
Hyper Text Transfer Protocol
つまり何?
ざっくりWWWを実現するお約束や手順のことです
  • RFC を読んだことはありますか?
  • ぜひ RFC を読んでおきましょう。
  • 英語が読めない?
  • http://www.studyinghttp.net/ で ok

RFC って何?

Webの基本要素 (1) HTTP

RFC 2616 の目次から抜粋

  • HTTP Version
  • URI
  • Date/Time Formats
  • Chatacter Sets
  • Media Types
  • Request
  • Response

今日はこの中から

  • URI
  • Media Types
  • Request
  • Response

だけを取り上げます

Webの基本要素 (2) URI

Universal Resource Identifier の略。

大事なのはリソース


        scheme://hostname:port/path/to/resource
                                 ?query_string#fragmentID
      

JavaScript 的には Location オブジェクトを通じてアクセスできる

Webの基本要素 (2) URI

などなどが RFC 2616 に書かれています。RFC 3986 にも詳しく書かれています。

Webの基本要素 (3) Media Types


type "/" subtype *(";" parameter)
      
image/png
text/html; charset=utf-8
      
そろそろ眠くなってきた?

Webの基本要素 (4) Request & Response

Webの基本要素 (4) Request

GET /users/wtnabe/recent HTTP/1.1
Host: favstar.fm
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; ja-JP-mac;
rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: Shift_JIS,utf-8;q=0.7,*;q=0.7
...
      

Webの基本要素 (4) Response

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Status: 200
...
Content-Encoding: gzip
...

↓ ここから HTML ↓
      

Webの基本要素 (4) Response

Status Code

Webの基本要素 (4) Request & Response

ではこれらを「見て」「触って」いきましょう

Firefox + Firebug

考え方さえ分かれば Google Chrome でもほとんど同じことができるよ。Safari も似たようなツールがあるはずだけど使ってないので知らないよ。IE は 8 からそれなりに使えるツールが付属してるよ。

Firefoxは標準でも意外に便利

Firebug (0)

Firebug (1) - 何ができるか?

動作の種類毎にパネルが分かれているのでそれを見てみる。

標準で動くもの

  • HTML
  • CSS
  • DOM

オプションで有効化するもの

  • コンソール
  • スクリプト
  • 接続

Firebug (2) - HTML

これでだけも十分便利ですが。さらに!

Firebug (3) - CSS

Firebug (4) - DOM

Firebug (5) - スクリプト

Firebug (6) - 接続

全部 Firebug でまとまるので便利だけど、一連の流れを追跡するなら Live HTTP Headers :: Add-ons for Firefox を使うと便利。

Firebug (7) - コンソール

当たり前だけど reload すると全部飛ぶ

デモ

demo

Any Questions ?

Any Questions ?

お疲れさまでした
ありがとうございました