Addicted to Mac

こころおどるコンピュータ。

Firebugを使えばJavascriptで動的出力されたソースコードを見られる

text:
Firebug

これと、あとは使いやすいエディタさえあればもしかしてDreamweaver要らない？と思ってしまうほどお世話になっているFirebug。CSSコーディングするウェブデザイナーには御用達のFirefoxアドオンなわけですが、Ajaxコーダーにとっても結構便利な存在かも。

当ブログトップページのサイドエリアには、右図のように自分のdel.icio.usブックマークを表示させています。この部分はちょこっとAjaxな仕組みを使っていて、具体的にはdel.icio.usのAPIを叩いてJSONを取得し動的にXHTMLを出力しています。

通常JavaScriptによって動的に出力された部分のソースコードはブラウザでは見ることが出来ず、その部分にもCSSデザインを施したいという場合には、出力されるソースコードを想像しながらCSSを書いて、実際に適用されるかどうかのトライ・アンド・エラーをするしかありません。もっとも、こういった動的出力部分は先にデザイナーがデザインしてコーディングして、エンジニアに「こういう風に出力されるようにスクリプト書いてくれ」と頼むのが普通でしょうが...。と考えると、むしろそのエンジニアにとって便利な小ネタです。

上述のdel.icio.usリンクを表示させるのに使用しているスクリプトは下記の通り。この出力結果のソースコードがどうなるか直ぐに想像がついてしまう人は素晴らしいと思います。僕だったら「これにCSSでデザイン被せてね」などと投げられたら、ちょっとイヤです。しかもスクリプトとしてこれはまだ短い方で、より長いスクリプトだったらお涙もの。

  1. <script type="text/javascript">
  2. //<![CDATA[
  3. function showImage(img, dt) {
  4. return ( function() { img.style.display='inline'; dt.style.backgroundImage = 'none'; } );
  5. }
  7. var ul = document.createElement('ul');
  8. ul.id = 'deliciousList';
  9. ul.className = 'x-small';
  11. for (var i=0, post; post = Delicious.posts[i]; i++) {
  12. var li = document.createElement('li');
  14. var dl = document.createElement('dl');
  15. var dt = document.createElement('dt');
  16. var dd = document.createElement('dd');
  17. dt.style.position = 'relative';
  19. var a = document.createElement('a');
  20. a.style.marginLeft = '20px';
  22. var span = document.createElement('span');
  24. var img = document.createElement('img');
  25. img.style.position = 'absolute';
  26. img.style.left = 0;
  27. img.style.top = 0;
  28. img.style.display = 'none';
  29. img.height = img.width = 16;
  30. var imgsrc = post.u.split('/').splice(0,3).join('/')+'/favicon.ico';
  31. img.src = imgsrc;
  32. img.onload = showImage(img, dt);
  34. a.setAttribute('href', post.u);
  35. a.setAttribute('target', 'blank');
  36. a.appendChild(document.createTextNode(post.d));
  37. span.appendChild(document.createTextNode('NOTE: '));
  38. dd.appendChild(span);
  39. dd.appendChild(document.createTextNode(post.n));
  40. dt.appendChild(img);
  41. dt.appendChild(a);
  42. dl.appendChild(dt);
  43. dl.appendChild(dd);
  44. li.appendChild(dl);
  45. ul.appendChild(li);
  46. }
  48. document.getElementById('delicious').appendChild(ul);
  49. //]]>
  50. </script>

ブラウザの [ソースを見る] 機能では先ほども述べた通り、出力結果のソースを確認することはできません。しかしFirebugでソースを見れば

FirebugのHTMLタブによる表示
※以下はスクリーンショットの一部です。波線囲い部分は別途画像加工。

見えちゃう♥

動的出力部分は上図の波線で囲まれた部分に相当するわけで、これを見ればデザイン被せる作業は通常となんら変わりありません。エンジニアとしては自分の書いたスクリプトが正しく機能しているか確認もしやすいです。もっと言っちゃうと、他のウェブサービスのAPIなどで提供される出力結果にDOMを使ってCSSデザインを被せちゃうということも多分できますねえ。

というわけで、実は最近これに気づいて鼻息あらめなわけですが、みんなもう知っていたらカワイイ奴だと思って温かく見守ってやってください。

↑ Page Top