JavaScriptをFirebugでデバッグする方法。

今回は作成した Ajax プログラムを Firebug でデバッグしてみます。

プログラムの誤りをバグ(bug 小さな虫)といい、バグを探して取り除く作業をデバッグといいます。またデバッグを支援するソフトをデバッガといいます。

Firebug は高機能な JavaScript デバッガを備えているので、プログラムを一時停止したり、1行ずつ進めたり、変数の値を確認することができます。

プログラムは人間が作るものですから、必ずバグが入り込みます。作ったプログラムが1回目で動くことはほとんどありません。プログラムが上手く動かないときは焦らずに、デバッガを使い原因を見つけて、一つずつ解決していきましょう。

今回は動作確認済みのプログラムを使いますのでエラーは出ません。とりあえず Firebug の使い方に慣れることに専念してください。

・Firefox をインストールしていない方は、「Step3・Firefoxをインストールする」をご覧ください。

・Firebug をインストールしていない方は、「Step4・Firebugをインストールする」をご覧ください。


【1】Firefox を起動します。

ajax-11.gif


【2】作成済みの「test.html」を開きます。

C:\ajax\sample001\test.html

ajax-59.gif

*Firefox での開き方は、前回の「Step3・Firefoxで動作確認する」を参考にしてください。


【3】Firebug を起動します。使いやすい方法でかまいません。

・キーボードの「F12キー」を押すと、Firebug がブラウザの下部に表示されます。

ajax-68.gif

・「Ctrlキー + F12キー」を押すと、Firebug がブラウザとは別ウィンドウで開きます。

ajax-71.gif


【4】Firebug の文字の大きさは、メニューから「表示 → 文字サイズ」で変更できます。

ajax-72.gif


【5】「test.js」が開いていることを確認してください。

ajax-88.gif

Web アプリケーションは多くのファイルで構成されます。JavaScriptも複数使うことが普通ですので、ここで目的のファイルを選択します。


これで準備が整いました。あとはプログラムが動く操作をします。例えばページを再読み込みしたり、クリックしたりといったイベントを発生させます。どのようなイベントが必要かは書いたプログラムによって変わります。

test.jsはページが読み込まれた時に、関数を呼び出すようになっています。
onload = init;


【6】Firefox のツールバーにある「再読み込み」ボタンをクリックしてみます。

ajax-69.gif

しかし特に変わったことは起こりません。Firebug を起動するだけでは、デバックしたりモニタすることができないからです。


【7】JavaScriptプログラムの行番号5をクリックします。

ajax-73.gif


【8】赤い点が表示され、ブレークポイントが設定されました。

ajax-74.gif

ブレークポイントとは、プログラムの動作を確認するために一時停止させる場所のことです。

*赤い点をクリックすると、ブレークポイントを解除できます。


【9】もう一度 Firefox のツールバーにある「再読み込み」ボタンをクリックします。

ajax-69.gif


【10】今度は行番号5のブレークポイントでプログラムが一時停止しました。

ajax-75.gif

*行番号5が黄色く反転していますが、この行はまだ実行されていない点に注意してください。


【11】監視に表示されている this の左にある「+」をクリックします。

ajax-76.gif


【12】監視に一覧が表示されました。変数 result はまだ undefined です。

ajax-77.gif

*undefined 不明確な


【13】Firebug の「ステップイン」ボタンをクリックします。

ajax-78.gif

*または「F11キー」でも同じ。


【14】プログラムが1行進みました。変数 result に値がセットされています。

ajax-79.gif

*行番号6はまだ実行されていません。


【15】「ステップイン」ボタンを押して、プログラムを行番号10まで進めてください。

ajax-80.gif

監視にある変数a、b、cはまだ undefined です。行番号10はまだ実行されていません。

*ステップインは関数の中に入ります。


【16】プログラムを行番号11に進めると、変数aに値が代入されました。

ajax-81.gif


【17】プログラムを行番号13まで進めると、変数b、cにも値が代入されました。

ajax-82.gif


【18】プログラム上の変数に、マウスのカーソルを重ねても変数の中身を確認できます。

ajax-83.gif


【19】プログラムを進めて、関数calc()を抜けると、行番号6に戻ります。

ajax-84.gif

この時 innerHTML にマウスのカーソルを重ねると、画面に表示する文字列が代入されていることがわかります。


【20】プログラムを最後まで進めてください。


【21】同じ要領で、2回目は「ステップオーバー」ボタンをクリックしてプログラムを進めてみてください。「再読み込み」ボタンを忘れずに。

ajax-85.gif

*または「F10キー」でも同じ。

ステップインとの違いがわかりましたか?

ステップオーバーの場合は呼び出す関数の中には入りません。関数の動きが大体掴めている場合や、フレームワークなど動作が確認されている関数は、細かい動きを追わなくていいのでステップオーバーが便利です。


【22】「ステップアウト」ボタンは関数から抜け出す(呼び出し元に戻る)時に使います。

ajax-86.gif


【23】「再開」ボタンは、次のブレークポイントまで一気に進めます。ブレークポイントを複数設定して動作を確認してください。

ajax-87.gif

*または「F8キー」でも同じ。


【解説】

デバッグに使うボタンの働きをまとめると以下のようになります。上手く使い分けてください。

・ステップイン プログラムを1行進める(関数の中に入る)
・ステップオーバー プログラムを1行進める(関数の中に入らない)
・ステップアウト 関数から抜け出す(呼び出し元に戻る)
・再開 次のブレークポイントまで進む


【ワンポイント】

Firebug はHTMLやCSSも表示できます。

ajax-89.gif




Firefox で動作確認する方法。

今回は Ajax プログラムを、Firefox(ファイアーフォックス)で実行してみましょう。

拡張子が「.html」のファイルは、通常 Internet Explorer に関連付けられているので、ダブルクリックして開くと Internet Explorer が起動してしまいます。

そこで「.html」を Firefox で開くには以下のようにします。


【1】Firefox を起動します。

ajax-11.gif


【2】メニューから「ファイル → ファイルを開く」をクリックします。

ajax-57.gif


【3】ファイルの場所を選択し、「test.html」を選択したら、「開く」ボタンをクリックします。

ajax-58.gif


【4】プログラムの実行結果が、ブラウザの画面に表示されました。

ajax-59.gif


【解説】

Firefox とInternet Explorer の画面を比べると、同じスタイルシートを使っているのに、見た目が違うことがわかります。

ajax-60.gif

見た目の違いくらいならそれほど影響ありませんが、ブラウザによってJavaScriptが動いたり動かなかったりするところが難しいところです。


【ワンポイント】

Firefox も Internet Explorer と同じように、別の方法でも開くことができます。

・Firefox を開き、画面にHTMLファイルをドラッグ&ドロップする。
ajax-62.gif


・Firefox のアイコンにHTMLファイルをドラッグ&ドロップする。
ajax-61.gif


・HTMLファイルをマウスで右クリックし、「プログラムから開く → プログラムの選択 → 参照」
ajax-63.gif

ajax-64.gif

「この種類のファイルを開くときは、選択したプログラムをいつも使う」にチェックすると、HTMLファイルと Firefox を関連付けることができます。ただし Internet Explorer ではダブルクリックで開けなくなるので注意。


Internet Explorer 6.0 で動作確認する方法。

前回作成した Ajax プログラムを、Internet Explorer 6.0 で実行してみましょう。実行するときは拡張子が「.html」のファイルを開きます。「.js」ではありませんので注意してください。

test.html 構造 ←実行する時はこれから
test.js プログラム
test.css デザイン

またHTMLファイルがどのソフトに関連付けられているかで、開き方が異なります。通常は Internet Explorer に関連付けられているので、ダブルクリックで簡単に開けます。

しかしパソコンに複数のWebブラウザをインストールしている場合は、関連付けが変更されているかもしれません。その場合は「ワンポイント」をご覧ください。


【1】「test.html」をダブルクリックして開きます。

C:\ajax\sample001

ajax-47.gif


【2】情報バーについてのメッセージが表示されるので、「OK」ボタンをクリックします。

ajax-48.gif

*Internet Explorerで JavaScript を実行すると、ブロックされて警告がでます。これは情報バーを見てくださいというメッセージです。


【3】情報バーをクリックします。

ajax-49.gif


【4】「ブロックされているコンテンツを許可」を選択します。

ajax-50.gif


【5】セキュリティの警告が表示されますが、大丈夫なので「はい」ボタンをクリックします。

ajax-51.gif


【6】プログラムの実行結果が、ブラウザの画面に表示されました。

ajax-52.gif


【解説】

実行結果は最初からHTMLに書かれていたのではなく、JavaScriptで動的に表示したというところがポイントです。また文字のサイズや色はスタイルシート(test.css)で設定したものが反映されていますね。

非同期通信はしていませんが、これがAjaxの最も基本的な動きです。


【ワンポイント】

「.html」ファイルの拡張子が Internet Explorer に関連付けられていない場合は、ダブルクリックでは開けません。例えば「.html」が他のソフトに関連付けられている場合です。

そんな時はブラウザのメニューから「ファイル → 開く」で開くことができます。

ajax-46.gif

その他の開き方
・Internet Explorer を開き、画面にHTMLファイルをドラッグ&ドロップする。
・Internet Explorer のアイコンにHTMLファイルをドラッグ&ドロップする。
・HTMLファイルをマウスで右クリックし、「開く」または「プログラムから開く」


はじめてのAjaxプログラムを書いてみよう。

今回は Ajax のもっとも基本となるプログラムを書いてみましょう。JavaScript はいろいろな書き方ができます。もっと簡単に書くこともできますが、今後の発展を考えてこのようなサンプルにしました。

JavaScriptが初めての方は難しく感じるかもしれませんが、今後何回も同じようなソースコードを書いているうちに慣れてきます。どんな大きなプログラムも小さなプログラムの積み重ねです。今の段階で基本をしっかり押さえれば、後の学習が楽になります。

外部ファイルの書き方、div要素の参照方法、イベントハンドラの設定方法などに注目して読み進めてください。

*Ajaxの特徴である非同期通信に関することは、まだ行なっていません。


【1】まずCドライブの直下に ajax フォルダを作成します。さらにその中に sample001 フォルダを作成してください。

C:\ajax

ajax-44.gif

この sample001 フォルダの中に各ファイルを作成します。


【2】今回は以下のようなファイルの構成になります。

ajax-45.gif

*「\」はWindowsではエンマークのことです。

保存先 C:\ajax\sample001
ファイル名 test.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="test.js"></script>
    <link href="test.css" rel="stylesheet" type="text/css">
    <title>test</title>
  </head>
  <body>
    <div id="result"></div>
  </body>
</html>


保存先 C:\ajax\sample001
ファイル名 test.js

onload = init;
var result;

function init() {
  result = document.getElementById("result");
  calc();
}

function calc() {
  var a = 1;
  var b = 2;
  var c = a + b;
  result.innerHTML = "a + b = " + c;
}


保存先 C:\ajax\sample001
ファイル名 test.css

#result {
  font-size:24px;
  color:#0000cc;
}



以下は「test.html」を例にしたファイルの作成方法です。

【3】TeraPad を使って「test.html」を入力します。

ajax-53.gif


【4】メニューから 「ファイル → 文字/改行コード指定保存」をクリックします。

ajax-54.gif


【5】文字コードは「UTF-8」を選択し、初めて保存する場合は「名前を付けて保存」、修正の場合は「上書き保存」をチェックします。最後に「OK」ボタンをクリックします。

ajax-55.gif


【6】TeraPadのステータスバーに「UTF-8」と表示されていたらOKです。

ajax-56.gif


【7】「test.js」と「test.css」についても同じように、文字コードは UTF-8 で保存してください。

ブラウザでの動作確認は次回に行ないます。


【解説】

■test.html側

(1)文字コードを UTF-8 に設定している部分です。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

*文字コードはファイルの保存時の文字コードと一致させます。


(2)外部ファイルに記述した JavaScript を読み込んでいる部分です。

<script type="text/javascript" src="test.js"></script>

*外部ファイルの拡張子は「.js」にします。


(3)外部ファイルに記述したスタイルシートを読み込んでいる部分です。

<link href="test.css" rel="stylesheet" type="text/css">


(4)HTMLの div 要素に id 属性を設定している部分です。

<div id="result"></div>

*JavaScriptからはidやname属性を使って参照できます。


■test.js側

(1)ページが読込まれた時に、独自で定義した init という関数を呼び出すための、イベントハンドラを設定しています。

onload = init;

*JavaScriptの中でイベントハンドラを設定する場合は、関数名の後ろに()カッコが付かない点に注意してください。


(2)result という変数を宣言している部分です。

var result;

変数を宣言するときは先頭に var を付けます。JavaScriptでは変数の型を指定する必要はありません。代入するデータによって自動的に変わります。

*この変数の有効範囲はプログラム全体です。


(3)result という id を持つ要素を見つけ出し、変数resultで参照します。

result = document.getElementById("result");


(4)独自に定義した calc() という関数を呼び出している部分です。

calc();

*関数名の後ろに()カッコが付きます。


(5)変数の宣言と同時に値を代入しています。

var a = 1;
var b = 2;

*この変数の有効範囲は関数内だけです。


(6)変数の宣言と同時に、計算結果を代入しています。

var c = a + b;

*この変数の有効範囲は関数内だけです。


(7)変数resultで参照している div要素に、計算結果を出力しています。

result.innerHTML = "a + b = " + c;

innerHTML は動的にWebページを変更する時によく使われます。
*innerHTML には文字列やHTMLタグも代入できます。


■test.css側

(1)resultというid属性を付けたdiv要素に、スタイルを設定しています。

#result {
  font-size:24px;
  color:#0000cc;
}

*スタイルシートでは、id属性の場合は先頭に「#」シャープを付けて表します。


【ヒント】

JavaScriptがまったく初めての方は、 JavaScript初心者入門講座 の「JavaScriptとは?」、「JavaScript基礎の基礎」の項目だけでも先に学習することをおすすめします。

JavaScriptの基礎から、プログラムとデザインを分離するまでの経緯を説明しています。


Ajax初級 重要なポイント

初級では簡単なサンプルを使って、 Ajax の中心技術である JavaScript と、HTML、CSSの基本的な使い方を学びます。最初にこれから学習を進める上で重要なポイントをまとめておきます。

(1)AjaxでWebアプリケーションを開発する手順は、以下の繰り返しになります。

1.ソースコードを書く JavaScript、HTML、CSS

2.ブラウザで実行してみる Internet Explorer、Firefox

3.Firebug を使ってデバッグする


(2)ファイルを保存するときの文字コードは UTF-8 にします。

最近Ajaxに利用できるWebサービスやフレームワークが増えてきましたが、ほとんどは文字コードが「UTF-8」で提供されています。そのため自分で作成するファイルも UTF-8 に統一しておいたほうが無難です。文字コードが異なると文字化けの原因になります。


(3)TeraPadをインストールします。

通常 Windows でファイルを保存するときの文字コードは、何も指定しなければ「SHIFT-JIS」になっています。そこで文字コードを指定して保存できる「TeraPad」というテキストエディタを使います。便利なのでインストールしてください。

TeraPadは以下のURLからダウンロードできます。
http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html


(4)HTML、JavaScript、CSSは別ファイルにします。

HTMLファイルの中に JavaScript や CSS を直接記述することもできますが、Webアプリケーションが大きくなると複雑になってしまいます。

できれば最初から分けて書く方法に慣れましょう。JavaScript、CSSは外部ファイルにしてHTML側から呼び出すことにします。構造、プログラム、デザインを分けることで、それぞれのコードがシンプルになるメリットがあります。

最近ではブログでもHTMLとCSSを分けて管理するようになっているため、分けることに対してそれほど違和感は無いと思います。


(5)Ajaxフレームワークである prototype.js を使います。JavaScriptのプログラミングが楽になることと、Webブラウザの違いをある程度吸収してくれます。prototype.js についてはあとで詳しく説明します。


(6)JavaScriptがまったく初めての方は、 JavaScript初心者入門講座 の「JavaScriptとは?」、「JavaScript基礎の基礎」の項目だけでも先に学習することをおすすめします。

JavaScriptの基礎から、プログラムとデザインを分離するまでの経緯を説明しています。


Firebugを起動、終了する方法。

今回は Firebug の最も基本的な操作である、起動と終了です。これから先の学習で Ajax のプログラミングに Firebug を頻繁に使います。

Firebug をいろいろいじっているうちに、わけがわからなくなった時は、とりあえず一度終了して再起動すると元に戻せます。戻し方がわかれば安心して操作することができるので大事なことです。

Firebug はブラウザの一部として開いたり、別ウィンドウとして開くこともできます。Webブラウザの画面の変化を確認しながら実行するときは同じ画面が見やすいし、JavaScriptのプログラムを中心に見るときは、別ウィンドウの方が大きくて見やすいです。状況に応じて使いやすい方法で開けるようにしましょう。

*Firefox に Firebug をまだインストールしていない方は、先に Step4 をご覧ください。


【1】Firefox を起動します。

ajax-11.gif


【2】メニューから「ツール → Firebug → Firebugを開く」をクリックします。

ajax-22.gif


【3】ブラウザの画面下に Firebug が表示されました。しかし Firebug はまだ無効です。

ajax-23.gif


【4】「Firebug を有効」をクリックします。

ajax-24.gif

*「ツール → Firebug → Firebugを無効」で無効に戻すことができます。


【5】Firebug の画面が表示されました。

ajax-25.gif


【6】Firebug 画面の右上にある「^」(Firebug を新しいウィンドウで開く)ボタンをクリックします。

ajax-26.gif


【7】Firebug がブラウザとは別のウィンドウで開きました。

ajax-27.gif


【8】「×」(Firebug を閉じる)ボタンをクリックすると終了します。

ajax-28.gif


【9】メニューから「ツール → アドオン」をクリックします。

ajax-29.gif


【10】アドオン画面で機能を選択した後、「更新を確認」ボタンをクリックすると、更新状況を確認することができます。

ajax-30.gif


Firebug の具体的な使い方については、必要なところで説明していきます。


【ワンポイント】

Firebug は「F12キー」をクリックしても表示することができます。


Firebugをインストールする方法。

Firefox は機能を拡張する様々なアドオンが公開されていて、ユーザーはブラウザを自由にカスタマイズ出来るようになっています。日本語化されていないものまで含めると、2000種類以上の拡張機能があります。

中でも Firebug は Ajax の開発にとても役立ちます。 JavaScript をデバッグしたり、Webページの CSSやHTMLの構造を調べることに利用できます。

またネットワークの監視機能を使うと、ファイルごとの読み込み時間がわかるので、どこで処理時間がかかっているのか把握できます。この他にも開発に役立つ機能がたくさんあります。

Firebug は Firefox のアドオンとして提供されているので、まだの方は先に Firefox をインストールしてください。Firefox はこの画面左サイドにあるリンクから無料で入手できます。

Firefox のインストールが完了したら、Firebug を組み込みます。


【1】Firefox を起動します。

ajax-11.gif


【2】メニューから「ツール → アドオン」をクリックします。

ajax-12.gif


【3】アドオンの画面が表示されたら、「新しい拡張機能を入手」をクリックします。

ajax-13.gif


【4】「Firefox用アドオン」のページが開きました。

ajax-14.gif


【5】カテゴリ別一覧から、「開発者向けツール」をクリックします。

ajax-16.gif


【6】「Firebug 日本語版」をクリックします。

ajax-17.gif


【7】Firebug のバージョンを確認して、「インストール」をクリックします。

ajax-18.gif


【8】「署名がありません」と表示されますが、大丈夫なので「今すぐインストール」をクリックします。

ajax-19.gif


【9】アドオンに「Firebug Japanese」が表示されました。インストールを完了するには、「Firefox を再起動」をクリックします。

ajax-20.gif


【10】Firefoxのタブを開いている場合はメッセージが表示されますので、「すべてのタブを閉じる」ボタンをクリックします。

ajax-21.gif

Firefox が再起動したら Firebug のインストールは完了です。Firebugの操作方法については次回から解説します。


【ワンポイント】

Firebug についての詳細は以下のページをご覧ください。
http://www.getfirebug.com/jp.html


他の拡張機能も同様な手順でインストールできます。興味のある方はブラウザをカスタマイズして便利に使ってください。


Firefoxをインストールする方法。

Firefox(ファイアーフォックス)とは、Mozilla Foundation が開発した、オープンソースのWebブラウザで、誰でも無料で使用することができます。Windows、Linux、MacなどのOSに対応しています。

Firefoxの特徴はユーザーの好みに合わせて、機能を追加(アドオン)できることです。特に「Firebug」は Ajax での開発にとても役立ちます。

Firebug は JavaScript の実行を1行ずつ行なったり、変数の状態を確認することができるのでプログラミングに重宝します。これだけでも使う価値があります。

Firebug は Firefox のアドオンとして提供されているので、まだ Firefox を使ったことがない方は Firefox をインストールしてください。Firefox はこの画面左サイドにあるリンクから無料で入手できます。

あとはウィザードにしたがって、Firefox を簡単にインストールできます。

インストールが完了したらFirefox を起動してみましょう。

ajax-11.gif

これまで Internet Explorer 6.0 を使っていたユーザーは一瞬戸惑うかもしれません。Firefox にはタブブラウズ機能があり、タブで表示ウィンドウを切り替えられるため、操作性がとても良くなっています。ウィンドウがいくつも開いて邪魔ということがなくなりました。

またポップアップウィンドウをブロックする機能や、ライブブックマーク機能、Google検索機能など便利な機能がたくさんあります。

Firefox はセキュリティー面でも優れています。セキュリティホールの原因となる VBScript や ActiveX に対応していないため、これらの機能を悪用するウイルスやスパイウェアに対して、Internet Explorer よりも安全だと言われています。

次回は Firebug をインストールする方法について説明します。


Ajaxの動作確認の対象となるWebブラウザを決める。

Ajax で作ったWebアプリケーションはWebブラウザで動作しますが、Ajaxを実現する技術は、Webブラウザ間で実装の違いがあります。またWebブラウザの種類が多いこともあり、全てのブラウザで同じように動作させるのは難しいのが現状です。

社内で使うWebアプリケーションのような特定の人が使う場合は、使用するブラウザを統一すれば開発の手間が省けます。

しかしインターネット上で不特定多数の人が使うWebアプリケーションでは、クロスブラウザ対応にする必要があり、その分プログラムが複雑になります。

本サイトはAjaxの入門講座なので、プログラムを簡単にするために動作確認の対象とするWebブラウザを絞ることにします。

それではどのWebブラウザを対象にしたらよいのでしょうか?

最近では無料で高機能のアクセス解析サービスが提供されています。下記はアクセス解析からわかったPC環境の統計です。私のサイトは主に初心者向けですので、一般的なサイトの統計とは差があるかもしれません。

2007年11月19日現在のデータです。

・Webブラウザの種類
1. Internet Explorer 88.35%
2. Firefox 9.19%
3. Opera 1.73%
4. Netscape 0.30%
5. Safari 0.23%
6. Mozilla 0.13%

・Internet Explorerのバージョン
1. 6.0 84.09%
2. 7.0 15.19%

・Firefoxのバージョン
1. 2.0.0.8 931 45.64%
2. 2.0.0.9 875 42.89%

・OS
1. Windows 99.25%
2. Macintosh 0.57%

・Windowsの種類
1. XP 83.18%
2. 2000 11.73%
3. Vista 3.94%

データを見るとWebブラウザの種類は Internet Explorer が圧倒的で、これに Firefox を加えると97%を超えます。とりあえずこの2つのWebブラウザで動作確認すればOKだと思います。

Internet Explorerのバージョンは 6.0 が圧倒的です。Firefoxはアップデートが簡単にできるので、最新版で確認すれば問題ないでしょう。

OSはほとんどWindows で、Windowsの種類はXPが圧倒的です。

ということでメインのターゲットはWindowsXP で Internet Explorer6.0 ということになります。

Internet Explorer 6.0 が多いのは、WindowsXPユーザーが最初からインストールされているWebブラウザをそのまま使っているからだと考えられます。Vistaが普及してくるとInternet Explorer 7.0 の割合が増えてくるのでしょうね。また中級のユーザーや開発者は機能が多くて便利な Firefox を使っていると思われます。

統計の結果から Internet Explorer はほとんどの方が使える環境にあると思うので、あとは Firefox を入手すれば動作確認をする準備が整います。

Firefox は便利な機能が豊富にそろっているので、是非使ってみましょう。中には開発に役立つ機能もあります。Firefox については次回に詳しく解説します。


Ajaxで作ったWebアプリケーションを体験してみる。

Ajax の特徴は、「非同期通信」と「動的にページを書き換える」ことですが、言葉だけで説明すると難しく感じますので、実際に体験してみることにしましょう。すぐに「そういうことか!」と実感できます。

Ajaxで作ったWebアプリケーションで有名なのは、GoogleマップやGoogleサジェストですが、これらは一度は使ったことがあると思います。そこで今回は私が楽天Webサービスを使用して作った、簡単なAjaxの例を紹介します。

最初の例はキーワードを入力すると、楽天Webサービスから商品データを取得して表示するシステムです。楽天のサーバーとのやりとりにAjaxを使っています。

*動作確認は Microsoft Internet Explorer バージョン6 で行なっています。


【1】以下のURLをクリックし、「楽天シンプル検索」にアクセスします。

http://ws.bzen.net/rakuten/

ajax-31.gif


【2】検索ボックスに「カステラ」と入力し、「検索」ボタンをクリックします。

ajax-32.gif


【3】検索結果が表示されました。

ajax-33.gif

*アドレスは変わっていないことに注目してください。画像を表示する部分だけが動的に変わっています。


【4】どれか商品画像をクリックしてください。

ajax-34.gif


【5】楽天の商品詳細ページが開きました。

ajax-35.gif


【6】「次を表示」ボタンをクリックします。

ajax-36.gif


【7】商品画像が切り替わりました。

ajax-37.gif

*ここでもアドレスは変わっていません。画像を表示する部分だけが動的に変わっています。


次はもう一つ別の例を見てみましょう。

都道府県を選択すると、該当する市町村が絞り込まれるようになっています。全国に市町村は1900以上もあるため、すべて表示するのは大変です。そこでAjaxの技術を使い、バックグランドでサーバーと通信して市町村を表示しているわけです。

楽天から商品データを取得する部分は最初の例と同じです。

【8】以下のURLをクリックし、「全国の特産品検索」にアクセスします。

http://ws.bzen.net/tokusan/

ajax-38.gif

都道府県のオプションメニューははじめからあるのではなく、ページを開いた段階で、サーバーと通信してデータを取得し表示しています。


【9】都道府県のオプションメニューから「宮城県」を選択します。

ajax-39.gif


【10】すると市町村のオプションメニューが表示されます。該当する市町村だけが表示されていますので「仙台市青葉区」を選択します。

ajax-40.gif

*アドレスは変わっていないことに注目してください。市町村を表示する部分だけが動的に変わっています。


【11】選択した市町村に関連する商品が表示されました。

ajax-41.gif

*ここでもアドレスは変わっていません。画像を表示する部分だけが動的に変わっています。


【12】どれか商品画像をクリックしてください。

ajax-42.gif


【13】楽天の商品詳細ページが開きました。

ajax-43.gif


今回はAjaxを使った簡単な例でしたが、これを応用するといろいろ出来そうです。市町村の絞込みなどは、顧客管理システムにも使えそうですね。またGoogleマップと組み合わせると、ホテル検索システムなどができます。

Ajaxはアイデア次第で、いろいろなWebアプリケーションが作れる面白い技術なのです。


Ajaxとは?

Ajax (エイジャックス)とは、Asynchronous JavaScript + XML の略で、非同期通信を利用してデータを取得したり、動的にウェブページの内容を書き換える技術のことです。アジャックスと発音することもあります。

Ajaxという名称は、2005年2月にJesse James Garrett氏によって名付けられました。Ajaxは新しい技術というより、既存の技術を組み合わせたものです。Ajaxの中心技術である JavaScript や XML、CSS は Ajaxという名称が普及する前から既に使われていました。

しかし技術に名前が付けられたことの意味は大きく、Google Map などに利用されたこともあり、一気にAjaxの可能性が注目されました。

しかも動作に必要なのはWebブラウザだけであることや、デスクトップアプリケーションのような操作性が実現できることから、実用性が評価されています。

Ajaxの名前にも含まれている通り、中心的な技術は JavaScript です。非同期通信は JavaScript の XMLHttpRequest によって行なわれます。非同期でサーバーと通信して、ファイルの内容を取得したり、PHPなどのプログラムの出力結果をテキストやXMLなどで受け取ることができます。

従来のWebアプリケーションでは、ユーザーが操作を行なったとき、サーバーから新しいページを取得して、ページ全体を書き換える必要がありました。ユーザーはページの取得中は何も操作できないので不便でした。

Ajaxを取り入れるとバックグラウンドでサーバーと非同期通信することができます。また必要な部分だけ書き換えることができるので、ページを切り替える必要がありません。そうするとユーザーはストレスを感じることなく、快適に操作することができます。

本講座ではAjaxの基礎から学び、フレームワークであるPrototypeを使った実用的なサンプルまでを初心者向けに図を使って詳しく解説します。

スポンサード リンク

スポンサード リンク






Ajax初心者入門講座TOPへ

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。