Sleipnirプラグイン Hawkeye

常日頃使っているWebタブブラウザ「Sleipnir」での、便利な機能を紹介します。
Sleipnirでは、Firefoxなどに比べてまだプラグインやスキンは少ないです。
ただし、少ないゆえ(?)のシンプルさもあり、個人的にはSleipnir使いならば使うべきだと思います。

で。
今回紹介するのは、プラグイン「Hawkeye」。以下からダウンロードできます。
Sleipnir｜プラグイン｜レイアウトの調整、CSS・HTML のエラー修正などの Web 開発補助ツール Hawkeye
Hawkeyeは開いているページ内のHTMLを解析し、情報を抽出することが出来るプラグインです。


インストールすると、通常左にあるエクスプローラバーに緑色のタカのアイコンが表示され、そのアイコンを選択することでメニューを表示出来ます。
上のキャプチャは「デザイン」メニューで、他には「校正」「アクセシビリティ」「SEO」「デバッグ」「解析」があります。
何が便利か、と言うのが今回書きたい内容ですが、量が多すぎる事とまだ全部使えていない事を踏まえて、今回は「デザイン」のみの解説を。


「解析：クリックした要素の詳細を表示」
その名の通り、クリックした部分のオブジェクトの情報を表示します。
上のキャプチャはBlogger投稿画面の、タイトル横のINPUTを選択した時の情報です。
HTML内の階層のどこにいるか、そのオブジェクトが持つスタイルの情報などの表示がされます。
わざわざINPUTを立体的に見せるために、枠線も1本ずつ違う色に選択してるのが分かりますね。


「枠線」
この中で選択したものに対応して、HTML内の要素に枠線を付加して分かりやすくします。
上のキャプチャでは、「要素名も表示」して「H要素」に枠線を付加した状態です。
どの部分に＜H1＞～＜H6＞要素が使われているかが一目でわかります。


「CSS」
HTML内にあるCSSに関する情報を操ることが出来ます。
上は、このブログの「すべてのCSSを無効」にした状態です。
外部から呼んでいるCSSだけでなく、要素にStyleとして付加したCSSも無効化され、ページを作成する際などの解析に応用できます。
ブログではいかにCSSを多用しているかが分かりますね。


「HTML」
ここでは、表示されているHTMLを編集することや構造をGUI的に表示することが出来ます。
上のように、階層を色分けして表示出来ますが、階層が深すぎると訳が分からなくなります。
「HTMLを編集」することで、リアルタイムにページに書き換えが反映され、「ここにこれを入れるとこうなる」といったデモンストレーションとして利用できます。



「表示」
今回一番推したい機能です。
HTML内の要素のidや色の情報を取得出来ます。
キャプチャ1枚目が「id,class属性値」、2枚目が「色情報」をそれぞれ表示した状態です。
idが分かれば便利な時と言えば、JavaScriptで要素を操作する時ですね。
idさえ分かれば、あとはその大きさもスタイルも中の値も変え放題ですから。
「色情報」が1発で表示出来るのも嬉しいです。
サイトを見ていて「この色が欲しい」と思った時にさっと使えます。
欲しい情報を局部的に即座に出せる機能は本当に便利だと思います。


「画面」
ウィンドウのサイズの表示と変更が出来ます。
あまりブラウザを細かく表示したりはしないので、使い道が分からないです。
キャプチャする時に「どうしてもこのサイズじゃないとダメ！」というぐらいじゃないかと。


以上で、「Hawkeye」メニュー「デザイン」の解説は終わりです。
適当にサイトで有効/無効に機能を切り替えるだけでも、思わぬ発見があったりします。
特に最近のウェブサイトは入り組みすぎて「どうやってこの構造を生み出してるの？」というのが多々ありますから。
そういう意味では、テクニックを奪う為の1つの案としてもいかがでしょう。