ミクシー開発メモ: 4月 2012

2012年4月25日水曜日

友人一覧を取得するまでの流れ

旧方式の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 (ミクシィデベロッパーセンター)
これで友人一覧が取得できる。

・気を付けなければならないこと
ユーザー認可で得られる認証コードの有効期限が３分
アクセストークンの有効期限は現状15分となっている。
（※アクセストークンの有効期限は取得時にパラメータ(expires_in)で受け取れるのでそちらを参照すること。）
つまり３分以内にアクセストークンを取得しなければならない。
そしてそこから１５分以内に友人一覧を取得しなければならないのか？
もし15分後に日記書き込みやアクティビティ使いたい時、もう一度ユーザー認可してリダイレクト（つまりmixiアプリ初期化)するのか？
。。。というとそういうわけではないらしい。
認証認可手順 << mixi Developer Center (ミクシィデベロッパーセンター)の｢アクセストークンの再発行」を15分以内のサイクルで定期的に実施しておけば、トークンは維持されるため、mixi Graph APIを使用できる。
サーバーで定期実行するか、JSのsetTimeoutで定期的に叩くようにしておけば問題ない。

とりあえず、アクセストークンとかいろいろな値をプロキシアプリケーション内でセッション管理してるほうがラクだと感じた。mixiアプリには、アクセストークンの再発行時間だけ教えておけばいい。

2012年4月17日火曜日

JavaScript API動かすまで

動くまでいろいろ手間取った。

基本的には、JavaScript API の利用準備 << mixi Developer Center (ミクシィデベロッパーセンター) に記載されている通りで問題ない。

動かなくて迷ったところをメモ。

・同じドメインの Web サーバに配置するhtmlファイルについて。
素直にこのまま配置すればよい。<html>とか<body>とかつけなくてよい。メカニズムはまだ理解してない。追記予定

・mixi.initで指定する。Consumer Keyについて
赤字の箇所ね。

mixi.init({
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へは、自前でプロキシアプリケーションを用意しなくてはならない。というのが見解。

2012年4月15日日曜日

mixiアプリの読み込み完了後のイベントハンドラ

昔はこんな感じだったけど。
gadgets.util.registerOnLoadHandler(function() {
//ロジック記述
});

今は、不要みたいだね。
htmlをiframeで読み込む形態だから、普通に
window.onloadで問題ないっぽい。

2012年4月14日土曜日

修正しても画面に反映されない場合

URLの末尾に以下をつける。
&nocache=1

※JSファイルが反映されない場合は、ブラウザでURL指定で再読み込みさせたほうがよい。

高さを調整する。

mixiアプリのキャンバスを調整するには、以下が必要となります。

スクリプト内に以下を指定

gadgets.window.adjustHeight(数値);

※引数を指定しない場合、高さが自動調節される。

2012年4月13日金曜日

一番基本的な書き方

まずは一番簡単なmixiアプリを作ろう。

・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セクション