始まる前からデベロッパ登録をしたり、説明会に足を運んでいた mixiアプリですが、結局忙しさにかまけてきちんと勉強をしていませんでした。。

なんだかんだで、かなり盛り上がっていて良い感じですね。ということで、遅ればせながら私も参戦。折角なので、覚えたての CakePHPと、大好きな jQueryで作ることが出きないかを模索してみました。以下メモです。

まずは土台作り

まずは、mixi Developer Centerを見ながらパートナー登録などを済ませて開発環境を手に入れます。

また、mixiアプリの本体自体は、自前で準備したサーバー上で動作するためこれを準備します。
そしたら、適当なフォルダなどに次のような XMLを「index.xml」などの名前で保存します。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="My mixi appli">
<Require feature="opensocial-0.8" />
</ModulePrefs>
<Content type="html"><![CDATA[

<p>mixiアプリ</p>

]]></Content>
</Module>

詳しい内容はここでは省略。gihyo.jpの記事などが詳しいです。

そしたら、この XMLファイルへのフルパスを持って、mixiアプリの登録画面で登録していきます。詳しい内容は、このへんで。

これで、まずは OK。mixiアプリが登録され、画面に「mixiアプリ」と表示されたはずです。

jQueryをつかう

mixiアプリは、全体を JavaScriptか Flashで制御するのですが、ここでは jQueryを使いたいと思います。しかし、jQueryは普通に組み込むことは出来ません。そこで、便利なライブラリが公開されています。

• OpenSocial jQuery

これを使えば、mixiアプリ上で jQueryが利用出来ます。便利！　ということで、ありがたくダウンロードして、先の XMLと同じフォルダにアップロード。次のように書き加えます。

...
<Content type="html"><![CDATA[
<script type="text/javascript" src="http://mixiappli.h2o-one.com/sha1/_js/opensocial-jquery.min.js"></script>
...

ここでのポイントは、必ずライブラリへのパスをフルパス（http://から始まるURL）を記述すること。mixiアプリは動作しだすとパスが通常のものとは変わってしまうので、リンクができなくなります。

同じように、CSSも簡単にリンクが出来ます。ここでは、Yahoo UI Librariesの reset.cssをリンクしました。

...
<Content type="html"><![CDATA[
<script type="text/javascript" src="http://mixiappli.h2o-one.com/sha1/_js/opensocial-jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">
...

あとは、いつものように HTMLと JavaScriptを記述すれば、jQueryを利用することが出来ます。

...
<Content type="html"><![CDATA[
<script type="text/javascript" src="http://mixiappli.h2o-one.com/sha1/_js/opensocial-jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">

<p></p>

<script type="text/javascript">
$('p').html('jQueryが動作しました！');
</script>
...

CakePHPを使う

続いて、CakePHPを使います。ただ、まだ CakePHPは初心者なので、おそらく非常に効率が悪いです。改良できたら改良します。

まずは、先程のフォルダとは別のフォルダにCakePHPをインストールしました。ここでは「_core」というフォルダにしました。
そして、データベースを使わないので/app/app_model.phpに、次のように記述します。

	var $useTable = false;

さらに、jQueryから呼び出されるエンジンになるため、ビューもヘッダなどが出力されないようにします。そこで、レイアウトを利用しないようにコントロールを作るときに、次のように記述しました。

class Sha1Controller extends AppController {
	var $name = 'Sha1';
	var $layout = false;
...

あとは、ビューでJSONを返却するように作っていきます。

{'ret': '<?php e($ret); ?>'}

これで完成！　jQuery側で、このスクリプトを呼び出すように作りこんでいきます。

$.getJSON('http://mixiappli.h2o-one.com/sha1_core/sha1?svalue=' + sha1.svalue,
function(data) {
...

キャッシュから逃れるポイント

こんな感じで開発ができるのですが、mixiアプリを作っていると困るのが「キャッシュ」。
mixiアプリは、かなりファイルをキャッシュするようで、更新しても更新しても反映されません。

一応、アプリの管理画面に「キャッシュをクリアする」というリンクはあるのですが、いちいちこれを押すのはかなり面倒。。そこで、いくつか方法を模索してみました。

まずは、XMLファイルに次のように記述します。

...
<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="html"><![CDATA[
...

これで、キャッシュを毎回無効にしてくれるそうです。Ajax通信などをすると、通信結果もキャッシュしちゃうようなので、これは必須のようです。（もちろん、安定動作しだしたら外すと良いようです）

続いて、アプリを呼び出すときのURLに「&nocache=1」を付加します。例えば

http://mixi.jp/run_appli.pl?id=99999

という URLであれば

http://mixi.jp/run_appli.pl?id=99999&nocache=1

これで、HTMLのキャッシュも防ぐことができるようです。

ということで、ようやく開発のスタートラインに立てた感じです。
マイミクの情報を取得したり、招待しあったりできるようなプログラムも引き続き作れるようになっていきたいと思います。がんばろうっと！

Tweet