続々 mixi アプリ

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

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

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

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

OpenSocial

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

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

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

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

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

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

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

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

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

開発環境(Google Code)

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

gadget_url

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

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

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

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

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

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

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

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

mixi 開発者登録

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

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

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

  1. 開発者登録
  2. mixi アプリ オープン β コミュニティに参加
  3. 開発には現在、開発用プラットホームページから行う必要がある

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

開発手順

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

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

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

2. mixi アプリを作成

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

create_app

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

を設定し、登録。

3. アプリを起動

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

テスト

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

もう少し深くまで閲覧

mixi_app_test01

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

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

続々 mixi アプリ” に対して1件のコメントがあります。

  1. ラボブログ より:

    五月も後半だけどソーシャルアプリ関連

    スパイスラボ神部です。 5月もいよいよ後半。沖縄は梅雨入りだそうですが、ソーシャルアプリ関連についてまとめてみます。 -梅雨入りが好きだ! – Favor…

  2. のぶちな より:

    こっち方面まったくやってないので、全くわかりません。
    javascriptとか、拒否反応が起きるんですが。。。
    で、何ができるんjava?あ、いっちゃった。

  3. やぎ より:

    >何ができるんjava?
    なつかしぃ。JavaってなんJava・・・
    mixiアプリで何ができるかは、これから調査していこかなと。JavaScriptは、確かにぱっとみややこやしいですが、仕組みはシンプルですよ。
    のぶちなさんならいろいろアイディアでてくるんでない?参入!参入!

  4. サン より:

    初めまして、サンといいます。
    もしよろしければ、mixiに招待していただけないで
    しょうか。私もmixiアプリやりたいです。
    なんだか面白そうです。
    よろしくお願いします。
    qab125373@yahoo.co.jp

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

前の記事

続 mixi アプリ

次の記事

英語は逆から学べ