HTML、JavaScript、そして Ajax の開発とデバッグに必須のツール

JavaScript ツールボックスにコーディングとデバッグ用のオープンソース・ツールを備える

最高のオープンソース・ツールを使って Web ページやスクリプト、スタイルに関する作業を行い、新しいサイトやページの開発を容易にしましょう。また、HTML マークアップや CSS、そして JavaScript の調査や変更を即座に行い、DOM や、クライアント/サーバー間の通信を調べ、ブックマークレットによって開発がどれほど安全で容易になるかを学びましょう。

Michael Baierl, Corporate Webmaster, IBM

Michael Baierl (http://mbaierl.com/) は IBM の Corporate Webmaster として、100 ヵ国のポータルといくつかのバックエンド・アプリケーションを維持管理しています。彼の中心業務は ibm.com ドメイン全体にわたる JavaScript の統合、標準化、そして品質維持です。以前は IBM Data Studio Administration Console の開発チームで JavaScript の使い方に関するコンサルティングを行っていました。彼は Zend 認定のエンジニアであり、あらゆる種類の生産性向上ツールや大規模アプリケーションに PHP を使用しています。



2008年 3月 11日

JavaScript アプリケーションは、どんどん複雑になってきており、開発者がサーバー・サイドやクライアント・サイドのコードをデバッグするためには、広範な種類のツールやアプリケーションを知っている必要があります。また開発者はサーバー/クライアント間の通信を調べるためのツールを必要としており、そうしたツールは今日の Web サイトを作成するために一般的に使われるさまざまなマークアップやスクリプト、CSS、その他の技術全般を調査できる必要があります。

この記事はクライアント・サイドの開発プロセスに焦点を絞り、開発者にとって便利な、Firefox 用のいくつかのツールを紹介します。これらのツールを利用すると、ページの調査やデータの変更、さらには JavaScript のデバッグでさえ、すべて即座に行うことができます。またこれらのツールを利用することで、JavaScript ソース・コードの中に alert() 文が必要なくなり、最先端のデバッグと調査、そして変更を行えるようになります。

この記事を読み終えると、ここで説明する Firefox の拡張機能やツールを 1 人で使いこなせるようになり、またこの記事で学んだ知識を皆さん独自のプロジェクトに応用できるようになるはずです。

内容

この記事ではツールを利用して、さまざまなことを行います。あるページの HTML コードの調査と部分的な変更を即座に行い、高度な JavaScript デバッグを行い、DOM を変更し、クライアント/サーバー間の通信を調べ、そしてライブ Web サイトに開発コードを注入して新しい機能のテストをします。

この記事を読み進めていく上では、以下のツールを利用できる必要があります。

  • Firefox 用 Web Developer ツールバー : HTML コードの調査と部分的な変更を即座に行い、またJavaScript をデバッグすることができます。
  • Firebug : JavaScript と CSS のデバッグ、DOM の変更、またクライアント/サーバー間の通信を調べることができます。
  • Greasemonkey と、jQuery を含むブックマークレット: ライブ Web サイトに開発コードを注入し、新しい機能をテストすることができます。

これを見るとわかるように、この記事で説明する範囲は多岐にわたるため、これらのツールでできることを表面的に説明することしかできません。とはいえ、これらの各ツールの使い方や、これらのツールが何に役立つのかの感覚はつかめるはずです。残念ながらこの記事ではクライアント/サーバー間の通信については説明しませんが、今後の記事では取り上げるかもしれません。

始める前に

ここで説明するツールはすべて無料で入手することができ、また上記のリンクから、あるいはこの記事の最後にある「参考文献」セクションのリンクからダウンロードすることができます。この記事で取り上げる例を実際に操作しながら読み進みたい場合には、今すぐこれらのツールをダウンロードする必要があります。変更を有効にするためにブラウザーを再起動することを忘れないでください。

ここに挙げる多くの例では、IBM Support のサイト (http://www.ibm.com/support) や Google の結果ページを使用します。そのため、この 2 つの一方または両方を新しいブラウザー・ウィンドウで開いておくとよいかもしれません。

クライアント・サイドのコードを調査する

ここで、ちょっと想像してみてください。皆さんが新しいアプリケーションを紹介され、そのアプリケーションについて (そのアプリケーションの動作や、どのように作成されたか、などを) もっと知りたいとします。知りたい理由は、そのアプリケーションのデバッグや拡張が必要なためかもしれず、あるいはそのアプリケーションの動作を知って、それを皆さん自身のプロジェクトに生かしたいためだけかもしれません。

「Firefox 用 Web Developer ツールバー」(「参考文献」を参照) は Firefox のための優れた拡張機能であり、Web サイトや Web アプリケーションの調査や変更を素早く行うことができます。Firefox 用 Web Developer ツールバーは個別のツールバーとして表示することもでき、あるいはコンテキスト・メニューの中に表示することもできます。例えば http://www.ibm.com/support/ というサイトを見ている時に、そのサイト全体でどのクラスと ID が使われているかをすぐに知りたくなったとします。単純に、情報 > id属性とクラス属性を表示する、の順に選択すると、すべての ID とクラスをインラインで、その文書の中で直接確認することができます。こうした例を追っていくと、そこから例えば IBM サイトの左側のナビゲーションの構造がどうなっているのかをすぐに知ることができます。

図 1. IBM サイトの左側のナビゲーションの ID とクラスの詳細
figure1

他にも、概要を示すための素晴らしい機能があります。例えば、すべての table (ibm.com には 1 つも table がありません) や、すべてのブロック・レベル要素の概要を調べることもできます。これによって画面上での div 要素の配置を容易に理解することができます。これは新しいサイトを作成する際に強力なツールです。

しかし、まだ他にも、特にテスト用の機能があります。Firefox 用 Web Developer ツールバーでは JavaScript やクッキー、スタイルを簡単に無効にできるため、それらを無効にした場合にも Web サイトが相変わらず機能するか、あるいはスクリーン・リーダー・アプリケーションや検索エンジンにとってどう見えるかをチェックすることができます。画像の表示を無効にし、すべての alt タグを表示することで、ユーザビリティーの問題をすぐに明らかにすることができ、あるいはページ上で使用されている画像に関する大量の情報を得ることができます。

もう 1 つの素晴らしい機能、特にアプリケーションのセキュリティーをテストするための機能が、このツールバーの Forms セクションの中にあります。この機能を利用すると、フォームを調査できるだけではなく、JavaScript による検証が行われないようにして、フォーム・フィールドを書き込み可能にしたり、テキスト・フィールドの最大長を削除したり、あるいはテキスト入力フィールドへの select ドロップダウンを変更したりすることもできます。これによって、データが変更された場合にもアプリケーションが変わらず機能するかのテストを非常に簡単に行うことができ、このテストのためにソース・コードを変更する必要がありません。フォーム > form要素のmethod属性値を変更する > GETをPOSTに変換する、の順に選択すると、ibm.com の先頭にある検索フォームの動作を変更することができます。図 2 はこのステップを示しています。

図 2. 検索フォームの詳細
figure2

もしこの状態で検索語を入力し、Search (検索) ボタンを押すと、結果のリストが得られるのではなく、ヘルプ・ページにリダイレクトされます。これは ibm.com の検索エンジンとして望ましい動作です。

Web Developer ツールバーが持つ、その他の優れた 2 つの機能として、非常に便利なインターフェースを使ってクッキー情報の表示や編集ができる機能 (Cookie > Cookie情報を表示する) と、そのページで使われているすべての JavaScript を表示できる機能 (情報 > JavaScriptの情報を表示する) があります。この後者の機能にはインライン・スクリプトと動的にロードされるスクリプトの両方が含まれるため、検索を行うと、その両方のスクリプトの中での検索結果が表示されます。

この先を読み進む前に、少し時間をとって Web Development ツールバーが提供するすべての機能を調べてみてください。そうすると、今後はこのツールなしに作業することが困難だと思うようになるはずです。Internet Explorer Developer Toolbar (「参考文献」を参照) は、これと似た機能を Internet Explorer に提供します。

DOM の調査をする

静的なページの調査はできたので、今度はもう少し動的なものを、JavaScript 開発者向けの最も強力な拡張機能の 1 つを使って調べてみましょう。まだ Firebug 拡張機能 (「参考文献」を参照) をインストールしていなければ、ここでインストールし、Firefox を再起動して Firebug 拡張機能をロードします。これで、ブラウザーの右下の隅にある小さなチェックマークをクリックすると有効になる、別のパネルが用意されました。図 3 は Firebug のコンソールを示しています。

図 3. Firebug のコンソール
figure3

クリックして大きなイメージを見る

図 3. Firebug のコンソール

figure3

このコンソールは大量のメモリーを必要とするため、特定のサイトで、必要なときにのみ有効にすることが賢明です。またこのコンソールは、特定のホストに対してのみ有効にすることもできるため、コード開発に使用すること、また Firebug の力を必要とすることがわかっている特定のテスト・マシンでのみデバッグを行いたい場合に便利です。

Firebug を有効にすると、Firebug のさまざまな機能が最上部に一覧表示されますが、ここでは HTML オプションに焦点を絞ります。このオプションによって、そのページの HTML のソース・コードが読みやすいフォーマットで表示されます。さまざまなセクションを縮小したり展開したりすることができ、また強力な Inspect (調査) ボタンを使って DOM を閲覧することができます。注意しなければならない重要な点は、表示される DOM は、すべての動的変更が適用された、そのサイトの現在の DOM であるということです。そのため、あるスクリプトによって 1 つの要素が削除されると、その要素は Firebug のビューからも削除されます。

調査機能を使って IBM Support ページ (http://www.ibm.com/support/) の Choose support type ドロップダウンを選択します。その要素が選択されると、DOM ビューが更新され、選択された要素の HTML コードが表示されます。さまざまな要素をクリックして編集すると、それらの変更が即座に DOM と描画されるビューに反映されることがわかります。早速 onchange イベント・ハンドラーに alert() 文を追加してみます (図 4)。

図 4. Firebug を使ったカスタム・コードの追加
figure4

Enter を押して変更を保存し、またドロップダウンの中にある他のエントリーを選択します。すると、メッセージが表示されます。この変更が永久に保存されるわけではないことに注意してください。そのページがリロードされた瞬間、その変更は消えてしまいます。この機能は、変更を素早くテストしたい場合や、あるいは DOM を変更してスクリプトの機能をテストしたい場合に特に便利です。(これについては次のセクションでさらに説明します。)

選択された要素に適用されるすべての CSS スタイルが Firebug パネルの右側に青で表示されていることに気付いた人がいるかもしれません。これは、スクリプトによる動的な変更をする際や CSS のデバッグの際に、例えばスペーシングの問題を見つけるのに、特に便利です。Layout タブを使うと要素のスペーシングとボーダーの概要を調べることができ、また DOM タブでは選択された要素の DOM プロパティーをすべて一覧表示してくれるため、JavaScript を開発する際に役立ちます。

言うまでもなく、Firebug は CSS スタイルも DOM プロパティーも変更することができ、またその変更は即座に適用されます。図 5 はFirebug の CSS 調査コンソールを示しています。

図 5. Firebug の CSS 調査コンソール
figure4

JavaScript をデバッグする

長い間、JavaScript には正当な評価がなされていませんでした。多くの人は JavaScript を単なる「おもちゃ」のプログラミング言語と見なし、また IDE やデバッガーがほとんどありませんでした。これまでにも Venkman Debugger や IE Script Debugger (「参考文献」を参照) など、いくつかのソリューションがありましたが、それらは使いにくく、あまり機能が多くありませんでした。大部分の開発者はコードの中で alert() 文を使い続け、また開発作業では多くの場合、Web サイトをリロードし、正しい関数が呼び出されるまでひたすらクリックし続ける必要がありました。

Firebug には JavaScript デバッガーが統合されていて、ブレークポイントの設定や、変数の調査、そしてその場でのコマンドの実行ができるようになっており、こうしたあらゆる変更を行うことができます。もう alert() だけに頼る必要はないのです。

この記事の最初のセクションでは、Web Developer ツールバーの、情報 > JavaScriptの情報を表示する、機能を使うことで、IBM Support の Web サイトのドロップダウンが IBMSupportDropdowns.selectChange(this) 関数を呼び出していること、そしてこの関数が「ddnav.js」というスクリプトの中にあることがわかりました。今度は Firebug のスクリプト・タブを選択し、ドロップダウンから ddnav.js スクリプトを選択し、IBMSupportDropDowns.selectChange 関数まで進みます。そこで行番号をクリックしてブレークポイントを設定します。図 6 はこのステップを示しています。

図 6. Firebug でのブレークポイントの設定
figure6

クリックして大きなイメージを見る

図 6. Firebug でのブレークポイントの設定

figure6

今度はドロップダウンの中の任意の要素を選択し、JavaScript の実行がどのように停止されるかを調べます。メニュー・バーの任意のボタンを使うことで、あるいはショートカット F8 (再開)、F10 (ステップ オーバー)、F11 (ステップ イン) を使うことで、コードを 1 行ずつ実行することができます。

Firebug は左側にコードを表示し、また右側には現在のスコープに対して定義されているすべての変数とオブジェクトを表示します。DOM 要素をクリックすると HTML DOM ビューが直接表示され、そしてこれまでと同じように、データをその場で変更することができます。ソース・コードの変数をマウス・ホバーすると、その変数の内容が表示されます。監視したい新しい要素群を追加するためには、それらの要素を New watch expression (新しい監視点) に入力して Enter を押します。

コンソール・タブを選択すると、実行が停止された場所での関数のコンテキストでコードが実行されます。これによってその場で変数の内容を変更したり、関数を呼び出したりすることができます。コンソール内、あるいは他のコード部分で発生したエラーも、コンソールに表示されます。また、エラーを直接選択すると、そのエラーが発生したコードの場所を明確に示してくれます。

Firebug を使うことで、はるかに自然な方法で JavaScript の作業ができるようになること、そして Firebug には大きな柔軟性があることは疑問の余地がありません。いったん Firebug に慣れてしまうと、それまで Firebug を使わずにどうやって JavaScript を作成できたのか不思議に思うようになるでしょう。

クライアント/サーバー間の通信を調べる

Web 2.0 アプリケーションでは、バックグラウンドで非同期に通信が行われ、また送信されるデータは JSON を利用した JavaScript から XML まで、さまざまです。こうしたデータは JavaScript コードによって受信されるため、フロントエンドではバックエンドから送信されたデバッグ・データを直接見ることがありません。従って、そうした通信は直接調べる必要があります。

Firebug の Net タブを選択します。バックグラウンドで、Firebug は既にすべてのページ・リクエストを記録してくれています。

図 7. Firebug を使ったネットワーク・トラフィックの調査
figure7

メニュー・バーではリクエスト・タイプによってフィルタリングを行うことができ、またリクエストの前にある小さな三角をクリックすると、リクエスト・ヘッダーとレスポンス・ヘッダー、そしてレスポンス全体を見ることができます。またタイミング・バーを見ると、アプリケーションにボトルネックがないかどうか、大まかな様子を知ることができます。

クライアント/サーバー間の通信を調べるための方法は他にも多数あり、例えば Fiddler2 ツールや Wireshark、Microsoft Network Monitor、その他多くのツールを使うことができます。この記事ではこれらのツールについては取り上げませんが、今後の記事で取りあげるかもしれません。

ライブ・サイトをテストする

既存の、ライブ・サイトにスクリプトを容易に適用できたら素晴らしいと思いませんか。それができると、アプリケーションのソース・コードにアクセスできない場合や、誰か他の人がサイトを所有している場合、あるいは他のサイトに悪影響を与えずに新しい機能をテストしたい場合に便利です。私達の大部分にとって、Google の結果ページにはこの 3 つがすべて当てはまります。そして次の例では、この Google の結果ページを取り上げます。別のブラウザー・ウィンドウで www.google.com を使って何かを検索し、その結果を少し改善するためはどうすればよいかを調べてみます。

DOM を変更するための非常に便利方法の 1 つに、Firebug のコンソールと jQuerify のブックマークレット (「参考文献」を参照) を組み合わせて使う方法があります。jQuery は非常に小さいながら強力なライブラリーであり、CSS3 構文を使って DOM にアクセスしたり DOM を変更したりすることができます。jQuery に関する詳細は、developerWorks の記事「jQuery を使って Ajax 開発を単純化する」に解説されています (「参考文献」を参照)。

ブックマークレットを利用すると既存のページに jQuery を注入できるため、Firebug のコンソールの中で jQuery の強力さを容易に利用することができます。今度はこれを Google の結果ページに対して行ってみましょう。その結果ページに jQuery を注入してから Firebug のコンソールを開き、以下のコードを入力して実行します (たった 1 行のコードです)。

$('#sd').append(' > Search at <a href="http://search.yahoo.com/search?p=' 
+ encodeURI($('input[@name="q"]').attr('value')) + '">Yahoo</a>');

すると図 8 のような結果が表示されるはずです。

図 8. jQuery を使って機能強化した Google の結果ページ
figure8

これによって検索バーに新しいリンクが追加され、このリンクを利用するとまったく同じ検索を Yahoo に対して実行することができます。残念ながら、そのページに対して毎回 jQuery を実行する必要があり、またコードを手動で実行する必要があるため、あまり便利ではありません。しかしページを変更できるコード行を簡単に作成することができ、しかもコードが完全に動作するまで、さまざまなバリエーションのコードをテストすることができます。

コードが完全に動作するようになれば、Greasemonkey 拡張機能を使うことで、Google を使うたびにこの短いスクリプトを恒久的に適用することができます。Greasemonkey は Web サイトまたは Web ページがロードされるたびに、「userscripts」と呼ばれるものをそのサイトまたはページに適用します。新しい userscripts を追加するためには、ステータス・バーの Greasemonkey アイコンを右クリックし、New User Script を選択します。名前と名前空間、そして説明を入力します。includes リストは Google の検索結果のすべてに一致するように変更する必要があります。図 9 は新しい Greasmonkey スクリプトを追加するためのステップを示しています。

図 9. 新しい Greasmonkey スクリプトの追加
figure9

今度は任意のテキスト・エディターを開き、以下のリストに示す userscripts を入力します。

リスト 1. Google を拡張するための Greasmonkey スクリプト
// ==UserScript==
// @name      	Yahoo Search on Google
// @namespace 	google_yahoo
// @description Adds a Yahoo link to the Google results page
// @include 	http://www.google.com/search
// ==/UserScript==
var jq = document.createElement('script');
jq.src = 'http://code.jquery.com/jquery-latest.js';
jq.type = 'text/javascript';
document.getElementsByTagName('head') [0].appendChild(jq);

// Wait for jQuery to be loaded
(function wait_jq()
{
	if(typeof unsafeWindow.jQuery == 'undefined')
	{
		window.setTimeout(wait_jq,100);
		return;
	}
	$ = unsafeWindow.jQuery;
	$('#sd').append(
		' &gt; Search at <a href="http://search.yahoo.com/search?p=' 
		+ encodeURI($('input[@name="q"]').attr('value')) 
		+ '">Yahoo</a>'
	);
})();

このスクリプトを保存すると、そのリンクが Google の結果ページのすべてに自動的に表示されるようになります。あらゆる種類の変更を行える userscripts が既にとてもたくさん存在しています。userscripts.org を訪れると、素晴らしい userscripts を数多く見つけることができます。

同じような拡張機能が Internet Explorer 用にも存在しています。それは IE7Pro と呼ばれ、名前からもわかるように Internet Explorer のバージョン 7 でしか動作しません。しかし IE7Pro は、強化されたタブやマウス・ジェスチャー、広告ブロッカー、そして「Greasemonkey 風のユーザー・スクリプト」など、Internet Explorer に欠けている多くの機能を提供しています。

この 2 つの拡張機能を利用すると、任意の Web サイトに簡単なコード・スニペットを適用することができます。これはソース・コードにアクセスできないサイトに必要な機能を追加する際に便利ですが、ソース・コードはいじらずに自分自身のサイトで新しい機能をすぐにテストしたい (そして表示したい) 場合にも便利です。もちろん、JavaScript でないと、こうしたことはできません。ライブ・サイトにコンテンツを注入するための究極的な方法はプロキシーを使うことですが、それもこの記事の内容からは外れており、しかもずっと高度な話題でもあります。

まとめ

この記事では、Web ページや Web スクリプト、そして Web アプリケーションを扱う際のさまざまな方法について説明しました。Web Developer Toolbar を使ってサイトを調査する方法と、Firebug の拡張機能を使って必要に応じてコンテンツを変更する方法を学びました。またブレークポイントや最新のオブジェクト調査を使って JavaScript を容易にデバッグする方法や、さらには皆さん自身のエクスペリエンスを改善するためにコンテンツを恒久的に変更する方法まで説明しました。

言うまでもないことですが、これらのツールのそれぞれが、1 本の記事をかけるぐらい、さらにはシリーズ記事で説明が必要なほどの内容を含んでいます。しかし、そうした高度な機能や能力を利用する前に、まずこれらのツールを使い始め、慣れる必要があります。この記事を読んでそうした気になったようであれば幸いです。

参考文献

学ぶために

  • Web Developer for Firefox 拡張機能は Web 開発者用のさまざまなツールを持つツールバーをFirefox に追加します。この拡張機能によって、マークアップや JavaScript の調査、さらにはそれらの変更まで即座に行うことができます。
  • Firebug は JavaScript 開発者にとって最も強力な Firefox の拡張機能の 1 つです。Firebug を利用すると、任意の Web ページで CSS や HTML、JavaScript をライブで編集し、デバッグし、モニターすることができます。
  • Internet Explorer Developer Toolbar を利用すると Internet Explorer 7 の中で DOM を調査することができます。
  • Firefox 用の Greasemonkey for Firefox 拡張機能は、ページのロード後、そのページにカスタムの JavaScript を適用します。こうしたスクリプトのリポジトリーが userscripts.org に用意されています。
  • IE7Pro は便利な機能で Internet Explorer 7 の機能を拡張し、またページがロードされた後にカスタムのスクリプトを実行させることもできます。IE7Pro のユーザー・スクリプトのための ieScripts スクリプトのライブラリーもあります。
  • jQuery は簡単な JavaScript ライブラリーであり、CSS3 セレクターを使って DOM へのアクセスや変更を行うことができます。developerWorks の「jQuery を使って Ajax 開発を単純化する」(Jesse Skinner 著、2007年4月) は jQuery と jQuery の拡張機能を紹介した素晴らしい記事です。 jQuery のブックマークレットを使うと、すべてのページに jQuery 機能を持たせることができます。
  • 真の Web 2.0: ブックマークレットを使用して手軽に作成する Web アプリケーション」(Uche Ogbuji 著、2007年8月) はブックマークレットを紹介しています。
  • developerWorks の記事「Considering Ajax 」(Chris Laffra 著、2006年5月) は Ajax とさまざまな技術を紹介しています。
  • Firefox 用の Venkman JavaScript DebuggerGecko ベースのブラウザーに強力な JavaScript デバッグ環境を提供しようとしています。
  • Microsoft Script Debugger を利用すると Internet Explorer の中でスクリプトをデバッグすることができ、また MSDN の IEBlog ポスト Script Debugging in Internet Explorer には Internet Explorer でスクリプトのデバッグを有効にする方法の概要が説明されています。
  • Windows 環境での通信を調べる必要がある場合には、Fiddler2 Tool がローカル・プロキシーとして動作し、これによってすべての通信の調査と変更が行えるようになります。また Wireshark はワイヤー上のすべてのトラフィックを調査し、一方 Microsoft Network Monitor はネットワーク・インターフェース上のすべてのトラフィックを調査します。
  • developerWorks の Web development ゾーンにはスキルを磨くための資料が豊富に用意されています。

製品や技術を入手するために

  • IBM 製品の試用版をダウンロードし、DB2 や Lotus、Rational、Tivoli、WebSphere などが提供するアプリケーション開発ツールやミドルウェア製品をお試しください。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=300016
ArticleTitle=HTML、JavaScript、そして Ajax の開発とデバッグに必須のツール
publish-date=03112008