mixi Developer Center (ミクシィ デベロッパーセンター)

mixiページアプリ

mixiページアプリ » 技術仕様 » JavaScript API

JavaScript API

mixiページアプリでは、アプリ作成を補助するJavaScript APIを提供しています。(PC, スマートフォンのみ)

本APIが提供する機能は以下の通りです。

機能名 指定する値
ユーザ認可 ユーザからOAuth 2.0の認可をもらうためのダイアログを表示する機能
iframeの高さ調整 アプリが描画されているiframeの縦幅を調節する機能
スクロール位置の調整 アプリ描画エリアの上辺を基準に、Y軸方向の任意の位置にスクロールを移動する機能 
Cookie有効化 iOS6のSafariにおけるCookieの有効化

利用準備

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: "5c1b3eea390b53f54ad0975e9a4bbba2",
    server_state: "WErVieau7umEw1k2aRYOqXL-syCeRzZ3M4UBClLeZ2k"
});
機能名 指定する値
scope 認可を得たいスコープをスペース区切りで並べた文字列。省略不可。
state redirect_uriへリダイレクトする際に、渡されるパラメータ。省略可。
server_state 事前に入手したserver_stateパラメータを指定してください。"openid"スコープを利用しない場合は省略可。ユーザの認可後のリダイレクト時に含まれるAuthorization Codeにこの値が紐づけられます。

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/)をご確認ください。

CSRF対策のために、server_stateの利用を推奨しています。server_stateの入手方法については、mixi Graph APIの「server_stateの入手」をご参照ください。

ユーザが認可した場合は以下のようにリダイレクトします。

http://example.com/callback?code=347ab1db9398d60b5ef3515e672d1e
機能名 指定する値
code Authorization Code
state ダイアログ呼び出し時に指定したstateの値

発行されたAuthorization Codeの有効期限は3分となります。
ユーザが認可拒否をした場合は以下のようにリダイレクトします。

http://example.com/callback?error=access_denied

server_stateパラメータが不正である場合は以下のようにリダイレクトします。

http://example.com/callback?error=invalid_server_state
機能名 指定する値
error エラー内容
state ダイアログ呼び出し時に指定したstateの値

iframeの高さ調節

アプリを表示するiframeの高さを調整します。PC、スマートフォン共に対応しています(※)。調整は以下のように行います。

mixi.window.adjustHeight(height);

指定するパラメータは以下の通りです。

パラメータ名 指定する値
height iframeの高さ(px)。省略した場合は呼び出し時点のiframe内のコンテンツに合わせて自動調整。

※スマートフォンに搭載されている多くのブラウザは、内側のコンテンツの高さに合わせてiframeの高さを自動的に調整します(注1)。 一方、一部のAndroid端末に搭載されているブラウザは、iframeの高さを自動的に調整する機能がありません。< これらのブラウザではアプリ側で高さの調整をする必要があります。 画像や文字列など、通信やDOM操作を一通り終えた後にadjustHeight()関数を呼び出すとよいでしょう。 (注1):これらのブラウザではadjustHeight()関数を利用しても、コンテンツの高さより小さい値には設定できません。

スクロール位置の調整

アプリ描画エリアの上辺を基準に、Y軸方向に下の任意の位置にスクロールを移動します。

mixi.window.scrollTo(y); 

指定するパラメータは以下の通りです。

パラメータ名 指定する値
y アプリ描画エリアの上辺から任意位置までの距離(px)。
省略・不正な値の場合はアプリ描画エリアの上辺へ移動。

縦に長いページから短いページへ遷移すると、コンテンツが上に見切れてしまうことがあります。 遷移後にscrollTo()関数を呼び出すと、ユーザーがコンテンツを見つけやすくなるでしょう。

Cookie有効化

iOS6搭載のSafariを利用してmixiページアプリを閲覧すると、Safariはアプリが設定したCookieの値を保存しないことがあります。例えばCookieを利用してアプリのセッション管理を行っている場合、正常に動作しない可能性があります。

こちらを参考に3rd Party Cookie 有効化を行ってください。

このページの上部へ