WEB制作のために使ってるFirefoxアドオン9個まとめ
- 2009-04-15 (水)
- アドオン

皆さんはブラウザは何を使っていますか?Firefoxを使っていますが、やはり理由は豊富なアドオン。
15 Firefox add-ons for Web developers | Webware – CNET
という記事がありましたので、その中から使っているものを9個、実際の使用感も交えて、
WEB制作のためのFirefoxアドオンを紹介します。今から初めて見ようという方の参考にしていただければと思います。
1.Aardvark

HTMLの要素を調査したり、簡単な編集を行うアドオンです。
Firebugにも同様の機能がありますが、こちらは画面をスプライトせずに表示できます。
適用されているCSSなどは見れませんが、手軽に実行したい場合はこちらがオススメ。
右クリックメニューからStart Aardvarkを選択して、実行できます。
ショートカットキーでいろんなことができるのでそれも紹介。
w 親要素にフォーカスを移動 n その操作を戻す
q Aardvarkを終了 u アンドゥ r 選択している要素を削除 p 削除した要素を任意の場所に貼り付け
v 選択している要素のソースコードを表示。
ダウンロードは Aardvark :: Firefox Add-ons
2.ColorZilla

有名なカラーピッカーアドオンです。
特にWebpage DOM Color Analyzerという、サイトに使われている色のリストを出力してくれる機能は必需品です。
参考までに日本語の解説記事を
Mozilla Re-Mix: WEBページのカラーを取得する「ColorZilla」
MOONGIFT: » ブラウザ上の色情報を取得「ColorZilla」:オープンソースを毎日紹介
ダウンロード ColorZilla for Firefox – Eyedropper, Color Picker and much more
3.CSSViewer と 4.CSS validator
読み込まれているCSSを一覧、クリックで中身を表示できるアドオンです。
これの便利ポイントはCSSだけではなくjavascriptも対応している点。
いいと思うサイトに出会ったときすぐに、CSSを”のぞき見”できます。
ダウンロードは CSSViewer :: Firefox Add-ons
CSS validatorはw3cのCSSvalidateにかけてくれるアドオンです。
お好みでどうぞ CSS validator :: Firefox Add-ons
5.Firebug

言わずとしてた開発ツール。
HTML、CSS、JavaScriptを編集・デバッグできます。また、「接続」機能では、各コンテンツの取得にかかった時間を表示してくれるので、チューニングすべきポイントが簡単にわかります。
ダウンロードは Firebug :: Firefox Add-ons
6.Firephp
これを導入することで、phpのデバッグも行えます。
FireFoxでのPHP開発を手助けする「FirePHP」:phpspot開発日誌
FirePHPがますます便利になっている件:phpspot開発日誌
デバッグメッセージを出すくらいにしか使っていません。
ダウンロードは FirePHP :: Firefox Add-ons
7.html validater

ステータスバーから簡単に、htmlの構文チェックを行えるアドオンです。
HTML TidyまたはSGML Parserの2つの方法か、併用してのチェックが可能です。
(このアドオンは、上記の参考にした記事で紹介されているものと別のものです)
ダウンロードは Html Validator for Firefox and Mozilla
9.LinkChecker

そのページのリンクが切れていないか、右クリックから簡単に調べることができるアドオンです。
OKだと図のように、リンクが緑色になります。
リンク集など、リンクが多いページのチェックも一発で簡単なので、定期的に調べるといいかもしれません。
ダウンロードは LinkChecker :: Firefox Add-ons
10.YSlow

米Yahoo!が提供するアドオンで、サイトのパフォーマンスをAからFで採点してくれます。
具体的に改善すべき場所を教えてくれるので便利です。うちのサイトは…まだまだですね^^;
ダウンロードは YSlow :: Firefox Add-ons
そんなわけで9個のアドオンを紹介しました。参考にしたブログでは、さらに6個のアドオンが紹介されています。
Firefoxだけで全て済んでしまうということではないですが、とても有用なツールになります。
もし、他に便利なアドオンがありましたら、教えていただけるとうれしいです。
- Comments: 0
- Trackbacks: 0
はてなーが大好きな5つのブログのサイドバーを見てみる
- 2009-04-12 (日)
- WEBデザイン

右サイドバーがもうヘロヘロなので、カテゴリとタグを整理しよう
*ホームページを作る人のネタ帳というのがありまして。
カテゴリ・タグの整理は別として、サイドバーの配置ってのに興味がわいてきました。
そこでホームページを作る人のネタ帳さんで紹介されたサイト以外のサイトを
はてなーが大好きなブログBEST100
の中から5つピックアップして調べてみることに。
- Comments: 0
- Trackbacks: 0
CakePHPでSNSを作る 計画メモ
- 2009-04-11 (土)
- CakePHPでSNS

メモです。
作っていく順。
1.会員システム
ユーザー登録とか認証とか。
2.プロフィール機能
ここで慣れればいいな。
3.ユーザー同士がつながるシステム
マイミクみたいな。
4.日記機能
この開発の本命のひとつ。
5.コミュニティ機能
この開発のもうひとつの本命。
そのほかはおいおいつけてく感じで。
1日2時間作れるかな、微妙。
だれと作るってわけでもないので、ゆっくり勉強の合間に作っていきます。
- Comments: 0
- Trackbacks: 0
TortoiseSVN + Google Codeでバージョン管理デビューしました
- 2009-04-09 (木)
- CakePHPでSNS

こんにちは。CakePHPでSNSサイトを作ろうという企画ですが、実際に作り始める前にバージョン管理システムを導入したいと思い、TortoiseSVNとGoogle Codeでバージョン管理デビューしました。
Google Codeでのプロジェクトホーム
CakeSNSプロジェクト(仮)ホーム(http://code.google.com/p/cakesns/)
なんでバージョン管理?
「オープンソースと言えばSubversionやGitでバージョン管理」っていうイメージのせい。
が半分wで、もう半分は純粋にバックアップが楽にできそうで、好きな時点の状態からのやり直しが楽にできる。っていう点。
複数人数での編集とかについてのことは考えていませんでした。
なんでTortoiseSVN?
TortoiseSVNはSubversionのGUIクライアントですが、GUIで操作できるということでひとまずこれを使ってみようと。
取っつきやすさで。
なんでGoogle Code?
公開するには、リポジトリサーバを立てないとと思いつつ、レンタルサーバに置くのも気が引けるし、ADSLで自宅サーバってワケにもいかないので、ホスティングサービスを利用しました。
Google Codeは基本的な機能を簡単に使えます。
SVNのレポジトリがあり、Wikiがあり、バグを報告するところ(?)あり。
まだ始めたばかりで、フワフワとした感じでよくわかってない部分もありますが、開発の過程で慣れていければと思います。
- Comments: 0
- Trackbacks: 0