mixiページアプリ » 技術仕様 » JavaScript API
JavaScript API
mixiページアプリでは、アプリ作成を補助するJavaScript APIを提供しています。（PC, スマートフォンのみ）
本APIが提供する機能は以下の通りです。
| 機能名 | 指定する値 |
|---|---|
| ユーザ認可 | ユーザからOAuth 2.0の認可をもらうためのダイアログを表示する機能 |
| iframeの高さ調整 | アプリが描画されているiframeの縦幅を調節する機能。 |
利用準備
javascriptライブラリを読み込みます。
<script src="http://static.mixi.jp/js/page.js"></script>
次に、以下ように初期化コードを実行してください。
mixi.init({ appId: "xxxxxxxxxxxxxx" }); // 実際にはアプリのConsumer Keyを指定
指定するパラメータは以下の通りです。
| パラメータ名 | 説明 |
|---|---|
| appId | アプリのConsumer Key |
これでAPI利用の準備は終わりです。
ユーザー認可
mixi Graph APIのユーザ認可を得るためのダイアログを表示します。
ユーザが認可もしくは認可拒否を行うとiframeのsrcが書き換わり、アプリ登録時に設定されているredirect_uriに遷移します。
ダイアログの呼び出しは以下のように行います。
mixi.auth({ scope: "r_profile r_voice w_voice", state: "touch" });
| 機能名 | 指定する値 |
|---|---|
| scope | 認可を得たいスコープをスペース区切りで並べた文字列。省略不可。 |
| state | redirect_uriへリダイレクトする際に、渡されるパラメータ。省略可。 |
scopeで指定するスコープについては、mixi Graph APIの各APIドキュメント (http://developer.mixi.co.jp/connect/mixi_graph_api
)、および Page APIの項（http://developer.mixi.co.jp/page-apps/spec/page-api/）をご確認ください。
ユーザが認可した場合は以下のようにリダイレクトします。
http://example.com/callback?code=347ab1db9398d60b5ef3515e672d1e
| 機能名 | 指定する値 |
|---|---|
| code | Authorization Code |
| state | ダイアログ呼び出し時に指定したstateの値 |
発行されたAuthorization Codeの有効期限は3分となります。
ユーザが認可拒否をした場合は以下のようにリダイレクトします。
http://example.com/callback?error=access_denied
| 機能名 | 指定する値 |
|---|---|
| error | エラー内容 |
| state | ダイアログ呼び出し時に指定したstateの値 |
iframeの高さ調節
アプリを表示するiframeの高さを調整します。PC、スマートフォン共に対応しています(※)。調整は以下のように行います。
mixi.window.adjustHeight(height);
指定するパラメータは以下の通りです。
| パラメータ名 | 指定する値 |
|---|---|
| height | iframeの高さ(px)。省略した場合は呼び出し時点のiframe内のコンテンツに合わせて自動調整。 |
※スマートフォンに搭載されている多くのブラウザは、内側のコンテンツの高さに合わせてiframeの高さを自動的に調整します(注1)。
一方、一部のAndroid端末に搭載されているブラウザは、iframeの高さを自動的に調整する機能がありません。
これらのブラウザではアプリ側で高さの調整をする必要があります。
画像や文字列など、通信やDOM操作を一通り終えた後にadjustHeight()関数を呼び出すとよいでしょう。
(注1)：これらのブラウザではadjustHeight()関数を利用しても、コンテンツの高さより小さい値には設定できません。