0

mixiアプリでユーザー情報を取得

mixiアプリを仕事ですることになったのでメモ。
ユーザー情報をとってくるサンプルです。
特定のユーザー(243944402)からプロフィールURLを取得します。

profile URL is <span id="target"></span>
<script type="text/javascript">
function init() {
var params = {};
params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [
opensocial.Person.Field.PROFILE_URL,
];
// ユーザーIDを指定
var uid = "243944402";
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest(uid, params), "spec");
req.send(function(data) {
var viewer = data.get("spec").getData();
var profileUrl = viewer.getField(opensocial.Person.Field.PROFILE_URL);
document.getElementById("target").innerHTML = profileUrl;
});
} 
gadgets.util.registerOnLoadHandler(init);
</script>

特定のユーザー(243944402)のマイミクのプロフィールURLを取得します。
複数のデータがとれるのでeachでまわす。

<div>profile URL is <span id="target"></span></div>
<script type="text/javascript">
function init() {
// ユーザーIDを指定
var uid = "243944402";
var user_info = {};
user_info[opensocial.IdSpec.Field.USER_ID] = uid;
user_info[opensocial.IdSpec.Field.GROUP_ID] = "FRIENDS";
var idSpec = opensocial.newIdSpec(user_info);
var params = {};
params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [
opensocial.Person.Field.PROFILE_URL,
];
var req = opensocial.newDataRequest();
req.add(req.newFetchPeopleRequest(idSpec, params), "friends");
req.send(function(data) {
var friends = data.get("friends").getData();
friends.each(function(friend) {
var prof = friend.getField(opensocial.Person.Field.PROFILE_URL);
document.getElementById("target").innerHTML += prof + '<br>';
});
});
}
gadgets.util.registerOnLoadHandler(init);
</script>

このアプリをインストールした人のプロフィールを取得したい場合は、opensocial.IdSpec.PersonId.OWNER、
このアプリを今使ってる人(ユーザー自身)のプロフィールを取得したい場合は、opensocial.IdSpec.PersonId.VIEWER
をそれぞれuidに指定。

uidのユーザーIDはintとして扱うとエラー吐くので注意。

0

ガジェットのファイル保存方法

3大ガジェットで、もっとも気に入ってるがyahooウィジェットです。
vistaやgoogleのガジェットにはない機能としてファイルと保存と読み込みができます。
値を保持しておくだけならSystem.Gadget.Settings.read(“hoge”)等で問題ないのですが、特定のファイルに書き込んで保存というのがyahoo以外のガジェットではできません。
しかもコモンダイアログまでyahooではでてきます。

Webのエンジニア街道をつっぱしてきた私にはローカルファイルをこの様に簡単に扱えるのは驚きでした。
ちょっと頑張ればテキストエディターなんかも作れてしまいます。

ちなみに値を保持しておくのも三種三様。
yahoo widget
これでオプション画面で設定した値を取得できます。
オプション画面でOKをクリックするだけで値が保存されます。
preferences.hoge.value;

vista sidebar gadget
前者で値を保存することができます。
後者で値を取得しています。
致命的なのが一度ガジェットを削除すると保存されたデータが消えてしまいます。
System.Gadget.Settings.write("hoge", "値");

System.Gadget.Settings.read("hoge")

google desktop gadget
vistaと似てます。
options.putValue("hoge", "値")

options.getValue("hoge")

0

yahooウィジェット基本の覚書

yahooウィジェットの制作のポイントを何点かメモ。
同時にvista sidevar gadgetも作って混乱することもあったので。

基本的にyahoo, vista, google, AIRの中では一番初心者向きの気がします。
言語はXMLとjavascriptとすこーしのCSSです。

■デザイン
cssでレイアウトを組むのでなくXMLに左から○○px上から○○pxにテキストやイメージを置くといった感じです。
下記の例だと左から100px上から200pxにlogo.gifの左上がくるように配置します。
css脳になってしまってる人には少しやりにくいかもです。
<image>
<name>demo</name>
<src>Resources/logo.gif</src>
<hOffset>100</hOffset>
<vOffset>200</vOffset>
</image>

cssで下記のように書くのと同じです。
hoge {
position:absolute;
background-image:url(Resources/logo.gif);
left: 100px;
top: 200px;
}

■XMLの動的書き換え
javascriptを使ってXMLの要素の中を変更することができます。
さっきのXMLに少し手を加えます。
下記の例では、この画像をクリックすると画像がlogo2.gifに変更されます。
<image>
<name>demo</name>
<src>Resources/logo.gif</src>
<hOffset>100</hOffset>
<vOffset>200</vOffset>
<onclick>
demo.src = "Resources/logo2.gif";
</onclick>
</image>

javascriptだとこんな感じでしょうか。
document.getElementById("demo").src="logo2.gif" mce_src="logo2.gif";
yahooウィジェットではこの「name」がHTMLがIDのような役割を果たします。
ですので、同じkonファイルで同じnameは使えません。

■デバッグ
XMLでデバッグモードをonにしておけばコンソール画面がでます。
<debug>on</debug>

javascript内で下記のように入力すると変数や配列の中身を表示してくれます。
もちろんシンタックスエラーも表示します。
print(hoge);
log(hoge);

■設定画面
他のガジェット同様あらかじめ設定画面を使った設定の保存がし易くなってます。
XMLではこんな感じ。
これだけ保存ボタンも生成され自動できに保存されます。
明示的に保存するスクリプトを書かなくて良いわけです。

<preference name="color">
<title>色変更</title>
<type>popup</type>
<option>青</option>
<optionValue>青</optionValue>
<option>赤</option>
<optionValue>赤</optionValue>
</preference>

popupはHTMLのプルダウンと同じ意味です。

呼び出しも簡単。
保存されたデータはjavascript内でこのようにして取り出します。
foo = preferences.color.value;

■配布用ファイル作成
.konファイルとwidget.xmlと他ファイルをcontentsフォルダに入れる。
それを任意のフォルダ(sample)に入れる。

ウィジェットコンバーターにそのフォルダをドラッグ&ドロップするとsample.widgetが生成されます。

ちなみにこのウィジェットコンバーターは逆にwidgetファイルをフォルダに戻すことも可能です。
これでほかの人が作ったスクリプトをみて勉強できるというわけ。