Mac OS Xにnode.jsなどをインストール

パッケージ管理システム

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)

ツイート

Nylon iframe

Nylon iframeとは

昨日の日記に続いてXDMの話です．Nylonの仕組みを拡張して，iframeを超えてメッセージセンディングを行うモジュールを開発しました．プログラムはgithubで公開しています．

Nylon iframeの使い方

まずは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システム開発が楽になります．

ツイート

XDMの基礎知識

XDM - Cross Document Messaging -

AJAXでは，セキュリティの都合により，そのWebページが格納されているサーバとしか通信を行えませんでした．これに対してJSONPを使って回避することも可能ですが，JSONPはscriptタグによるJavaScriptのロードそのものであり，トリッキーなコードになることは否定できません（jQueryを使うことで回避できますが，ここでは置いておきます）．そんな時に使われるのが，XDMです．

XDMとは，大雑把にいってしまうと，iframeを作う技術です．そうです．frameは抹殺されたのですが，iframeは残っています．それで，iframeの特性として「表示上は同一ページだが，セキュリティ上の扱いは親フレームとは別に扱う」ことになっています．すなわち，親フレームとは異なるサーバに置いてあったとしても，子フレームは自身が格納されているサーバとは通信を行えることになります．偉そうに言ってますが，ここまでは昔から可能でした．

昔と違うのは，親フレームと子フレームの間の通信が（別サーバであっても）可能になったことです．ただし，悪意のあるページからiframeで呼び出されて好き勝手されては困るので，通信相手のサーバ情報を取得して，正規の通信であることを確認可能となっています．

XDMによる送信（親フレーム側）

フレーム間の通信には前回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の場合）．

子フレーム側の記述

一方，子フレーム側でデータを受け取るには，addEventListenerを使います．ここでは，親フレームから送信された内容を，そのまま返信する例を使って説明します．

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や送信元サーバのチェック部分を書き換えてください．いずれも，そのファイルが格納されているサーバではなく，通信相手のサーバを記述します．

ツイート