命令の挿入のサンプル - Web AI

「Web AI」は、クロノス・クラウンの柳井政和が開発しているJavaScirptのライブラリです。

「Web AI」には、検索などの非同期の処理をメソッド・チェーンで記述する枠組みを持っています。この処理は、「WebSrch」オブジェクトに命令を追加していき「start」メソッドを実行することで開始されます。

「start」で開始した命令は、その実行途中で、現在実行中の処理の直後に新たな命令を追加することができます。挿入モードをオンにすると、現在実行中の命令の直後に、新たな命令が追加されていきます。この仕組みを利用することで、「非同期処理の結果により処理を分岐させるプログラム」を、直感的に分かりやすく記述することができます。

それでは以下、「WebSrch」オブジェクトの挿入機能を利用した、非同期処理の分岐のサンプルを掲載します。

まずは、実例です。

以下、ソースコードです。挿入機能を利用することで、処理の順番が直感的に把握しやすくなっているのが分かると思います。

	// Googleからスクリプトをロード
	google.load("search", "1");
	google.load("feeds",  "1");
	google.load("jquery", "1.4.3");

	// ロード中アニメ
	var loadAnmArr			// ロード中アニメ配列
	= [".(^o^).", "(^o^)..", "^o^)..(", "o^)..(^", "^)..(^o", ")..(^o^", "..(^o^)"];
	var loadAnmCnt = 0;		// ロード中アニメ・カウンター

	// Web AI
	var $WA  = crocro.webAi;		// 短縮表記
	var cWSrch = new $WA.WebSrch();	// Web検索

	// flickr URL
	var flickrUrl = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"

	/**
	 *	【初期化処理】
	 */
	cWSrch.ready(function(){
		prettyPrint();		// ソースの装飾(*説明装飾用)

		cWSrch
		.brand("gglBrnd")		// Googleのブランド表示
		.init({type : "web"})	// Web検索を初期化
		.setEachCall(function(){
			// ステップごとに呼び出される処理を追加
			drwLoadAnm(true);	// ロードアニメ描画
		})
		.start();		// 実行開始
	});

	/**
	 *	@title	【テスト】
	 *	@description
	 *
	 *		テストを行う。
	 */
	function test() {
		// 変数の初期化
		var kwArr  = ["cat", "dog"];		// キーワード配列
		var cntArr = {cat : 0, dog : 0};	// 検索数を格納する連想配列

		// 検索のメソッド・チェーン処理
		cWSrch
		.reset()			// 命令格納のリセット
		.srch({
			type : "web",
			loop : 2,		// ループ回数
			key : function() {return kwArr[cWSrch.loopCnt]},	// 検索キーワード
			res : function(res, cursor) {
				if (cursor) {
					var kw = kwArr[cWSrch.loopCnt];		// キーワード
					cntArr[kw] = cursor.estimatedResultCount;	// インデックス数の格納
					$("#res").append("<div>" + kw + " : " + cntArr[kw] +  "</div>");
				}
			}
		})
		.add(function() {
			if (cntArr.dog > cntArr.cat) {
				// dog が多い場合
				$("#res").append("<div>Peoples like dogs!</div>");
				cWSrch
				.insrtOn()		// 挿入開始
				.addCallback({
					// コールバック処理を追加
					exec: function() {
						$.getJSON(
							flickrUrl,
							{tags : "dog", format : "json"},
							function(json){
								$("#res").append("<div>flickr's dogs</div>");

								for (var i = 0; i < json.items.length; i ++) {
									var item = json.items[i];
									$("<img/>")
									.attr("src", item.media.m)
									.appendTo("#data");
								}

								cWSrch.endCallback();	// コールバックの終了を通知
							}
						)
					}
				})
				.add(function() {
					// 検索終了
					$("#res").append("<div>end : search dogs.</div>");
				})
				.insrtOff();	// 挿入終了
			} else {
				// cat が多い場合
				$("#res").append("<div>Peoples like cats!</div>");
				$("#res").append("<div>I don't serach cats (T_T</div>");
			}
		})
		.add(function() {
			// 全体の終了処理
			$("#res").append("<div>end : exec cmnds.</div>");
			drwLoadAnm(false);		// ロードアニメ描画
		})
		.start();		// 実行開始
	}

	/**
	 *	@title	【ロードアニメ描画】
	 *	@description
	 *
	 *		ロード中のアニメを描画する。
	 *
	 *	@param	loading		ロード中か否か
	 *	@return	なし
	 */
	function drwLoadAnm(loading) {
		var dwStr = ""
		if (loading) {
			dwStr = "Now Loading... " + loadAnmArr[loadAnmCnt ++ % loadAnmArr.length];
		}
		$("#loading").text(dwStr);
	}