はじめまして、マークアップエンジニアのタケヨシです。
今回はfirefoxのWeb開発ツールの『調査』ツールの中にある『3Dビュー』機能について、紹介してみようと思います。
はじめに『調査』ツールとは、閲覧しているWebサイトのHTML+CSSソースを確認することのできるツールです。
その中にそのソースを立体的に確認できるのが『3Dビュー』機能です。
○起動方法について
firefoxの画面左上のfirefoxアイコンをクリックしてWeb開発から、『調査』をクリックして起動します。またはshift+ctrl+I(windows)で起動できます。
画面UIは下に固定されています。firebugのように画面UIを自由に移動することできなくなっております。
そして……、画面の右下にある『3Dビュー』をクリックすると、Ｗｅｂサイトがかっこいい動きとともに3Dに。
Webサイトの各パーツが浮き上がり奥行きが感じられます。
とはいえ正面だけではまだ立体を感じずらいかと思いますので、
下から見てみることにします。
画面中央をつかんで上へドラッグすると、立体が動き出します。
下から見ると、立体になっているのがわかりますね。
しかし、これがなぜ、立体物になっているのか、最初、自分にはさっぱりでした。
○その前に、まずは基本の操作方法
- 画面ドラッグで自由回転
- マウスのホイールでズームイン、ズームアウト
- マウスの矢印キーで平面移動（ただし、上下左右逆転）
- ブロックをクリックでその要素を選択
操作自体はシンプル。
○立体になっている理由
しばらく、触っていてわかったのはHTMLの階層構造で立体になっているということでした。
HTMLの構造については割愛させていただきますが、他にも気になったのは立体物にはブロックごとに色がついているということ。
これは要素の階層構造ごとに、ブロックができていることの視認性をあげているためです。
上記の図で要素の色について、説明すると。
一番下から
| 階層（下から） | 色 |
| html | グレー |
| body | 白 |
| div | 薄緑 |
| nav(html5要素) | 黒 |
| h1 | ワインレッド |
| a | 群青 |
| img | やまぶき |
のような感じです（色に関しては正確な色が当てはめずらかったです……）
○その他の主要タグ
| 要素名 | 色 |
| h1～h6 |
h1はワインレッド h6に下がるにつれて、 徐々に青が足されていき、h6はパープルになります。 |
| p | 灰 |
| strong,em | 黒 |
| div | 薄緑 |
| dl,dt,dd | 黒 |
| ul | 薄青 |
| li | ulの青よりも明度をあげた青 |
| form関連 | 黒 |
| table | 赤 |
| tbody | 黒 |
| tr | tableより明度をあげた赤 |
| th | 黒 |
| td | trの赤より明度をあげた赤 |
| obejct | 黒 |
| iframe | 黒 |
| html5新規セクション要素 | 黒 |
………etc。
全要素の確認はできていません。
ただ、法則性があればと思いいくつかのサイトを確認しましたが、
具体的な法則は見つけられませんでした。
強いて言うなら、ulなどの子要素が存在しているものは、徐々に色が薄くなる。くらいでしょうか。
その他にも
- javascript要素で生成された要素もブロックとして出てくる。
- 『3Dビュー』にするとマウスホバーや、スライドショーなどのjavascripの動きは止まる。
- flashも同様に固定される。フルflashにおいてはobjectの中身画面すら消えます。
- iframeで呼び出されたものも、さらに積み上げられる。(iframeの色は黒)
ということがあります。
○使用時に気をつけたいこと
『CSSスタイルパネル』による、スタイルの操作はできますが、それが反映されることはありません。
『３Dビュー』を解除したら、そのスタイル操作は反映されます。
○3Dビュー機能まとめ
・『3Dビュー機能』起動は『調査』ツールを開いてツール右下の『3Dビュー』をクリック。
・立体化は要素ごとに行われており、階層構造が深いものほど、高いブロックが積みあがる。
・javascriptでの動的な動作と、『調査』ツールのCSSスタイルパネルでの操作は3D状態では反映されない。
・直感的に階層構造がわかるので、 見方次第で便利なツールになりえる。
○使ってみて
現状ではまだこの『調査』ツールの『3Dビュー』機能はまだ発展途上なツールだと感じました。
理由は
- 使うたびに、『調査』ツールを立ち上げ、『3Dビュー』を立ち上げないといけないこと。
- 起動時の初期位置が必ず、正面になるので、横から見たい要素がある場合は、回転させたり、移動させないといけないこと。
- 『3Dビュー』の状態だと、『調査』ツールのCSSスタイルパネルの値変更はできるが、それは反映されない（『3Dビュー』を解除すると反映されます)。
この中でもとくにCSSスタイルが反映されないのは、編集しながら確認したい人にはつらいかもしれません。
しかし、ソースが長いもので全体がどのようにできているというのを、直感的にわかるのは大きなメリットだと思います。
【最後に】
firefoxはfirebugをはじめ、アドオンでの開発ツールが多数ある中で、デフォルトで装備されているツールたちが進化していくことは、
制作初心者にはわかりやすく、使いやすいと思います。
今回は『3Dビュー』機能の紹介でしたが、
他にも、firefoxにはレスポンシブビューを確認できる機能や、デバッガなどの、さまざまな機能がついております（ユーザーエージェント機能もいずれついたりするのだろうか）。
これからもさまざまな機能がどんどん進化していくのが楽しみです。
