10 Popular Firefox Add-ons for Web Developers
という記事でFirefoxアドオンがまとめられていました。

1.Firebug
これがないと仕事ができません。
ブラウザ上でcss,HTML,javascriptを編集できたりします。
さらにプラグインで拡張することもできます

2.Web Developer
ツールバーを拡張します。
HTMLのブロック表示、テーブル表示、CSS編集、CSS無効、ウインドウサイズ変更などいろいろできます。

3. ColorZilla
知りたい色の上にカーソルを移動してみましょう。

4. Html Validator
ステータスバーにアイコンが表示されます。
これのおかげでキレイなHTMLが書けるんです。

5.FireFTP
FirefoxをFTPクライアントにするアドオン。
これは使っていません。

6.IE Tab
FirefoxでIEのレンダリングエンジンを利用します。
最近はIETester使ってます。

7. MeasureIt
ブラウザ上で高さや幅を測るメジャー。Web制作の人は意外によくつかうかもしれない。それ意外の人にはまったく役にたたないかもしれない。

8. Greasemonkey
JavaScriptのスクリプトを使ってブラウザの拡張ができます。これ単体では何もできません。

9.View Source Chart
HTMLの構造が色分けですぐわかる

10. Aardvark
マウスオーバーで要素を表示してくれます。
また、起動中にコマンドがいくつか使用できます。
W：Wider: 領域を広げる
N：Narrower: 領域を狭める
Q：Quit: 終了する
U：Undo: Remove と Isolate の効果を取り消す
R：Remove: 選択した要素を削除する
I：Isolate: 選択した要素だけを表示する
E：Erase: 選択した要素のコンテンツをレイアウトを維持したまま削除する
B：Black on white: 選択した要素を白地に黒文字で表示する
C：Colorize: 選択した要素の背景色をランダムに変更する
V：VewSource: 選択した要素のソースを表示する
D：De-widthify: 選択した要素の固定幅指定を除去する

あまり使ったことないアドオンもいくつかあったので、使ってみようと思います。

最近何かと話題になっているzen-codingを触ってみました。

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

Dreamweaver導入方法

まずはDreamweaverプラグインをダウンロード（v0.6）
http://code.google.com/p/zen-coding/downloads/detail?name=Zen.Coding-Dreamweaver.v0.6.zip&can=2&q=

そして、フォルダ内のZen Coding v.0.6.mxpをダブルクリックして承諾するをクリックするだけ。

lang属性がen-USになっているので、必要な場合は以下のjsファイルで変更可能。
Documents and Settings/ユーザー名/Application Data/Adobe/Dreamweaver CS4/ja_JP/Configuration/Commands/ZenCoding.js

使い方
入力してCtrl＋カンマで展開します。

div

<div></div>

div#header>ul>li*4

<div id="header">
　<ul>
　　<li></li>
　　<li></li>
　　<li></li>
　　<li></li>
　</ul>
</div>

CSSでも

pos:r

position:relative;

va:b

vertical-align:bottom;

操作方法に慣れれば、すごく早くコーディングできそうですね。

Zen HTML Elements
http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn

Zen HTML Selectors
http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

Zen CSS properties
http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn

----------------------------------------------------------------
Movable Typeでも使えます。

Movable Typeプラグインのダウンロード
http://code.google.com/p/mt-zen-coding/downloads/list

環境によって軽くならない場合もありますが、

■「SQLite Optimizer」
FirefoxはSQLiteDBでブックマークや履歴などの管理をしていますので、
何もしなければどんどんDBは大きくなり、起動や動作は重くなります。
このアドオンをインストールするだけでDBの最適化をしてくれます。

■「Fireboot」
不要な言語ファイルを削除することにより少しでも軽快にしようというツール

■「Fasterfox」
賛否両論あるアドオンですが、早くなるのは確か。

■about:configを弄る
上級者用ですが、Firefoxを自分仕様にするためにいろいろ弄ることができます。
Firefoxを思い通りに--about:configページで使える便利な10の「ハック」

about:configの設定がラクになるアドオンもあります。
Configuration Mania
ストレスフリー！　Firefoxの「about:config」の設定をラクにしてくれる「Configuration Mania」

■不要なアドオンは停止あるいは削除する
普段からよく使うアドオンは残したまま、ときどき使うようなアドオンは一時停止、
インストールしてみたものの使った記憶があまりないアドオンは削除してみる。

■再インストール
最終手段。プロファイルやアドオンを残したまま再インストールしてもあまり意味がないかも。

inputやtextareaをクリックしたら消えるアレに似てますが、
今度はスライドしてます。

labelタグを使ってるので、CSSを切った状態でも、
崩れずに表示されてます。

Form Design with Sliding Labels
デモページ

カレーには、らっきょう派です。
こんにちわ。たけだです。
Gmail,GoogleReader,GoogleVoice,GoogleWaveの新着情報を一つのツールバーボタンでチェックできる拡張機能です。

GoogleChromeで「One Number」のページにアクセスして、Installボタンからインストールするだけ。

オプションからボタンのカスタマイズ、クリック時のアクション、カラーの表示変更など、ある程度カスタマイズできるようです。

今まで各サービスをチェックするのに、別々の監視ツールを使っていたのを、ひとまとめにするだけで大幅に時間の短縮ができます。

使えるかどうか分からないきっと使わないjqueryですが、

jSnow

jSnowプラグインを使えば、簡単にページ内に雪を降らすことができます。
雪だけでなく、文字や画像も降らすことができるので、おもしろいかもしれない。

デモ１（雪）
デモ２（文字）
デモ３（画像）

Google Chrome Extensions

Google Chromeの拡張機能がベータ版として公開されていました。
すでに300種類以上公開されています。

早速Google Mail Checkerをインストールしてみました。

GoogleChromeがやっぱり早いので、仕事以外の作業は、
Chromeを使うことが多くなってきました。
Firefoxのようにいろいろ拡張できるともっと便利に使えそうです。

文字を書き留めておくだけのテキストエディタ「SimpleText.ws」を使ってみました。
家でも、オフィスでも、iphoneでも、Googleアカウントでログインし、文字を入力して、保存するだけ。
ブラウザの印刷機能から印刷もできます。

さりげなく変更履歴の機能があって、よい感じです。

SimpleText.ws

phpspot開発日誌で紹介されていた、
WEBサイトデザインのフィードバック作業が超便利になりそうな「Notable」
を使ってみました。

「Notable」

キャプチャをアップロードする方法は、何種類かありますが、
今回は、専用のfirefoxアドオンをインストールして、キャプチャをアップロードしました。

キャプチャをアップロードした後は、自由に注釈を入れていきます。
とても簡単で、直感的に操作できます。

保存した後、URLが発行されるので、共有することもできます。

PDFも発行できるようですが、日本語だからか文字化けしてしまいました。

まだ使えそうで使えなさそうな感じです。今後のバージョンアップに期待です。

Operaのサイトで、「Web標準カリキュラム」の日本語訳が公開されはじめていました。
現在は、3つの記事だけが公開されていますが、今後少しずつ公開されていくようです。

復習することで気づくこともあるはず。

「Web 標準カリキュラムの紹介」
「インターネットと Web の歴史、そして Web 標準の進化」
「インターネットのしくみ」

役に立ちそうかなと思ってfirefoxにインストールしていた分割ブラウザアドオンをまったく使っていなかったことに気がついたので、使ってみました。

ブラウザの領域を自由に分割ができるので、２つのページを見比べたり、常に表示させておきたいページを横に表示させておいたり、いろいろな使い方ができそうです。

基本的な使い方は、コンテキストメニューで「ブラウザを分割」を選べば、ウインドが分割されます。

また、スクロールを同期することもできるので２つのページを見比べるときに便利に使えそうです。

ブログにコードを書きたいときってあるよね。
方法はいくつかありますが、
今回紹介するのは、
jQuery Code Expander
長いソースコードを書くときは、どうしても広いスペースが必要ですが、
jqueryを使えば伸びたり縮んだり。

デモ

他にも、
SyntaxHighlighter

Google Code Prettify

HIGHLIGHT.JS

を導入すれば、ソースコード書くとハイライト表示してくれて、ソースコードが読みやすくなります。

inputやtextareaをクリックしたら消えるアレをメールフォームに使いたかったので、いろいろ探したら辿り着きました。

jquery-inline-form-labels

デモ