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

ツイート

Nylon WebWorkersについて

WebWorkers

HTML5で導入されたWebWorkersは，JavaScriptで書かれたプログラムをバックグラウンドで動作させるAPIです．これがまたシンプルなAPIで，(1)Worker（バックグラウンドで動作するプログラム）を起動する，(2)Workerにメッセージを送る（postMessageメソッド），(3)Workerからメッセージが届いた際に実行する処理を記述する（onmessageやaddEventListener）のみでWorkerを制御します．メッセージがほとんど行き交わないような単純な処理であれば混乱は少ないのですが，メッセージが行き交うような処理になると，届いたメッセージの内容を元に処理を分岐させるなどの記述が多くなり，プログラム全体の見通しが悪くなります．

この問題点に対応したフレームワークとして，すでにAlexServiceが公開されています．（リリース記事：HTML5 Web Workersを超簡単に使えるようにするAlexService0.5を公開）一方，我々の開発しているNylonをWebWorkersに対応させたモジュールが「Nylon WebWorkers」です．

Nylon WebWorkers

Nylon WebWorkersはメイン側のモジュール「nylon.webworkers.js」とバックグラウンド側のモジュール「nylon.webworkers.client.js」から構成されたシンプルなモジュールです．これらのモジュールを使うと，Nylonの流儀に従って「キーワードに対する処理の記述」と「キーワード付きのメッセージ送信」のみによるモジュール間通信が可能になります．もちろん，nylon.coe.jsを併用した上でキーワードとして「server」を指定すればNylonサーバまでメッセージが届きますし，「broadcast」を指定すればNylonサーバを経由して，同時に接続されているWebブラウザ上のNylonモジュールまでメッセージが届きます．Nylonを通じてWorkerと通信するために必要なことはWorkerとして動作させるJSファイルを指定するだけです．以下に例を示します．

この記述だけで，worker.jsが読み込まれてバックグラウンドで実行され，キーワードベースの通信が可能になります．後はnylon.client.createで作成したオブジェクトにonメソッドでキーワードに対する処理を記述したり，emitメソッドでメッセージを送るのみです．

それでは，実際のプログラムを見てみましょう．今回のプログラムは，こちらのページに掲載されている，1から指定された数値までの和を計算するプログラムを改造したものです．

用意するファイルは以下のとおりです
worker_test.html・・・HTMLファイル
nylon.client.js・・・Nylon本体
nylon.webworkers.js・・・WebWorkersとやりとりするクラス
worker.js・・・わざわざWebWorkersを使うまでもありませんが，合計値を計算するプログラム
nylon.webworkers.client.js・・・ワーカ側のライブラリ（クラス化とか面倒なことはしていません）

以下に示すファイルはworker_test.htmlです．9〜11行目は「worker_set」を受け取った際の処理で，無事にWorkerと接続された場合に画面上に「connect」と表示しています．12〜14行目は「result」により計算結果を受け取り，アラートを表示します．18〜22行目はボタンがクリックされた際に「worker」と共に計算範囲をWorkerに渡します．16行目は，「worker.js」を読み込む処理です

続いて，以下に示すファイルは，Workerとして動作する「worker.js」です．4〜9行目はキーワード「worker」が届いた場合の処理です．具体的には入力された数値までの数値を足して，その結果を「result」で送っています．

11行目は「worker_set」を送っています．必須ではありませんが，通信できる状態になったことをメイン側に示します．

13行目はWorkerが受け取るキーワードをメイン側Nylonに送ってキーワード登録を行います．この処理が無いとWorker側にメッセージが届かないので重要なのですが，onメソッドに含める方がスマートなので近い内に削ります．（たぶん）

このように，onとemitのみでメイン側とWorker側の通信を記述できるので，通信が煩雑になっても混乱しなくてすみますし，通信するモジュールを限定しないので，様々なモジュールと組み合わせることが可能となります．今のところ，MeSHで使用するシミュレータ教材はSilverlight，Java，Flashを想定していますが，将来的にCPU速度が向上しJavaScriptでシミュレータ教材を記述できるようになった際には，Nylon WebWorkersを利用していこうと考えています．

動かし方

HTMLファイルをWebブラウザに放り込むと，URLの先頭が「file://」となります．この状態ではWebWorkersは使えません．必ずHTTP経由でアクセスしてください．今回の例ではすべての通信はクライアント内で完結しているのでNylonサーバは不要です．

HTTP経由で読み込むと，即座に画面上の「not connect」が「connect」に変わるはずです．この状態で入力欄に数値を入力してください．10や100ではすぐに結果が表示されてしまうので，もっと大きな数値が良いです．具体的な数値はCPUと相談して決めた上，お試しください． ツイート

Nylonサーバについて

Nylonサーバの役割

Nylonサーバは，あるWebブラウザから送られてきた通信内容を解析して，キーワードに「broadcast」が含まれていた場合には他のWebブラウザに転送する機能と，その他特定のキーワードに対応した処理を行う機能を持つものです．

理論上，言語は問いませんが，Socket.IOが便利なのでJavaScriptで記述するのが自然だと思います．実際，クライアント側の通信モジュール「nylon.coe.js」がSocket.ioを前提として組んでいます．

Nylonサーバのソースコード

以下にNylonサーバのソースコードを示します．できるだけコメントを付けているので，コメントを追いかけていけばなんとなく動作がわかると思います．21行目から31行目がメインの処理（＝キーワードの解析・通信内容の転送など）となります．

動かし方

必要なものは，基本的にnode.jsとSocket.IOです．執筆時に使用したバージョンは，node.js 0.4.12とSocket.IO 0.8.5です．他にもexpressやejs（使っていますが，他のテンプレートエンジンでも構いません）も使用しています．

node.jsをインストールしたらディレクトリを作成して，上記プログラム（仮にnylon_server.js）をそのディレクトリに置きます．そのディレクトリの下にpublicディレクトリを作成し，前回紹介したプログラムを置いてください．ディレクトリの作成はexpressの機能を使ってもかまいません．

これで準備は整いました．後はWebブラウザからアクセスするだけで，リアルタイムチャットが動作します．複数のブラウザからアクセスして，動作を体験していただければ幸いです．なお，過去の書き込みの保存などは一切行なっておりません．リロードすると全書き込みがリセットされます．過去の書き込みの保存などを行いたい場合には，上記プログラムの29行目などに処理を追加することで対応可能です．追加するプログラムの例や，追加分のモジュール化などについては，そのうち紹介する予定です．

ツイート

Nylon入門

Nylonによるイベント送受信の流れ

前回はNylonの書き方について簡単に紹介しました．今回は，Webブラウザ間のやりとりについて，実際のコードを踏まえて説明したいと思います．下図のように，nylonサーバに複数のクライアント（Webブラウザ）が接続している状態です．ここで，obj_aは任意のオブジェクトです．COeはnylonサーバと通信するnylonモジュールで，正式なファイル名はnylon.coe.jsです．

Nylonのモジュールは，キーワードに従ってイベントを待つことができます．COeは，「broadcast」と「server」と言うキーワードで待ち受けをして，イベントの内容をnylonサーバに送ります．nylonサーバではキーワードを判別し，「broadcast」だった場合には，送られてきたイベントの内容を他のWebブラウザに送ります．「server」だった場合にはnylonサーバで何らかの処理を行います．続いて，各WebブラウザのCOeは送られてきたイベントを受け取り，ブラウザ内の他のオブジェクトにemitします．

例：リアルタイムチャット

リアルタイムチャットを例にとって説明します．リアルタイムチャットのオブジェクトがobj_aだと思ってください．obj_aはキーワード「append」に反応して書き込み欄に新たな内容を追加し，キーワード「clear」に反応して書き込み欄を消去するものとします．あるブラウザで発言があった場合，obj_aから「broadcast」と「append」という2つのキーワードを持ったイベントを送信します．擬似コードは以下のようになります．

イベントの登録

イベントの送信

実際のコード

リアルタイムチャットの実際のコードは以下のようになります．

6行目から8行目は，必要となるライブラリの読み込みです．サーバとの通信にはSocket.ioを使用しています．nylonサーバのプログラムは後日説明予定です．

22行目から32行目はイベントの登録です．先に説明したとおり，「append」と「clear」と言う2つのキーワードについて，その動作を登録しています

35行目から49行目はイベントの送信処理です．送信ボタンが押されたら名前と発言欄の内容を入れた，キーワード「append|broadcast」のイベントをemit（送信）しつつ，書き込み欄に追加します．

52行目から54行目は，接続した旨を表示するための確認欄の記述です．このプログラムではページ上部の「未接続」が「接続」に変化します．この辺は，格好良いインジケータを配置したいところですね．

その他

書き忘れていましたが，このソースプログラム及びNylonとNylonモジュールは無保証です．動作確認はChrome15.0.874.106，Safari5.1，Firefox7.0.1，iOS5のSafariで行っています

ツイート

Nylon

Nylonとは何か？

MeSHの開発に当たり，すべての機能を盛り込んだシステムとして開発すると，その後の変更作業が地獄と化すことが分かっています．そこで，e-Learningシステムを，個々の機能ごとに分割して開発し，統合する仕組みが必要となりました．その際，単にiframeなどで統合するのではなく，個別の機能を融合しつつ統合する仕組みが望まれました．今回は，その仕組として開発されたNylonについて説明します．

具体的に何が困るのか？

MeSHで目指しているWebによるリアルタイムe-Learningを実現することは，node.jsとsocket.ioのおかげで用意になりました．しかし，全ての機能を盛り込んだシステム（＝モノリシックなシステム）を開発すると，機能追加や変更が面倒です．どこにバグが潜んでいるかヒヤヒヤです．

では，リアルタイムe-Learningを実現する機能をバラバラに見ていきましょう．まずは，スライド表示位があります．スライドを表示すると，そこにペンで書き込みしたくなります．そうすると，説明している姿を動画に残して，その動画に合わせてスライドやペンを再現したくなります．または，学生のペンによる書き込みを残しておくとか，「重要」などのマーキングもしたくなります．さらに，シミュレータについてもリアルタイムで操作情報を配信したり，後の自学自習に生かしたくなります．

これらの機能を融合しつつ統合することはできないでしょうか？そこで生まれたのがNylonという考え方です．具体的には，様々なモジュール単位で開発を行いつつ，モジュール間の動作を制御するイベント情報をやり取りするフレームワークです．

EventEmitter

ベースとなるヒントは，node.jsのソースコードに隠されていました．それを発見したのは当時学生だったi君です．どの様な仕組みかと言うと，個々のオブジェクト毎にキーワードとコールバック関数を定義する仕組みです．これにより，イベント駆動型のサーバ記述を実現しています．この仕組はEventEmitterと名付けられています．

EventEmitterをベースに，Webブラウザ上で動作する複数のモジュール間の通信を，共通するイベントマップで制御して，モジュール同士の「ゆるい」結合を実現したのがNylonです．Nylonとは，i君いわく，mesh（網目の織物）を実現するための素材から連想したとのことです．筆者は「モジュール同士を紡ぐ人工的な素材」と再定義しています．
ここで言うモジュールですが，Webブラウザ上で動作するモジュール ＋ Webサーバサイドのモジュール ＋ WebWorkersのモジュール ＋ iframeに読み込まれたモジュール ＋ Webサーバを通じて別のWebブラウザ上で動作するモジュールなどを含みます．

つまり，これまで面倒だった，Webブラウザ間の通信や，WebWorkersのworker側とメイン側の通信などを統一的に扱うことを可能とするフレームワークです．

Nylonの動作イメージ

obj_a, obj_b, guiの3つのオブジェクトがあり，これらが協調動作する様子を簡単に説明します．guiは，Webブラウザ上のボタンなどから制御されるオブジェクトと仮定します．obj_aはイベントとして，"A"を受け取り何らかの処理を行います．同様にobj_bはイベントとして，"B"を受け取り何らかの処理を行います．guiはAボタンが押されたらイベント"A"を送信します．同様にBボタンが押されたらイベント"B"を送信します．さらにCボタンが押されたらイベント"A"とイベント"B"を送信します．（プログラム中では"A|B"と表記）これらの動作を図にすると以下のようになります．

このように，キーワードをイベントとして送受信し合う仕組みがNylonです．この，「キーワードだけで動作する」というゆるい仕組みなので，モジュールのアップデートにも柔軟に対応できます．

Nylonの動作範囲と実際のプログラミング

先の例では，Webブラウザ内のモジュールを連想しますが，実際にはこれらのイベントを中継する仕組みも開発しています．現在のところ，WebWorkersによるworkerとの通信と，Webブラウザ同士の通信が実現されています．つまり，チャット（ピクトチャット含む）やカードゲーム，動画像の同期などに利用することが可能です．

実際のプログラミングで使用するメソッドはたったの2つで，onとemitです．onはキーワードとコールバック関数を定義するメソッドで，emitはキーワードと（必要があれば）パラメータを送信するメソッドです．例えば上の図の状況を定義する場合には以下のような記述となります． たったこれだけの記述でobj_a，obj_b，gui間のイベント処理が実現します．

次に，Webサーバを中継点として，Webブラウザ同士で上記のイベントをやり取りする場合のプログラミングについて説明します．キーワードは「broadcast」です．イベントキーワードに「broadcast」が入っていた場合，Webサーバを通じて同時に接続しているWebブラウザ上のオブジェクトに通知されます．実際には以下のようになります． ボタンが押された際の送信キーワードに「broadcast」を加えるだけで，Webブラウザ同士の通信を実現できます．この場合，接続しているどのWebブラウザ上でも良いのでボタンをクリックすると，各Webブラウザ上の該当する処理が実行されます．言い忘れましたが，キーワードは「|（パイプ記号）」で繋げることで，いくつでも指定できます．

Nylonはhttps://github.com/sudahiroshi/Nylon2で公開中です．
今後，何回かに分けてNylonについて説明していきます． ツイート