AjaxでJSONを利用する

このところFlex2のネタばかりでしたので、久しぶりにJavaScriptのネタです。
AjaxでJSONを利用するサンプル

Ajaxでデータを受信する際、構造化されたデータが欲しい場合は多いです。
Ajaxの"x"はXMLのXなので、XMLデータを使うのが王道なのかもしれません。
実際、XMLデータは色々な環境で利用できますし、構造を定義しやすいのですが、JavaScript標準の機能のみで処理するのはとても面倒です。
このような場合、JSONというフォーマットが便利です。
JavaScriptでは、オブジェクトを生成する際に、

var data = 
{
    title : 'Title',
    url : 'URL'
};

のように記述することが出来ます。
この title や url は data のプロパティとなり、data.title や data["title"] のようにアクセスできます。
上記のサンプルの { から } までの部分の記述をJSONと呼び、JavaScriptではこの形式のデータをテキストとして受信した後、eval関数を使って 動的にオブジェクトを生成することが出来ます。

実際にAjaxで受信したJSONデータからオブジェクトを生成するサンプルは以下のようになります。
Ajaxの通信にはprototype.jsを利用しています。

var url = 'json.txt';
var opts = {
    method : 'get',
    onComplete : showData
};

new Ajax.Request(url, opts);


function showData(r)
{
    var data = eval('(' + r.responseText + ')');
    alert(data.title);
}

とても簡単ですね。
JSON を eval に渡す際には ( ) で囲む必要があります。

XMLほど汎用的でなくてよいと割り切るなら、JSONも検討してみてはいかがでしょうか。
ただし、JavaScriptとしてそのまま実行されてしまいますので、注意は必要です。

FireBugのインストールと簡単な使い方

昨日、FireBugが@ITで紹介されていたせいか、"FireBug"という検索キーワードでGoogleなどからこのブログにやってこられる方が急に増えました。
以前、紹介程度には書いていたんですが、わざわざ見に来てもらってそれだけでは申し訳ないので、導入から簡単な使い方までを書いておきます。

◆インストール
インストールはいたって簡単です。
Firefox 1.5以上でこちらのサイトにアクセスします。
そのページの真ん中より少し上に以下のような部分がありますので、「Install Now」をクリックます。


すると、以下のようなダイアログが出るので、「今すぐインストール」を押してインストールを行います。


ダウンロードが完了すると以下のダイアログが出ますので、FireBugの項目があることを確認してFirefoxを再起動して完了です。



◆簡単な使い方
Firefoxを起動すると、ステータスバーの右端に、ページにエラーがなければ の アイコンが、エラーがあると のような アイコンが表示されます。
そのアイコンをクリックすると、以下のようにデバッグ用のペインが開きますので真ん中の「Debugger」タブを開くと、そのページ内のJavaScriptのソースが表示されます。


外部ファイルなど複数存在する場合は、下にある「Scripts」というドロップダウンでファイルを選択してください。
ここで、左側の行数が書かれている部分をクリックすると、ブレイクポイントを設定できます。
デバッグしたい行にブレイクポイントを設定してJavaScriptを実行すると、以下のようにブレイクポイントでプログラムが中断します。黄色の行がこれから実行されるプログラムです。


この時、右側のペインではその時点での変数の値を確認することが出来ます。
ここで左下にある水色の再生ボタンを押すとプログラムが再度実行され、次のブレイクポイントがあればそこで再度中断となります。
また、ここから1行ずつプログラムを実行していくには、3つの黄色い矢印ボタンを使用します。
一番左はステップオーバーで、次の行へ進みます。
真ん中はステップインで、現在の行が関数の呼び出し部であればその関数内に入ります。
一番右はステップアウトで、現在の関数を抜けて外に出ます。

軽量でお手軽にデバッグ出来ますので、おすすめです。


IEでデバッグしたいという場合は、Visual Studio 2003とか2005をお使いの方は、それでデバッグ出来ます。
お持ちでない方は、Visual Web Developer 2005 Express EditionというVisual Stuio 2005のASP.NET開発に機能を限定したものが無料で入手出来ますので、こちらを使ってデバッグ出来ます。
軽量ではありませんし、プロジェクトの作成などが必要でお手軽というわけでもありませんが、機能は非常に充実していますので、ASP.NETとは無縁の方も一度お試し下さい。

JavaScriptをFireBugでデバッグ

JavaScriptのデバッグって結構面倒ですよね。
alertで値を確認したりして。
タイマーで定期的に呼び出される関数内に、うっかりalertを仕込んで悲しい思いをしたことありませんか？
そんな時は、FireBugをお試し下さい。
気になる場所にブレイクポイントを設定して、ステップ実行しながら値を確認したり、Spy++でウィンドウを選択する時のように HTMLの要素をマウスで部分的に選んでソースを見たりすることが出来ます。
XMLHttpRequestの通信も見れますので、Ajaxを使った開発にも役立つ存在ではないでしょうか。
Firefoxのアドインなんですが、非常にオススメです。
以下のリンクよりダウンロード出来ます。
FireBug :: Mozilla Add-ons :: Add Features to Mozilla Software

追記：FireBugのインストールと使い方を簡単に書いてみましたので、そちらもご覧下さい。
FireBugのインストールと簡単な使い方

【JavaScript】クラスを定義する

昨日は、定義済みのオブジェクトにメソッドを追加して機能を拡張する方法を書きましたが、JavaScriptでも、C#やJavaのクラスのようなものを独自に定義することが出来ます。
具体的には、以下のように関数を定義して、その関数を拡張するような感じになります。
そして、この関数そのものがコンストラクタとなります。

function MyClass(n)
{
    //プロパティ
    this.name = n;
	
    // メソッド
    MyClass.prototype.copy = function(){
        var tmp = new MyClass(this.name);
        return tmp;
    };
}

var myClass = new MyClass("ClassA");
....
myClass.name = "ClassB";
var myClass2 = myClass.copy();
....

また、クラスの継承のようなことも出来ますが、その辺りはまた後日書きたいと思います。

【JavaScript】オブジェクトの機能を拡張する

JavaSciptには、オブジェクトのインスタンスに動的にメソッドを追加出来るという特徴的な機能があります。
まずは以下のコードを見てみます。

var str = new String("JavaScript");

str.left = function(n){
    return this.substr(0, n);
}

alert(str.left(4));

var str2 = new String("JavaScript");
alert(str2.left(4));

JavaScriptの文字列にはleftというメソッドはありませんが、str.left = function...の部分でstrというインスタンスに対してメソッドを追加しています。
これによって、alert(str.left(4));では"Java"と表示され、左からn文字を取り出すleftというメソッドが機能していることを確認できます。
しかし、このメソッドはあくまでも変数strに格納されているインスタンスに対して追加したものですので、その後のstr2.left(4)はエラーとなってしまいます。
これはこれで使い道はあるのですが、strだけでなくstr2でも同様に使えるようにしたい事も多いですよね。
そのような場合には、以下のようにしてStringという型（型という表現が適切かどうかわかりませんが...）に対してメソッドを追加できます。

String.prototype.left = function(n){
    return this.substr(0, n);
}

var str = new String("JavaScript");
alert(str.left(4));

var str2 = new String("JavaScript");
alert(str2.left(4));

prototypeというものが出てきましたが、prototypeというプロパティはJavaScirptのオブジェクト全てが持っていて、このprototypeプロパティに メソッドを追加することで、その型のインスタンスメソッドを定義することが出来ます。
従って、この例では、strもstr2も無事にleftメソッドを呼び出すことが出来ます。

前回のaddEventListener・removeEventListenerサンプルをこの機能を使って書き直したサンプルを作成しましたので、動作を確認してみてください。
サンプルページ