唐突で恐縮だが、とても面白いツールを紹介したい。Firefoxに標準で備わっている「3D view」という機能である。このツールは、平面として表示されているWebページを、構成要素の階層構造が分かるように3D表示に変換してくれるのだ。
Firefoxにこの機能が搭載されたのは、2011年12月にリリースされたFirefox 11のAurora版（アルファ2版）から。2012年には、いくつかの記事やブログでこの機能が紹介されている。一部の開発者などの間では有名な、“知る人ぞ知る”機能だったようだ。
3D viewは、もともと開発者向けの機能である。米モジラ・ファウンデーションのツール紹介サイトでは、HTMLのレイアウト上の誤りを見つけたり、レイアウトを最適化する方法を探したりするのに効果的だとしている。
ただ、この3D view機能を開発者だけに使わせておくにはもったいない。Webページの仕組みが知りたい初学者こそ、この機能を試してみるべき。というのも、3D view機能はWebの仕組みを直感的に理解するのにぴったりだからだ。
開発者だけに使わせておくのはもったいない「3D view機能」
この3D viewが可視化しているものは、「DOMツリー」の階層構造である。もう少し詳しく説明すると、DOMツリーは、HTMLで書かれたWebページの要素をWebブラウザーが表示したり操作したりしやすいようにツリー状に整理したもの。その階層構造を3Dに表示するのが3D viewというわけだ。
このように3D viewを駆使することで、Webページがどのような要素で成り立っていて、Webブラウザーはそれらをどのように解釈して表示しているのか、直感的に理解できる。
さらに、Webサイトの構築者がどこに注力し、どのような思想でサイトを作っているのか、垣間見えるかもしれない。その好例が、検索サイトとして有名なGoogleとYahoo! Japanのトップページである。
Googleのトップページは、中央に検索ボックスがある飾り気のないシンプルな作りになっている。一方のYahoo! Japanは、所狭しとコンテンツがならんでにぎやかだ。でも、Googleのトップページのデザインに力が入っていないと見るのは早計だ。
Googleのトップページは、検索ボックスの箇所だけが高層ビルのように高く、要素の階層が積み上がっている（図1）。この積み上がっている部分には、JavaScriptでインクリメンタルサーチを実現するためのロジックが組まれていたり、デザイン上の工夫が施されていたりする。このように、単なるフォームにしか見えない検索ボックスだが、3D viewで表示してみると、米グーグルのこだわりが視覚的に理解できる。
