サイトを丸ごとダウンロードする

screenshot
Website Explorerというツールを使うと、リンクを自動でたどってサイト全体のファイルを丸ごとダウンロードすることができます。

ただし、これは通常のHTTP経由でのデータ取得なので、例えばCGIPHPなどが含まれている場合は、そのソースではなく生成されたHTMLとなります。

ダウンロード完了後は、サイトの構造をエクスプローラのようなツリー状に、視覚的に分かりやすく表示できるため、現状のサイト構造の分析に便利です。

アクセシビリティ向上のために

screenshot
見やすく情報を探しやすくするためには、アクセシビリティを向上させることが重要です。また、アクセシビリティの向上はSEOにも繋がります。

富士通から、アクセシビリティを最適化することができるツール「富士通アクセシビリティ・アシスタンス : FUJITSU Japan」が無償公開されています。

これは、

の3つからなるツール群(といっても別々にダウンロードするのですが・・)で、WebInspectorはアクセシビリティの検証・診断に、ColorSelectorは背景色と文字色の組み合わせの選択に、ColorDoctorはサイトやドキュメントなどの色のアクセシビリティのチェックに用います。

ColorDoctorだけは、Windows XP + .NET Framework という環境でないと動作しないようなので、注意が必要です。

富士通アクセシビリティ・アシスタンス : FUJITSU Japan

Firefoxで便利なExtension [その5]

ColorZilla

ColorZillaというExtensionを入れると、カラーピッカーを使って、閲覧中のページからスポイトで色情報を抽出することができるようになります。

他にも、カラーパレットツールやDOMインスペクタ的な機能(マウスオーバーでタグ情報がステータスバーに表示)、ページのズーミング機能なんかがあって便利です。

スタンドアロンで使いたい方は、色々の色というツールでできます。このツールは500円のシェアウェアなので、継続利用する場合はレジストしましょう。

Firefoxで便利なExtension [その4]

Tab Mix Plus

Firefoxには標準でタブ機能がついていますが、Tab Mix Plusをインストールするとタブ機能をかなり詳細にカスタマイズすることができるようになります。

例えば、

  • 終了前に開いていたタブを起動時に復元
  • タブの幅を調整
  • 検索やアドレス入力で新しくタブを開く
  • 最後に閉じたタブを開きなおす(履歴も復活!)

などなどです。

新たな機能が追加される拡張とは違うものですが、「操作感」に大きく影響する拡張なので入れておいて損はないと思います。

→Tab Mix Plusをインストール

Firefoxで便利なExtension [その3]

今回は、Webアクセシビリティツールボックスをご紹介。
http://www.infoaxia.com/tools/images/IAWAT_Lump_sample.png

インストールを行うと、上図のようにツールバーが登場し、「個別検証」または「一括検証」によるアクセシビリティのチェックを行うことができます。

また、「ツール」からは(Web Developerの機能ともちょっと重複する部分もありますが)、オンラインツールでの検証を行ったり、画像の一覧やリンクの一覧を表示したりできます。

こういったツールにはスタンドアロンで動くものもありますが、FirefoxのExtensionであれば、表示中のページをいきなり検証できるので、使い勝手が良いと思います。

Firefoxで便利なExtension [その2]

AiO Gestures

今回は、"All-in-One Gestures"というExtensionをご紹介。

これを使うと、「マウスジェスチャ」が使えるようになります。マウスジェスチャを使うと、右クリックを押したまま上下左右にドラッグさせることで、その動きの組み合わせに様々な機能を割り当てることができます。

例えば・・

  • 「左」に動かしてページを「戻る」
  • 「右」に動かしてページを「進む」
  • 「下」に動かして最小化
  • 「上左上」に動かして1つ上の階層のページへ

これらの動きは設定で自由にカスタマイズが可能です。All-in-One Gesturesでは、上の画像のようにジェスチャの軌跡が赤い線として表示されるので分かりやすいです。

使い出すと、これがないとブラウジングできないってほど、便利なものです。*1

*1:よくIEで間違えてジェスチャしてしまいます・・。

Firefoxで便利なExtension [その1]

Web Developer

みなさん、Firefoxをもちろん使っていることと思いますが、Web開発者であればこの拡張を入れなければ損です!その名も、"Web Developer"。

この拡張を入れると、(ちょっと小さいですが)画像のように赤く囲んだ部分にツールバーが登場します。ここから、例えば以下のようなことができるようになります。

  • 無効にする(キャッシュ、JavaJavaScriptリファラ送信*1など)
  • フォームの変数名を表示したり、Hiddenを編集したりできる
  • フォームのmaxlengthを無効にする*2
  • フォームに自動的に文字列を入力できる
  • 指定したウィンドウサイズに変更する
  • 開いているページの構文チェックやアクセシビリティチェックができる
  • 指定したテキストエディタでソースを開く

他にも多くの機能が満載。デザイナもプログラマも必須ツールといえます。

*1:開発中のサイトをプレビューする場合、リファラを送信しないとそのURLがばれることがあります

*2:サーバサイドで文字列長チェックができているかチェックできます