Rest Term

JavaScirptでサンドボックスパターン

Pocket

JavaScriptパターン本の5章で紹介されているサンドボックスパターンがおもしろかったので試してみました。


これは広く使われている名前空間を使ったモジュールパターンとは違うアプローチになっています。モジュールパターンというのは以下のような書き方で、即時関数が返すオブジェクトをモジュールとして利用するものです。

* Module Pattern

サンドボックスパターンはその名前の通り、モジュールが他のモジュールとそのサンドボックスに影響を与えることなく動作できるような環境を提供します。このパターンは例えば YUI 3.x 以降で利用されていて、以下のように書くことができます。

YUIはバージョン3からなかなか便利になってるなぁという印象で、なによりYQLとの連携が大変強力になっているので、そっち方面に興味がある人は使ってみるといいんじゃないでしょうか。

今回はCanvasを使った簡単な画像処理ライブラリのベースをこのサンドボックスパターンを使って書いてみます。画像I/Oを core モジュール、畳み込みフィルタを filter モジュールに実装することにします。使い方としては以下のようにフィルタ適用の処理をコールバック関数内に書くことになります。new は外に出てきません。

* Sandbox Pattern

CV コンストラクタの中身を見る前に、まずはモジュールの追加方法を見てみます。各モジュールを実装する関数は現在のインスタンスである self を引数として受け取ります(名前はなんでもいい、YUI 3だとYという名前に統一されている)。この self をいちいち付けるのは面倒かもしれませんが、Pythonにおける self と同じような感じで扱えばいいかと。モジュール内で浮気者の this を相手にしなくていいというメリットは大きいです。

最後に CV コンストラクタの中身を見てみます。

サンドボックスパターンで書いた画像処理のデモです。Firefox3.6, Safari5.0, Chrome10.0 以降で動作確認しています。Operaだと画素値の境界チェックが不十分らしく結果が壊れてしまいます。ロジックで判定を増やせば直るとは思いますが、相当遅くなりそう。。


HTML5 Image Processing (Convolution Filter)

jsdo.it への投稿: Convolution Filter - jsdo.it - Share JavaScript, HTML5 and CSS

フィルタカーネルは3*3のサイズであれば WebWorkers を使う必要はないですが、カーネルサイズあるいは対象画像が大きい場合は使った方が良さそうです。周波数解析や特徴量抽出などを行う時は必須になると思います。

実はこの畳み込みフィルタのデモですが、2009年にCanvasの勉強のために書いたものをサンドボックスパターンで書き直したものになります (参照: HTML5でConvolutionFilter) 。当時はActionScript3.0に近いインタフェースになるように実装することを心掛けていましたが(クラスの真似事)、今はそういう考え方をしなくなりました。同じECMAScriptを親に持つ2つの言語ですが、今では文化がかなり異なってきているので、これからは"JavaScriptらしさ"を大切にしたいと思います。

また、2, 3年前にDouglas Crockford氏がウチのオフィスに来てJavaSciprtのレクチャーをしてくださったことがあります。セキュリティなども含めてJavaScriptの再教育が必要だ、と。確かにjQueryなどのライブラリを使ってAPIをただペタペタ貼ってるだけだと知識は深まらないですね。僕もJavaScriptを丁寧に勉強しなおす必要があると感じました。

* 関連記事
HTML5でSymmetric Nearest Neighbor

あわせて読む:

Pocket

 

Tags: ,

Comments

No comments so far.

  • Leave a Reply
     
    Your gravatar
    Your Name