旧方式のAPIはjavascript形式で提供されていたけど、新方式になって、URL方式APIで提供されるようになった。
mixiの公式ドキュメント読んだけど、流れが掴みにくかったので、メモしておきたい。
友人一覧はmixi Graph APIを叩くことで、情報が得られる。
以下を実施するとmixi Graph APIの他の機能(日記やメッセージの登録など)も容易にできる。
※前提
mixi Graph APIに登録が必要。
クレジットカード登録が必要だが、有料なわけではない。
プログラム的な流れ
1. JavaScript API の利用準備
JavaScript API の利用準備 << mixi Developer Center (ミクシィ デベロッパーセンター)
このとおり実装すればとりあえず、Javascript APIは動く。
htmlファイルもこのままコピペして使えばよい。
2.ユーザー認可を実装する。
ユーザー認可を実装しなければならない。
ユーザ認可について << mixi Developer Center (ミクシィ デベロッパーセンター)
友人一覧の取得の場合、mixi Graph APIの「people API」のため、スコープに"r_profile"が指定しておかなければならない。
これを実装すると、アプリ管理画面で指定したリダイレクト先に遷移する。このリダイレクトされたURLが本当のmixiアプリとなる。
(ちなみにリダイレクト先のmixiアプリでもmixi.initを実行しておいた方がよい。何してるかわからないが、とりあえずJavascript APIを使うための初期化なので。)
パラメータとして「認証コード」が渡される。
3. アクセストークン、リフレッシュトークンを取得する。
以後、mixi Graph APIを使ってアクセスする。
ユーザ認可によるリダイレクトで受け取った認証コードでアクセストークンを取得しなければならない。
認証認可手順 << mixi Developer Center (ミクシィ デベロッパーセンター)の項目「リフレッシュトークン、アクセストークンの入手」
ここから、mixiアプリから直接mixi Graph APIを叩くことはできない。(Ajaxでは、クロスドメインでセキュリティエラーになるため。)
自サイト経由で情報を取得する必要があるのでプロキシアプリケーションの実装が必要となる。
(phpとかperlなど動的サイトが作れるレンタルサーバーで問題ない。)
4.アクセストークンを使って、友人一覧を取得する。
People API << mixi Developer Center (ミクシィ デベロッパーセンター)
これで友人一覧が取得できる。
・気を付けなければならないこと
ユーザー認可で得られる認証コードの有効期限が3分
アクセストークンの有効期限は現状15分となっている。
(※アクセストークンの有効期限は取得時にパラメータ(expires_in)で受け取れるのでそちらを参照すること。)
つまり3分以内にアクセストークンを取得しなければならない。
そしてそこから15分以内に友人一覧を取得しなければならないのか?
もし15分後に日記書き込みやアクティビティ使いたい時、もう一度ユーザー認可してリダイレクト(つまりmixiアプリ初期化)するのか?
。。。というとそういうわけではないらしい。
認証認可手順 << mixi Developer Center (ミクシィ デベロッパーセンター)の「アクセストークンの再発行」を15分以内のサイクルで定期的に実施しておけば、トークンは維持されるため、mixi Graph APIを使用できる。
サーバーで定期実行するか、JSのsetTimeoutで定期的に叩くようにしておけば問題ない。
とりあえず、アクセストークンとかいろいろな値をプロキシアプリケーション内でセッション管理してるほうがラクだと感じた。mixiアプリには、アクセストークンの再発行時間だけ教えておけばいい。
ミクシー開発メモ
2012年4月25日水曜日
2012年4月17日火曜日
JavaScript API動かすまで
動くまでいろいろ手間取った。
基本的には、JavaScript API の利用準備 << mixi Developer Center (ミクシィ デベロッパーセンター) に記載されている通りで問題ない。
動かなくて迷ったところをメモ。
・同じドメインの Web サーバに配置するhtmlファイルについて。
素直にこのまま配置すればよい。<html>とか<body>とかつけなくてよい。メカニズムはまだ理解してない。追記予定
・mixi.initで指定する。Consumer Keyについて
赤字の箇所ね。
もし出てきてなかったら、mixi GraphAPIを登録してない。
間違ったConsumer Keyだと、うんともすんとも言わない。ちょっと手間取った。
※参考文献
JavaScript API の利用準備 << mixi Developer Center (ミクシィ デベロッパーセンター)
JavaScript API << mixi Developer Center (ミクシィ デベロッパーセンター)
基本的には、JavaScript API の利用準備 << mixi Developer Center (ミクシィ デベロッパーセンター) に記載されている通りで問題ない。
動かなくて迷ったところをメモ。
・同じドメインの Web サーバに配置するhtmlファイルについて。
素直にこのまま配置すればよい。<html>とか<body>とかつけなくてよい。メカニズムはまだ理解してない。追記予定
・mixi.initで指定する。Consumer Keyについて
赤字の箇所ね。
mixi.init({
appId: "XXXXXXXXXXX",
relayUrl: "http:/hogehoge.com/hoge/index.html"
});
appId: "XXXXXXXXXXX",
relayUrl: "http:/hogehoge.com/hoge/index.html"
});
mixiアプリ設定画面の「新方式(GraphAPI)利用に関する設定(PC、モバイル、スマートフォン)」のConsumer Key値を使うこと。
※mixi Graph APIに登録したConsumer Keyじゃないよ。もし出てきてなかったら、mixi GraphAPIを登録してない。
間違ったConsumer Keyだと、うんともすんとも言わない。ちょっと手間取った。
※参考文献
JavaScript API の利用準備 << mixi Developer Center (ミクシィ デベロッパーセンター)
JavaScript API << mixi Developer Center (ミクシィ デベロッパーセンター)
mixiの新方式
いろいろ変わったね。
・iframeとして読み込む
昔のgadget.xml方式じゃなくて、普通のhtmlで大丈夫。
独立したhtmlなので、「onload使わずにどうのこうの」 はなくなったっぽい。
javascriptとしての制限を開放した感じになってる。
・gadget.ioがなくなったっぽい。
mixi経由で外部サイトにajax通信とかはできなくなった。
mixi Graphへアクセスする際も自前でプロキシアプリケーションが必要になった?
・opensocial.newDataRequest()もなくなった
友人情報取得のAPI関連もなくなったね。
mixi GraphのPeople APIを叩いてJASONで取得する形式になったんだと思う。
とりま、iframeで読み込まれたmixiアプリは自分自身のサイトへのアクセスは、javascriptのajaxをごりごり書くだけで問題なく処理できる。
だが、mixiの提供するAPIへは、自前でプロキシアプリケーションを用意しなくてはならない。というのが見解。
・iframeとして読み込む
昔のgadget.xml方式じゃなくて、普通のhtmlで大丈夫。
独立したhtmlなので、「onload使わずにどうのこうの」 はなくなったっぽい。
javascriptとしての制限を開放した感じになってる。
・gadget.ioがなくなったっぽい。
mixi経由で外部サイトにajax通信とかはできなくなった。
mixi Graphへアクセスする際も自前でプロキシアプリケーションが必要になった?
・opensocial.newDataRequest()もなくなった
友人情報取得のAPI関連もなくなったね。
mixi GraphのPeople APIを叩いてJASONで取得する形式になったんだと思う。
とりま、iframeで読み込まれたmixiアプリは自分自身のサイトへのアクセスは、javascriptのajaxをごりごり書くだけで問題なく処理できる。
だが、mixiの提供するAPIへは、自前でプロキシアプリケーションを用意しなくてはならない。というのが見解。
2012年4月15日日曜日
mixiアプリの読み込み完了後のイベントハンドラ
昔はこんな感じだったけど。
gadgets.util.registerOnLoadHandler(function() {
//ロジック記述
});
今は、不要みたいだね。
htmlをiframeで読み込む形態だから、普通に
window.onloadで問題ないっぽい。
gadgets.util.registerOnLoadHandler(function() {
//ロジック記述
});
今は、不要みたいだね。
htmlをiframeで読み込む形態だから、普通に
window.onloadで問題ないっぽい。
2012年4月14日土曜日
高さを調整する。
mixiアプリのキャンバスを調整するには、以下が必要となります。
スクリプト内に以下を指定
スクリプト内に以下を指定
gadgets.window.adjustHeight(数値);
※引数を指定しない場合、高さが自動調節される。
2012年4月13日金曜日
一番基本的な書き方
まずは一番簡単なmixiアプリを作ろう。
・test.xml
・test.xml
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Hello World!" />
<Content type="html">
<![CDATA[
Hello, world!
]]>
</Content>
</Module>
・ModulePrefs@
title
・Content@
type
htmlと記載する。他に何があるのかよく知らない。
デフォルト値もhtmlなのでtype属性は記載不要。
※
<![CDATA[
]]>で囲っているのは、XMLの仕様。CDATAセクション
登録:
投稿 (Atom)