FHW BLOG仮

FHWブログトップ > firefox > コーダーTIPS > ブラウザ > コーディングをする上で、役に立つfirefoxプラグイン

DATE : 2010.4.02

コーディングをする上で、役に立つfirefoxプラグイン

ズン子

  • はてなブックマークに登録
  • Yahoo!ブックマーク
  • Google Bookmarks
  • livedoor クリップ
春の嵐ですか?今日は?
強風で電車が遅延してました。

あ、私は全然影響なく出社できましたw
こんにちは!ズン子ですw

さて、firefoxのプラグインの数は今いくつくらいあるんでしょうね?

Mozilla Japanで探してみたところ、456件。
あくまで、Japanで公式に紹介されている数ですが、多いですね。

他にも個人で作成された方のものが、・・・・いくつ?www
ざっと、10,000以上。

そんな数多く存在するffアドオンの中でも、自分が普段使っているマークアップに便利なツールをご紹介したいと思います!

Html Validator

・対応バージョン : 3.5 - 3.6.x
ダウンロード
表示されたページの HTML をローカルで検証し、エラーと警告の数をステータスバーに表示します。詳細はページのソース画面で見ることができます。
本当に便利なアドオンの一つです。
インストール後、【ページのソース】から、表示中のソースを見ると、ページ中のエラーや警告をリストアップしてくれる枠が追加されます。
また、解決方法も追記され、どんなミスがあるか具体的に分かります。


Web Developer

・対応バージョン : 1.0 - 3.6.x
ダウンロード
様々な Web 開発ツールを統合したツールバーです。例えば、CSS や JavaScript を無効化した状態で Web ページがどのように表示されるかを確認したり、フォーム、画像、その他あらゆる要素に関する情報を表示することができます。グリッド表示、要素の枠線表示、ウィンドウサイズの変更といった便利な機能も備えています。
これも大変便利です。
表示したサイトのCSSを切ったり、JSを切ったり、枠をつけたりと、使えます。
ショートカットも効くので、【Ctrl + Shift + s】で、CSSを切るとか、よく使います。
(sのキーをあまりにもよく使うので、いつもsキーの塗装が一番最初に禿げますw)


Firebug

・対応バージョン : 3.5 - 3.6.x
ダウンロード
ワンクリックで使える豊富な Web 開発ツールを Firefox に統合します。Web ページの HTML、CSS、JavaScript、Ajax をリアルタイムに編集、デバッグ、監視できます。
最近は、引用の説明にもあるとおり、Ajaxの編集によく使います。
他にも、デザインが崩れているブロックをクリックするだけで、該当ソースを表示出来るので、便利です。


FireMobileSimulator

・対応バージョン : ?(3.6.2 使用可能でした)
ダウンロード
主要3キャリア(DoCoMo/Au/SoftBank)の携帯端末ブラウザをシミュレートして、モバイルサイト開発を容易にするために作成された Firefoxのアドオンです。携帯端末のHTTPリクエスト、絵文字表示、位置情報送信機能などの動作をシミュレートすることができます。
ff上で、モバイルサイトの表示確認をしたい人は使ってみてください。
(モバイルサイトの確認は専用のアプリケーション等を使った方がイイと個人的には思います)



コーディングでよく使うのはこんなとこです。
他にもありますが、活用率が↑に比べて低いので、ここでは割愛させてもらいます。

次に良く使うのは、コーディングとは離れますが↓のような物。

Pearl Crescent Page Saver Basic

・対応バージョン :3.0 - 3.6.x
ダウンロード
Web ページのスクリーンショットを画像ファイルとして保存できます。Flash コンテンツにも対応しています。ファイル名、拡大倍率、画像形式 (PNG または JPEG) など、様々なオプションを備えています。
webサイトのキャプチャを撮る時、通常はブラウザで表示出来ている領域のみですが、
このアドオンを使えば、表示されているページ全体を一瞬で撮影できます。
便利。


MeasureIt

・対応バージョン :3.0 - 3.6.x
ダウンロード
Draw out a ruler to get the pixel width and height of any elements on a webpage.
画像の高さや、幅をwebサイト上で測れます。
値はピクセルになります。
※マウスを使って概算を測る感覚です。



FireGestures

・対応バージョン :3.0 - 3.6.x
ダウンロード
軽量かつカスタマイズ性の高いマウスジェスチャー拡張機能です。右クリックしながらマウスを一定の方向に動かすマウスジェスチャーの他、5 種類のジェスチャーによって様々なコマンドを実行することができます。
マウスアクションでページ遷移出来るようになります。
マウスにサイドボタン(なんて言うんだろ?)がついてない方向けかな?

トラックバック(0)

トラックバックURL:

コメント(1)

すごいすごい!
良いこと教えてもらった!

コメントする

(スタイル用のHTMLタグを使えます)
最近の記事一覧
最近のコメント一覧
カテゴリ一覧

コーダーTIPS

ディレクターの・・・

デザインTIPS

アーカイブ

2011年

2010年

2009年

2008年

2007年

タグクラウド

My tweets
Loading..

HTML5実践

Powered by Movable Type 5.02