Ajax開発支援ツールまとめ

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

aptana
- eclipseのプラグインのJS,CSS,HTML,XML,PHP,AIR等のエディタ
- コード補完機能やJavaScriptのクラスの階層表示もサポート
- 解説記事1 ，解説記事2，正式版情報
JSEclipse
- Adobe提供のecliseプラグイン。こちらも参照
- コード補完機能や、オープンソースライブラリもサポート
Spket IDE
- eclipseプラグインのJavaScript,XMLエディタ
- XUL/XBL,SVG,Lzszlo,Yahoo! Widgetをサポート
Googlipse
- Google Web Tookit用のeclipseプラグイン
JSDoc
- JavaScriptでJavaのJavaDocと同様のものを作成可能
jsdoc-2
- JSDocのバージョン２の模様
秀丸でJavaScriptのアウトライン解析する定義ファイル
- 秀丸のアウトラインにJavaScriptのクラス構造を表示する定義ファイル

・ブラウザツール ↑TOP

FireFox
- FireBug
  - JSの文法チェック・デバッグ・CSSの文法チェックなど高機能
  - 解説記事
  - [javascript]Firebugの便利な組み込み関数 (技術メモ帳)
  - IEやOperaでconsole.log等を実行するための、Firebug Liteもある
- Leak Monitor
  - JavaScriptのメモリーリークを発見できるツール
- Venkman JavaScript Debugger
  - JavaScriptをステップ実行でデバッグできる。
- Web Developer 日本語版
  - Mozilla / FireFox用のツールバー
  - HTMLやCSSの構文チェックや、表示されているページのHTMLやCSSを直接編集する機能などがある
- HTML Validator for FireFox and Mozilla
  - FireFox/Mozilla用
  - 静的なHTMLだけの対応だが、HTMLの文法チェックが行える
- LiveHTTPHeaders
  - HTTPのヘッダー情報を取得するできる
  - FirefoxのlivehttpheadersでHTTPリクエストの中身が見られるしくみ(bits and bytes)
- Chickenfoot
  - ブラウザの操作記録・再生用FireFox拡張
- iMacros
  - ブラウザの操作記録・再生用FireFox拡張
- Xdebug Helper
  - PHPのXdebugをリモートデバッグの開始・停止を制御できる
  - こちらも参照
- MYCOMジャーナルのFireFox拡張まとめ
  - ３４個ものWebアプリ開発に使える拡張が紹介されている
  - さすがに紹介しきれないので記事へリンク
- YSlow
  - Yahoo!提供のWebサイトパフォーマンス改善分析ツール
Internet Explorer
- Internet Explorer Developer Toolbar
  - Microsoft提供のツールバー、IE6以上で動作
  - HTMLやCSSの文法チェック、DOM参照など多機能
  - 「DebugBar」と「Internet Explorer Developer Toolbar」を比べてみました
- Microsoft Script Editor
  - 要Microsoft Office 2003 or XP
  - デバッグやウォッチ式が使えるなど非常に便利
  - IEでjavascriptのエラーをデバッグする方法 (bits and bytes)
  - HOW-TO: Debug JavaScript in Internet Explorer
  - IEでのJavaScriptのデバッグ方法 - Microsoft Script Editor編 - - Yet Another Hackadelic
  - 一度設定が終わったら、exeを直接起動して使うことも可能
  - 直接起動すると、任意の場所でデバッグが開始可能
  - exeのパスは通常なら以下の場所
    - C:\Program Files\Microsoft Office\OFFICE11\MSE7.EXE
- Fiddler
  - 高機能HTTPデバッガ
- Fiddler2
  - JavaScript整形機能を持ったFiddlerプラグイン
- Web Development Helper
  - HTTPロギングツール
  - ASP.NET AJAXの開発に合わせた機能あり
  - こちらを参照
- JavaScript Memory Leak Detector
- Drip IE Leak Detector
  - IEでJavaScriptのメモリーリークを発見できるツール
  - Ajaxにおけるメモリリークの注意点も参照
- Web Accessibility Toolbar 日本語版
  - HTMLやCSSの文法チェックなどができる
  - IE5.5以上で動作
- IEerBug
  - FireBugの関数を使用できるJavaScriptライブラリ
  - デバッグ機能はなし
Opera
- Opera developer tools
  - Opera純正の開発ツール。解説記事。
  - DOM Console, CSS Editor, DOM Snapshotがある
- Web Developer Toolbar
  - ユーザエージェントの変更など多機能なツールバー
  - 解説記事
- IEerBug
  - FireBugの関数を使用できるJavaScriptライブラリ
  - デバッグ機能はなし
Safari
- Drosera
  - SafariのJavaScriptデバッグツール
  - こちらに詳しい解説あり

・テスト支援ツール ↑TOP

Selenium
- Webアプリのテスト自動化ツール
- こちらも参照
TIBCO General Interface Test Automation Kit
- Webアプリテスト自動化ツール
- こちらも参照
JsLex
- Ajaxパフォーマンスプロファイリングツール
- スクリーンショット
Jash: JavaScript Shell
- FireBug並みの高機能JavaScriptシェル
- こちらも参照
JavaScript Shell
- JavaScriptのコンソール画面で、JavaScriptを実行できるツール
- 複数行のJavaScriptにも対応(kmdsbngさん情報提供)
debug.js
- デバッグウィンドウにメッセージを出力し、最後にまとめて表示するツール
JsUnit
- JavaScriptのxUnitツール
- 解説記事１、解説記事２
- サイトは、なぜかIE6,IE7で表示されない
JSMock
- JavaScriptでMockオブジェクトを扱えるライブラリ
JSCoverage
- JavaScriptコードカバレッジライブラリ
- こちらも参照

・デザイン支援/CSSツール ↑TOP

Install multiple versions of IE on your PC
- 一台のPCにIE3～IE6までをインストールするツール
- IE7も追加インストール可能
Multi-Safari
- 複数バージョンのSafariをMac OS Xにインストールするツール
Free CSS Toolbox
- CSSのIDEとして使える
- 色分け・整形・圧縮・文法チェックなど
CSS Tab Designer
- CSSのメニューを簡単に作ってくれるツール
Sky CSS Tool
- オンラインCSSエディタ
<real>Editor
- オンラインCSSエディタ
- 設定内容を画面で確認しながら編集可能
CSSVista
- IEとFireFoxの表示画面を見ながらCSS編集ができるツール
Clean CSS
- オンラインCSS圧縮ツール
CSS Optimizer
- オンラインCSS圧縮ツール
原色大辞典
- 色のサンプル、名前、１６進表記が知りたいときは、まずここへ

・JavaScript便利ツール ↑TOP

圧縮・難読化
- JS Builder
  - JavaScriptの圧縮・難読化ツール
  - .NET Framework2.0が必要
  - 複数ファイル圧縮やヘッダ挿入などもできる
  - Google Codeからもダウンロード可能
- YUI Compressor
  - 安全で圧縮率の高いJavaScript圧縮ツール
  - こちらも参照
- 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の圧縮・難読化ができるサイト
- Compress Your JavaScript
  - オンラインでJavaScriptの圧縮・難読化ができるサイト
- jsjuicer
  - コマンドラインからのJavaScriptの圧縮・難読化ツール
  - C++で記述されているため高速
- 参考
  - JavaScriptを圧縮・難読化する時の注意点(アシアルブログ)
コード整形
- 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の文法チェック、圧縮・難読化、コード整形ができる
- compressor
  - クールなJavaScriptとCSSの圧縮サービス
  - 「powerful compress」は誤動作しすぎとはてブコメントあり
- DOMTool
  - HTMLからDOM生成用のJavaScriptを自動作成
- Javascript keyCode checker tool
  - ブラウザのキーコードを簡単に調べるサイト
- Key and Character Codes vs. Event Types
  - イベントタイプ毎のキーコードを簡単に調べるサイト
- Unicode の文字列をエスケープする JavaScript(いやなブログ)
  - UnicodeをUTF-8/UTF-16/数値文字参照にエスケープ
- eXeve
  - WebAPI作成時の便利ツール，紹介記事

・画像イメージ ↑TOP

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

・リファレンス類 ↑TOP

JavaScript
- 一撃必殺JavaScript日本語リファレンス
  - JavaScriptを調べたいときはまずここへ
- JavaScript逆引きクイックリファレンス
  - 使用用途からJavaScriptを調査できる
CSS
- CSS スタイルシートリファレンス
  - 手早く調べられて大変便利
- Safari CSS Reference
JavaScript/DOM
- JavaScript DOM リファレンス
  - 日本語の使いやすいリファレンス。貴重。
- JS/DOM Object Quick Reference
  - 印刷して使用するクイックリファレンス。便利。
- DOM(mozilla developer center)
  - MozillaのDOMリファレンス
- HTML and DHTML Reference(MSDN Library)
  - IE用リファレンス
- JavaScript DOM
  - JavaDoc風リファレンス
- Object Reference
  - DOM,CSS,HTML,XMLなど豊富なリファレンス
- getAPI.com
  - HTML,CSS,JavaScript,DOM等の言語・APIリファレンス
- CSS Properties to JavaScript Reference
  - CSSのプロパティとJavaScriptのスタイルプロパティの対応表
- The XMLHttpRequest Object
  - W3CのXMLHttpRequestリファレンス
- The XMLHttpRequest Object(Dynamic HTML and XML)
  - XMLHttpRequestのリファレンス
- JavaScript Reference
  - ちょっと引きづらい？
- DOM (Document Object Model) Reference(JavaScript Kit)
  - まあ、それなりに。
その他
- Web browser standards support
  - ブラウザのWeb標準対応状況が分かるサイト

・チートシート ↑TOP

JavaScript Cheat Sheet - Cheat Sheets(ILoveJackDaniels.com)
- JavaScriptのチートシート
XSS (Cross Site Scripting) Cheat Sheet
- XSSのチートシート
SQL Injection Cheat Sheet
- Ajaxとは直接関係ないけど、まあ参考まで。
CHEATSHEETS & REFERENCE
- チートシートまとめサイト。
Cheat Sheet Round-Up Ajax, CSS, LaTeX, Ruby…(Smashing Magazine)
- チートシートまとめサイト。

・JavaScript/Ajaxお勉強サイト ↑TOP

Ajaxを勉強しよう
- Ajaxの基本はここでお勉強
Prototype.js を使った JavaScript OOP 講座 #01(IT戦記)
Prototype.js を使った JavaScript OOP 講座 #02(IT戦記)
Prototype.js を使った JavaScript OOP 講座 #03(IT戦記)
[javascript] 社内勉強会資料(IT戦記)
JavaScript の this について(IT戦記)
JavaScriptによるオブジェクト指向プログラミング
JavaScript を学ぶ上で読むべきウェブサイト(Kazuho@Cybozu)
そろそろきっちりJavaScript(マイコミジャーナル)
連載：Ajax時代のJavaScriptプログラミング再入門(＠IT)
javascriptを初めて学ぶ人についてのおさらい。その１(ハタさんのブログ)
javascriptを初めて学ぶ人についてのおさらい。その２(ハタさんのブログ)
javascriptを理解するためのたった2つの大切なこと:改
Javascriptによる大規模開発の覚え書き(ハタさんのブログ)
Javascriptによる大規模開発の覚え書き。高速化編(ハタさんのブログ)
おっきなJavaScript開発の覚え書き(アシアルブログ)
Shibuya.js Technical Talk #1 を終えて。(IT戦記)

JavaScript高速化TIpsの資料がダウンロードできます。

第30回 JavaScriptの動作を軽くするための工夫：ITpro
文書ツリーを多数回変更するときはDocument Fragmentを経由する (agenda)

・その他お役立ちサイト ↑TOP

Ajax開発支援ツール紹介サイト
- Tools - Ajax Patterns
  - すごい情報量。ここで紹介していないツールもたくさんあり
- JavaScript難読化ツールまとめ
JavaScript

JavaScriptist
- JavaScriptの総合情報サイト
- リファレンスもあり大変便利
EfficientJavaScript - Dev.Opera - 効率的な JavaScript
- Opera.Devの"Efficient JavaScript"の日本語訳。
実践JavaScriptリファクタリング(最速インターフェース研究会)

JavaScriptのリファクタリングを具体例をあげて解説

Java Script Coding Standard
- あまり量はないが、貴重なJavaScriptコーディング規約
DOM オブジェクトとメモリリーク(Days on the Moon)
- IEのメモリリークのお話
Understanding and Solving Internet Explorer Leak Patterns(MSDN)
- MicrosoftによるIEのメモリーリークの解説
JavaScriptにおけるURLエンコードの処理
JavaScript: オブジェクト指向の手法によって高度な Web アプリケーションを作成する(MSDN Magazine)
サロゲートペアをJavaScriptで検出する方法(Web系雑記)
innerHTML と outerHTML の使用可否のまとめ :: Drk7jp

JSON/JSONP
REST
- REST入門(yohei-y:weblog)
Cookie
- とことんCookie技術解説(日経パソコンオンライン)
- 第1回まずは「クッキー」を理解すべし：ITpro
CSS
HTML

初めてのホームページ講座
HTML/XHTML Character Entities
- HTMLの特殊文字の文字実体参照一覧
HTML 設計原則

HTML5の設計原則

Studying HTTP

HTTPの仕様を解説

XML
- XML(TECHSCORE)
  - XMLの解説記事
- たのしいXML
  - XML/XHTMLの入門サイト
ブラウザ
- userAgent一覧ユーザーエージェント一覧
  - ブラウザのユーザエージェントまとめ
- ユーザエージェントからブラウザの種類やバージョンを判断する(CodeZine)
  - ブラウザがサポートしているJavaScriptのバージョンが分かって便利
- Web Browser Standards Support
  - ブラウザがWeb標準に準拠しているか調べられるサイト
- Javascript - Event compatibility tables
  - ブラウザのイベントサポート状況を調べられるサイト
- FireFoxの歴史
  - メジャーなブラウザの歴史が１ページで分かるPDFあり
- Firefox まとめサイト
- Safari JavaScript Programming Topics
  - AppleのSafari情報
- Browser Archive(evolt.org)
  - ブラウザのアーカイブサイト
- FireFoxアーカイブ
- Microsoft Internet Explorer 7 (IE7) 日本語正式版不具合情報 FAQ
Webサービス
- Mashupedia
  - Web API情報サイト
- Web Service API (REST) [for Ajax]
  - APIを公開しているWebサービスへのリンク集
- 日本で公開されているAPI一覧（下書き）(zuzara)
Webサイト
- Webアーキテクチャ設計術(ITpro)
  - Webの仕組みに関する詳細な解説記事の目次
Webサイトデザイン
- Getting Real by 37signals
  - 37signalsによるGetting Real 日本語訳らしい
- UIデザインパターン(ソシオメディア)
  - 注目のUI情報サイト
Webサイト高速化
- Rules for High Performance Web Pages
- Optimize HTML size to the MAX
- Yahoo! Developer Network blog: performance Archives
  - 日本語訳
- あなたのページを最速にする14の掟(404 Blog Not Found)
- JavaScriptを圧縮してみた。(DesignWalker)
- 「Webページの表示速度を向上させる最新研究結果」米Yahoo!がプレゼン資料公開：CodeZine
Webセキュリティ

安全なウェブサイトの作り方改訂第2版(IPA)
- Webサイトのセキュリティの基本
セキュア・プログラミング講座(IPA ISEC)
- 実装レベルのWebセキュリティ講座
セキュア・プログラミング講座：Webアプリケーション編(IPA)
セキュアWebプログラミング入門(ITpro)
ウェブアプリケーションセキュリティとバッドノウハウ、そしてグッドラッパーの関係
Yahoo! Developer Network セキュリティベストプラクティス
XSS Challenges (by yamagata21) - Stage #1

XSS学習サイト？

Webセキュリティツール
- mod_evasive－ApacheのDOS攻撃対策ツール
- Webアプリケーション脆弱性チェックツール:Chorizo(phpspot開発日誌)
- SQL Injectionツール(T.Teradaの日記)
- SQLインジェクションをスキャンしてくれるツール
- リクエストをいじれば脆弱性の仕組みが見えるのだ！(＠IT)
  - HTTPリクエスト解析ツールの解説
- IPひろば：環境変数チェック
Web負荷ツール
- HTTP用負荷ツールいろいろ(phpspot開発日誌)
- 負荷をかけるツール - HTTP編((ひ)メモ )
Webサイトユーザビリティ
Webアクセス解析
- アクセス解析ツール＆サービス13種類徹底比較！史上最強の機能比較表 (Web担当者Forum)
モバイルサイト
- 携帯サイト構築メモ