ランキング

最新記事30件


最新コメント30件

漫画


マイページ

ジャンル

RSS

検索


携帯版QRコード

※全機種に対応してるか分かりません

統計

総記事数:2497 件
総記者数:464 人
総コメント数:38,240 件

 

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



Firefoxといえば,最近正式版が9にメジャーアップデートされたばかりです.
ほぼ同時期にリリースされた開発版のひとつでであるAuroraの最新版11にはウェブ開発でなかなか重宝する新しいツールが搭載されています.HTML要素やCSSプロパティを分析するインスペクタですが,今回そのインスペクタに新たに「3D」が追加されています.

早速ウェブページを立体化させてみました.

※投稿当初は12のみ記述していましたが,公式の機能追加は11からということでAuroraも含めて加筆,修正しています.
めまぐるしくアップデートしバージョンを重ねていくFirefox.重宝しているユーザも多いことだろうと思います.バージョンには,正式安定版,ベータ版,Aurora,Nightlyの4種類のビルドが公開されています.
左から現段階ではバージョンが9,10,11,12となっています.
auto_PM2U7S.54.48).png

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

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

auto_qA2sE3.19.14).png

その中で最も最新版で開発向けの(ちょっと不安定な)Nightlyを使って紹介します.
公式のラピッドリリースカレンダーによるとバージョン12,安定版は2012年4月24日(火)とだいぶ先ですが,ちょっぴりその世界を覗いて見ることにしましょう.
auto_oOzdmL.19.23).png



使い方は簡単です.
Nightly(もしくはAurora)を起動させて,検証したいウェブページを表示します.
今回はGoogleに登場して頂きます.
そこで,気になる部分にマウスをあわせて右クリックして「要素の検証」を選択.
auto_E1gwjG.52.44).png

もしくはメニューバーの「ツール>ウェブ開発者>検証」を選択すればできます.
(画像は英語ですが対応する日本語に翻訳して説明しています)
auto_p8kiF8.52.06).png

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


auto_cJXo4M.31.48).png

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

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

こんな感じで表示されます.
画像やリンクなどの要素が立体的に浮き上がっているのがお分かりいただけると思います.
auto_Sm9mY6.35.20).png

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

これだけではありません.ドラッグして回転させたり二本指やホイールで拡大縮小も自由自在です.
ちょっとずらして表示させてみます.すると検索ボックスの構造が一番要素が複雑になっていることが視覚的にひと目でわかります.

auto_3fvkLN.35.53).png

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

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

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

せっかくなので,GAGAZINEもみてみましょう.
もちろんですが,HTMLとCSSの検証も同時に行うことも出来ます.
auto_UepYEW.43.52).png

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

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


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

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

試してみたいけどちょっと...という読者の皆さんは安定版公開までしばし待ちましょう!
こんな機能もあるんだーという感じでいいと思います.


追記:ちょっと検索してたら面白い例がありました.
HTMLのTableタグを使ってドット絵を描いてみたはタグ要素の立体化もうまく適していますね.
auto_EXYAEW.53.40).png

auto_KszJeG.00.44).png


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

ソース元: hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/
カテゴリ: ソフトウェア
2011年12月25日 22時45分58秒 Posted by naga_gaga(なががぐ) ( 9,164 PV ) 勢い:4


この記事の評価
naga_gaga(なががぐ) 記者の過去記事
 Chromium OSを擬人化したらこうなる!?
2010年08月16日 19時33分34秒 | PV( 10278 ) | コメント( 11 )
 せっかくなのでGAGAZINEとユニクロでコラボしてみた
2010年08月26日 07時27分15秒 | PV( 8334 ) | コメント( 10 )
 【速報】GAGAZINE一時アクセスしづらい状態に?【追記あり】
2010年08月27日 01時12分30秒 | PV( 4349 ) | コメント( 9 )
 【口蹄疫終息宣言】がんばろう宮崎!【画像修正UP】
2010年08月28日 14時54分26秒 | PV( 5251 ) | コメント( 11 )
 HTML5でなにができるか,グーグルクロームで試してみよう.
2010年08月31日 03時01分35秒 | PV( 8594 ) | コメント( 15 )
もっと見る

コメント(リンクの記載「http://」は行えません)
1 名前:名無し@ガガリアン 2011/12/25(日)22:49:21. ID: 5e34ff67p
おお面白そう
2 名前:名無し@ガガリアン 2011/12/25(日)23:30:11. ID: a404b169p
こんなのに開発の時間をかけてるのか。だからいつまでも安定しない
3 名前:名無し@ガガリアン 2011/12/25(日)23:31:36. ID: 580c2283p
3Dはコケるってバーチャルボーイで学ばなかったのか
4 名前:名無し@ガガリアン 2011/12/26(月)00:16:53. ID: 4cc21c04p
メモリリーク解消プロジェクトとはなんだったのか
5 名前:名無し@ガガリアン 2011/12/26(月)00:43:22. ID: 5179d02ep
>>3
なるほど。PSもPS2もPS3も360もWiiもみんなコケたんだな?
6 名前:名無し@ガガリアン 2011/12/26(月)00:46:39. ID: 1938511fp
なんか米欄での受けは悪いみたいだけど、面白そうで良いと思うよ。
7 名前:名無し@ガガリアン 2011/12/26(月)01:01:14. ID: a2681d16p
面白そうだけど10分で飽きるだろうなw
8 名前:名無し@ガガリアン 2011/12/26(月)01:20:25. ID: 3ee7355ap
視覚的にページ、レイヤー構成が分かってかなり画期的なんじゃないか。
今後がさらに楽しみ
9 名前:名無し@ガガリアン 2011/12/26(月)02:38:20. ID: 87a2a959p
いらん事ばっかにリソースつぎ込んでるんじゃねーよ
もっと安定性とか軽量化を薦めろよカス!
10 名前:名無し@ガガリアン 2011/12/26(月)08:08:03. ID: 68f30432p
スペックが足りなくて固まる
11 名前:名無し@ガガリアン 2011/12/26(月)08:10:35. ID: d47c12f8p
イノベーションを感じる。
12 名前:名無し@ガガリアン 2011/12/26(月)11:24:16. ID: bbca544ep
うむ、イノベーションだな
視覚化は潮流
13 名前:名無し@ガガリアン 2011/12/26(月)16:03:04. ID: f32c919ap
イノベーションかこれ?
やる事無いからとりあえずごーぢゃすにしてみました、的なものを感じるw
本当は安定性強化とか軽量化とか、本質的に改善するべき点ははいくらでもあるんだけどな…
14 名前:名無し@ガガリアン 2011/12/26(月)16:32:41. ID: 60d84f4ep
マスターベーションじゃないか?
15 名前:名無し@ガガリアン 2011/12/26(月)16:52:25. ID: f32c919ap
>>14
誰が美味い事言えと…
GJ
16 名前:名無し@ガガリアン 2011/12/27(火)04:22:26. ID: dff3f30cp
>>13-15の流れから笑いに+5入れた
17 名前:名無し@ガガリアン 2011/12/27(火)08:55:04. ID: ff1e24a7p
面白そうだけどなんの意味が
18 名前:名無し@ガガリアン 2011/12/27(火)10:05:34. ID: fef15e59p
>>13
本質的な改善は重要だけど"成果"としては地味で見えにくい
見た目ごーぢゃす(笑)な改善は目立つだけに"成果"として認められやすい
結果的に、そういった目立つ"成果"を上げた開発者だけが残っていくという状態は
Windows VISTAの時のMSにも通ずるところがある
そのような状態になってしまったMozillaの今後の先行きは、極めて厳しいものになるだろうね
19 名前:名無し@ガガリアン 2011/12/27(火)22:58:25. ID: 2afbe5f3p
こんなのとか見た目だけとか言ってるけど
これ開発者向けの機能だからな?
20 名前:名無し@ガガリアン 2011/12/28(水)10:30:07. ID: b242de12p
もともとTiltという拡張だったのを本体に取り入れたから、Mozillaの開発者たちが時間をかけて作ったわけじゃないぞ
21 名前:名無し@ガガリアン 2011/12/28(水)16:52:27. ID: e5c32c71p
>>19
開発者向けの機能を閲覧にしか使わないユーザー向けの製品に入れるのがおかしい。
22 名前:名無し@ガガリアン 2011/12/29(木)23:29:59. ID: 3cdfb89fp
ってかFirefoxの高速リリースでの変更点は大抵メモリの改善やjavascriptの高速化、バグ潰し
なんだから、充分改善はやってると思うけど
そもそも拡張を取り入れただけってことを知らない奴多いなw

>>21
Webkit系でもデフォで開発ツールがついてるし時代の流れ
23 名前:名無し@ガガリアン 2011/12/30(金)09:06:55. ID: 39f03e12p
>>21
開発ツールが入っているのは昔からだろ。問題は今頃派手に強化するのがおかしいといっている。

先日はとうとう巨大になりすぎて32bitのリンカじゃリンクできなくなったというし。

一部のソースのコンパイラの最適化機能を無効にして乗り切ったようだが。

こんなおまえの機能を本体に取り込んだがために、本来のパフォーマンスを犠牲にするのが本末転倒ということ。

拡張機能で対応するのは何も文句はないわけで。
24 名前:名無し@ガガリアン 2011/12/30(金)09:07:37. ID: 39f03e12p
米23は>>22宛てな。アンカー間違えた。