mixiアプリ

2009年5月18日 / 最終更新日 : 2009年5月18日矢木浩人 mixiアプリ

続々 mixi アプリ

昨日調べた内容を元に、とっかかりアプリを作成してみるまでの手順と、OpenSocialやら、Google Code やらいろいろ出てくる用語を自分の中で位置づけしておく(まずは正確性より、粗い全体像ということで、以下嘘がまじってたらすいません)。

今年の8月から、mixiアプリが正式公開されるようだ。現在、βテスト中。

気になる開発者の収益としては、ページビューで、mixi広告の分け前をもらうか、mixiが提供する課金システムを利用して販売することもできるようになるようだ。

開発についてのアウトラインを押さえるとともに、簡単なサンプルを作成するところまでもう少し踏み込んで押さえておく。

OpenSocial

まず、mixiアプリは、OpenSocial仕様に準拠しており、開発にはOpenSocialのAPIを使用する。

OpenSocial自体は、Googleが開発した『人に焦点を当てたAPI』で、主な機能として、以下の3つの機能を持っている。

人との関係－各メンバーとその友達との間の関係
永続性－後でアプリケーションを再実行したときにそのデータを取得できる
アクティビティ－自分がしていること (最近観た映画や撮った写真など) を他の人たちに知らせる

API呼び出しの多くは非同期呼び出しで、コールバック関数を利用する。

要するにAJAX。で、このAPIを動作させるためには、OpenSocialアプリケーションをホストできるサイトが必要であり、これをOpenSocialコンテナと呼ぶ。多くは、コンテナ固有の機能を提供する。mixiは、OpenSocialコンテナサイトの1つである。

開発に必要な知識として、以下の3つがあげられる

ガシェットの構造
アプリケーションをソーシャルアプリケーションにする方法
OpenSocial JavaScript API についての知識

まず、ガシェットは Gadget XML にもとづいて作成されており、mixi アプリもこれで作成する。

上記をまとめると、ガシェットをXMLで記述し、OpenSocial API というJavaScriptのAPI群を利用して、mixi上で動くアプリケーションを作成することができるようになる。ということ。

開発環境(Google Code)

mixiアプリという響きから想像されるのに反して、アプリケーション自体をmixiのサーバーにアップロードするわけではない。mixi アプリの設定画面で、ガシェットのURL(OpenSocialガシェットのURL)を指定する。

では、そのOpenSocialガシェットをどこにおいておくか？

OpenSocialのドキュメントによると、もっとも簡単なのは、Google Gadget Editor を利用することなのだそうだ。画面上でアプリケーションを作成でき、そのままプレビューできるので非常に便利な感じだが、どうもiGoogle用のガシェットがメインのように見受けられ、にわかには公開方法が分からなかったので、断念。

フルシステムのソースコントロールが必要な場合、Google Code hosting を利用できる。

これは、Gmailアカウントがあれば利用できる、SVNリポジトリ。ここからプロジェクトを生成して、先ほどのmixiガシェットURLにしていするのが、とりあえず一番手っ取り早そうだ。

使い方は通常のsubversionと同じ。SVNクライアントが必要。普段利用している Eclipse + subclipse を使用する。

簡単に手順をまとめておく

サイトにGmailアカウントでサインインしプロジェクトを作成
リポジトリURL(http://<プロジェクト名>.googlecode.com/svn/)が作成される
プロジェクトのチェックアウトは、httpではなく、httpsに対して行う
プロジェクトにファイルをアップロードすると、/trunk フォルダに置かれる
http://<プロジェクト名>.googlecode.com/svn/trunk/<ガシェット名ファイル>.xml で利用可能となる

ちなみに、発展性を考えて、Google App Engin for Java も試みるが、現状アカウント数がリミットらしく、利用できない状態のよう。本質的には関係ないので、またいずれ試してみようと思う。

mixi 開発者登録

要するに、アプリケーション作成については、基本的にOpenSocial API(JavaScript）でアプリケーションを書いて、Google Code に置いておくだけの話のようだ。

後はmixiの開発者登録を行えば、テストアプリケーションを実行することができる。

やるべきことは、以下の3点

開発者登録には、携帯電話のメールアドレス登録が必要。開発用プラットホームページは、通常のmixiのページと同様にログインする。アプリ機能が追加されている。

開発手順

当面の開発手順は、以下のような感じか？どうも無駄が多いので、ツールを探したりする必要があるが、まだそこまでいけてない。

1. Eclipse でファイル編集 ~ コミット

まず、エディタがいけてない。XMLのCDATAセクションににJavaScriptやHTMLを書いていくのだけど、この場合WTPデフォルトのエディタだと、コード補完やハイライトしてくれない。探す必要があるかな。

2. mixi アプリを作成

開発用プラットホームページから、アプリ、アプリの作成を行う。

ガシェットURLに、上記 Google Code の URL http://<プロジェクト>.googlecode.com/svn/trunk/<ガシェット名ファイル>.xml

を設定し、登録。

3. アプリを起動

終わったら、アプリを開く。2回目以降のファイル修正後は、アプリ設定変更で、キャッシュの消去を行う必要あり。

テスト

OpenSocial API の使用感を試すために、閲覧者の表面的な情報を表示させてみるテスト。実行結果はこんな感じ。

もう少し深くまで閲覧

ざっくりとした挙動としては、

アプリケーションのロードが完了時に、request関数を呼び出す
サーバーからのデータの送信やフェッチに使用する(newDataRequest)を生成
指定した個人 ID のプロフィールを要求するアイテム(newFetchPersonRequest)を作成
コールバック関数responseを指定して、データ応答を受け取るためにサーバーにデータ要求(非同期処理)
要求されたサーバーデータを含むDataResponseから、データを取り出す
HTMLを生成

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="hello world example">
    <Require feature="opensocial-0.8"/>
</ModulePrefs>
<Content type="html">
     <![CDATA[
        <script type="text/javascript">
            function request() {
                var req = opensocial.newDataRequest(); // 2.
                req.add(req.newFetchPersonRequest("VIEWER"),

                         "viewer_data"); // 3.
                req.send(response); // 4.
            }
            function response(dataResponse) {
                var viewer

                   = dataResponse.get("viewer_data").getData(); //5.
                document.getElementById("viewer_inf").innerHTML
                    = printPropertiesAsTable(viewer); // 6.
            }
            function printPropertiesAsTable(obj) {
                var tbl = "<table border=’1′>";
                tbl += "<tr><th>Property</th>"

                       + "<th>Type</th><th>Value</th></tr>";
                for (prop in obj) {
                    var type = typeof(eval("obj." + prop));
                    var enc   = (type == "function")?"()":"";
                    tbl += "<tr>";
                    tbl += "<td>" + prop + "</td>";
                    tbl += "<td>" + type + "</td>";
                    tbl += "<td>"

                           + eval("obj." + prop + enc) + "</td>";
                    tbl += "</tr>";
                }
                tbl += "</table>";
                return tbl;
            }
            gadgets.util.registerOnLoadHandler(request); // 1.
        </script>
        <div id="viewer_inf"/>
     ]]>
</Content>
</Module>

てな感じ。

あとは、アイディアと時間・・・

Follow me!

@pppiroto

カテゴリー: mixiアプリ