webさくらの技術：クロスドキュメントメッセージング

さて、今回のwebさくら、伊達にHTML5を名乗っているわけでは‥‥あるかもしれないがそれなりに意味はあります。間に合わせで作ってるところが多々あるので今のコードはどんどん整理していく予定だけど、今とりあえず説明できる大事なところを、少しずつ紹介していこうと思います。

なにがクロスしてるのか

さて表題の「クロスドキュメントメッセージング」。つまりドキュメント同士で通信のやりとりが出来ますよ、という技術のこと。‥‥ぱっとみたとき、どことどこが通信してるの？となるけれど。実はこのガジェット、メインのページ以外に、論理的に４つのサイトのページが独立して存在している構成になっています。

• g.html(iPhoneOS用はi.html)：トップページ
  • stage.html：メイン制御ページ
    • ballon.html：バルーン制御（と今回の暫定版では栞）
    • actor.html*2：シェル表示

基本的にstage配下にballon、actorがぶら下がってる構造。それぞれのページは論理的には完全に独立していて、通信手段を使わない限り相手の挙動に一切関知しない・出来ない。stage配下のballon/actorは、stageの制御によりいつでも切り替えが可能となっている。‥‥まだそこまで実装できてないけど！
このページ同士が、相互に通信しあうのが、クロスドキュメントメッセージングです。

投げる側と受ける側

これらのページはhtml4では廃止だかんだと騒がれていた(^^;iframeで構成されてます。ついでに言うが、結局廃止になったのはiframeではなくframeの方でした（笑）。まあiframeの組み合わせで実現できるし、汎用性でもこちらが圧倒的ですから‥‥。
閑話休題。メッセージを投げるときは、自分の配下のframeにたいし、postMessageというメソッドを発行します。すると投げつけられた側のページのwindowオブジェクトがonMessageというイベントを受け付けるので、イベント受ける側はこのメッセージを監視しておいて、メッセージがきたら適切な処理をする。
また、onMessageで投げられるMessageEventの情報には、送り元のwindowオブジェクトがあるので、そこにpostMessageしなおせば応答を返せますよ、という仕様になってる。

今のところ投げられるメッセージは文字列のみだが、将来的にはjson構造のオブジェクトなら投げることが可能になる模様。今はちょっと不便な仕様でやりとりしてるがそれはそれ。大事なことは「メッセージのやりとりは非同期」「相手のページを直接触る手段はない」と言うこと。メッセージは投げっぱなしだし、相手も知らないことは無視していればいいので、セキュリティ的にも実装の分離という点においても、マルチコア時代のスクリプト実行を考慮した仕様になってます。

おおざっぱな流れ

このガジェットでは、トップページが発言イベントのトリガーを持ってます。クリックするか、２０秒間隔でイベントを発行すれば、下位が何とかする、という仕様。バルーンに存在する栞モジュールがトークを作成し、バルーンはトークをバルーン表示に分解し、時間制御を行ってバルーンに文字を表示。文字表示しつつ、埋め込まれたシェル切り替えイベントが見つかったら、stageを経由してactorに表情変更を依頼することで、ゴーストとしての動作が完結します。

ネットは広大だわ

各部品は独立したウェブページ。繋がりさえすれば個々のページはどこにだって存在できる。今はまだ手をつけられてないけど、基本的には、栞も・バルーンも・キャラクターも、個々への異存はないのです。だからキャラクターが許せば１つの栞が複数のゴーストのシェルを呼び出すことも可能。本質的に台本トーク相当の機能が最初から実現可能になっています。
‥‥まー、勿論、ものがそろわないうちはそらえごとですよねー。ここはあんまり自虐せずに、やれることを粛々とつぶしていくのです。私が作りたいのは「中心がない世界」。まずは繋がる道を見せていくこと。そこから始まると思ってます。
まあ、これもちょっと今から話大き過ぎます(^^;。次回は栞の構造の話、の予定。その前にコードが間に合わせだからちょっとリファクタリングしなきゃだけど・・・であであ。