<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>londoner25.net &#187; アドオン</title>
	<atom:link href="http://londoner25.net/tag/add-on/feed/" rel="self" type="application/rss+xml" />
	<link>http://londoner25.net</link>
	<description>londoner25の日記</description>
	<lastBuildDate>Sun, 25 Jul 2010 09:40:09 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://londoner25.net/tag/add-on/feed/" />
		<item>
		<title>Web制作者（マークアップ系）ならこれだけは入れておきたいFirefoxアドオン</title>
		<link>http://londoner25.net/2009/05/22/webdeveloper-firefox-add-on/</link>
		<comments>http://londoner25.net/2009/05/22/webdeveloper-firefox-add-on/#comments</comments>
		<pubDate>Thu, 21 May 2009 16:50:34 +0000</pubDate>
		<dc:creator>londoner25</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[アドオン]]></category>

		<guid isPermaLink="false">http://londoner25.net/?p=179</guid>
		<description><![CDATA[Firefoxを完全に削除して再インストールしたら見違えるほどキビキビ動くようになりました。その勢いに乗っておススメアドオンをさらっと紹介します。]]></description>
			<content:encoded><![CDATA[<p>たいそうなタイトルですが、単に自分はこれを入れていておススメですよというFirefoxのアドオンです。会社のFirefoxを一旦ユーザープロファイルを含め完全に削除してから再インストールしたらかなりサクサクになって気分がいいのでこんなの書いちゃいます。（家のは最近インストールしたばかりなのに起動がかなり遅い…）<br />
まあ、このようなブログ記事は何度も目にしていますので目新しさはないでしょうが…</p>
<h2>おススメアドオン</h2>
<ul>
<li><a href="https://addons.mozilla.jp/firefox/details/1843">Firebug</a></li>
<li><a href="https://addons.mozilla.org/ja/firefox/addon/60">Web Developer</a></li>
<li><a href="https://addons.mozilla.jp/firefox/details/249">HTML Validator</a></li>
<li><a href="https://addons.mozilla.org/ja/firefox/addon/5369">YSlow</a></li>
<li><a href="https://addons.mozilla.org/ja/firefox/addon/4106">Operator</a></li>
<li><a href="https://addons.mozilla.jp/firefox/details/10367">Pearl Crescent Page Saver Basic</a></li>
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/5457">Shearaholic</a></li>
</ul>
<h3>Firebug</h3>
<p><img class="alignnone size-full wp-image-180" title="firebug" src="http://londoner25.net/londoner25wp/wp-content/uploads/2009/05/firebug.jpg" alt="firebug" width="468" height="272" /></p>
<p>いわずと知れた有名アドオン。<br />
HTMLの構造が把握しやすく、調査ボタンを押すと知りたい要素のHTMLとCSSがどのように記述されているか一発でわかります。また、ライブでCSSを変更して確認できる点が素晴らしい。Firefoxでチェックしながら作っている場合は絶対に入れておきたいアドオンですし、恐らくほとんどの人が使っているでしょう。ただ、最近Firefoxがよく落ちるのですが、このアドオンが原因という可能性もあるようです。</p>
<p>様々な拡張アドオンがあるのも魅力。</p>
<h3>Web Developer</h3>
<p><img class="alignnone size-full wp-image-181" title="webdeveloper" src="http://londoner25.net/londoner25wp/wp-content/uploads/2009/05/webdeveloper.jpg" alt="webdeveloper" width="584" height="25" /></p>
<p>こちらも必須ツールです。<br />
ワンクリックで全ての画像のalt属性を確認したり、画像を非表示にするなどWeb制作時の確認作業時にかなりの力を発揮してくれます。今まで日本語が使えてましたが、最近英語版をインストールしたようで日本語が使えない…どなたか日本語の仕方をおしえてくださ～～い…</p>
<h3>HTML Validator</h3>
<p><img class="alignnone size-full wp-image-182" title="validator" src="http://londoner25.net/londoner25wp/wp-content/uploads/2009/05/validator.jpg" alt="validator" width="559" height="165" /></p>
<p>表示しているページのHTMLの文法チェックをしてくれます。<br />
これを入れておけばいちいちW3Cのサイトなどにアクセスしなくて済むのでかなり作業効率があがりますし、常に結果が見えているのでValidなHTMLを書けるようになります。ただ、Validなら何でもいいという訳ではなく、テキストの要素を適切なタグでマークアップすることが大切なことだというのを忘れてはなりません。</p>
<h3>YSlow</h3>
<p><img class="alignnone size-full wp-image-183" title="yslow" src="http://londoner25.net/londoner25wp/wp-content/uploads/2009/05/yslow.jpg" alt="yslow" width="411" height="302" /></p>
<p>これはFirebugの拡張アドオンです。<br />
このアドオンではそのページの表示速度を計測できます。Yahoo!社でフロントエンドのパフォーマンス改善に尽力した人が作ったアドオンで、ハイパフォーマンスWebサイトという書籍を合わせて読むことをおススメします。<br />
ブログなど何も考えずに作ってたら大概グレードCくらいなのですが（Small Site or Blogのオプションで計測した場合）、本を参考にグレードAまで改善すると表示スピードが0.6秒強から0.4秒弱に改善されました。<br />
ちなみにこのブログはプラグインをいくつか入れているのでグレードがBになっています。</p>
<h3>Operator</h3>
<p><img class="alignnone size-full wp-image-184" title="operator" src="http://londoner25.net/londoner25wp/wp-content/uploads/2009/05/operator.jpg" alt="operator" width="521" height="29" /></p>
<p>これはまだあまり知られていないかもしれません。<br />
ページ内のmicroformatsで記述された部分を理解し、表示してくれます。<br />
WordPressはmicroformatsがふんだんに盛り込まれているので興味があるかたはこれを使ってみましょう。<br />
例えばhCalenderというmicroformatsがWebサイトに記述されていればそれを理解し、ワンクリックでGoogle Calenderなど他のアプリケーションに登録してくれる優れもの。日本ではまだ誰もが知ってるというものでもないですが、すでに4年ほど前から使われていて大きなサイトでも積極的に利用されています。microformatsに興味がある開発者の方はさらにmicroformatsに興味を持つアドオンではないかと思います。</p>
<p>同じくmicroformatsアドオンの<a href="https://addons.mozilla.org/ja/firefox/addon/2240">Tails Export</a>も合わせてどうぞ。</p>
<h3>Pearl Crescent Page Saver Basic</h3>
<p><img class="alignnone size-full wp-image-185" title="pearl" src="http://londoner25.net/londoner25wp/wp-content/uploads/2009/05/pearl.jpg" alt="pearl" width="281" height="191" /></p>
<p>このアドオンはブラウザに表示されているもののキャプチャをとるためのプラグインです。これを知るまではWebページのキャプチャはSleipnirでとっていたので大変ありがたいプラグインです。<br />
画像のキャプチャの仕方（表示されている部分だけかページ全体か）、画像形式（jpegかpng）を選択できます。</p>
<h3>Shareaholic</h3>
<p><img class="alignnone size-full wp-image-186" title="shere" src="http://londoner25.net/londoner25wp/wp-content/uploads/2009/05/shere.jpg" alt="shere" width="253" height="250" /></p>
<p>これはソーシャルサービスにワンタッチで登録するためのアドオンです。<br />
サービス数が充実していて使い勝手がいいです。これを使えばいちいち登録したいサービスの管理画面を開いく手間が省けていいです。最もソーシャルブックマークやRSSを多用している人には有用ですが、使っていない人には無用なアドオンではあります。<br />
上記以外にTumblrなども登録できます。</p>
<h2>その他</h2>
<p>入れておいてもいいんじゃないかナーという感じのアドオンを</p>
<h3><a href="https://addons.mozilla.org/ja/firefox/addon/9403">SenSEO</a></h3>
<p>これは実験的なアドオンでそれをわかった上でインストールしないといけません。SEOに関するFirebug拡張のようですが、使ったことが無いので詳細は不明です。ちょっと明日にでも会社のFirefoxに入れてみようと思います。</p>
<h3><a href="https://addons.mozilla.jp/firefox/details/271">ColorZilla</a></h3>
<p>Webページの色を抽出できるアドオン。デザイナーは重宝するアドオンでしょうか。このアドオンを入れたら、インストールの仕方も悪くて起動する毎に作者ページが開いたのでちょっと嫌いになっちゃいました。</p>
<h3><a href="https://addons.mozilla.org/en-US/firefox/addon/539">MeasureIt</a></h3>
<p>選択した部分の大きさを測るアドオンです。これも1pxのずれも許せないマークアップエンジニアが好きそうなアドオンですが、今のPCには入れていません。僕は正直精度に疑問を持っていますが、あれば便利なアドオンではあります。</p>
<p>Firefoxはあまりアドオンを入れすぎると重くなってしまいますが、カスタマイズ性に優れた素晴らしいブラウザです。特にWeb開発者にとっては重宝するブラウザだと思います。<br />
もしもブラウザが重くなってきたらユーザープロファイルも含めた完全なアンインストールを実行してから差インストールをしましょう。その際はお気に入りの保存（エクスポート）も忘れずに。見違えるように軽くなります。それでみなさん快適なブラウジングとWeb制作を。</p>

	<h2>関連する投稿</h2>
	<ul class="st-related-posts">
	<li><a href="http://londoner25.net/2009/07/01/firefox3-5/" title="Firefox3.5リリース (2009 年 7 月 1 日)">Firefox3.5リリース</a> (0)</li>
	<li><a href="http://londoner25.net/2009/11/29/core-i7_imac_firefox3-5-5/" title="Core i7のiMacではFirefox3.5.5が使えない！？ (2009 年 11 月 29 日)">Core i7のiMacではFirefox3.5.5が使えない！？</a> (0)</li>
	<li><a href="http://londoner25.net/2009/05/23/chrome-20/" title="Chrome 2.0 (2009 年 5 月 23 日)">Chrome 2.0</a> (0)</li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://londoner25.net/2009/05/22/webdeveloper-firefox-add-on/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://londoner25.net/2009/05/22/webdeveloper-firefox-add-on/" />
	</item>
	</channel>
</rss>
