このブログを読む方はすでに承知のことと思いますが，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入門javadocのaliasにcharsetの設定を加えました（2012/6/14）
ツイート
JSXという言語が彗星のごとく現れました．この言語を使ってプログラムを書くと，ギンギンに最適化されたJavaScriptに変換できるということで興味を持ちました．ドキュメントを読んでいくと，文法がJavaに近いこととJava並に型チェックにうるさいことなどが分かりました．
これまでMeSHやNylonの開発にJavaScriptを使ってきたのですが，thisが何を指すか不明確であることや，変数のチェックがないことによるエラーに悩まされてきました．そこに現れたのがJSXです．言語仕様はJavaのように窮屈ですが，今後ライブラリやサービスを提供していくにあたり，妙なエラーに悩まされたくないので，まずは試してみることにします．
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のようなイテレータが楽で良いですね．
実行結果です．今回の例では，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）
ツイート
HTML5のおかげでFlashが不要になると言われています．では，これまでFlashを使わなければならなかった用途に何があるでしょうか？グラフィックス描画，フォント，アニメーション，通信などがメジャーなところですが，それ以外にもサウンド出力があります．合成した波形を音として出力する機能は，特に欲しい機能でした．厳密には，Javaでも合成サウンドの出力は可能だったのですが，それだけのためにJavaを使う人は私以外にいないはずなので，Flashの独壇場と言えるでしょう．
ところが，HTML5の旗印のもと，様々な機能がJavaScriptから利用できる時代になりました．Firefoxに実装された，Audio Data APIもその一つです．Audio Data APIとは何かと言うと，合成した波形を音として出力する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. 再生する
言葉にするとイメージが掴みづらい箇所もありますが，手順としてはシンプルです．それでは実際のコードで見てみましょう．
Firefox限定ですが，実際に耳で確かめてください．以下のボタンをクリックすると，ボタンに書いてある周波数の音を再生します．上3つと下3つは，鳴らすためのパラメータ指定方法を2つ作成したので，そのチェック用です．上は周波数を基準周波数と基準からの相対値で指定します．下は周波数を直接指定します．詳しくはソースを読んでいただければ幸いです．
ツイート
Twitterでつぶやいたことを後々探そうとしても出てこないことが多いので，このページにまとめておきます．内容はブログ用に編集しています．リツイートは元情報の方のお名前を付けておきます．リンク集＋αと思ってください．
http://dothtml5.com/archives/20120201_psdjs.html
データを読み込んで利用することは，プログラム言語よりもデータ構造を知ることができるか否かにかかっています．とは言え，まさかJavaScriptでPhotoshopのデータを読み込めるようになるとは思っていませんでした．@RSS_hateb_Roy 様より．
node.jsのバージョンアップを受け，ドキュメントが最新開発版（v0.7.2）に対応したようです．関係者の方々，ありがとうございます．@meso 様より．
http://web.me.com/pgoo/Site/HyperZebra.html
MacOS6の頃にMac会を席巻していたカード型データベース（っぽい環境）HyperCardが蘇ります．当時としてはちょっとしたデータを整理したり，ちょっとしたアプリを作ったりと便利に使っていました．@openspc 様より．
http://coder.blog.uhuru.co.jp/css/css3-balloon-btn
タイトル通りですが，CSSを使って丸いボタン（画像付き）の作り方です．ボタンの内容をフキダシで表示できるのもグッドです．@chimiochimio 様より．
http://codedehitokoto.blogspot.com/2012/01/nodeidecloud9.html
node.jsの開発環境としてviを使ってきましたが，デバッグしづらいのが難点でした．その辺りを解消してくれるIDEです．
http://r.otsuya.co/post/11045590787/cloud9-ide
上記のCloud9に関連した補足です．タイトル通りですが，Mac OS X LionにCloud9をインストールする方法です．
http://www.ideaxidea.com/archives/2012/02/twitter_bootstrap_v2.html
Twitter社によるWebデザイン素材Bootstrapの新バージョン（v2.0）です．以前のバージョンも便利でしたが，さらに強力になりました．Github上のBootstrapは以下からどうぞ．
http://twitter.github.com/bootstrap/index.htmlhttp://quizgenerator.net/2012/01/ibooks_embed/
iBooks2では，これまでの「本」に相当する静的なコンテンツだけでなく，JavaScriptを用いた動的なコンテンツにも対応しています．動的なコンテンツの一環としてクイズ問題を埋め込むツールの紹介です．@realbasic2009 様より．
CSSの利便性が急激に向上しているまでは理解できるとして，どのように作れば良いのかになるとお手上げ気味です．
http://hail2u.net/blog/webdesign/element-css-function.html
任意の要素を画像として参照するelement()関数の紹介です．まだFirefoxにしか実装されていないようですが，確実に便利です．
http://ascii.jp/elem/000/000/665/665232/
iBooks AuthorでiBooksコンテンツ内にウィジェットを仕込むためのハウツーです．その他，JavaScirptのプログラムの埋込みや，HTML5 audio要素の埋込み，Google Mapの埋め込みについても書かれています．まだ試していませんが，HTML5 video要素を埋め込むことができればe-Learning環境として活用できるので期待しています．
JavaScriptのネイティブオブジェクトを拡張するライブラリです．ソースコードを見ながら拡張して行ったら「Ruby並に便利になるんじゃね？」と期待が膨らみます．
http://www.red-team-design.com/css3-breadcrumbs
パンくずリストを作成するためのCSSです．以前にも他のサイトで見た気がしますが，メモが残っていないので今度こそ残しておきます．@skuare 様より．
Scientific Linuxの話ですが，GUI無しでVMware Toolsをインストールする方法と時刻合わせの方法です．
http://www.moongift.jp/2012/01/20120120-2/
サーバを介さずにブラウザ側のみでファイルを生成（？）してダウンロードするライブラリです．
http://crocro.com/html5/jscam/wiki.cgi
タイトル通りですが，もはやJavaScriptに限界は無い感じです．
http://a-newcomer.heroku.com/29
意外と知らないけど，知っていると便利です．
http://d.hatena.ne.jp/takuya_1st/20120116/1326735955
ZFS+rsyncサーバ+WebDavで，クライアントにこれを入れれば十分かな？そのうち試してみます．
Windows版 : http://www.srware.net/en/software_srware_iron_download.php
Linux版 : http://www.srware.net/forum/viewtopic.php?f=18&t=2934
Mac版 : http://www.srware.net/forum/viewtopic.php?f=18&t=2962
Google Chromeの元となっているChromiumをベースに軽量化されたブラウザIronです．ChromeからGoogle社への情報提供機能やアップデートチェック，PDF Viewerを取り除いたと思えばだいたい合っています．20日間ほど使用したところ，特に問題は見られませんでした．
http://d.hatena.ne.jp/scalar/20120112/1326395054
MeSHと同じようなことをやっているけど，JavaScriptに慣れた人が作るといろいろ便利という例．@sugyan 様より．
http://weble.org/2011/08/01/twitter-recent-tweet
すみません，twitter APIを読み解く時間がありませんでした．そのうち試してみます． @soraiy 様より．
最近のCSSは複雑になってしまったので手打ちできないです．素直にジェネレータを使います．
http://d.hatena.ne.jp/takuya_1st/20120106/1325835641
いつも分かりやすい解説をありがとうございます．と3回感謝しても足りないレベルです．
http://www.cman.jp/BrowserCapture/
様々なブラウザや解像度で，自分のサイトのスクリーンショットを表示してくれるサービスです．
http://d.hatena.ne.jp/takuya_1st/20111230/1325272152
環境のちょっとした差に敏感な人はどうぞ．
ツイート
Macでは，macportsと言うパッケージ管理システムが有名だったのですが，root権限が必要などの理由により，最近はhomebrewが勢力を伸ばしてきました．そこで，homebrewを使用してnode.js関係のインストールを行う方法を示します．せっかくなので，インストールログをつけておきます．なお，ホスト名は「sahara」，ユーザ名は「suda」です．背景が濃いグレーの箇所が実際に入力する行です．
本日インストールするものは，
homebrew
node.js
mongoDB
npm
です．
まずはXcodeをインストールします．Lionを使用している人はMac App Storeからどうぞ．LeopardやSnowLeopardの人は付属CD-ROMに入っているようです．なお，Javaも必要なようなのでインストールしておいてください．
それでは，homebrewをインストールします．以下の1行目の$以降を入力してください．途中でenterキーの押下と管理者のパスワードの入力を求められるので指示に従ってください．
以上でhomebrewのインストールが完了です．ちなみに，コマンド名は「brew」です．さっそくnode.jsをインストールします．
ぼーっと待っているだけでインストール完了です．続いてbrewをアップデートして，mongoDBをインストールします．不要でしたらupdateのみ実行して，mongoDBのインストールは飛ばしてください．
起動方法や自動起動設定は上記ログに書かれているので，必要な方を実行してください．続いてnpmをインストールします．昔はhomebrewでインストールできたようですが，方針の違いから，現在はインストールできなくなっているので，以下に示すようにcurlとshでインストールします．
後はnpmを使用して必要なパッケージをインストールして下さい．以下，「Express」「Socket.IO」「EJS」「Mongoose」をインストールします．
npmのモジュールツリーが化けていますが，原因不明です．それでは，Macでnode.jsを楽しんでください．
ブログのデザイン変更と，コマンドを打ち込む箇所を明示しました．(2011/2/2)
ツイート
昨日の日記に続いてXDMの話です．Nylonの仕組みを拡張して，iframeを超えてメッセージセンディングを行うモジュールを開発しました．プログラムはgithubで公開しています．
まずはNylonとnylon.iframe_parentを初期化します．idがdestFrameのiframeに，localhost配下のhtmlを読み込んでいるものとします．その場合の初期化は以下のように行います（変数名は手抜きです）．通常，onloadイベント内に記述してください．
同様に子フレーム側でもnylon.iframe_childの初期化を行い，onconnectメソッドで接続時の関数を定義します．親フレームから接続されると，自動的にonconnectメソッドが呼び出されるので，その中でイベント受信時のコードを記述します．
このとき，フレーム間の通信は以下のように行います．
この通信内容は，お互いのフレームだけでなく，タグ"test"を受信する他のNylonモジュールにも伝達されます．このような作りになっているので，iframeの有無に寄らず動作するモジュールを開発することが可能です．
Nylon iframeによる，親子フレーム間で通信を行うサンプルを以下に示します．まずは親フレームです．好きな名前で保存してください．localhost以外のサーバに置く場合は17行目を変えてください．なお，通信相手のサーバのチェックは，17行目の第2パラメータに基づいて自動的に行われます．
続いて子フレームです．ファイル名はframe2.htmlで保存してください．ファイル名を変えたい場合は，親フレーム側の12行目を変更してください．さて，親フレーム側と同様，通信相手のチェックは自動的に行われます．Nylon iframeでは始めに接続してきたフレームのサーバ情報を記録しておき，そのサーバ以外からの通信であれば自動的に無視するようにしています．
これにより，子フレーム側はどのWebページから呼び出されても動作します．これは部品化（ガジェット化）を容易にするための仕様です．そのため，onconnectメソッドが存在し，少々トリッキーではありますが，利便性とセキュリティを確保しています．
Nylon iframeにより，iframe間の通信が容易になりました．しかも，何らかの機能がiframe上にあっても親フレームにあっても利用できます．これにより，機能のモジュール化が進み，最終的にモジュールを組み合わせたWebシステム開発が楽になります．
ツイート
AJAXでは，セキュリティの都合により，そのWebページが格納されているサーバとしか通信を行えませんでした．これに対してJSONPを使って回避することも可能ですが，JSONPはscriptタグによるJavaScriptのロードそのものであり，トリッキーなコードになることは否定できません（jQueryを使うことで回避できますが，ここでは置いておきます）．そんな時に使われるのが，XDMです．
XDMとは，大雑把にいってしまうと，iframeを作う技術です．そうです．frameは抹殺されたのですが，iframeは残っています．それで，iframeの特性として「表示上は同一ページだが，セキュリティ上の扱いは親フレームとは別に扱う」ことになっています．すなわち，親フレームとは異なるサーバに置いてあったとしても，子フレームは自身が格納されているサーバとは通信を行えることになります．偉そうに言ってますが，ここまでは昔から可能でした．
昔と違うのは，親フレームと子フレームの間の通信が（別サーバであっても）可能になったことです．ただし，悪意のあるページからiframeで呼び出されて好き勝手されては困るので，通信相手のサーバ情報を取得して，正規の通信であることを確認可能となっています．
フレーム間の通信には前回WebWorkersでも使用した「postMessage」と「addEventListener」を使います．レシーバの指定が少々異なるので，例を使って説明します．まずは，localhostにWebサーバがあり，以下のように，送信ボタン，iframe，受信データの表示領域が定義されているとします．
このとき，親フレームから子フレームへの送信は以下のように行います．
順に説明すると，1行目はボタン要素の取得，2行目はiframe要素.contentWindowによって，通常のページで言うwindowに相当するオブジェクトを取得しています．
3行目からは，ボタンクリックのイベント定義です．4行目でdataという名前のハッシュを作り，helloという文字列と現在時刻を収めます．
5行目が子フレームへの送信です．第1パラメータが送信内容で，先ほど作成したdataをJSON化したものです．今のところ，文字列でないと送信できないので，その対策です．そして，第2パラメータが子フレームが格納されているサーバを表します．つまり，プログラム作成者が子フレームのサーバをしっかりと把握している必要があります（プログラムで動的にサーバを取得する場合はこの限りではありませんが，どのような状況で動的に取得するのかは不明です）．もし子フレームのサーバ指定を間違えると，例えば間違えて「http://hoge.com」と指定すると「Unable to post message to http://hoge.com. Recipient has origin http://hoge.com.」というエラーがコンソールに表示されます（Google Chromeの場合）．
1行目はXDMにより，メッセージを受け取った際のイベント定義です．2行目は，通信相手のサーバ情報の確認です．この例で分かるように，event.originで通信相手のサーバ情報を確認できるので，セキュリティ面からきちんと確認しましょう．
3行目はデータの返信です．親フレームの要素を取得する方法が分からなかったため，event.source（送信してきた要素）に対してpostMessageしています．パラメータは先程と一緒です．あ，event.dataで送られてきた内容を取得できるので，取り出して加工したい場合はJSON.parse( event.data )などとして使ってください．
最後に，親フレーム側での受信方法です．やり方は子フレームの場合と全く一緒です．ここでは，送られてきた内容をパースして，表示領域に貼り付ける所まで一緒に書いておきます．
1, 2行目は子フレームと全く一緒の記述方法ですが，メッセージを受け取った際のイベント定義と，送信元のサーバ情報のチェックです．3行目は送られてきたデータをパースして変数dataに格納します．4行目，5行目は送信元サーバ情報と送信内容を変数outに収めます．そして，6行目で表示エリアにoutの内容を貼り付けます．
今回のサンプルコードを示します．まずは親フレームです．好きな名前で保存してください．localhost以外のサーバに置く場合は17行目と21行目を変更してください．
続いて子フレームです．ファイル名はframe.htmlで保存してください．ファイル名を変えたい場合は，親フレーム側の9行目を変更してください．localhost以外のサーバに置く場合は11行目を変更してください．
XDMにより，親フレームと子フレームの間の通信が（それなりに）簡単に記述できるようになりました．実際に使用する際には子フレーム側を別サーバに置くことがあると思います．その場合はpostMessageや送信元サーバのチェック部分を書き換えてください．いずれも，そのファイルが格納されているサーバではなく，通信相手のサーバを記述します．
ツイート
