TidyとGreacemonkeyは、WEBページのデバックツールとして強力なFirefoxの拡張機能ですが、FireFoxには最初からDomインスペクタという機能が入っています。
Domインスペクタを使うと、WEBページのHTMLマークアップの構造をディレクトリ・ツリーのように表示して、しかもdivタグなどのエレメントを選択すると、WEBページ内で、そのエレメントがどこにあたるのか、ブラウザ画面でハイライト表示してくれます。まずは、使ってみるのが一番わかりやすいので、FireFoxメニューの「ツール」→「Domインスペクタ」で。
もし、ツールに無い場合は、FireFoxの再インストールが必要（BookmarkやPlug-inはすべて引き継げます）。
- インストールを開始。ライセンスに同意する。
- カスタムインストールを選択
- インストールするディレクトリを選んだ後に、「追加コンポーネントをインストールするか？」と聞いてくるので、「Developer Tools」を追加
- インストールが完了すると、「Domインスペクタ」が追加されているはず
このDomインスペクタの有用性はDive into GreaceMonkeyのPDF版33ページ目でも触れられています。WEBページを構造的に見ることができるので、不必要に複雑なclass構造などになっていないか、全体的にバランスのとれた構造化ができているか、などを確認することができます。
なんで構造化を気にする必要があるかというと、それはRemixのためなんですね。「CSSを切り替えて、見え方をダイナミックに変化させる」、「Ajaxで、追加のデータを動的に読み込んで表示する」、「GreaceMonkeyのUser Scriptで、WEBページをHackする」、WEB2.0ぽいことをやるためには、まずは第一に重要なのが操作したいデータを見つけ出せること。なので、そのページがDomツリーとしてValidなのは最低限で、さらに構造が分かりやすいと、それだけデータのRemixingがやりやすくなる。
WEBページのミニマリズムという表現をしている記事があったけれど、ここでも「乗せる情報を最低限にする」というよりは「構造をミニマルにする」ということが強調されています。
ブログでは、色々な機能をサイドバーに組み込むことが面白さの一つ。更新情報や記事一覧、カレンダーや友達のブログ一覧、Flickrやモブログ画像、AdsenseやAmazonのおすすめ商品などなど。この辺りをデータを雑然とサイドバーに並べるのではなくて、そのデータが「誰のためのものか？」「どういう属性、機能をもっているのか？」にもとづいて、構造化することが重要じゃないか？ということのようです。
recent posts, recent comments, links to RSS feeds, a search bar: These are all sections that deal with your content itself, they delve deeper into the site and provide more ways to access your own content. a blogroll, content aggregated from other sites, images, Adsense/Affiliate links: These are all off-site links that the blog-owner feels will be of value or interest to their readers. a description, a mini-blog, links for the blog tool, copyrights: These elements are based around the author of the website, rather than the content.
You certainly have some agreeable opinions and views. Your blog provides a fresh look at the subject.
投稿情報: How To Keep a Man Interested | 2011年10 月14日 (金) 17:04