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

Firefox 11に搭載された3Dインスペクタがおもしろい (Aurora Builds)
めまぐるしくアップデートしバージョンを重ねていくFirefox.重宝しているユーザも多いことだろうと思います.バージョンには,正式安定版,ベータ版,Aurora,Nightlyの4種類のビルドが公開されています.

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

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

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

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

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

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

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

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

使い方は簡単です.

Nightly(もしくはAurora)を起動させて,検証したいウェブページを表示します.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

せっかくなので,GAGAZINEもみてみましょう.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. HOME
  2. 生活・趣味
  3. Firefox 11に搭載された3Dインスペクタがおもしろい (Aurora Builds)
  • ガジェット通信編集部への情報提供はこちら
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。

記事ランキング