Firefox 11に搭載された3Dインスペクタがおもしろい (Aurora Builds)

めまぐるしくアップデートしバージョンを重ねていくFirefox．重宝しているユーザも多いことだろうと思います．バージョンには，正式安定版，ベータ版，Aurora，Nightlyの4種類のビルドが公開されています．

左から現段階ではバージョンが９,10,11,12となっています．

3Dインスペクタは今回Aurora最新版11で新追加されました．

Auroraはこちらでダウンロードが可能です．なお安定版は2012年3月13日(火)リリース予定．

その中で最も最新版で開発向けの（ちょっと不安定な）Nightlyを使って紹介します．

公式のラピッドリリースカレンダーによるとバージョン12，安定版は2012年4月24日(火)とだいぶ先ですが，ちょっぴりその世界を覗いて見ることにしましょう．

使い方は簡単です．

Nightly（もしくはAurora）を起動させて，検証したいウェブページを表示します．

今回はGoogleに登場して頂きます．

そこで，気になる部分にマウスをあわせて右クリックして「要素の検証」を選択．

もしくはメニューバーの「ツール＞ウェブ開発者＞検証」を選択すればできます．

（画像は英語ですが対応する日本語に翻訳して説明しています）

するといわゆる「要素を検証」のウェブ開発者御用達ツールが表示されます．他のブラウザでもこういう画面は同じような感じで馴染みがあるかもしれません．

今までは右下にHTMLとCSSしか選択部分がありませんでしたが，新たに「3D」の項目が登場！

早速クリックします．WebGLの技術を用いてるのでマシンによっては動作が重くなったり，勢い良くファンが回転しだすかもしれません．

こんな感じで表示されます．

画像やリンクなどの要素が立体的に浮き上がっているのがお分かりいただけると思います．

Googleの「ハッピーホリデー」のアニメーションはさすがにリアルタイムでは変化しませんでしたが，検証した時点で固定されて表示されます．

これだけではありません．ドラッグして回転させたり二本指やホイールで拡大縮小も自由自在です．

ちょっとずらして表示させてみます．すると検索ボックスの構造が一番要素が複雑になっていることが視覚的にひと目でわかります．

ウィンドウ下部の各要素をクリックすればそこがハイライトされます．

普段見慣れた平面のウェブページが立体的になっているのでGoogleストリートビューをはじめて使ったような新鮮さが体感できます．色分けも要素ごとにされていてわかりやすいです．

おもいっきり縮小してみます．ウェブページ全体が俯瞰できるようになっています．

せっかくなので，GAGAZINEもみてみましょう．

もちろんですが，HTMLとCSSの検証も同時に行うことも出来ます．

漫画の部分を選択しておもいっきり拡大してみました．

ページ全体を反転させることもできるので，文字どおりウェブページの裏側も簡単に覗けます．

FirefoxのAuroraビルドはこちらでダウンロードが可能です．Windows，Mac，Linuxと主要プラットフォームに対応．

日本語に対応したものが利用可能です．

開発者はすぐに試して価値のある機能だと思います．

試してみたいけどちょっと．．．という読者の皆さんは安定版公開までしばし待ちましょう！

こんな機能もあるんだーという感じでいいと思います．

追記：ちょっと検索してたら面白い例がありました．

HTMLのTableタグを使ってドット絵を描いてみたはタグ要素の立体化もうまく適していますね．

こんな感じで要素を生かしてインスペクタでしか見れない立体モデルを仕込むのも面白そうです．

○この記事は「GAGAZINE」よりご提供いただいたものです