mixiアプリ/日記3
mixiアプリは何で動くのか？
mixiアプリは、mixiサイトのいろいろな場所に設置できることはわかったので、一番表示面積の大きい「アプリ利用画面」に自分で作ったアプリを実際に置いてみることにします。置いてみるからには、「置く場所」と「置く物」が必要になります。mixiさんは、mixiアプリを紹介する文章のデータや、アイコン、キャプチャ画像などを置くスペース（アプリの宣伝、発表の場）を提供してくれ、また、SNSユーザの情報（アプリで扱うデータ）も提供してくれますので、それ以外のものは自分で用意することになります。
- データを扱うアプリの本体
- アプリ独自のデータ
- アプリの装飾品
- それらを置く場所
上記のような要素が主に必要になるものだと思います。とりあえず、レンタルサーバーを借りるなりして、自分でファイルを公開できるようにする必要があります。（WEBにファイルを公開する所作については、ここでは特に説明しません。）ファイルが公開できるようになったら、OpenSocialの仕様に基づいて、アプリの動作を定義するXMLファイルを公開します。XMLファイルの準備ができたら、こちらで「ガジェットURL」の欄にそのファイルのURLを指定してあげれば、アプリの登録が可能になります。既に開発者向けβ環境ではなく、正規の環境に正式公開されていますので、ややこしさが解消しましたね。正式公開からしばらくは表示に時間がかかるなどの問題が発生しているようですが、ボチボチ修正が加えられてきているようです。
gadget.xml
それでは、肝心の「ガジェットURL」の中身である、OpenSocialに対応したXMLファイルを作成してみることにします。gadget.xmlというファイル名をつけられることが多いようなので、以下、gadget.xmlと呼びます。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="アプリの名称">
<Require feature="opensocial-0.8" />
</ModulePrefs>
<Content type="html"><![CDATA[
<!--HTML-->
<script type="text/javascript">
function init() {
//初期処理
}
gadgets.util.registerOnLoadHandler(init);
</script>
]]></Content>
</Module>
mixiサイトに掲載されているサンプルを元に単純なgadget.xmlを書いてみると上記のような感じになりました。ルートのModuleタグの中に、ModulePrefsタグ、Contentタグというものが見受けられます。
ModulePrefs
ModulePrefsタグは、その名の通り、ガジェット（＝モジュール）の設定を担う部分ですね。titleアトリビュートにアプリの名前を設定できるようです。また、アプリの動作要件などの定義もこの中で行います。
<Require feature="opensocial-0.8" />
これは、OpenSocialのバージョン0.8以降に対応という意味ですね。mixiは0.8に準拠しているとのことなので、こんな指定をつけるようです。
私はアプリ内でFlashを使いたかったので、
<Require feature="flash" />
こんな指定も加えています。これでflashをアプリ内に掲載するAPIが使えるようになるそうです。他にもいろいろ定義されているみたいですが、必要に応じて紹介することにします。
Content
Contentの中にはmixiアプリを構成するHTMLやJavaScriptが記述できます。サンプルの「」の部分に適当な言葉を書きこめば、その言葉を表示するだけのアプリの完成です。また、「//初期処理」の部分に「alert('適当な言葉');」とでも書いておけば、よりその言葉を主張するアプリになることでしょう。
要するにここに何を書くかにmixiアプリの面白さがかかっているわけですね。（どんなことをしたら面白いかについてはここでは触れません。）JavaScriptが使えるので、ブラウザのXSS対策に気をつければ大概のことはできます。また、Flashを使えばリッチな表現も可能です。私はjQueryあたりを読み込んでおくとDOM操作に便利だと思います。
<!--Contentの中に-->
<script type="text/javascript" src="http://candychip.net/js/jquery.js"></script>
次回は、mixiが提供してくれているユーザの情報をアプリの中で操作してみることにしましょう。
Last-Modified