2012年1月27日金曜日

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)

このエントリーをはてなブックマークに追加

2012年1月25日水曜日

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

このエントリーをはてなブックマークに追加

2012年1月24日火曜日

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

このエントリーをはてなブックマークに追加