[mixiアプリ] マイミク一覧取得と、アプリ登録者を取得してみた

2009年9月9日

Filed under: Ajax,JavaScript — admin @ 12:45 AM

北海道旅行から帰ってきたら何もやる気が起きなくなった僕です。
こんばんは。

北の大地があまりに広大すぎて心が空っぽになってしまいました。

さて、久しぶりにJavaScript書いてみました。
今回もmixiアプリのチュートリアルです。

前々回くらいで自分のユーザー情報を取得するスクリプトはつくってみました。
今回は、マイミク一覧とアプリ使用者をフィルタリングして、アプリを使ってるマイミクのみを取得するというテストをつくってみました。

JavaScript:
  1. (function(){
  2.  
  3.     /******************************************************************************************************
  4.     *
  5.     *   マイミク一覧を取得
  6.     *   ※このアプリに登録しているマイミクのみ
  7.     */
  8.     /**-------------------------------------
  9.     *   initを定義
  10.     */
  11.     function init(){
  12.         var ip = {};
  13.         ip[ opensocial.IdSpec.Field.USER_ID ] = opensocial.IdSpec.PersonId.VIEWER;
  14.         ip[ opensocial.IdSpec.Field.GROUP_ID ] = "FRIENDS";
  15.  
  16.         var idSpec = opensocial.newIdSpec( ip );
  17.  
  18.         var params = {};
  19.  
  20.         //アプリ使用者だけを抽出
  21.         params[ opensocial.DataRequest.PeopleRequestFields.FILTER ] = opensocial.DataRequest.FilterType.HAS_APP;
  22.  
  23.         //抽出したいパラメータをセット
  24.         params[ opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS ] = [
  25.             opensocial.Person.Field.PROFILE_URL,
  26.             opensocial.Person.Field.ADDRESSES,
  27.             opensocial.Person.Field.AGE,
  28.             opensocial.Person.Field.DATE_OF_BIRTH,
  29.             opensocial.Person.Field.GENDER,
  30.             opensocial.Person.Field.HAS_APP,
  31.             mixi.PersonField.BLOOD_TYPE
  32.         ];
  33.  
  34.         var rtn = '';
  35.  
  36.         var req = opensocial.newDataRequest();
  37.         req.add( req.newFetchPeopleRequest( idSpec, params ), "friends" );
  38.         req.send(function(data){
  39.             var friends = data.get( "friends" ).getData();
  40.             friends.each(function( friend ) {
  41.                 var id = friend.getId();
  42.                 var nickname = friend.getDisplayName();
  43.                 var thumbnailUrl = friend.getField( opensocial.Person.Field.THUMBNAIL_URL );
  44.  
  45.                 // プロフィール情報を使って処理
  46.                 rtn += '<div style="margin-bottom: 10px;">' + "\n";
  47.                 rtn += '[id]'+ id +"\n";
  48.                 rtn += '[nickname]'+ nickname + '<br />' +"\n";
  49.                 rtn += '<img src="'+ thumbnailUrl +'" />' +"\n";
  50.                 rtn += '</div>' + "\n";
  51.  
  52.                 var element = $( '#dev_field' );
  53.                 element.html( rtn );
  54.             });
  55.         });
  56.     }
  57.  
  58.     /*
  59.     *   init
  60.     */
  61.     gadgets.util.registerOnLoadHandler( init );
  62.  
  63. })();

デフォルトで表示される件数は20件までなようです。
さらに表示したい場合は、

JavaScript:
  1. params[ opensocial.DataRequest.PeopleRequestFields.MAX ] = 50;

をつかって、件数を取得するようです。
なんか、lengthやgetMyMixiLength()みたいなのないのかなぁ。

さらに、条件から一致した全体の数から、n件目から取得みたいなこともできる。

JavaScript:
  1. params[ opensocial.DataRequest.PeopleRequestFields.MAX ] = 50;
  2. params[ opensocial.DataRequest.PeopleRequestFields.FIRST ] = 30;

上の例だと、「50件中、30件目から取得」みたいなことができる。
公式のリファレンスまぁまぁわかりやすいんだけど、もっと細かいリファレンス欲しいなぁ。

めちゃめちゃ若いのに…。 – jQueryちゃん

2009年9月2日

Filed under: Ajax,JavaScript — admin @ 12:39 AM

天才とはこのような少年のことをいうんだろうか。

[mixiアプリ] 2ちゃんねるまとめサイトのRSSリーダーをつくってみた

2009年8月24日

Filed under: API,Ajax,JavaScript — admin @ 1:18 AM

いつも2ちゃんねるまとめサイトの巡回をするのだが、mixiアプリでRSSリーダーつくったら面白いかもと思い、1時間程度でmixiアプリをつくってみた。
google Ajax APIを使ったので、めちゃめちゃ簡単にできたお。

[mixi] 2ちゃんまとめRSSリーダー

mixiアプリおもしれいお(^q^)

[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を作ります。

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はフィールド背景に色をつけてみた。
これで出力される場所がわかる。

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

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

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. })();

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

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

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

Aptana1.5 インストールと日本語化

2009年7月30日

Filed under: Adobe AIR,Ajax,Aptana,JavaScript — admin @ 1:44 AM

こんぬつわ。
JavaとかRubyとかやろうかなと思いつつも、結局気づいたらJavaScriptしか書いてない僕です。

JavaScripterな人たちにとって有名か有名じゃないかわかりませんが、Adobe AIRでAjaxやらMXML+ActionScriptを使ってデスクトップアプリが簡単(?)に作れるオーサリングツール、Aptana。AIRアプリをつくるときにものすごく重宝しています。
Eclipseを元に開発されたらしいので、(Eclipseのプラグインとしてのインストールも可)Java開発ならEclipse、JavaScriptならAptanaというイメージで使っています。

元々英語なので、インストール後に日本語化しなくてはいけないので、簡単に手順を。

[1]
Aptana公式サイトからAptana本体をダウンロード

[2]
ダウンロード完了後、インストール。

[3]
英語のまま使いたかったらこのままでも使えますが、日本語化するため、eclipseの日本語化プラグインを使います。(aptanaはeclipseをベースに作られているため使用可能)。

こちらからPleiade(安定版)をダウンロードします。

[4]
Pleiadesを解凍し、featuresフォルダとpluginsフォルダをAptanaがインストールされているフォルダに移動し、コピーする。

[5]
AptanaStudio.iniに下記を追記する。
-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar

Aptanaを起動し、日本語化されていればインストール成功

環境が整ったら、AIRを開発するための環境を整えたりすればおk(^q^)

urlエンコードと文字コード

2009年7月15日

Filed under: Ajax,JavaScript — admin @ 12:19 AM

最近、外部のAPIを使うようになってから、文字コードに振り回される機会が多いのでちょっとメモっとく。

utf-8でエンコードされてるものを使う場合、htmlがShift_JISやeuc-jpの場合、utf-8でエンコードされたAPIを読み込む場合はsharsetに読み込み元の文字コードを記述する。

HTML:
  1. <script type="text/javascript" src="xxxxxxx.js" charset="utf-8" /></script>

Firefoxやsafariといったブラウザは自動で内部変換してくれるのだが、IEは内部で変換してくれないのでこういった処置が必要になる。
もろもろめんどくさいが、指定しておいたほうが確実ですね。

FlashPlayerの有無を判別する構文 – JavaScript

2009年6月3日

Filed under: Ajax,JavaScript — admin @ 11:44 AM

swfobject.js(ver_1.5)を使った場合のFlashPlayerの有無の判別。
いつもスクラッチするので、めんどくさいと思いメモ。

JavaScript:
  1. /*
  2. *   swfobject.js(ver_1.5)を使った場合
  3. */
  4. var so = new SWFObject('sample.swf', 'top', '100%', '394', '8', '#f2ebda');
  5. if(so.installedVer.major&gt;= 8){
  6. /*-------------------------------------------------
  7. *   FlashPlayer8以上がインストールされている場合、
  8. *   トップページにFlashを表示する。
  9. */
  10.  
  11. }else{
  12. /*-------------------------------------------------
  13. *   FlashPlayer8以上がインストールされていない場合、
  14. *   Adpbe公式のFlashPlayerのインストール画面へリンクする
  15. *   画面を表示する。
  16. */
  17.  
  18. }

OS判別JS

2009年5月20日

Filed under: Ajax,JavaScript — admin @ 10:29 AM

何か使えるかもしれないので、OS判別スクリプトをメモ

JavaScript:
  1. var getOS = function() {
  2.    var agent = navigator.userAgent.toLowerCase() ;
  3.    var Win_OS = agent.indexOf("win") != -1 ;
  4.    var Mac_OS = agent.indexOf("mac") != -1 ;
  5.    var Linux_OS = agent.indexOf("linux") != -1 ;
  6.    var Other_OS = agent.indexOf("win") == -1 &&
  7.    agent.indexOf("mac") == -1 &&
  8.    agent.indexOf("linux") == -1 ;
  9.  
  10.    if(Win_OS){os = "Windows"}
  11.    if(Mac_OS){os = "MacOS";}
  12.    if(Linux_OS){os = "Linux";}
  13.    if(Other_OS){os = "不明";}
  14.    return os;
  15. }

フォントサイズをうにゅうにゅさせてみた。

2009年3月5日

Filed under: Ajax,JavaScript — admin @ 1:11 AM

フォントサイズをうにゅうにゅさせるJSを実装してみた。

動作デモはこちら

なんてこたぁないJSです。jQuery使ったら30分で実装できた。
jQuery、凄すぎる!

ついでに、ブラウザ閉じても最後に設定したフォントサイズを維持してくれるように
クッキーの制御入れてます。

ソースコードのダウンロードはこちら

JavaScriptでvar_dump()が使えるライブラリ – funny.js

2008年9月12日

Filed under: Ajax,JavaScript,PHP — admin @ 6:53 PM

PHPのvar_dump() が、JavaScriptで var_dump()できちゃうライブラリです。

var_dump() ver_0.5 ダウンロード

使い方は以下の通りです。
funny.jsを読み込んで、PHPと同じ感覚で、var_dump() しちゃってください。
シンタックスエラー以外は何かしら返ってくると思います。

HTML:
  1. <script src="funny.js" type="text/javascript"></script>
  2. <script type="text/javascript">
  3.  
  4. var a = 123;
  5. funny.var_dump( a );
  6.  
  7. </script>

次ページへ »