極力Javascriptを書かずにリッチなmixiアプリを作る方法

こんにちは、バズー株式会社、開発チームリーダーの清水です。

弊社はmixiアプリモバイル（携帯専用）をほうを専門にやってきましたが、mixiアプリ（PC版）を希望する声が多いため、mixiアプリについて調べてみました。mixiアプリは Javascript をガリガリゴリゴリ書くので、苦手です・・。しかもmixiの強力なキャッシュが効くらしく、それもやっかいです。

なんとか Javascript を最小限にして、PHP で書けないかと思い仕様書を見ていたら、PC でも RESTful API が使えるようです。RESTful API が使えるなら話は PHP だけで済みます（mixiアプリモバイルは RESTful API を使って実装します）。

外部サーバーからデータを取得する gadgets.io.makeRequest というのがあるので、それを使ってみました。ガジェットのソースはたったこれだけです！アプリのソースコードはすべてサーバー側に隠ぺいできます！

この場合、表示する部分はすべて、http://somewhere/ から HTML を取得して、それをそのまま表示させます。他に RSS フィードや JSON にも対応しているようですが、今回は無視（詳細はmixiアプリの仕様書をどうぞ）。

ちなみに POST には未対応（POSTに対応させるにはmixiアプリの仕様書をどうぞ）。外部サーバーでリダイレクトをかけてしまう場合も未対応です（こちらはたぶんどうしようもない）。

■gadget.xml

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
　<ModulePrefs title="テストアプリ">
　　<Require feature="opensocial-0.8" />
　　　<Optional feature="content-rewrite">
　　　　<Param name="exclude-urls"></Param>
　　　　<Param name="exclude-urls">.*</Param>
　　　　<Param name="include-tags"></Param>
　　　</Optional>
　　</ModulePrefs>
　<Content type="url" view="mobile" href="http://somewhere/mobile" />
　<Content type="html">
　　<![CDATA[

<div id="contents" style="width:690px;height:500px;overflow:scroll;">
</div>

<script type="text/javascript">
var req_url = "/";

// GET
function do_get(url) {
　var url = "http://somewhere"+url;
　var params = {};
　params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;
　params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT ;
　params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.SIGNED;
　gadgets.io.makeRequest(url, function(response) {
　　if (response) {
　　　document.getElementById("contents").innerHTML = response.data;
　　}
　}, params);
}

// 初期化
function init() {
　do_get("/");
}

// 起動完了時に呼ばれる関数の設定
gadgets.util.registerOnLoadHandler(init);
</script>
　　]]>
　</Content>
</Module>

■リンクの書き方

リンクはすべて以下のようにガジェット内の get_url 関数を呼ぶように書き換えなければなりません。

<a href="javascript:void(0)" onclick="get_url('/some_module/some_action/param1/123/param2/345')">なんちゃら</a>

■懸案点

gadgets.io.makeRequest はどうやら AJAX 的に動くらしく、いくらリンクを叩いても PV が増えないようです。
その分、レスポンスは非常によいですが・・。