mixiアプリで始めるOpenSocial入門（1）
――OpenSocialの概要とmixiアプリ

OpenSocial 基本のキ（1）

OpenSocialアプリケーションの仕組み

　OpenSocialアプリケーションの実体はガジェットXMLと呼ばれるXML形式のファイルです。ガジェットXMLの中に、HTML／JavaScriptなどのプログラムを含めることができます。また、外部のJavaScriptファイルやCSSファイル、画像や動画なども呼び出すことができます。このように、OpenSocialにはWeb標準の技術が用いられており、特別な言語の習得は不要です。

　以下に、OpenSocialアプリケーションの実行の流れを示します。

OpenSocialアプリケーションの実行の流れ

1. OpenSocialアプリケーションの実体であるガジェットXMLはSNSではなく、外部のWebサーバ上に置かれます。アプリケーションが実行される際に、コンテナはWebサーバからガジェットXMLを取得します（mixiでは、ガジェットXMLはキャッシュされているため、実行の度に取得することはないようです）。

1. OpenSocial対応SNS（コンテナ）はガジェットXMLを解析し、含まれているHTMLとJavaScriptだけを抽出してWebブラウザに出力します。この変換処理がどのように行われるかは後述します。

1. OpenSocialアプリケーションの中でコンテナとやりとりを行い、ソーシャル情報を取得したり、情報を書き込んだりする場合には、JavaScript API（opensocial.DataRequestクラス）でWebブラウザからコンテナに対するアクセスを行います。

1. 同様に、OpenSocialアプリケーションの中で、インターネット上のWebサービスやリソースへのアクセスがある場合にも、JavaScript API（gadgets.io.makeRequest関数）でリクエストを行います。この際はWebブラウザからコンテナを経由して、外部のWebサーバへのアクセスが行われます。これは、JavaScriptのクロスドメイン制限（スクリプトの置かれているサーバと異なるサーバへのリクエストを行うことができない）を回避するためです。

　OpenSocialアプリケーションが実際に動作するのはSNSユーザーのWebブラウザ上で、必要に応じてユーザーのコンピュータからコンテナに対し、あるいはコンテナ経由でインターネット上のWebサービスやリソースに対して、リクエストが行われる、という点に注目してください。

ガジェットXMLの変換の例

　先ほど2.で扱った、ガジェットXMLがコンテナでどのように変換処理されるのかの具体例を、mixiの実装で見てみましょう。

mixiアプリにおける、ガジェットXMLの変換処理

1. モジュールの処理

　ガジェットXMLでOpenSocialのモジュールが要求されているため、コンテナは対応するOpenSocialのJavaScriptのモジュールを出力します。Gadgets APIに含まれる他のクラスを使う場合も同様で、コンテナはガジェットXMLで要求されたモジュールに対応するJavaScriptのモジュールを出力します。

2. Content要素以下の抽出

　ガジェットXMLのContent要素以下のCDATAセクションを抽出し、アプリで表示するHTMLに出力します。

3. 外部リソースのキャッシュ

　mixiの実装では、ガジェットXMLでlink要素、script要素、img要素などを用い、CSSファイル、JavaScriptファイル、画像ファイルを読み込むよう指定している場合は、それぞれコンテナ側でキャッシュし、キャッシュしたコンテナ上のURLを出力します。つまり、Webブラウザは外部のWebサーバから直接ファイルを読み込むのではなく、コンテナからキャッシュされたファイルを読み込むことになります。このキャッシュ機能をmixiでは「Content Rewrite」と呼んでいます。

　これにより、外部のWebサーバに置かれたJavaScriptファイルであっても、コンテナ上のURLから読み込むことになるため、スクリプトからコンテナへのリクエストを行う際に、前述のクロスドメイン制限が発生することがありません。また、パフォーマンス向上のためと思われますが、ガジェットXML内で複数のscript要素で複数のJavaScriptファイルを読み込むよう指定している場合には、コンテナはそれらのJavaScriptファイルをキャッシュし、連結された1つのファイルにまとめた上で、複数のscript要素を、連結されたJavaScriptファイルを読み込む1つのscript要素に変換して出力します。

4. HTMLの出力

　通常のHTMLや、HTML内に含まれるJavaScriptなどはそのまま出力します。

　mixiの実装では、以上の処理でアプリごとにガジェットXMLをHTMLに変換し、それらをポータル画面からiframe要素で読み込ませています。ガジェットXMLがどのように変換され、最終的にWebブラウザで読み込まれるのか、頭の中で描いておきましょう。

まとめ

　連載の初回となる本記事では、OpenSocialの概要について扱いました。次回はOpenSocialを使った最初のサンプルとして、mixiアプリを作成します。

参考資料

• Gadgets API概要
• OpenSocial API デベロッパー ガイド