TOP＞システム開発＞ オリジナルのWebサービス＋JavaScriptライブラリを作成

JSライブラリ・ラボ - これで君もライブラリ開発者だ！ 第４回：JavaScriptライブラリの作成 著者：川崎 有亮   2007/4/4

1   2  次のページ

オリジナルのWebサービス＋JavaScriptライブラリを作成

これまで、既存のJavaScriptライブラリの構造やその手法を解析してきました。ここでは、実際にオリジナルのWebサービスとJavaScriptライブラリを構築してみます。Webサービスと言っても高度な機能ではなく、リスト5に示すPerlで単に四則演算を行って結果を返すだけのCGIです。 リスト5：calc.cgiサンプルCGI（Webサービス側） #!/usr/bin/perl -T use strict; use CGI; use JSON; # クエリ変数qを取り出す my $cgi = new CGI(); my $q = $cgi->param('q'); # 計算処理を行う my $out = {}; if ( $q =~ /^([\d\-\+\*\/\.\(\)\s]+)$/s ) {    my $e = $1;    local $@;    $out->{result} = eval($e);    $out->{status} = $@ ? $@ : 'ok'; } else {    $out->{status} = 'invalid query: '.$q; } # 結果をJSON形式で出力する my $json = JSON::objToJson( $out ); print "Content-Type: text/plain; charset=UTF-8\n\n"; print $json, "\n";    このWebサービスの具体的な仕様は、以下のようなURLにリクエストを投げると、「2*3」という計算式クエリを受け取って、「{"status":"ok","result":6}」というJSON形式のテキストデータをレスポンスとして返すというものです。 http://www.example.com/calc.cgi?q=2*3    サンプルですので、サーバー側は簡単なPerlコードにしています。ただし、不正利用を防ぐため、クエリ文字列のチェックは欠かせません（数字と演算記号のみを許可して、任意のPerlコマンドを実行できない制限）。

JavaScriptライブラリの実例

さて、いよいよ本題のJavaScriptライブラリに移ります。このWebサービスのインターフェイスとなるJavaScriptライブラリのCalcオブジェクトを作成します。ソースコードはリスト6の通り。 リスト6：calc.jsサンプルJavaScriptライブラリ // calc.js // Copyright 2007 Kawasaki Yusuke http://www.kawa.net/ // 初期化処理は初回のみ実行する if ( typeof( window.Calc ) == "undefined" ) {    // Calc オブジェクトのコンストラクタ（何もしない）    var Calc = function () {       return this;    };    // バージョン番号    Calc.VERSION = '0.01';    // Calcオブジェクトのプロパティ（デフォルト値）    Calc.prototype.cgiurl = 'calc.cgi';    Calc.prototype.status = '#status';    Calc.prototype.result = '#result';    // リモート計算を行うメソッド    Calc.prototype.expr = function ( arg ) {       // CGIに受け渡すパラメータオブジェクトを生成       var param = {          q: arg       };       // コールバック関数内ではthisが使えないのでコピー       var __this = this;       // JSONデータを受け取るコールバック関数       var func = function ( data ) {          if ( ! data ) return null;          if ( data.status != 'ok' ) data.result = '';          data.result += "";          $(__this.result).text(data.result);          $(__this.status).text(data.status);       };       // CGIを呼び出して、JSONデータを受け取る       jQuery.getJSON( this.cgiurl, param, func );    }; }    jQueryライブラリ同様に、window.Calcをチェックして初期化処理の二重実行を防いでいます。コンストラクタでは特に処理を行いません。オプションは、cgiurl・status・resultの3つのプロパティを用意しています。これらの値は、Calcライブラリを利用するプログラム側から変更可能です。    そして実際にCGIを呼び出して計算を行うのが、expr()メソッドとなります。第1引数に計算式の文字列を受け取ります。jQueryライブラリのgetJSON()メソッドを利用して、Ajax通信を行います。    Webサービスからのレスポンスが届いたら、そのJSON展開結果を引数として、変数funcに定義したコールバック関数が呼び出されます。JSONのresultおよびstatusの値から、HTMLページを書き換える処理を行います。

1   2  次のページ

著者プロフィール 川崎 有亮 1977年東京生まれ。AjaxなどWeb技術のアーキテクト。株式会社かっぺを経て、現在は株式会社リクルート事業開発室に所属。技術評論社「Ajax／実装のための基礎テクニック」（共著）など書籍・雑誌記事の執筆も多数。 Kawa.net xp：http://www.kawa.net/

INDEX 第4回：JavaScriptライブラリの作成 オリジナルのWebサービス＋JavaScriptライブラリを作成   HTMLファイルからJavaScriptライブラリを利用

JSライブラリ・ラボ - これで君もライブラリ開発者だ！ 第1回 Prototypeライブラリの内部 第2回 jQueryライブラリの内部とonloadイベント記法 第3回 YUIライブラリと外部JSの呼び出し手法 第4回 JavaScriptライブラリの作成 第5回 グローバル変数の制御と更新履歴ファイル 第6回 自作ライブラリの公開とJavaScriptライブラリの今後