ウェブ制作を補助してくれるアドオン Webdeveloper1.1.8 日本語版

2010年6月 5日

クッキー、Java、JavaScript、CSSなどを無効化したり、CSSをその場で編集できるウェブ制作者にとってはとても便利なアドオンWebdeveloper1.1.8 日本語版をご紹介します。

他にも様々なウェブ制作を補助する拡張機能が付いていますが、私の一番のお気に入りはCSSをその場で確認しながら編集できる機能です。

CSSの知識やスキルが未熟な内は、なかなか思ったような表示にならず、その度に編集＆確認という作業は非常に億劫ですよね。

私自身、このアドオンを知るまではとても非効率な方法でCSSを編集していました・・・

Webdeveloper1.1.8 日本語版とは？

Webdeveloper1.1.8 日本語版はウェブ制作を補助する拡張機能を持ったFirefoxのアドオンです。

元々英語のアドオンだったものを、ミナトラボの管理人さんが米国のChris Pederick氏から許可をとり、日本語にローカライズし日本語版として公開されています。

Webdeveloper1.1.8 日本語版の機能と動作環境

Webdeveloper1.1.8 日本語版の主な機能

• クッキー、Java、JavaScript、CSSなどを無効にする
• CSSをその場で編集する
• フォームの各属性値を表示する
• 画像を非表示にする
• alt属性のない、あるいはalt属性値が空の画像を枠で囲む
• リンクのパスを表示する
• ブラウザの画面内を拡大あるいは縮小する
• テーブルのセルを表示する
• ブラウザのウィンドウおよび表示領域の幅と高さを表示する
• HTMLおよびCSSの構文をチェックする
• W3C/WCAG1.0あるいは米国リハビリテーション法508条でアクセシビリティをチェックする
• Webページのソースコードを表示する

これらはあくまでも主な機能であり、細かく書くともっと色々な機能があります。全ての機能をご覧になりたい方は『Web Developer 1.1.8 日本語版 』の機能一覧からどうぞ。

Webdeveloper1.1.8 日本語版の動作環境

Webdeveloper1.1.8 日本語版は、Firefox, Seamonkey, Flockのツールバーとして組み込まれます。

それらのブラウザが動作する環境であれば、OSに依存せずに利用することができます。現在、Windows, MacOS X, Linuxでの動作を公式の方では確認済みのようです。

ちなみにミナトラボさんのページではFirefox 3.5対応と表記されていますが、Firefox 3.6でもきちんと動作しています。

Webdeveloper1.1.8 日本語版のダウンロードとインストール

ではWebdeveloper1.1.8 日本語版をダウンロードしていきましょう。

以下のリンクからWebdeveloper1.1.8 日本語ダウンロードページにいき、ダウンロード：Webdeveloper for Firefox (399kb)をクリックします。

インストールするアドオンを確認し、よければ「今すぐインストール」を選択。

無事Webdeveloper1.1.8 日本語版がインストールできれば、Webdeveloper1.1.8 日本語版を有効にする為、一度Firefoxを再起動します。

Firefoxの再起動が終わりWebdeveloper1.1.8が有効になれば、上部のツールバーに以下画像のような表示が追加されます。なお、上下のツールバーについては環境によって異なりますのでご注意下さい。

ツールバーが表示されていれば、無事にWebdeveloper1.1.8 日本語版のインストールができています。

Webdeveloper1.1.8 日本語版の使い方

次に、Webdeveloper1.1.8 日本語版の使い方を説明していきます。

使い方といっても実に様々な機能があり、人によって使う機能と全く使わない機能があると思います。よってここでは私がよく使うCSSをその場で編集する機能だけについて取り上げようと思います。

他にも便利な機能はたくさんありますので、ご自分に合った使い方を是非見つけて下さい。

ではまず、編集を行いたいページをFirefoxで表示させます。

次に、編集を行いたいページをFirefoxで表示させた状態で上部のツールバー「CSS」を選択し、「CSSを編集する(E)」を選択します。キーボードのCtrl + Shift + Eでも構いません。

すると、画面下部にCSSが表示されますので、その場で内容を編集すると編集内容が即ブラウザ上で反映されます。スタイルシートを複数使用している場合は、編集をしたいスタイルシートにタブを切り替え編集します。

あくまでもこの反映はブラウザ上で反映しているだけで、ファイル内容が変更されている訳ではありません。

実際の使い心地は色々と触って試してみてください。

また、似たような機能のアドオンでFirebug 1.5.2というアドオンもあります。

個人的にはWebdeveloperの方が使いやすかったのですが、よければこちらもお試し下さい。
Firebug 1.5.2のダウンロードは以下からどうぞ。
Firebug :: Add-ons for Firefox

前へ　検索順位ごとのアクセス数を予測するツール「aramakijake.jp」

• Firefoxの必須アドオン Greasemonkey（グリースモンキー） 通称グリモン？
• グーグル（Google）の検索結果に順位の数字を表示するアドオン
• ヤフー（Yahoo!）の検索結果に順位の数字を表示するアドオン

トラックバックURL
http://www.ron3.net/mt4/mt-tb.cgi/19