hirax.net::Keywords::「Javascript」のブログ

■IronRubyとJavaScriptでMathematicaフロントエンドを書いてみる（修正してみる）　

　以前、IronRubyでMathematicaのフロントエンドを作ってみました。以前作成したコード(JavaScript部分)にバグがあったこともあり、今日は少し手直しをしてみました(Mathematica Playerでも動作するコードになっていますが、Mathematicaのライセンス上、PlayerでないMathematicaに付属するKernelとともに使うことを前提にしています)。今日書いたコード・ファイル類は、ここに置いておきます(mathnode.rbの6行目には、あなたの環境のMathematicaKernel.exeパスを記述してください)。また、（ファイルに添付してあるリンク先から）Wolfram.NETLink.dll　をダウンロードし、スクリプトと同じフォルダに入れておく必要があります。

　今日修正した部分は、「処理する数式をエンコードするJavaScriptコード(encodeURIComponent関数) を書き忘れていたこと」「WEBページのカスタマイズをしやすいように、RubyコードとHTMLコードを分離したこと」「（前述対応およびスレッドが１つしかないことによるデッド・ロックを防止するように）Webrickのコードを書き変えたこと」になります。ちなみに、前回作成したコードだと、処理する数式をきちんとエンコードしていないため、演算子などの処理に誤りが生じ、たとえば、3+2を解かせると、（恐ろしいことに）6という答えが返ってきてしまいます。

　また、今日作成したHTMLコード（index.html）の冒頭部分には、スタイルシート(css/hatena/hatena_ryukyu-green/hatena_ryukyu-green.css)読み込みの記述がありますが、これは、はてなの（GPLライセンスにもとづいている）スタイルシートを使うことができるようにしてあるためです。ですから、それらのスタイルシートをダウンロードしてない場合には、その部分をコメントアウトしておいて下さい。

　このことを逆に言えば、（こんな風に）CSSとJavaScriptを使って自分の好きなようにカスタマイズできるMathematicaフロントエンドを作ることができる、ということになります。JavaScriptとCSS、そして、Mathematica（とRuby）を使い、自分好みのデザインや（外部サービスと連携させるような）各種機能を備えた数式処理環境を作成してみるのも、面白いかもしれません。

■続　IronRubyと JavaScriptでMathematicaフロントエンドを書いてみる（修正してみる）　

　IronRubyと JavaScriptでMathematicaフロントエンドを書いてみる（修正してみる）で書いたコードをさらに使いやすくしてみることにします。といっても、私が書いたコードの「使いにくい」部分を、もう少しまともに「使いやすくする」というわけです。

　自分で使ってみて、一番最初に「使いにくい」と感じた部分は、ボタンを押さない処理が行われない、というところです。そこで、昨日のコードに付属する"index.html"中の＜input type="text"＞の部分を、

＜input type="text" name="q" id='q' size=100 onChange="calc()"＞

というようにしてみます。こうすると、テキスト入力部でEnterキーを押したときにも演算処理がされることになります。つまり、普通にMathematicaのフロントエンドを使うような感覚で数式処理をすることができるようになるわけです。

　プリポストプログラムを作るのは、自分の書いたコードが「見た目」や「動き」に直接反映されるので、わかりやすく楽しいものです。…というわけで、（私と違い）JavaScriptを使い慣れている人、あるいは、（私と同じく）JavaScriptを使い慣れていない人でも、こんな具合で、色々いじってみると楽しいかもしれません。そして、斬新なフロントエンド環境を作ったりしたならば、その楽しさをおすそ分けして頂ければ幸いです。

■JavaScript/HTML5で画像フィルタリングをしてみる　

　「「HTML5のcanvasで作る画像フィルター」は自分ならこう書く」を参考して、「JavaScript/HTML5で画像フィルタリングをしてみる」ページを作ってみました。まずは、「JavaScript/HTML5で画像フィルタリングをしてみる」で処理された画像を眺め、そして、その処理に用いられたカーネルやパラメータを自分で変えてみて、さらに処理を行ってみると面白いかもしれません。あるいは、自分の好きな画像ファイルを選び、その画像ファイルに対して処理を行ってみても面白いかもしれません。

　作ってみたのは、任意の画像を（Scaleで”割った”）Kernelで畳み込み、さらにOffsetを足す、という処理をJavaScript/HTML5を使うことで、ブラウザ上のみで行うものになります。空間フィルタリングのカーネル（Kernel）は5×5のサイズです。また、Kernel・Scale・Offsetいずれも整数入力で、Offsetの値域は0～255の範囲になります。なお、Kernelの各数値間は”半角スペース１個”で区切って入力を行います。

　さまざまな空間フィルタがありますが、それらを知らない方のために、各種フィルタをプリセットとして持たせてみるようにも、いずれしてみようかと思います。とりあえず今は、”エンボス調”の処理を行うカーネルをデフォルト値にしてあります。5×5くらいのカーネルであれば、処理時間も気にならなそうですね。

■JavaScriptで並列処理を実現するWeb WorkersでPhotoshop風ヒストグラムを作ろう　

　JavaScriptで並列処理を実現するWeb WorkersでPhotoshop風ヒストグラムを作ろう。

JavaScriptで並列処理を実現する「Web Workers」。前回はWeb Workersの基本的な使い方を学び、バイナリデータを解析するプログラムを作りました。今回は、Photoshopのヒストグラムのように、 RGB（赤、緑、青）の輝度のピクセル数を調べる画像解析プログラムを作りましょう。画像処理は時間がかかることが多いので、Web Workersを利用するにはもってこいです。

■三次元のスケッチを簡単に描く"Sketch"　

三次元のスケッチを簡単に描くことができるChrome Experiments "Sketch"。マウスで物体を描いて、スペースキーを押しつつマウスで物体を回して…さらに描いていくと、三次元のスケッチが完成する、という仕組み。