MeSH日記

2012年6月15日金曜日

JSXの関数あれこれ

関数の定義方法

素のJavaScriptでは，関数を定義する方法が4つありました．それぞれ使いどころが異なるのですが，細かい説明は省略します．以下，2つのパラメータを受け取り，それらの積を返す関数を考えます．

Function foo( x, y ) { return x * y; }
function bar( x, y ) { return x * y; }
baz = function( x, y ) { return x * y; };
qux = new Function( "x", "y", "return x * y;" );

一方，JSXでは以下の方法で関数を定義できます．JavaScriptではクラスの概念があやふやですが，JSXではクラスメソッドとインスタンスメソッドと単なるメソッドに区別されます．以下の中では，1がインスタンスメソッド（インスタンスを作成して「インスタンス名.メソッド名」で呼び出す）で2がクラスメソッド（「クラス名.メソッド名」で呼び出す）です．3〜5が単なるメソッド（メソッド名で呼び出す）です．単なるメソッドは変数に代入する形になるので，変数のスコープ外からは使用できません．また，「->」の表記方法は後になって追加されたので，初期にJSXをセットアップした人はエラーとなってしまいます．その場合はJSXを更新してみてください．

function foo( x: number, y: number ) : number { return x * y }
static function bar( x: number, y: number ) : number { return x * y }
var baz = function( x: number, y: number ) : number { return x * y; };
var qux = ( x: number, y: number ): number -> { return x * y; };
var quux = ( x: number, y: number ): number -> x * y;

関数を関数に渡す

使う機会は限定されますが，JavaScript同様，関数に関数を渡すことが必要な場面があります．例を挙げると，GUIアプリや非同期処理などでコールバック関数を指定する時です．関数を渡す際には，上記3〜5のように一旦変数に代入することも，無名関数を直接記述することもできます．

まずは関数を受け取る側の記述例です．やっていることは単純に，パラメータとして関数と2個の数値を受け取り，受け取った関数にその数値を渡して実行し，実行結果を表示するものです．

次に，上記メソッドに関数を渡して実行する例を示します．上記メソッドはクラスメソッドなのでクラス名が必要です．今回は_Mainクラスに記述されているものとします．

今回は関数の渡し方について記述しました．githubにソースコードを置いておきましたのでご利用ください．

func.jsx

最後になりますが，こちらのページにはお世話になりました．ありがとうございました．

JSX の進化速度が半端ない | ぐるぐる～

2012年6月8日金曜日

JSXによるマウスでお絵描き

ようやくソースコードの整理が終わったので，恥ずかしながら公開します．マウスでお絵描きするサンプルプログラムです．ペンの色や太さを変更する機能や，保存機能など全く実装していません．あくまで，マウスの座標を取得したり，Canvasを使うサンプルとして御覧ください．

pen.html

pen.jsx

利用方法ですが，以下のようにJSXファイルをコンパイル（？）してください．

jsx --release --output pen.jsx.js pen.jsx

その後，pen.htmlとpen.jsxjsを同じディレクトリに置いてWebブラウザで開いてください．コンパイルされた後は.jsxファイルやweb.jsxは不要です．当方で試した際には「file://〜」の状態でも動作しました．

デモ

以下の四角の中でマウスをドラッグしてみてください．黒い点が描画されます．一部，四角の領域の位置調整の部分でコンパイルされたjsファイルに変更を加えています．どうしてもこの部分をJSXで記述することができませんでした．未熟です，はい．領域内の座標の取得方法を覚えたので，更新しました．(2012/6/21)

＜注意！＞Firefoxで動作しなくなっています．2012/6/21に加えた変更によるものです．具体的には，マウスの座標を取得するために，MouseEventのインスタンスのoffsetXとoffsetYプロパティにより値を取得していました．しかし，Firefoxにはこれらのプロパティが存在しないため動作しません．普段はGoogle Chromeを使って作業しているため，チェック漏れがあったことをお詫び申し上げます．（2012/6/29）

その後，FirefoxにはlayerXとlayerYプロパティがあることを調べました．ところが，web.jsにこれらのプロパティが存在しないことが分かり，あろうことかこれらを加えてgithubのJSXツリーにPull Requestを出しました．（若くないけど）若気の至りでした．layer[X,Y]はW3Cに承認されていないプロパティだったのです．

そのことを親切に教えてくださったFuji, Goroさんに感謝します．きっと，Pull Requestを見て「え？今さらこんなコト言ってくる人がいるぞ」という気持ちだったのではないでしょうか．冷静になってlayer[X,Y]が存在しない理由をきちんと考えていれば，こんな恥ずかしい思いはしなくても済んだのに・・・と思っていたら，即座にTwitter上で，マウス座標の取り方を解説しているページを授けていただきました．

そのページによると，やはりマウス座標の取得方法は混沌としているとのこと．これはものすごく役に立つと思って喜びながら日付を見ると，およそ3年前の記事．どれだけ遅れているんだ俺は．

気をとりなおして解説します．まず，マウスイベントからウィンド座標を取得します．これにはclient[X,Y]プロパティを使います．これだけではスクロールするとずれるので，ウィンドウ座標系内でのノードの座標をgetBoundingClientRect()メソッドによって取得し，引き算します．

具体的なマウス座標の取得方法は以下のとおりです．
var es = e as MouseEvent; // マウスイベントの取得
var ee = es.target as Element; // イベントの発生したノードの取得
var rect = ee.getBoundingClientRect(); // ノードのウィンドウ座標の取得
var x = es.clientX - rect.left; // マウスイベントのウィンドウ座標 - ノードのウィンドウ座標
var y = es.clientY - rect.top; // マウスイベントのウィンドウ座標 - ノードのウィンドウ座標
この記事が誰かの参考になることを祈ってます．

最後になりますが，こちらのページにはお世話になりました．ありがとうございました．

【閲覧注意】JSX で何か作ってみた。 | Big Sky

DOM level 3のマウスイベントにおけるカーソル位置の詳細 | 本の虫

追記

githubにソースコードを置いておきました（2012/6/14）

pen.html

pen.jsx

素のままのデモを実行したい場合はこちらをクリックしてください（2012/6/14）

~~マウスドラッグによる座標の取得方法を変更しました．（2012/6/21）~~

~~Firefoxでの不具合について記述しました．（2012/6/29）~~

マウスドラッグによる座標の取得方法を変更しました．（2012/6/30）

メモ：JSXの配列の扱い

JSXの基本的な文法

JSXはJavaに近い書式です．また，詳しくは知りませんがActionScriptにも近いようです．とは言え，新しい言語と出会った際にやってみる「配列に値を代入して，表示してみる」という簡単なプログラムを作ろうとしても，細かい文法の違いで苦労しました．と言うわけで配列に関する基本的な文法についてメモしておこうと思います．

配列の初期化

最初は，こんな簡単なことでも迷ってしまったので書いておきます．簡単なのは直接値を代入する場合で，以下のプログラムの2行目のように書きます．他の言語のように，「まずは配列を宣言して・・・」と考える場合は同5行目のように書きます．

配列の要素数

配列の要素数ですが，固定ではなく可変のようです．配列の要素数を得るには6, 7, 12行目のようにlengthを使います．配列に追加したい場合は10行目のようにpushメソッドが使えますし，配列同士を結合したい場合は15行目のようにconcatメソッドが使えます．

逆に，配列の要素を減らしたければpopメソッドやshiftメソッドがあります．

配列の内容表示とループ

すでに上のプログラムで用いているように，logメソッドで表示します．全要素の表示は31行目のように単純にtoStringメソッドを用いれば良いのですが，併せて配列の要素数分だけ繰り返すための書式も紹介しておきます．

上記のプログラムを全て一つのファイルにまとめて，以下のように実行できます．今回は仮にarray.jsxというファイル名をつけたものとします．ソースコードをgithubのこちらに置いておきます．

jsx --run array.jsx

だんだんと基本的な書式が分かってきましたが，まだまだ足りないところがあるので，続く予定です．今回はこの辺りで失礼します．

追記

空の配列の作成方法その3を追加しました（2012/6/14）

githubにファイルを置き，リンクを追加しました（2012/6/14）

2012年6月7日木曜日

メモ：Macのターミナルの設定

.bashrcの話

このブログを読む方はすでに承知のことと思いますが，Mac OS Xの中枢部はBSD Unixの系統です．なので，ターミナルをひらくと見慣れた画面が開き，いつものコマンドを使うことができます．その割に，ホームディレクトリに.bashrcや.bash_profileが見当たりません．検索してみると，.bash_profileを作ってそこから.bashrcを読み込ませれば良いとのことなので，さっそく指示に従ってみます．

まずは.bash_profileです．

続いて.bashrcです．かなり偏った内容なので，各自好きな設定をどうぞ．

.bashrcの2〜4行目は，Java言語のソースコードの文字コードをUTF-8として指定します．5行目はJSXのための設定です．

以下のブログ・記事を参考にしました．ありがとうございました．

■[Mac]Mac - bash入門
UNIX Settings...

追記

javadocのaliasにcharsetの設定を加えました（2012/6/14）

2012年6月6日水曜日

JSXでDFT

JSXという言語

JSXという言語が彗星のごとく現れました．この言語を使ってプログラムを書くと，ギンギンに最適化されたJavaScriptに変換できるということで興味を持ちました．ドキュメントを読んでいくと，文法がJavaに近いこととJava並に型チェックにうるさいことなどが分かりました．

これまでMeSHやNylonの開発にJavaScriptを使ってきたのですが，thisが何を指すか不明確であることや，変数のチェックがないことによるエラーに悩まされてきました．そこに現れたのがJSXです．言語仕様はJavaのように窮屈ですが，今後ライブラリやサービスを提供していくにあたり，妙なエラーに悩まされたくないので，まずは試してみることにします．

DFTのソースコード

DFTは，言わずと知れた離散フーリエ変換（Discrete Fourier Transform）です．周波数分析の強い味方です．今回はC言語で書かれたDFTを移植してみます（※FFTではありません）．JSXのドキュメントがまだまだ整備されていないので，ちょとしたプログラムでも試行錯誤の連続でした．とりあえずソースをご覧ください．

ドキュメントの探し方が悪いのか，Math系（Math.PI，Math.sin，Math.cos）が見つかりませんでした．「文法がJavaに似ているので同じ書き方だろう」と信じて試したところ動いたのでほっとしてます．

文法的に面倒だと感じたのは，インスタンス変数やインスタンスメソッドの呼び出し時にthisが必須なことでした．まぁ特に大きな問題ではないですね．

困ったのが配列の初期化でした．Java言語でいう「int x[] = new int[10];」を書きたかったのですが，試行錯誤の上断念しました．仕方ないので宣言時に「var ar = [0];」として強引にarを整数の配列として認識させ，このままでは0が邪魔なので，コンストラクタで「this.ar.pop();」して空の配列としています．その内，ドキュメントが整備されると思います．ドキュメントが整備されたら，この書き方を笑ってください．

後は単純に配列とループです．詳しいアルゴリズムは巷の書籍やWebページを参照してください．ループと言えば，Rubyのようなイテレータが楽で良いですね．

DFTの実行結果

実行結果です．今回の例では，func_yによって定められている関数を分析しています．具体的には 3sin(x) + 7cos(3x)を分析しているので，1倍と3倍の周波数の数値がそれぞれ3と7になっているので，きちんと動作していることが分かります．欲を言えばe-17とかが目立つので，printfが欲しいところです．

おわりに

今回はJSXの文法を確認するためにC言語で描かれたDFTを移植してみました．ものすごく恥ずかしいソースコードですが，JSXの文法確認のために公開します．

JSX自体はnode.js上で動作するのでグラフィック環境がありませんが，RhinoなどのJava VM上で動作するのなら，Javaのグラフィック機能を使ってみたいですね．それよりはWebブラウザ上で動作させるのが真っ当なので，今後試してみたいと思います．

今回参考にしたC言語のソースですが，自著であるこの本のものを使用しています．「三井田惇郎，須田宇宙，"数値計算方　第2版", 森北出版株式会社」．宣伝ではなく，参照元を明確にする意味で記しておきます．

最後になりますが，JSXの公開に感謝します．

追記

ソースコードをgithubのこちらに置いておきます（2012/6/14）

2012年2月13日月曜日

Audio Data APIのサンプル

JavaScriptでサウンド合成

HTML5のおかげでFlashが不要になると言われています．では，これまでFlashを使わなければならなかった用途に何があるでしょうか？グラフィックス描画，フォント，アニメーション，通信などがメジャーなところですが，それ以外にもサウンド出力があります．合成した波形を音として出力する機能は，特に欲しい機能でした．厳密には，Javaでも合成サウンドの出力は可能だったのですが，それだけのためにJavaを使う人は私以外にいないはずなので，Flashの独壇場と言えるでしょう．

ところが，HTML5の旗印のもと，様々な機能がJavaScriptから利用できる時代になりました．Firefoxに実装された，Audio Data APIもその一つです．Audio Data APIとは何かと言うと，合成した波形を音として出力するAPIです．と言う訳で，今回はAudio Data APIを利用して，簡単な合成音を鳴らしてみたいと思います．

Audio Data API入門

Audio Data APIは非常にシンプルなAPIです．音を扱うAPIとして，Webkit系に実装されているWeb Audio APIも存在して，一括りにされることが多いのですが，狙いが全く異なります．Web Audio APIは，音源位置を指定したり，FFTしたり，一定間隔でバッファに記録する機能を持つなど，様々な機能を持っています．よって，これら2つのAPIは，別物と捉えておいたほうがすっきりします．

ではAudio Data APIの使い方ですが，必要な手順は5つです．

1. Audioのインスタンス作成

2. 1で作成したオブジェクトにチャンネル数とサンプリングレートを設定

3. Float32Arrayのインスタンスを生成し，波形データを生成

4. 3で生成したオブジェクトを1で生成したオブジェクトと結びつける

5. 再生する

言葉にするとイメージが掴みづらい箇所もありますが，手順としてはシンプルです．それでは実際のコードで見てみましょう．

Audio Data APIのサンプル

Firefox限定ですが，実際に耳で確かめてください．以下のボタンをクリックすると，ボタンに書いてある周波数の音を再生します．上3つと下3つは，鳴らすためのパラメータ指定方法を2つ作成したので，そのチェック用です．上は周波数を基準周波数と基準からの相対値で指定します．下は周波数を直接指定します．詳しくはソースを読んでいただければ幸いです．

2012年2月3日金曜日

最近のツイートのまとめ 20120203

Twitterでつぶやいたことを後々探そうとしても出てこないことが多いので，このページにまとめておきます．内容はブログ用に編集しています．リツイートは元情報の方のお名前を付けておきます．リンク集＋αと思ってください．

JavaScriptでPhotoshopファイルを解析する「psd.js」

http://dothtml5.com/archives/20120201_psdjs.html

データを読み込んで利用することは，プログラム言語よりもデータ構造を知ることができるか否かにかかっています．とは言え，まさかJavaScriptでPhotoshopのデータを読み込めるようになるとは思っていませんでした．@RSS_hateb_Roy 様より．

Node.js 日本ユーザグループ

http://nodejs.jp/

node.jsのバージョンアップを受け，ドキュメントが最新開発版（v0.7.2）に対応したようです．関係者の方々，ありがとうございます．@meso 様より．

HyperZebra Preview Release

http://web.me.com/pgoo/Site/HyperZebra.html

MacOS6の頃にMac会を席巻していたカード型データベース（っぽい環境）HyperCardが蘇ります．当時としてはちょっとしたデータを整理したり，ちょっとしたアプリを作ったりと便利に使っていました．@openspc 様より．

CSS3で吹き出し付丸ボタン

http://coder.blog.uhuru.co.jp/css/css3-balloon-btn

タイトル通りですが，CSSを使って丸いボタン（画像付き）の作り方です．ボタンの内容をフキダシで表示できるのもグッドです．@chimiochimio 様より．

この完成度に震えが止まらない！Node.js史上最高のIDE、Cloud9をインストールしよう。

http://codedehitokoto.blogspot.com/2012/01/nodeidecloud9.html

node.jsの開発環境としてviを使ってきましたが，デバッグしづらいのが難点でした．その辺りを解消してくれるIDEです．

Mac OS X Lion(10.7)にCloud9 IDEをインストール

http://r.otsuya.co/post/11045590787/cloud9-ide

上記のCloud9に関連した補足です．タイトル通りですが，Mac OS X LionにCloud9をインストールする方法です．

Twitter Bootstrapが大幅バージョンアップ！して凄まじいことに・・・

http://www.ideaxidea.com/archives/2012/02/twitter_bootstrap_v2.html

Twitter社によるWebデザイン素材Bootstrapの新バージョン（v2.0）です．以前のバージョンも便利でしたが，さらに強力になりました．Github上のBootstrapは以下からどうぞ．

http://twitter.github.com/bootstrap/index.html

テスト問題作成ツール – QuizGenerator – クイズジェネレータ

http://quizgenerator.net/2012/01/ibooks_embed/

iBooks2では，これまでの「本」に相当する静的なコンテンツだけでなく，JavaScriptを用いた動的なコンテンツにも対応しています．動的なコンテンツの一環としてクイズ問題を埋め込むツールの紹介です．@realbasic2009 様より．

これは便利！コピペで使える実用的なCSSテクニックいろいろまとめ9つ

http://w3q.jp/t/1207

CSSの利便性が急激に向上しているまでは理解できるとして，どのように作れば良いのかになるとお手上げ気味です．

CSSのelement()関数

http://hail2u.net/blog/webdesign/element-css-function.html

任意の要素を画像として参照するelement()関数の紹介です．まだFirefoxにしか実装されていないようですが，確実に便利です．

iBooks AuthorでHTML5の電子書籍作ってみた

http://ascii.jp/elem/000/000/665/665232/

iBooks AuthorでiBooksコンテンツ内にウィジェットを仕込むためのハウツーです．その他，JavaScirptのプログラムの埋込みや，HTML5 audio要素の埋込み，Google Mapの埋め込みについても書かれています．まだ試していませんが，HTML5 video要素を埋め込むことができればe-Learning環境として活用できるので期待しています．