Firebugワークショップ

HTML
CSS
ネットワーク
コマンドライン / DOM
コンソール / エラー / デバッグ

tenjin.web (at Lingr)
ワークショップ補助のチャットルームに参加してください。

0. Firebugとは / インストール

演習 0-1

Firebug拡張をインストールし基本的な動作をみてみましょう。
[Disable]/[Enable]で有効/無効を切り替えられます。(Firebugは、ページ内の多くの情報を監視しているため、通常の閲覧で使用していると、Firefoxがとても遅くなってしまいます。普段はFirebugを[Disable]にして、開発中のサイトのみ[Allowed Sites]に設定して利用するといいでしょう。)
また、FirebugをFirefoxから切り離し、別ウィンドウに分離して表示してみましょう。

1. HTML

HTML

演習 1-1

「Google」のロゴを、「Yahoo! JAPAN」のロゴに入れかえてみましょう。
[Inspect]で画像を調べ、src属性の値をコピー&ペーストで書きかえます。

演習 1-2

「Albert on Flickr」の画像をローカルに保存してみましょう。
通常どおり画像を右クリックし「名前を付けて画像を保存」ではうまくいきません。これはなぜでしょうか。
[Delete Element]で、不要な要素を削除できます。

演習 1-3

Rodney Smith - Portfolio
この写真家のポートフォリオは、サムネイルにマウスオーバーすると、マウスの反対側に拡大画像が表示されます。サムネイルの位置に応じて拡大画像の位置も変わる動き、サムネイルをマウスが外れると拡大画像が消える動きなどを、まずはじめに確認してください。
次に、このページがどのようなHTML要素から組み立てられているのか、どのようなイベントを処理しているのか、ちょっと想像してみてください。
そして、Firebugで実際の様子を観察してみましょう。
ユーザーの動きに応じて現われたり消えたりするため、うまく[Inspect]できません。そのような場合は、HTMLタブの[Options]-[Scroll Changes Into View]で、変化があった場所を表示させるようにしてみてください。

演習 1-4

ImageFlow 0.8
Reflection.js
上は、iTunesなどで見られる、CoverFlowに類似するインターフェースをウェブで再現しています。
2サイトとも写真の反射を実現しています。
それぞれ、どのような技術要素でできているか調査してみましょう。

演習 1-5

Pipes: editing '全文配信化API'
Ortho JavaScript Graphics
JSViz Force Directed Layout: Modeling XML Data
http://people.mozilla.com/~vladimir/demos/photos.svg
いろいろな技術要素を組み合わせ、豊かな表現を実現しています。それぞれ、どのような技術要素でできているか調査してみましょう。

2. CSS

演習 2-1

Idol Worship
このページは、画像がロードされる前に、ロード中の画像が表示されています。これが、どのように実現されているか調べてみましょう。

演習 2-2

Firebug と CSS
上記ページの説明画像を、すべて左に揃えてみましょう。
スタイル値の左に表示される、禁止マークをクリックすると、そのスタイルを無効にできます。

演習 2-3

「Yahoo! JAPAN」のレイアウトを自由に変えてみましょう。
CSSプロパティの、display(block/box)、float、position(absolute/relative)などに注目し、変更などを行いながら、各領域がどのように配置されているかを確認しましょう。太いborderをつけたり、背景色をつけるのも、わかりやすいかもしれません。
プロパティ値は、入力途中なら補完が表示され、上下キーで決まった値の中から選ぶこともできます。

3. ネットワーク

ネットワーク

演習 3-1

FirebugのNetタブを開き、「Google」と検索結果のページで、どのような画像がロードされているか見てみましょう。
変わったところがあれば、それはなぜそうなっているのでしょうか？

演習 3-2

Webサイトの高速化フロントエンドのパフォーマンスの重要性 (Yahoo! developer netoworkより翻訳) 上記ドキュメントでは、主要サイトのページロード時間のうち、HTMLファイルの取得とパースに掛かる割合は全体の20%以下で、その他のリソースの取得と描画に80%以上が費やされるとあります。
実際にFirebugのNetタブを使い、日本のいろいろなサイトのHTMLのロード時間の割合を確認してみましょう。

はてなブックマーク
 Google
MSN Japan
Yahoo! JAPAN
livedoor

段階的にロードされるリソースと、ある程度まとめてロードされるリソースがあります。その違いは何でしょうか？また、ページをリロードし、キャッシュされているリソースは明るいグレーで表示されることも確認しましょう。

演習 3-3

tenjin.web (at Lingr)
大人数でリアルタイムでチャットができるサービス「Lingr」のネートワーク通信を覗いてみましょう。
各発言で、HTMLにどのような変化が起きているかも探ってみましょう。

4. コマンドライン / DOM

演習 4-1

Firebugコマンドライン(Consoleタブ)で、以下の簡単なJavaScriptの式を実行してみましょう。

3 + 3 
3 + '3'
3 * '3'
!3
!!3
'' + 1234
11 < 3
'11' < '3'
'11' < 3
1 + 2 + 'A'
'A' + 1 + 2
0 || 100
100 || 200
100 && 200
null == undefined
null === undefined
typeof(abcd)
typeof(3)
typeof(true)
typeof('A')
typeof(new String('A'))
typeof(function(){})

演習 4-2

このページに含まれるリンク一覧(URLとリンクテキストが交互に並ぶテキスト)を抽出してみましょう。
コード補完の感覚を確かめるため、ここでは適時コピーせずに入力してみてください。
まず、以下のどちらかのコードでリンク一覧が取得できます。

document.links
document.getElementsByTagName('a')

次に、a要素ひとつ取り出して詳しく調べるため以下を実行します。結果を右クリックし[Inspect in DOM Tab]で表示し、必要となるURLとリンク文字列が保持されているプロパティを探してみましょう。

document.links[10]

さあ、これで事前調査は済んだので、実際にリンク一覧の文字列を作成しましょう。文字列を詰め込んでいくための配列を定義し、for文でループし、配列にpushしていきます。

var text = []
for(var i=0 ; i< document.links.length ; i++){
    text.push(?);
    text.push(?);
}

一行で入力しづらい場合は、コマンドライン右端の赤い上向きの矢印ボタンでマルチラインモードに変えられます。

最後に、配列を一つの文字列に結合して、クリップボードに入れましょう。

copy(text.join('\n'))

演習 4-3

tenjin.web: workshop/firebug/animation
このページを開き、赤いボックス(id=box)を操作してみましょう。
コマンドラインにある関数$で、idを指定して要素を取得できます。
コンソールに表示された要素や、HTMLタブで表示される要素は、右クリックの[Inspect in DOM Tab]でDOMタブに表示し、詳しく調べることができます。style属性を開き、CSSのスタイルを一覧で確認することもできます。
実際に大きさ(width/height)や位置(left/top)、透明度(opacity)などいろいろな値を変更してみてください。

$('box').style.left = '200px';

またsetIntervalを使って、簡単なアニメーションも作成してみましょう。

setInterval(function(){
 ?
}, 50); // ミリセカンド

5. コンソール / エラー / デバッグ

演習 5-1

consoleを使って、イベントを調べてみましょう。まず、適当なページで以下を実行しイベントハンドラを仕掛けます。

document.body.onclick = function(e){alert(e)};

ページをマウスでクリックして、イベントが表示されることを確認しましょう。
同じように、consoleを使ってイベントを表示して調べてみましょう。

document.body.onclick = function(e){console.log(e)};

CtrlキーやAltキーを合わせて押してみたり、押下する場所の違いで、イベントオブジェクトのどのプロパティが変わるか確認してみてください。

演習 5-2

オンライン画像編集サービス「Snipshot」の内部動作を少し調べてみましょう。
このサービスは、XMLHttpRequestを使い、ユーザーの行った変更をサーバーに送信しています。この通信をコンソールで表示するため[Options]-[Show XMLHttpRequest]にチェックをつけてコンソールを開いておいてください。
サンプルを開き、拡大/縮小、切抜きなどを行うと、操作が完了するたびにバックグラウンドで通信が行われていることがわかります。また、以下コードで切り抜きの処理をモニターし引数の値などを確認してみましょう。

monitor(snipshot.image.setCropBox)

演習 5-3

console.time/timeEndを使い、JavaScriptの実行速度を計測してみましょう。まず適当なページで以下を実行し、ページがどのように変わるのか確認してください。またtime/timeEndを組み込み、実行時間を表示してみましょう。

document.body.innerHTML=''
for(var i=0 ; i < 1000 ; i++){
    document.body.innerHTML+='0123456789';
}

次に、同様の処理を行う以下のコードの実行時間を計測してみてください。

var buf = [];
for(var i=0 ; i < 1000 ; i++){
    buf.push('0123456789');
}
document.body.innerHTML = buf.join('');

実行時間は変わりましたか？　変わったとしたら、なぜそうなったのでしょうか？

他ツール

changed October 9, 2009