TOPシステム開発> オリジナルのWebサービス+JavaScriptライブラリを作成
まるごとJavaScript&Ajax!
JSライブラリ・ラボ - これで君もライブラリ開発者だ!

第4回: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ライブラリを利用