kur.jp

バイオリンと自転車をこよなく愛するkurのチラシの裏。たまには技術的なことを書いたりするかも知れません。

mixiアプリ「LoveCoke」を作ってみた

mixiアプリの作り方がだいたい分かってきたので,さっそく実際にアプリとして作ってみることにしました.

何を作ろうかなぁ,最初だし簡単に作れそうな奴がいいなぁとか思ってたら,目の前にコカコーラがあったので,コーラに関連するアプリと言うことで作ってみました.

このアプリの基本コンセプトは,「コカコーラ社への愛社精神を数値で表現する」ということで,実際に使用した感じは下記の画像のようになります.

自分が飲んだコカコーラの種類を選択すると,これまでに飲んだ総量がわかります.便利です.

coke1 coke2

それにしても私,デザインのセンスないなぁ.

以下では,技術的なこととか書いてみます.

mixiアプリを作る上で,いくつかの点で戸惑ったのでメモしておきます.

アプリにアクセスしているのは誰なのか?

Mixiアプリでは,アプリをインストールした人をOWNER,アプリにアクセスしている人をVIEWERとして扱います.

ここで問題となるのは,現在のVIEWERはOWNERなのかどうかということ.自分でインストールしたアプリに,自分でアクセスした場合と,他人がアクセスしてきたときで処理を変えたい時ってよくあると思うのですが,軽く調べた限りだと,OWNER==VIEWERかOWNER!=VIEWERかを判断するための関数と言うのは無いようでした.

そこで,自分で調べてやる必要があります.実際のコードはこんな感じ.複雑ってわけではないけど,面倒です.もっと簡単にOWNERとVIEWERのIDを取得する方法ないのかなぁ.

var OwnerId;
var ViewerId;
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer");
req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.OWNER), "owner");
req.send(function(data) {
    ViewerId = data.get("viewer").getData().getId();
    OwnerId = data.get"owner").getData().getId();
    if(OwnerId == ViewerId){

}else{

}

});

縦のサイズを調整する

Mixiアプリが表示されるスペースのサイズと言うものが決まっていますが,その範囲内であれば,下記の関数を利用することによって表示内容に応じて自動的に調整することが出来るようになっています.

gadgets.window.adjustHeight();

静的な情報を表示して,インタラクションのないアプリであれば,ロード時にこの関数を呼び出すだけで済むのですが,表示内容を動的に書き換えるアプリである場合,表示サイズも変更されますから,この関数を何度も呼びだす必要があります.

しかし,私が調べたところ,表示内容が領域を超えた事をトリガに呼び出されるコールバック関数を設定できないようです.なので,setInterval等を用いて一定周期で呼び出すか,表示内容を書き換える処理を行ったときには,手動でこの関数を呼び出す必要がありそうです.非常に面倒です.(もしかしたら他に方法があるのかもしれませんが.)

外部ライブラリを使う

Mixiアプリは基本的にJavaScriptでアプリを開発することになりますが,標準のJavaScriptだけで複雑な処理を行うのは非常につらいです.そこで,jQuery等の外部ライブラリを使いたくなるわけですが,jQueryの場合はnakajiman1さんによってによってオープンソーシャルアプリ用のライブラリが提供されているので,私はこれを使うことにしました.

opensocial jquery http://code.google.com/p/opensocial-jquery/

このライブラリを利用することで,jQueryの便利な機能を利用することが可能になるので,開発がサクサク進みます.

開発環境について

Mixiアプリを開発する時には,下記の操作を行う必要があるため,非常に時間がかかります.

  1. XMLファイルを編集
  2. サーバに転送
  3. mixiアプリの設定画面でキャッシュのクリア
  4. トップページのリロード

ローカルでシミュレータのようなものがあれば楽なのになぁとか思って探してみると,OpenSocial Development Environment」(OSDE)というものがあるようです.ちょっとまだ実際にインストールしたわけではないのですが,近いうちに試してみる予定です.