オススメ拡張その2
Firefoxの数ある拡張の中からWeb制作に役立つものをピックアップしてみました。
その1は↓
caramel*vanilla » Web制作に役立つFirefoxの拡張(1) - HTML/CSS関連
検証ツールと便利ツール
検証ツール
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla.
The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.
The details of the errors are seen when looking the HTML source of the page.
ブラウズ中のページのエラーを表示
ソースを表示して詳細もチェック可能
ステータスバーで閲覧中のページの構文チェックができるのが便利でもあり恥ずかしくもあり。
アイコン右クリックから「ページのソース」を表示するとエラーの詳細がわかり、「クリーンアップ」を選択するとエラー箇所のソースを修正してくれます。
修正前後のプレビューもできるので便利。
The toolbar provides extensive search-related information about a site, all conveniently displayed in one discreet and compact toolbar.
表示中のサイトに関する検索関連の情報をツールバーに表示
GoogleとAlexaのランクを表示してくれたりNoFollowリンクをハイライトしてくれたり、表示中のページのYahoo, MSN, Googleでのリンク数と検索順位へのリンクを開いてくれたり…etc
その他SEO対策に役立ちそうな機能がいろいろあります。
The SEO Links extension gives you tooltips specially enhanced for SEOs.
SEO用のツールチップを表示
SearchStatusは表示中のページに関する情報でしたがこちらはマウスオーバーしている文字列とURLのYahoo, MSN, Googleでのリンク数と検索順位をツールチップで表示してくれます。
それぞれの検索結果へもすぐに飛べるようになっています。
Launchy is a Mozilla, Mozilla Firefox, Mozilla Thunderbird, Netscape and Nvu extension that will enable you to open current page, links, mailto, images and view source with external applications.
閲覧中のページ, リンク先, メール, 画像を外部のアプリケーションで開く拡張
本来はWeb制作用の拡張ではありませんがデフォルトブラウザ以外での表示確認をするときに便利です。
とはいうものの実際のところOperaでの確認はほとんどしてなかったりします。
なので表示の確認の際はもっぱらIE Tab 日本語版のお世話になってます。
Check webpage links at a glance with simple color coding. Ditch those massive listings of bad links that provide no context and add LinkChecker to your arsenal of web development tools today.
表示中のページのデッドリンクを色でチェック
ツールバーのアイコンや右クリック、もしくはツール→Check Page Linksから起動します。
表示中のページに張られたリンク全てをチェックして結果をハイライトで表示してくれます。
赤→デッドリンク
黄→アクセス制限
緑→OK
リンク集のページで使うと特に便利かもしれません。
便利ツール
Codetch is a code editor that runs along side other Gecko based programs, such as Firefox. Install it as an extension today and have a full featured editor right beside your web pages as you surf!
Web編集のためのコードエディタープログラム
これはすごい!!
Dreamweaverのような高機能なWebオーサリングツールです。
作成したファイルはローカルに保存することもできます。
日本語化してくれたらもっと便利に使えそうです。
Adds a sidebar with web-development documentations.
サイドバーにWeb開発のための各リファレンスを表示
ツール→Zhluk.Com DevBoiから起動するとHTMLやCSSの仕様をサイドバーから確認できます。
CSSは各ブラウザの対応状況の一覧表にもなっていて便利です。
これも日本語化してくれたらありがたいと思う拡張です。
Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
スポイト, カラーピッカー, ページの拡大, その他カラーツール
ページ内の好きな色のカラーコードをクリップボードにコピーできるツール
拾った色をお気に入りに保存して管理もできるしWeb セーフカラーのカラーチャートもあります。
なくてはならない拡張です。
Mozilla Firefox extension for a simple web color names browser/selector
Web カラーネームを表示するシンプルな拡張
ColorZillaがあればいらないかなって感じですがWeb セーフカラーのカラーチャートを表示してコードをコピーする拡張
ブラウザのツール→Web Color Namesから呼び出して使います。
Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.
Webページ内に定規を表示してさまざまな要素のサイズを測る拡張
ステータスバー左下の定規アイコンをクリックして使います。
定規はドラッグ&ドロップで好きな箇所に移動できます。
1ピクセルづつ動かしたいときはCTRL + 矢印キー
5ピクセルづつ動かしたいときはCTRL + SHIFT + 矢印キー
FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.
ブラウザからFTPサーバーへ接続するためのクロスプラットフォームのFTPクライアント
ツール→FireFTP(F)から起動すると新しいタブで開きます。
パーミッションの設定もできます。
あれこれあげてみましたが実際いろいろ使ってみて特にオススメというかなきゃやってらんないっていう拡張
以上4つ。
これらの便利な拡張のおかげでblogいじりの効率がかなりアップしました。
それでもうまくいかなかったり時間がかかったりするのは自分のスキル不足のせいです :-(
もっと根本的に精進せねば!!
改めて並べてみるとFirefoxだけでWeb制作のほとんど全て完結しちゃいそうな勢いです。
(もちろん個人レベルのお話)
あと必要なのはグラフィックソフトだけって感じ?
Firefox大好き :-)
Web制作関連の拡張をもっと自分で探したいなーって場合は以下へどうぞ↓
Mozilla Update :: Extensions - List - Developer Tools
いろんな拡張があって探して試すのも楽しいと思います。
- 関連 -
20 Resources on Best Firefox Extensions for Web Development - Listible!
Leave a Reply