Engineer as a Lifestyle @tenkoma

What We Find Changes Who We Become -- Peter Morville著『アンビエント・ファインダビリティ 』

らぶらぶ・Firefox

タケシメモ:いつの間にかFirefoxがメインブラウザ - livedoor Blog(ブログ)に触発されてこのエントリを書きます。
Firefoxって最近地味にシェアを伸ばしてるらしいけど,どこが高い評価を受けているポイントなのか?自分がよく使ってる機能を中心に考えてみた。(拡張機能以外で!)

ページ内検索機能

  • [編集(E)]→[このページの検索(F)]
  • Ctrl+F

のどちらかを操作すると画面下の方に検索バーってのがでてくる。IEだと画面中央にドンと乗っかって,邪魔をするアレだ。したたかに登場する検索バーはその機能もすぐれている。
日本語入力状態なら,文字を確定するごとにヒットする場所までひとっ飛び。日本語入力OFFなら一文字入力するごとに探してくれる。全くヒットしないときはテキストフィールドが真っ赤になって教えてくれる。さらに[強調表示]をクリックすればページ内のすべてのヒットする場所が反転してくれる。
ちなみにhtmlソースの表示*1させてるときもこの機能使える。

スマートキーワード

機能の説明や具体的な利用法はMy Blog – My WordPress Blogに詳しい。
たとえば,あるWebページに対してどんなブログからリンクされて,どんな反応をされているか興味があったとする。そういうとき僕はいしなおさんblogmapを利用させてもらうんだけど,ふつうのブログ検索利用法は

  1. 対象のページのURLをコピー
  2. blogmapのトップページを開く
  3. search formのテキストフィールドにペースト
  4. Enter

って具合だ。
ところがスマートキーワードを利用すると,

  1. アドレスバーの"http://"の前に"bm "(ビー,エム,スペース)と入力
  2. Enter

ってするだけでblogmapを利用したブログ検索ができる。これが自分にとってすごく便利。
スマートキーワードの登録の仕方(blogmap検索の場合)

  1. メニューから[ブックマーク(B)]→[ブックマークの管理(M)]を選ぶ
  2. Quick Searchesフォルダ(無いときはどこでも)の中で([新しいブックマーク(B)]|Alt+B)でダイアログを表示
  3. 名前を"blogmap検索",URLを"http://1470.net/bm/search?q=%s",キーワードを"bm"とする。*2(ダブルコーテーション(")はいらない)

これでOK

DOMインスペクタ(初級者向きでない機能)

Windowsだとインストールの時にチェックしないと使えないし,Debianだと別のパッケージとして提供されてるから,さわったことがないひとが結構いると思う。
僕はたまーにはてなダイアリースタイルシートをちょこちょこいじるときに使ってます。
初めての人にはDOMという用語について理解する必要はない。*3
でもCSSの概念やボックスなんて用語を聞いたことがある人なら,便利なツールだと思う。

簡単なHow to

html探検したいページで[ツール(T)]→[DOM インスペクタ(N)]もしくはCtrl+Shift+Iを選ぶ。するとあやしげで大きく右と左のペイン(領域)*4にわけられているウインドウが出現する。
ソースを表示だとテキストとして表示されるhtmlがDOM インスペクタでは階層構造のツリーとして表示される。htmlというのは要素が入れ子になってるから次のようなツリーで表すことが出来る。

  • html
    • head
      • title
    • body
      • h1
      • p

ウインドウを画面の半分くらいにして,いま表示されているツリーを展開させてbody要素の中の要素をクリックしてみよう。たぶんブラウザの方の一部分が四角く点滅するはず。つまりhtmlの要素として記述されたモノがブラウザでどんな表示になるか,簡単に調べることができる。
次に左のペインをドキュメント - DOMノードにして右のペインをCSS Style Ruleにしてみよう。*5そしてDOMツリーのいろんな要素をクリックすると右のペインがその都度変化するはず。それは要素に対してどんなスタイルがCSSで指示されているかが表示される。
探したい要素の要素名・ID・属性はわかっているのに,ツリーを展開するのはめんどくさいって時はツリーの検索が使える。
人のサイトのCSSが気になったとき,IEを使ってた頃はhtmlソースをみて,CSSリソースの場所をチェックして,ブラウザのアドレスバーに入力してたんだけど,CSSリソースの継承が何重もされていたり,複数のリソースがlink要素で指定されてたときはその都度コピー&ペーストしてたから,DOM インスペクタを初めて使ったときの衝撃はかなりのもの。
僕にとってWebの再発見というキャッチコピーは大げさなものではなかった。でもよく自分の文章見直してみたら,これらの機能使う人って少数派っぽい気がしてきた。

*1:view-source:スキーマ|[表示(v)]→[ページのソース(O)]|Ctrl+U

*2:キーワードはblogmapとか自分のわかりやすいものなら何でも可

*3:僕もDOMについて理解しているとは言い難い

*4:これは正しい訳ではないかもしれません

*5:CSS Style Ruleに出来ないときはDOMツリーのHTML要素を選んでからリトライしてみる