「ココあとで」というクロスドメインなブックマークレットを実現する技術

前回の「「ココあとで」というクリッピングとメモをシンプルにするブックマークレット」というエントリで紹介した「ココあとで」というブックマークレット型ウェブサービスの技術を公開します。

ココあとでというブックマークレットは以下の動作をします。

1. サイト内の文字列を選択しブックマークレットをクリックする
2. 選択された文字列が登録されたメールアドレスにメールされる

とてもシンプルです。

このサービスを実現する時に大きな壁となったのがクロスドメイン。
つまり、様々なドメインから選択文字列を別ドメインに送信する必要がある。
これが難しい。

簡単に説明すると、あるドメイン内のサイトから、別のドメインへアクセスすることです。
具体的には、
www.adamrocker.comというドメインから、www.google.co.jpというドメインにアクセスしてデータを取得する事です。
これが難しいのです。
なぜか？
ブラウザが基本的にクロスドメインを禁止しているからです。
技術的な問題ではなくセキュリティの問題ですね。

基本的にはクロスドメインはブラウザにより制限されます。
基本的には…。
「基本的には」ということは、もちろん回避する方法があります。

私の知る限り、この４つです。

プロキシサーバ

独自のプロキシサーバにCGIを設置し、そこへアクセスしプロキシCGIが別ドメインにアクセスし結果を返す。プロキシサーバと同一ドメイン内に表示しているサイトから利用する場合はこれで十分ですが、「ココあとで」では、プロキシサーバとは別のドメインから、別のドメインへのアクセスとなるため、利用できません。

dojo

dojoとはクロスドメインを実現するJavaScriptライブラリです。このライブラリだけでクロスドメインが利用できるので便利です。詳しくはコチラ。技術的にはIFRAMEを複数利用し、その中で別ドメインにアクセスします。そのためIEではカチッカチッというクリック音が発生します。またIFRAMEを多用するためリソースを沢山必要とします。なんだか難しそうだったので「ココあとで」では使いませんでした。よくわからないモノを使いたくない質なので…（汗）

JSONP

scriptタグのsrcにJSONデータを引数にした関数コール形式のファイルを読込む。scriptのsrcは外部ドメインのファイルを読込めるため、比較的簡単に導入できます。ただし利用したい別ドメイン上のデータがJSONPに対応している必要があります。JSONPの技術については私の以前のエントリ「超シンプルなJSONP入門」もしくは「Google AJAX Feed APIでとても簡単にRSS Readerを作ってみる」を参照して下さい。これは別ドメインのデータを取得できますが、別ドメインにデータを送れないので、「ココあとで」では使えませんでした。

Flashプロキシ

Flashでは、ある制限の元にクロスドメイン通信を実現できます。それはリクエスト先のドメインにcrossdomain.xmlというファイルで許可を出すということです。crossdomain.xmlについてはこのエントリがとても参考になりました。Flashプロキシと「プロキシサーバ」とを組み合わせる事で、全く異なる２つのドメイン間で相互通信することができます。「ココあとで」ではこの技術を利用しています。

クロスドメイン技術を利用する時は、用途に合わせて方法論を選択した方が良さそうです。
どれも少し敷居が高いんですよね…。

「ココあとで」では、FlashプロキシとプロキシサーバのCGIスクリプトを利用したクロスドメイン・スクリプティングという技術を利用しています。

具体的な通信はこんな感じです。

JavaScript → Flash → CGI

JavaScriptでブラウザ内の選択文字列を取得し、その文字列を引数にFlashの関数をコールします。JavaScriptとFlashとの連携は以前のエントリ「JavaScriptからFlash ActionScriptを呼び出す最も簡単なサンプル Firefox & Safari」もしくはIEの場合は「JavaScriptからFlash ActionScriptを呼び出す最も簡単なサンプル IE」を参考にどうぞ。

Flashのソースコードはこんな感じです↓。

import flash.external.ExternalInterface;
ExternalInterface.addCallback("test", null, test);
function test(str:String):Void {
    var load:LoadVars = new LoadVars();
    var lv:LoadVars = new LoadVars();
    lv.onLoad = function(succ:Boolean) {};
    load.param = str;
    load.sendAndLoad("CGIへのアドレス", lv, "POST");
}

ExternalInterfaceを利用する事で、JavaScriptとActionScriptとの関数を関連づけています。ちなみにこれはActionScript2.0です。ActionScript3.0は「JavaScriptからFlash ActionScriptを呼び出す最も簡単なサンプル Firefox & Safari」で紹介しています。

このActionScriptで、表示しているサイトのドメインとは異なるドメインにPOSTリクエストを送信しています。
そのドメインが私のwww.adamrocker.comドメインで、そこのCGIスクリプトによりメールを送信しています。
クロスドメインを可能にするためcrossdomain.xmlというファイルを設置する必要があります。フォーマットはコチラが参考になりました。

「ココあとで」を利用して頂くと分かりますが、送られてくるメールの送信元がGMailになっています。
これは、ActionScriptが呼び出したCGIプログラムがGMailにリクエストを送信しているのです。
すなわち、全体像はこうなっています。

JavaScript → Flash → CGI → GMail → (あなたへメール)

CGIプログラムはRubyで実装しています。TMailというライブラリを利用させて頂いています。

以前公開した「ココあとで」というブックマークレット型ウェブサービスを実現する技術を公開しました。
コア技術は3つ。

JavaScriptとFlash ActionScriptとの連携

詳細は「JavaScriptからFlash ActionScriptを呼び出す最も簡単なサンプル Firefox & Safari」を参考にして下さい。

Flash ActionScriptを利用したクロスドメイン通信

ExternalInterfaceを利用します。crossdomain.xmlを通信先のドメインに設置する必要があります。

GMailをメールサーバとして利用する

CGIからメールを送っても良いのですが、最近はメールのフィルタリングとか厳しいのでGMailにお願いしました。Rubyで実装し、TMailというライブラリを利用しました。

以上で、Flashプロキシを利用したクロスドメイン通信をコアとしたブックマークレット型ウェブサービス「ココあとで」の技術を公開しました。
クロスドメインを利用して、ウェブ上の様々なデータをマッシュアップさせて面白いサービスが実現できればイイですね。

• 超シンプルなJSONP入門
• Google AJAX Feed APIでとても簡単にRSS Readerを作ってみる
• JavaScriptからFlash ActionScriptを呼び出す最も簡単なサンプル IE
• JavaScriptからFlash ActionScriptを呼び出す最も簡単なサンプル Firefox & Safari

• Android用Google Talkクライアントをm5-rc14に移植
• ComicViewer3 -Androidで電子ブックリーダ-
• Androidで3D回転エフェクトをかける方法
• Papervision3Dで複数のオブジェクトを扱う Part2
• Papervision3DとTweenerで2.5Dアニメーション
• Androidについて取材してもらいました