Webそのものの基本と確認用のツール
- Firebugを中心に -
@wtnabe
本日のお品書き
今日は基礎的な内容です。
- Webそのものの基本要素をおさらい
- これらを Firefox + Firebug で目視
- console が便利すぎて震える
Webの基本要素 (0)
大きく分けると
- Webそのものを構成する要素
- Webページを構成する要素
- HTML, CSS, JavaScript, embedded object, ...
今日は 2 はほとんどやりません :-)
Webの基本要素 (1) HTTP
- HTTPって何？
- Hyper Text Transfer Protocol
- つまり何？
- ざっくりWWWを実現するお約束や手順のことです
RFC って何？
- Request for Comments の略
- インターネットのあれやこれがまとまった文書です
- 概ね仕様書のようなものですが、これが絶対ってわけでもないです
- IETF が管理しています
- Internet Engineering Task Force
- HTTP は RFC 2616 です
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
- http://example.com/foo?q=string
- https://example.com/bar#id
JavaScript 的には Location オブジェクトを通じてアクセスできる
Webの基本要素 (2) URI
- 使ってよい文字の種類
- 大文字小文字の区別
- 相対パス、絶対パスの定義
- 相対URI, 絶対URIの定義
などなどが RFC 2616 に書かれています。RFC 3986 にも詳しく書かれています。
Webの基本要素 (3) Media Types
- Content-Type として書かれるもの
- mime-type なんて呼んだりもする
type "/" subtype *(";" parameter)
image/png
text/html; charset=utf-8
- type と subtype の間に空白は入れちゃダメです
- RFC 1590 に書かれていて登録手続きは IANA で
- Internet Assigned Numbers Authority
そろそろ眠くなってきた？
Webの基本要素 (4) Request & Response
- Client(主にブラウザ）とServerのやり取り
- HTMLみたいというかMailみたいな感じで書かれている
- 1リクエスト : 1レスポンス
- つまりたくさん素材のあるページはたくさんの Request & Response が発生している
- 高速化の話をするときには避けて通れない
- Ajax も理解しやすくなるかも
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
...
- Request Line がいわゆるログに残る部分
- Method というものがある
- 今日はとりあえず GET, POST だけでいいです
- 自分（ブラウザ）に何ができるかいろいろ教えています
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
- 200 OK
- 301 Moved Permanently
- 302 Found
- 304 Not Modified
- 401 Not Authorized
- 403 Forbidden
- 404 Not Found
- 500 Internal Server Error
- 503 Service Temporary Unavailable
Webの基本要素 (4) Request & Response
- 1 Request : 1 Response
- テキストで書かれている
- Header と Body がある
- HTML, CSS などは Response Body
- つまり普段人間がよく見るのは Body
- 一部エンジニアがよく見るのは Header
ではこれらを「見て」「触って」いきましょう
Firefox + Firebug
- 今回の前提は Firefox 3.x + Firebug 1.6.x
- Firefox 4 は触ったことないが，恐らくもう 4 に上げても問題ないんじゃないか
考え方さえ分かれば Google Chrome でもほとんど同じことができるよ。Safari も似たようなツールがあるはずだけど使ってないので知らないよ。IE は 8 からそれなりに使えるツールが付属してるよ。
Firefoxは標準でも意外に便利
- 通常のソース表示もけっこう便利
- ページ情報 ( cmd + I ) でレンダリングモードを確認可能
- エラーコンソールで CSS, JavaScript のエラーをレベル別に確認可能
Firebug (0)
- Web開発で最も有名な拡張
- 2番目にFirefoxを遅くする拡張としても有名
- 実は最新のランキングで最遅
Firebug (1) - 何ができるか？
動作の種類毎にパネルが分かれているのでそれを見てみる。
Firebug (2) - HTML
- DOMインスペクタと組み合わせてものすごくよく使う
- 要素を特定するとサブペインで以下のものが分かる
- 適用されているCSSの記述
- 適用されているCSSのプロパティと値
- これを視覚化したもの
- DOMの様子
これでだけも十分便利ですが。さらに！
Firebug (3) - CSS
- 読み込んでいるCSSをURI別に確認できる
- やっぱりその場で編集できる
Firebug (4) - DOM
- 直接開くことはあまりないかも
- HTMLタブやコンソールから開く感じで使う
- HTMLのサブパネルでも確認できる
Firebug (5) - スクリプト
- JavaScriptをURI別に確認できる
- ブレイクポイントを設定してスクリプトの動作をより深く追跡できる
Firebug (6) - 接続
- 要するに Request & Response を確認できる
- どのタイミングからどの Request & Response が行われているか
- 個々の Request & Response で具体的にどのような内容がやりとりされているか
全部 Firebug でまとまるので便利だけど、一連の流れを追跡するなら Live HTTP Headers :: Add-ons for Firefox を使うと便利。
Firebug (7) - コンソール
- console.log() にいろいろな情報を出力できる
- その場で JS を実行できる
- 関数呼び出し
- 代入
- loop
- DOMの書き換えなど
当たり前だけど reload すると全部飛ぶ
- 以前はconsole独自に$()関数があったような気がするけどなくなった？
- $x() っていう XPath で要素を取得する関数もある
デモ
demo
- console.log() で出力
- consoleを開いてないとエラーが起きるので注意
- Locationオブジェクト
- $x() で要素を取得
- jQuery の機能を使って要素を取得
- jQuery の機能を使って要素の書き換え
Any Questions ?
Any Questions ?