Archive for the ‘JavaScript’ Category

(function(arg){
	//処理内容を記述する
	var foo = 2;
	alert(foo+arg); //5
})(3);

jQuery UIの定義とかでこのような表記を見かけ、何だろうこれはと思っていた。要はJavaScriptで無名関数を宣言し、すぐ実行する方法らしい。こいつを使うと何がいいかというと、グローバルスコープを汚染しないで済むというところがいい。もしこれを使わないで書いた場合、var fooの時点でグローバルスコープにfooが定義されてしまい、ちょっと気持ち悪い感じになるところを回避することが出来る。

ざっくりと言ってしまえば、Javaのコードが書ければAjaxできちゃうぜ、いえい!ということです。

例えば、

public class FooClass {
	public void call(String str) {
		return str+"!!!";
	}
}

と書いて、JavaScriptから

var str = FooClass.call("いえい");
alert(str); //いえい!!!

こんな感じでサーバサイドの処理が呼び出せちゃったりします。これはかなり楽、素晴らしい。
http://getahead.org/dwr
こっからDownloadをクリックして、jarファイルを落とします。jarファイル1個でできる、すごーい!

こいつをWEB-INF/libに置いて、web.xmlに

  <servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>
			org.directwebremoting.servlet.DwrServlet
		</servlet-class>
    <init-param>
      <param-name>debug</param-name>
      <param-value>true</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>

マッピングを書いてやる。そしてWEB-INF直下にdwr.xmlを配置して

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
	"-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
	"http://getahead.org/dwr//dwr30.dtd">

<dwr>
	<allow>
		<create javascript="FooClass" creator="new">
			<param name="class" value="jp.commutalk.dwr.FooClass">
			</param>
		</create>
	</allow>
</dwr>

呼び出したいhtmlに、こんな感じでJavaScriptへのリンクを埋め込む。

<script src='dwr/interface/FooClass.js'></script>

DWRが自動で生成してくれるので、特に使う側はJavaScriptを書く必要がないところがすごいところ。
で、冒頭に書いたようにあたかもJavaのクラスを呼び出すようにして呼び出せる。素晴らしいね。

ここがかなり詳しく書いてあるので、この辺を見て試してみると幸せになれるかも。

今回は前回のjQuery UIの形式でフォームへの入力内容を監視するプラグインを作ってみた。まだ作りかけだが、正規表現で内容をチェックして正しい内容かチェックしてくれる優れモノだ。ありふれたネタではあるがサンプルとして貼ってみる。

(function($){
$.widget("sample.inputchecker",{
	options: {
		exp:/.{4,50}/,
		reject:"4文字以上50文字以下の文字列を入力してください。",
		accept:"正しい入力です。",
		acceptCSS:{
			"font-size":"0.7em",
			"font-weight":"bold",
			"color":"#5c5"
		},
		rejectCSS:{
			"font-size":"0.7em",
			"font-weight":"bold",
			"color":"#c55"
		},
		acceptIcon:undefined,
		rejectIcon:undefined
	},
	_init: function() {
		var obj = this;
		var options = obj.options;
		var icon = $("<img></img>");
		var mesbox = $("<div></div>");
		icon.css({
			"width":"16px",
			"height":"16px"
		});
		function checkValue(){
			if(obj.element.val().match(obj.options.exp)) {
				mesbox.text(obj.options.accept);
				mesbox.css(obj.options.acceptCSS);
				if(obj.options.acceptIcon!=undefined) {
					icon.attr("src",obj.options.acceptIcon);
				}
			} else {
				mesbox.text(obj.options.reject);
				mesbox.css(obj.options.rejectCSS);
				if(obj.options.rejectIcon!=undefined) {
					icon.attr("src",obj.options.rejectIcon);
				}
			}
		};
		obj.element.after(mesbox);
		obj.element.after(icon);
		obj.element.keyup(checkValue);
		checkValue();
	}
});
})(jQuery);

$(“input”).inputchecker();とでも書いてやれば、内容が4文字以上50文字以下か自動でチェックしてくれる入力ボックスの完成だ。

$("input").inputchecker({
	exp:/.{4,100}/,
	acceptIcon:"accept.png",
	rejectIcon:"reject.png"
});

とすると4文字以上100文字以下かチェックする入力ボックスとなる。アイコン画像を指定してやればボックスの右に状態も表示してくれる優れモノ。

今回からタイトルを変更したいと思う。なぜならば、jQuery UIのプラグイン形式というものもあり、そちらに準拠した方があとあといいのではないか、という判断だ。どんな形式かというとこちら。

(function($){
	$.widget("foobar.plugin",{
		options: {
			css:{
				"font-size":"24px"
			}
		},
		_init: function() {
			this.element.css(this.options.css);
		};
	});
})(jQuery);

jQueryセレクタで選んだ要素のスタイルを変更するプラグイン。これを実際に使うには、

$("div").plugin();

のように使ってやるといい。

$("div").plugin({
	css:{
		font-size:4px,
		font-weight:bold
	}
});

のようにオプションを指定してやることもできる。かなり便利ですね。

onclick要素を用いてJavaScriptを呼び出す際の注意点。
シングルクオーテーションをHTMLエンコードすると&#39;(&は本来半角文字)という表記になるが、これがJavaScriptへ引数として渡す文字列の中に含まれていると、なんとシングルクオーテーションとして認識されてしまう。XSSの原因となるので注意しよう。

onclickでJavaScriptに渡す際にデコードしているということだろうか。なんとも分かりにくい仕様だなあ・・・。

でいいじゃない。という話です。
モデルだけをサーバサイド(Perl、PHP、Java、などなどなんでもよし)において、JavaScriptにコントローラー的な動作をすべて行わせる。サーバーサイドとはAJAX通信でJSONをやり取りすれば、規格も合わせ易いし、通信量も抑えられるはず。分散処理もうまいことやればやりやすくなるのではないだろうか、といいことづくめじゃない?という提案ですね。
なにより構造が分かりやすい。完全分業で行えるし。というわけでこういう感じでやろう。やろうよ!(誰に言ってるんだ)

言いたいことは、まさにタイトルの通り。jQueryのプラグイン形式を利用して、再利用可能なウェブページの部品を作りましょう、という話だ。サーバとの通信側はAJAX通信で書けば、どこに置いても正しく機能する便利な部品の完成だ。

jQuery.fn.foobar = function(options) {
	//プラグインの処理内容
	return this.each(function(){
		//セレクタで指定したオブジェクトへの処理
	});
}

書き方はこんな感じ。これで$(“#test”).foobar()とかで任意の場所に部品を埋め込むことが出来る。

例えば、

jQuery.fn.foobar = function(options) {
	return this.each(function() {
		$(this).html("プラグインのテスト");
	});
}

とやれば、このプラグインを適用したDOMの中身が「プラグインのテスト」に置き換わる。色々実装例をこれから書いていきたいと思う。

最近すっかりJSONにはまっている。[“value1″,”value2”]で配列、{“key1″:”value1″,”key2″:”value2”}でハッシュ。構造を記述するならXMLよりJSONがやっぱり便利。でも当のJavaScriptに標準でObjectからJSON形式の文字列を吐き出す関数が無いのはいかがなものだろうか。(foreachまわして文字列に変換しちゃえばいいけど)unevalが標準機能として欲しいです。データベースでリストを管理する時もJSONで書いて格納しちゃえば楽ですね。

以下、JavaScriptでObjectをJSON形式でシリアライズする方法。

http://www.json.org/json2.jsをダウンロード。

json2.jsをインクルードして、var serializedString = JSON.stringify(object)

そのままだと警告のダイアログボックスが出てきてうっとうしいので、json2.jsの一行目は削除しておくこと。

おしまい。

最近気になるもの

・Sinatra Rubyの超軽量Webフレームワーク。なんかのプロトタイプを作るのにはぴったりかも。

・Scala Twitterで本格的に導入されたので有名。オブジェクト指向言語と関数型言語のいいとこどり、らしい。JavaScriptにはまってる俺からしたらちょい気になるもの。

・SproutCore JavaScriptのみでMVCフレームワークやリッチなUIを実現するものらしい。Railsのような生産性?まだよく分からない。開発にはRubyを使うらしい。近いうちに試してみたい。

・VoltDB 分散型オンメモリデータベース、超高速らしい。RDBMSを使うまでもないWebアプリ上での使用とかに適切なのかな。ただしストアドプロシージャしか使えないので、使いどころは限られてくるかも。一応SQLの構文に対応しているらしい?

カレンダー
2018年9月
« 9月    
 12
3456789
10111213141516
17181920212223
24252627282930