mixiアプリ.info

mixiで「ソーシャルアプリケーション アワード」開催！

すでにニュース等で取り上げられ話題になっておりますが、7/1 〜 8/31 にかけて「ソーシャルアプリケーション アワード」へ応募するmixiアプリ（PC）の募集を行っているようです。

グランプリ作品への賞金は、なんと100万円！
法人、個人、プロ、アマチュアを問わず応募を受け付けているようなので、ぜひチャレンジしてみてはいかがでしょうか。

詳細はこちらの本家サイトをご覧ください。

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

前回は、ユーザのプロフィール情報の取得方法についてご紹介しました。
さまざまな種類のプロフィール情報を取得することによって、mixiアプリの作成の幅が広がったかと思います。

前回までは「Owner」または「Viewer」単体のプロフィール情報の取得についてご紹介しておりましたが、その他、mixiアプリではそのマイミクのプロフィール情報も取得することができます。
今回はその方法についてご紹介してみたいと思います。

まずは以下にサンプルとして、マイミクの名前を一覧を表示するmixiアプリのサンプルコードを記述します。
こちらも、mixi Developer Center上に公開されているサンプルを参考にしています。

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<Module>
<ModulePrefs title=”マイミク一覧”>
<Require feature=”opensocial-0.8″/>
</ModulePrefs>

<Content type=”html”>
<![CDATA[

<div id="friends"></div>

<script type="text/javascript">// <![CDATA[
var params = {};
params[opensocial.IdSpec.Field.USER_ID] = opensocial.IdSpec.PersonId.OWNER;
params[opensocial.IdSpec.Field.GROUP_ID] = “FRIENDS”;
var idSpec = opensocial.newIdSpec(params);

var req = opensocial.newDataRequest();
req.add(req.newFetchPeopleRequest(idSpec), “friends”);
req.send(function(data) {
output = “”;
if (data.hadError()) {
var msg = data.getErrorMessage();
output += msg // エラー時は、とりあえずエラーメッセージをそのまま表示させる
} else {
var friends = data.get(“friends”).getData();

friends.each(function(friend) {
var id = friend.getId();
var name = friend.getDisplayName();

output += name + ‘<br />’;
});
}
document.getElementById(‘friends’).innerHTML = output;
});

</script>

]]>
</Content>
</Module>

マイミク情報を扱う際は、opensocial.IdSpec オブジェクトを使用します。
これにより、以下の 3 つの条件を指定することができます。

• USER_ID – 基準となるユーザのID
• GROUP_ID – ユーザ間の関係
• NETWORK_DISTANCE – 基準ユーザからの関係の距離

mixiアプリでは、GROUP_IDに「SELF(USER_IDで指定されたユーザ自身)」または「FRIENDS（マイミク）」を指定することができます。
また、NETWORK_DISTANCE は、mixiでいうと 1 でマイミク、2 でマイミクのマイミクを示しますが、mixiアプリで取得可能なものはマイミクの一覧ですので、NETWORK_DISTANCE は常に 1 となります。

マイミク情報は、newFetchPeopleRequest() 関数を呼び出して取得します。
単体のプロフィール情報を取得する際は newFetchPersonRequest() で「Person」でしたが、マイミク情報の場合は「People」と複数形ですね。
「People」になっても、この関数で取得可能な情報は同じです。

• ID
• ニックネーム
• プロフィール写真

この 3 種類でしたね。

DataRequest オブジェクトの主な使い方は newFetchPersonRequest() 関数の場合と同じなので、マイミク情報を取得するからといって特に難しくなるようなことはありません。
但し、取得結果が複数になるので、取得後はそれに応じた処理を行うことになります。

さて、早速アプリを作成し、mixi上でマイミクの名前が一覧表示されるのをしてみましたか？
もしかしたら、マイミク一覧のはずなのにちょっと少ないな・・・とお気付きになられたかたがいらっしゃるかもしれません。
そう、実はデフォルトでは、マイミク情報は 20 件しか表示されないんです！

そんなわけで、次回はその解決方法として、一覧表示やページ送り処理方法についてご紹介したいと思います。

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

PC版のmixiアプリが表示される場面は、現段階で３種類あります。

• canvas：「アプリを開く」の画面
• home ：自分のマイページ画面
• profile：他人から見た自分のマイページ画面

mixiアプリにおいて、これらの場面に応じて表示内容を制御することができます。
そのためにどうするかと言いますと、今までこう↓していたものを

こんなふうに、

もしくはこんなふうに

view属性を指定分けしてあげるだけで大丈夫です。

ガジェットXMLではこれら３種類のview属性のほかに、デモ画面等の表示場面となるpreview属性を指定することもできますが、現段階のmixiアプリではこの用途はなさそうです。
尚、previewにおいてはOwnerやViewerの情報は取得できません。

mixiアプリでは、canvas と home,profile の表示領域はだいぶ異なりますので、
これらを区別して整えてあげるだけでも、少し洗練された印象のアプリになるかと思います。

ぜひ使い分けてみてくださいね。

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

前回はmixiアプリ作成入門（2）で作成したコードについて簡単な解説を行いました。
今回は、ユーザの詳細なプロフィール情報の取得方法をご紹介したいと思います。

mixiアプリでは、以下のプロフィール情報とマイミク一覧を取得することができます。

• ID
• ニックネーム
• プロフィール写真
• プロフィールURL
• 現住所(県のみ)
• 年齢
• 生年月日
• 性別
• 血液型
• このアプリケーションをインストールしているかどうか

このうち、（2）のサンプル作成時に使用したnewFetchPersonRequest()関数で取得できるのは

• ID
• ニックネーム
• プロフィール写真

でした。

それ以外の情報はというと、取得したい項目をそれぞれ予め指定する必要があります。
その指定を行うためには、
opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS という定数を使用します。

以下では、DataRequestオブジェクトの生成前にその指定を行ってみました。

var params = {};
params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [
opensocial.Person.Field.PROFILE_URL, // プロフィールのURL
opensocial.Person.Field.ADDRESSES, // 現住所(県のみ)
opensocial.Person.Field.AGE, // 年齢
opensocial.Person.Field.DATE_OF_BIRTH, // 生年月日
opensocial.Person.Field.GENDER, // 性別
mixi.PersonField.BLOOD_TYPE, // 血液型
opensocial.Person.Field.HAS_APP // このアプリケーションをインストールしているかどうか
];
var req = opensocial.newDataRequest();

そして、指定がつまったparamsをnewFetchPersonRequest()の第二引数として付与します。

req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER, params), “viewer”);

値によっては取得方法が少し異なります。以下をご参照ください。

req.send(function(data) {

var viewer =
data.get(“viewer”).getData();

var id =
viewer.getId();

var nickname =
viewer.getDisplayName();

var thumbnailUrl =
viewer.getField(opensocial.Person.Field.THUMBNAIL_URL);

var profileUrl =
viewer.getField(opensocial.Person.Field.PROFILE_URL);

var pref =
viewer.getField(opensocial.Person.Field.ADDRESSES)[0].getField(opensocial.Address.Field.UNSTRUCTURED_ADDRESS);

var age =
viewer.getField(opensocial.Person.Field.AGE);

var birth =
viewer.getField(opensocial.Person.Field.DATE_OF_BIRTH);

var gender =
viewer.getField(opensocial.Person.Field.GENDER).getKey();

var bloodType =
viewer.getField(mixi.PersonField.BLOOD_TYPE);

var hasApp =
viewer.getField(opensocial.Person.Field.HAS_APP);

}

尚、情報が「全体に公開」されていない場合、「undefined」と表示され値を取得することができませんのでご注意ください。

これだけの情報が取得できれば、mixiアプリの創造の幅が広がりますね。
これをもとに、サンプルアプリのさらなるカスタマイズにぜひチャレンジしてみてください。

次回は、ユーザのマイミク情報を取得してみようと思います。

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

mixiアプリ作成については、mixi Developer Center にいろいろ書いてあります。

・・・が、たくさん書いてあって読むのたいへん！なので
「3 ステップでかんたん！mixiアプリのはじめかた」を今回ご紹介します。

１．デベロッパー登録の申請を行う

デベロッパー登録画面 へアクセスし、「Developer登録」ボタンを押した先で登録を行います。
登録には携帯メールアドレス、氏名、住所を入力するのですが、ここでひとつ注意！

携帯メールアドレスに、iPhone のメールアドレス（i.softbank.jp）は指定できません。
mixi のかたに直接伺ったところ、iPhone では固有端末情報を特定できないため、mixi の仕様上では登録可能メールアドレスから除外されているようです。

※こちらにも記載致しましたが、現在は iPhone のメールアドレスも登録可能メールアドレスとして扱われるようになっています。

２．デベロッパー登録を完了させる

ステップ１で入力した携帯メールアドレスへ登録完了用メールが届きますので、
受信したメールに記載された URL にアクセスし、mixi へログインすると完了画面が表示されます。
尚、申請してから 30 分以内に登録を完了させないと、もう一度ステップ１からやり直しになりますのでご注意を！

３．「mixiアプリ オープンβ」コミュ二ティに入会する

mixiアプリ オープンβ コミュニティ に参加し、http://platform001.mixi.jp/ へアクセスします。（サブドメイン付きなのがポイント）
このとき、サイト上部の「友人を招待する」メニューの隣に「アプリ」メニューが出現していれば OK。

以上で、デベロッパー登録および mixiアプリ作成準備の完了です！

次回は「アプリ」メニューから、実際に mixiアプリ機能を使ってみようと思います。

Post Footer automatically generated by Add Post Footer Plugin for wordpress.