«
»

[mixiアプリ] ユーザー情報を取得してみた。

2009年8月23日

Filed under: API,Ajax,JavaScript — admin @ 5:52 PM

mixiでソーシャルアプリケーションアワードという開発者のためのイベントが行われているようです。
よくわかんないけど、mixiの情報を使って、アプリケーションが作れるmixiアプリを作って応募しよう！というものであるようです。

mixiアプリ開発のためのサイトまでできている。
で、このmixiアプリ、APIを公開しているので、APIを使ったAjax開発経験者なら誰でもすぐに開発ができるようです。mixiAPIは情報がリアルなユーザー情報だけに何だか面白そう！

ってなことで、mixiアプリに入門してみました。
mixiアプリを開発するには公開環境を登録するみたいなことをしなきゃならないようです。
（ここでは割愛します。）

まずは、mixiアプリの基盤ともいえるガジェットXMLを作ります。

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="UTF-8"?>
  2.  
  3. <module>
  4.   <modulePrefs title="mixiアプリのてすとやねん">
  5.     <require feature="opensocial-0.8" />
  6.   </modulePrefs>
  7.   <content type="html"><![CDATA[
  8.  
  9.   <!--||| head |||-->
  10.  
  11.   <!--||| StyleSheet |||-->
  12.   <link rel="stylesheet" href="http://funnythingz.com/mixi/test/css/style.css" type="text/css" media="screen,all" />
  13.  
  14.   <!--|| JavaScript FrameWork ||-->
  15.   <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  16.   <script type="text/javascript">google.load("jquery", "1.3.2");</script>
  17.  
  18.   <!--|| OriginalScript ||-->
  19.   <script type="text/javascript" src="http://funnythingz.com/mixi/test/js/test.js"></script>
  20.  
  21.   <!--||| /head |||-->
  22.  
  23.   <!--||| body |||-->
  24.  
  25.   <div id="dev_field"></div>
  26.  
  27.   <!--||| /body |||-->
  28.  
  29.   ]]></content>
  30. </module>

HTMLの書き方わかる人なら、普通のHTMLを書くように、書けば特に問題なし。
外部JSやCSSの読み込みもできる。

ちなみに、外部JSや外部CSSのパスは絶対パスで書くこと。
ファイルは自分で用意したサーバに置く。

次に、外部CSSと外部JSを用意する。
ガジェットXMLのみですべて済ませたい人はそれで特に問題なし。
大規模な開発を行うならやはりファイルは分けておいたほうが後々わかり易い。

CSSはフィールド背景に色をつけてみた。
これで出力される場所がわかる。

PLAIN TEXT
CSS:
  1. @charset "utf-8";
  2. /*
  3. *  mixiアプリ用CSS
  4. */
  5.  
  6. #dev_field {
  7.   background: #ddd;
  8. }

次にJSファイルの用意。コア部分のプログラミングになるので、JSは外部ファイルにすることを推奨。
今回はmixiアプリにアクセスしたユーザー情報を取得してみる。

PLAIN TEXT
JavaScript:
  1. (function(){
  2.  
  3.   /******************************************************************************************************
  4.   *
  5.   *  mixiアプリAPIを使ってユーザー情報を取得してみる
  6.   */
  7.   /**-------------------------------------
  8.   *  initを定義
  9.   */
  10.   function init() {
  11.  
  12.     /**-------------------------------------
  13.     *  取得したい情報パラメータをセット
  14.     */
  15.     var params = {};
  16.     params[ opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS ] = [
  17.       opensocial.Person.Field.PROFILE_URL,
  18.       opensocial.Person.Field.ADDRESSES,
  19.       opensocial.Person.Field.AGE,
  20.       opensocial.Person.Field.DATE_OF_BIRTH,
  21.       opensocial.Person.Field.GENDER,
  22.       opensocial.Person.Field.HAS_APP,
  23.       mixi.PersonField.BLOOD_TYPE
  24.     ];
  25.     /**-------------------------------------
  26.     *  リクエストを生成
  27.     */
  28.     var req = opensocial.newDataRequest();
  29.     req.add( req.newFetchPersonRequest( opensocial.IdSpec.PersonId.VIEWER, params ), 'viewer' );
  30.     req.send(function( data ){
  31.  
  32.       /**--------------------------------------------------------------------------
  33.       *  var プロフィール情報を取得
  34.       */
  35.       /**-------------------------------------
  36.       *  エレメントセット
  37.       */
  38.       var element = $( '#dev_field' );
  39.  
  40.       /**-------------------------------------
  41.       *  アプリを使用しているユーザー情報をセット
  42.       */
  43.       var viewer = data.get( 'viewer' ).getData();
  44.  
  45.       //ニックネーム
  46.       var user_name = viewer.getDisplayName();
  47.       //ID
  48.       var user_id = viewer.getId();
  49.       //サムネイル画像
  50.       var user_thumbnail = viewer.getField( opensocial.Person.Field.THUMBNAIL_URL );
  51.       //プロフィールURL
  52.       var user_url = viewer.getField( opensocial.Person.Field.PROFILE_URL );
  53.       //出身地
  54.       var user_pref = viewer.getField( opensocial.Person.Field.ADDRESSES)[0].getField(opensocial.Address.Field.UNSTRUCTURED_ADDRESS );
  55.       //年齢
  56.       var user_age = viewer.getField( opensocial.Person.Field.AGE );
  57.       //誕生日
  58.       var user_birth = viewer.getField( opensocial.Person.Field.DATE_OF_BIRTH );
  59.       //性別
  60.       var user_gender = viewer.getField( opensocial.Person.Field.GENDER ).getKey();
  61.       //血液型
  62.       var user_blood_type = viewer.getField( mixi.PersonField.BLOOD_TYPE );
  63.       //このアプリをインストールしているか（戻り値:bool）
  64.       var hasApp = viewer.getField( opensocial.Person.Field.HAS_APP );
  65.  
  66.       /**--------------------------------------------------------------------------
  67.       *  プロフィール情報を使った処理
  68.       */
  69.       //HTMLテンプレート
  70.       var template = '';
  71.       template += '<div>[user_name] '+ user_name +'</div>' + "\n";
  72.       template += '<div>[user_id] '+ user_id +'</div>' + "\n";
  73.       template += '<div>[user_thumbnail]<br /><img src="'+ user_thumbnail +'" alt="'+ user_name +'" /></div>' + "\n";
  74.       template += '<div>[user_url] <a href="'+ user_url +'" target="_blank">'+ user_url +'</a></div>' + "\n";
  75.       template += '<div>[user_pref] '+ user_pref +'</div>' + "\n";
  76.       template += '<div>[user_age] '+ user_age +'</div>' + "\n";
  77.       template += '<div>[user_birth] '+ user_birth +'</div>' + "\n";
  78.       template += '<div>[user_gender] '+ user_gender +'</div>' + "\n";
  79.       template += '<div>[user_blood_type] '+ user_blood_type +'</div>' + "\n";
  80.       template += '<div>[hasApp] '+ hasApp +'</div>' + "\n";
  81.  
  82.       //出力
  83.       element.html( template );
  84.  
  85.     });
  86.  
  87.   }
  88.  
  89.   //init
  90.   gadgets.util.registerOnLoadHandler( init );
  91.  
  92. })();

これで、ユーザー情報の取得ができる。
あとは煮るなり焼くなり好きに調理してアプリを開発すればおｋ。

つくったmixiアプリの実行方法だが、mixiアプリ オープンβというコミュニティに参加しなくてはならない。
まだβ版だから仕方ないのか？いまいちこのめんどくさい作業は省いてもらいたいなぁ。

他に指定IDのユーザー情報やマイミク一覧の情報なども取得できるよう。
他APIと組み合わせてアプリを開発することも可能なので、けっこう盛り上がる予感がしますね。

コメントはまだありません »

コメントはまだありません。

この投稿へのコメントの RSS フィード。

コメントする