• 外部サイトに誘導する
• 参加コミュニティを取得する
• 学校を選択する
• 学校リストを取得する
• マイミクを招待する
• 同級生を招待する
• コンテナを判別する
• 関連リンク

OpenSocial jQuery 本体に続けて、OpenSocial jQuery mixi Platform をロードしてください。

<script type="text/javascript" src="opensocial-jquery.js"></script>
<script type="text/javascript" src="opensocial-jquery.mixi.js"></script>

外部サイトに誘導する

jQuery.view を使って、外部サイトに誘導できます。 このとき、外部サイトの URL を指定します。 また、パラメータを指定すると QUERY_STRING に変換して URL に付与します。

// http://www.google.com/
$.view('http://www.google.com/');

// http://www.google.com/search?q=corgi
$.view('http://www.google.com/search', { q: 'corgi' }); 

ただし mixi の URL を指定したときは、外部サイトとみなさず、即ページ遷移します。

// http://mixi.co.jp/
$.view('http://mixi.co.jp/');

// http://mixi.jp/show_profile.pl?id=0123456789
$.view('http://mixi.jp/show_profile.pl', { id: '0123456789' });

また、従来どおり、ビューの切り替えや現在のビュー名の取得もできます。詳しくは View を見てください。

$.view('profile');
$.view('home');
$.view('canvas', { q: 'corgi' });
console.info($.view()); // profile, home, canvas

jQuery.view は views を必要とします。

<Require feature="views" />

参加コミュニティを取得する

jQuery.getData を使って、ユーザの参加コミュニティを取得できます。 このとき url に /communities からはじまるパスと @viewer, @owner, ユーザID のいずれかを指定します。jQuery.ajax や jQuery.get も同様です。詳しくは AjaxData を見てください。

$.getData('/communities/@viewer/@self').next(function(communities) {
  $.each(communities, function(i, community) {
    console.info(community.id); // コミュニティID
    console.info(community.userId); // ユーザID
    console.info(community.url); // コミュニティURL
    console.info(community.name); // コミュニティ名
    console.info(community.thumbnailUrl); // コミュニティ画像
  });
  console.info(communities.totalResults); // 参加コミュニティ数
}).error(function(e) {
  alert(e+'');
});

jQuery.ajax の datatype="data" は opensocial-0.8 を必要とします。

<Require feature="opensocial-0.8" />

学校を選択する

jQuery.getData を使って、VIEWER の母校や在学中の学校を選択できます。このとき url に /schools からはじまるパスと @selected を指定します。jQuery.ajax や jQuery.get も同様です。詳しくは AjaxData を見てください。

$.getData('/schools/@selected').next(function(schools) {
  var school = schools[0];
  console.info(school.token); // 学校トークン
  console.info(school.divisionId); // 学校区分ID
  console.info(school.division); // 学校区分名
});

jQuery.ajax の datatype="data" は opensocial-0.8 を必要とします。

<Require feature="opensocial-0.8" />

学校リストを取得する

jQuery.getData を使って、VIEWER の母校や在学中の学校リストを取得できます。このとき url に /schools からはじまるパスと @viewer を指定します。jQuery.ajax や jQuery.get も同様です。詳しくは AjaxData を見てください。

$.getData('/schools/@viewer/@self').next(function(schools) {
  $.each(schools, function(i, school) {
    console.info(school.token); // 学校トークン
    console.info(school.divisionId); // 学校区分ID
    console.info(school.division); // 学校区分名
  }
  console.info(schools.totalResults); // 学校数 = schools.length
}).error(function(e) {
  alert(e+'');
});

jQuery.ajax の url="/schools" と datatype="data" は opensocial-0.8 と classmates を必要とします。

<Require feature="opensocial-0.8" />
<Require feature="classmates" />

マイミクを招待する

jQuery.invite を使って、マイミクを招待できます。このとき @friends を指定します。招待したマイミクのユーザIDリストを取得できます。

$.invite('@friends', function(ids) {
  $.each(ids, function(i, id) { console.log(id) }); // ユーザIDリスト
});

また @friends を省略しても同じことができます。

$.invite(function(ids) {
  $.each(ids, function(i, id) { console.log(id) }); // ユーザIDリスト
});

さらに Deferred チェーンを使っても同じことができます。詳しくは AjaxDeferred を見てください。

$.invite('@friends').next(function(ids) {
  $.each(ids, function(i, id) { console.log(id) }); // ユーザIDリスト
}).error(function(e) {
  alert(e+'');
});

jQuery.invite は opensocial-0.8 を必要とします。

<Require feature="opensocial-0.8" />

同級生を招待する

jQuery.invite を使って、同級生を招待できます。このとき @classmates を指定します。招待した同級生のユーザIDリストを取得できます。

$.invite('@classmates', function(ids) {
  $.each(ids, function(i, id) { console.log(id) }); // ユーザIDリスト
});

さらに Deferred チェーンを使っても同じことができます。詳しくは AjaxDeferred を見てください。

$.invite('@classmates').next(function(ids) {
  $.each(ids, function(i, id) { console.log(id) }); // ユーザIDリスト
}).error(function(e) {
  alert(e+'');
});

jQuery.invite の @classmates は classmates を必要とします。

<Require feature="classmates" />

コンテナを判別する

jQuery.container.mixi を使って、コンテナが mixi Platform かどうか判別できます。 他コンテナも含めて 1つの JS ファイルにまとめるときに役立ちます。

if ($.container.mixi) { ... } // mixi Platform

.mixi クラスを使って、コンテナが mixi Platform かどうか判別できます。 他コンテナも含めて 1つの CSS ファイルにまとめるときに役立ちます。

<style type="text/css">
.mixi p { color: red; } /* mixi Platform */
</style>

関連リンク

• mixi Developer Center » mixiアプリ