2006年7月26日 (水)

Ajax開発支援ツールまとめ

Ajax開発支援ツールをまとめておきます。

・コーディング支援ツール

  • aptana
    • eclipseのプラグインの、JavaScript,CSS,HTML,XMLエディタ。
    • コード補完機能、JavaScriptのオブジェクト指向、JavaScriptのクラスの階層表示もサポート。
  • JSEclipse
    • Adobe提供のecliseプラグイン。インストール方法はこちらを参照。
    • コード補完機能がある他、オープンソースのライブラリもいくつかサポート。
  • Googlipse
    • Google Web Tookit用のeclipseプラグイン。
  • JSDoc
    • JavaScriptでJavaのJavaDocと同様のものを作成可能。

・ブラウザツール

  • FireFox
  • Internet Explorer
    • Internet Explorer Developer Toolbar
      • Microsoft提供のツールバー。
      • HTMLやCSSの文法チェック、DOM要素参照など多くの機能がある。
      • IE6以上で動作。
    • Microsoft Script Editor
      • Microsoft Office 2003 or XPがインストールされている環境で使用可能。
      • デバッグやウォッチ式が使えるなど非常に便利。
      • Microsoft Script Editorを有効にする方法および使用方法は、以下のサイトを参照のこと。
      • 一度設定が終わったら、exeを直接起動して使うことも可能。直接起動すると、任意の場所でデバッグが開始可能。HTMLエディタにもなるし便利。exeのパスは通常なら以下のようになる。
        • C:\Program Files\Microsoft Office\OFFICE11\MSE7.EXE
    • Fiddler
      • 高機能HTTPデバッガ
    • Drip IE Leak Detector
    • Web Accessibility Toolbar 日本語版
      • HTMLやCSSの文法チェックなどができる。
      • IE5.5以上で動作。
    • IEerBug
      • FireBugの関数を使用してもJavaScriptエラーが出なくなる。
      • JavaScriptのライブラリをインクルードするだけで利用可能。
      • デバッグ機能はなし。
  • Opera
    • Opera developer tools
      • Opera純正の開発ツール。
      • DOM Console, CSS Editor, DOM Snapshotがある。
      • 解説記事。
    • Web Developer Toolbar
      • ユーザエージェントの変更や、フォームの内容変更など多機能なツールバー。
      • 解説記事。
    • IEerBug
      • FireBugの関数を使用してもJavaScriptエラーが出なくなる。
      • JavaScriptのライブラリをインクルードするだけで利用可能。
      • デバッグ機能はなし。

・デバッグ・テスト支援ツール

  • Selenium
    • Webアプリのテスト自動化ツール
    • こちらの解説も参照
  • JsLex
  • JavaScript Shell
    • JavaScriptのコンソール画面で、JavaScriptを実行できるツール。
    • 複数行のJavaScriptにも対応。(kmdsbngさん情報提供)
  • debug.js
    • JavaScriptでデバッグウィンドウにメッセージを出力しておいて、最後にまとめて表示できるツール。

・デザイン支援ツール

  • Install multiple versions of IE on your PC
    • 一台のPCにスタンドアロン版のIE3～IE6までを、インストールするツール。
    • IE7も追加インストール可能。
    • 動作は完全ではないが、デザインチェックには十分使える。
  • CSS Tab Designer
    • CSSのメニューを簡単に作ってくれるツール。
  • CSSVista
    • IEとFireFoxの表示画面を見ながら、CSS編集ができるツール。
  • 原色大辞典
    • 色のサンプル、名前、１６進表記が知りたいときは、まずここへ。

・JavaScript便利ツール

  • 圧縮・難読化

    • JS Builder

      • JavaScriptの圧縮・難読化ツール。.NET Framework2.0が必要。
      • 複数ファイルを一度に圧縮したり、ヘッダーを指定できたりと使いやすい。
    • ShrinkSafe
      • JavaScriptの圧縮・難読化サービス＆ツール。
      • 2006/11/21時点のcustom_rhino.jarだと、以下の不具合があった。
        • UTF-8で日本語が含まれていると文字化けが起きる。一度、Shift-JISに変換してから処理するとＯＫ。
        • "} else if{ " の文が、"} else { if }"と変換されてしまう。
    • JSMIN
      • JavaScriptの圧縮・難読化ツール。
    • ObfuscateJS
      • JavaScriptの圧縮・難読化ツール。
      • 変数名も変えてくれる。しかし、それが裏目にでて複数ファイルだと整合性が取れなかった。(2006/11/21)
    • JS Minifier
      • オンラインでJavaScriptの圧縮・難読化ができるサイト
    • jsjuicer
      • コマンドラインからJavaScriptの圧縮・難読化ができるツール
      • C++で記述されているため高速
  • コード整形

    • JavaScript Code Improver

      • JavaScriptの整形ツール。圧縮・難読化されたJavaScriptを読みやすくできる。
      • GUIなので操作が簡単。
    • JavaScript::Swell
      • JavaScriptの整形ツール。圧縮・難読化されたJavaScriptを読みやすくできる。
  • 文法チェック
    • JSLint
      • オンライン上でJavaScriptの文法チェックを行ってくれるサイト。
    • REJAX
      • オンライン上で正規表現の文法チェックができるサイト
      • JavaScriptだけでなく、PHPやPerlもチェックできる
    • JavaScript RegExp Example: Regular Expression Tester
      • オンライン上でJavaScriptの正規表現の文法チェックができるサイト
  • その他
    • Javascript Developer Tools
      • オンライン上でJavaScriptの文法チェック、圧縮・難読化、コード整形ができるサイト

・TDDツール

  • JsUnit
    • JavaScriptのxUnitツール。サイトは、なぜかIE6,IE7で表示されない。
    • 解説サイト
  • JSMock
    • JavaScriptでMockオブジェクトを扱えるライブラリ。


・画像イメージ

  • AjaxLoad
    • 画面のロード中のイメージをフリーで作成できるサイト。
  • Activity Indicators
    • 処理中のプログレスバーイメージ。
  • Background Image Maker
    • Web2.0な背景イメージを作ってくれるサイト。
  • Web2.0 Logo Creator
    • Web2.0なロゴイメージを作ってくれるサイト。日本語未対応。

・Ajax開発支援ツール紹介サイト

・リファレンス類

 

・チートシート

・JavaScript/Ajaxお勉強サイト

・その他お役立ちサイト

・編集履歴
2007.03.24 大幅に情報追加。
2007.03.17 LiveHTTPHeadersを追加。
2007.03.17 Fiddlerを追加。
2007.03.17 jsjuicerを追加。
2007.03.17 Javascript Developer Toolsを追加。
2007.03.17 JS Minifierを追加。
2007.03.17 JavaScript RegExp Example: Regular Expression Testerを追加。
2007.03.17 REJAXを追加。
2007.03.17 カテゴリ分類変更
2007.02.03 原色大辞典を追加。
2007.02.03 CSSVistaを追加。
2007.02.03 CSS Tab Designerを追加。
2007.02.03 Install multiple versions of IE on your PCを追加。
2007.02.03 デザイン支援カテゴリ追加。
2007.01.18 JsLexを追加。
2007.01.04 Web2.0 Logo CreatorのURLを変更。
2006.12.29 Googlipseを追加。
2006.12.23 Opera developer toolsを追加。
2006.12.23 Web Developer Toolbarを追加。
2006.12.23 JSEclipseを追加。
2006.12.19 JavaScript Code Improverを追加。
2006.12.06 FirebugにFirebug Liteの記述を追加。
2006.12.01 JSMockを追加。
2006.11.21 JS Builderを追加。
2006.11.21 JavaScript難読化ツールまとめを追加。
2006.11.21 ObfuscateJSを追加。
2006.11.21 custom_rhino.jarの不具合情報追記。
2006.10.16 Leak Monitorを追加。
2006.08.30 IEerBugを追加。
2006.08.18 Web2.0 Logo Creatorを追加。
2006.08.18 Background Image Makerを追加。
2006.08.12 Tools - Ajax Patternsを追加。
2006.08.12 カテゴリのくくりを変更。
2006.08.06 FireBugの解説サイトを追加。
2006.08.06 Activity Indicators追加。
2006.07.30 aptanaを追加。
2006.07.29 Microsoft Script Editorを追加。
2006.07.28 Internet Explorer Developer Toolbar追加。
2006.07.28 Venkman JavaScript Debuggerに追記。
2006.07.28 JSLint追加。
2006.07.28 JavaScript Shell追加。kmdsbngさん情報ありがとうございます。
2006.07.28 ブラウザによるカテゴリ分け。
2006.07.28 Web Accessibility Toolbar日本語版追加。
2006.07.28 Web Developer日本語版追加。
2006.07.26 RSSが変になったので再度投稿。


はてなブックマーク数

投稿者 fnya 時刻 10時33分 05.Ajax/JavaScript, 07.Ajax開発支援ツールまとめ | | コメント (2) | トラックバック (2)