ひろぽっぽれす » Ajax http://hiropo.co.uk Web系エンジニアの適当なブログです。どうでも酔いものばかり作ってます。 Sun, 25 Jul 2010 17:09:15 +0000 ja hourly 1 http://wordpress.org/?v=3.0 [mixiアプリ] マイミク一覧取得と、アプリ登録者を取得してみた http://hiropo.co.uk/archives/294 http://hiropo.co.uk/archives/294#comments Tue, 08 Sep 2009 15:45:55 +0000 admin http://hiropo.co.uk/?p=294 北海道旅行から帰ってきたら何もやる気が起きなくなった僕です。
こんばんは。

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

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

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

PLAIN TEXT
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件までなようです。
さらに表示したい場合は、

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

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

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

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

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

]]> http://hiropo.co.uk/archives/294/feed 0 めちゃめちゃ若いのに…。 – jQueryちゃん http://hiropo.co.uk/archives/292 http://hiropo.co.uk/archives/292#comments Tue, 01 Sep 2009 15:39:13 +0000 admin http://hiropo.co.uk/?p=292 天才とはこのような少年のことをいうんだろうか。

]]> http://hiropo.co.uk/archives/292/feed 0 [mixiアプリ] 2ちゃんねるまとめサイトのRSSリーダーをつくってみた http://hiropo.co.uk/archives/289 http://hiropo.co.uk/archives/289#comments Sun, 23 Aug 2009 16:18:18 +0000 admin http://hiropo.co.uk/?p=289 いつも２ちゃんねるまとめサイトの巡回をするのだが、mixiアプリでRSSリーダーつくったら面白いかもと思い、1時間程度でmixiアプリをつくってみた。
google Ajax APIを使ったので、めちゃめちゃ簡単にできたお。

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

mixiアプリおもしれいお（＾ｑ＾）

]]> http://hiropo.co.uk/archives/289/feed 0 [mixiアプリ] ユーザー情報を取得してみた。 http://hiropo.co.uk/archives/284 http://hiropo.co.uk/archives/284#comments Sun, 23 Aug 2009 08:52:41 +0000 admin http://hiropo.co.uk/?p=284 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と組み合わせてアプリを開発することも可能なので、けっこう盛り上がる予感がしますね。

]]> http://hiropo.co.uk/archives/284/feed 0 Aptana1.5 インストールと日本語化 http://hiropo.co.uk/archives/181 http://hiropo.co.uk/archives/181#comments Wed, 29 Jul 2009 16:44:46 +0000 admin http://hiropo.co.uk/?p=181 こんぬつわ。
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を開発するための環境を整えたりすればおｋ（＾ｑ＾）

]]> http://hiropo.co.uk/archives/181/feed 0 urlエンコードと文字コード http://hiropo.co.uk/archives/176 http://hiropo.co.uk/archives/176#comments Tue, 14 Jul 2009 15:19:39 +0000 admin http://hiropo.co.uk/?p=176 最近、外部のAPIを使うようになってから、文字コードに振り回される機会が多いのでちょっとメモっとく。

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

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

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

]]> http://hiropo.co.uk/archives/176/feed 0 FlashPlayerの有無を判別する構文 – JavaScript http://hiropo.co.uk/archives/153 http://hiropo.co.uk/archives/153#comments Wed, 03 Jun 2009 02:44:46 +0000 admin http://hiropo.co.uk/?p=153 swfobject.js(ver_1.5)を使った場合のFlashPlayerの有無の判別。
いつもスクラッチするので、めんどくさいと思いメモ。

PLAIN TEXT
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. }

]]> http://hiropo.co.uk/archives/153/feed 0 OS判別JS http://hiropo.co.uk/archives/147 http://hiropo.co.uk/archives/147#comments Wed, 20 May 2009 01:29:05 +0000 admin http://hiropo.co.uk/?p=147 何か使えるかもしれないので、OS判別スクリプトをメモ

PLAIN TEXT
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. }

]]> http://hiropo.co.uk/archives/147/feed 0 フォントサイズをうにゅうにゅさせてみた。 http://hiropo.co.uk/archives/137 http://hiropo.co.uk/archives/137#comments Wed, 04 Mar 2009 16:11:09 +0000 admin http://hiropo.co.uk/?p=137 フォントサイズをうにゅうにゅさせるJSを実装してみた。

動作デモはこちら

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

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

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

]]> http://hiropo.co.uk/archives/137/feed 0 JavaScriptでvar_dump()が使えるライブラリ – funny.js http://hiropo.co.uk/archives/46 http://hiropo.co.uk/archives/46#comments Fri, 12 Sep 2008 09:53:43 +0000 admin http://hiropo.co.uk/archives/46 PHPのvar_dump() が、JavaScriptで var_dump()できちゃうライブラリです。

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

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

PLAIN TEXT
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>

]]> http://hiropo.co.uk/archives/46/feed 1