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

mixiページアプリ

mixiページアプリ » 技術仕様 » 技術仕様概要

技術仕様概要

mixiページアプリは、大きく以下の2つの要素によって成り立っています。

  1. mixiページ上に、mixiページアプリ用のiframeを提供します
    iframe内をアプリケーションのドメインにすることで、描画はアプリケーションを提供するサーバーに任せます。
    (モバイルのみ、mixiのサーバーがプロクシとして介在します。)
  2. mixiページ用のAPI(以下、Page API)を提供します
    Page API は、mixiページの様々な機能を扱えるAPI群で、mixi Graph API の一部として追加されます。
    mixiページアプリとして登録されたアプリケーションは、Page APIを含む、mixi Graph APIを利用することができます。
    mixiページアプリは、これらのAPIを利用して、mixi上の情報を利用したアプリケーションを構築することができます。
 

mixiページアプリの表示領域について

mixiページアプリを表示するiframeの描画領域ですが、横幅は固定で以下の通りです。

 

デバイス 最大横幅
PC 520px
モバイル 240px
スマートフォン 320px
スマートフォン(90度回転時) 480px

縦幅は可変で、PCについては、JavaScriptを利用してiframeの高さの調節をすることができます。
詳しくは、「JavaScript API」の「iframeの高さ調節」(http://developer.mixi.co.jp/page-apps/spec/javascript-api/#toc-2)をご覧ください。

PC、スマートフォン

mixiページアプリは任意のドメインに設置します。
ユーザがmixiページアプリを起動すると、mixiページ内のiframeにアプリが表示されます。
ユーザがmixiページアプリを起動するURLの例は以下になります。

http://page.mixi.jp/run_page_apps.pl?module_id=[Module-ID]&page_id=[Page-ID]&appParams=%7B%22uid%22%3A%221569%22%7D
パラメータ名 指定する値
page_id mixiページのID
module_id mixiページ上で複数の同一アプリが配置されていた場合に識別するためのID
appParams アプリに渡す任意の値。JSON形式で表しURIエスケープしたもの。
(例:「{"uid":"1569"}」をURIエスケープして「%7B%22uid%22%3A%221569%22%7D」)

起動時は以下のように、mixiページアプリの登録時に指定して頂いたStart URLへ署名付きのPOSTリクエストを送ります。

mixiページアプリに渡るパラメータは以下になります。

パラメータ名 渡される値
mixi_page_id mixiページのID
mixi_module_id mixiページ上で複数の同一アプリが配置されていた場合に識別するためのID
mixi_is_owner 閲覧者がmixiページのオーナーであるかどうかを表す真偽値(true/false)
mixi_is_follower 閲覧者がmixiページのフォロワーであるかどうかを表す真偽値(true/false)
mixi_viewer_id 閲覧者のプラットフォームID
※ 該当のmixiページアプリが、GraphAPIの認証認可でr_profileを取得している時のみ。取得していない場合はパラメータに含まれません。
上記appParamsで指定したパラメータ名(例:uid) 上記appParamsで指定した値(例:1569)

mixiページアプリを起動する際は、署名付きリクエストを送信します。
必ずリクエストを検証し、mixiからのリクエストであることを確認してください。

mixiページアプリでは、OAuthパラメータの署名仕様を実装しています。
署名ベース文字列を生成することに関する情報は、「OAuth Core 1.0」(http://oauth.net/core/1.0/#rfc.section.A.5.1)を確認してください。

検証の方法は、「署名付きリクエストの検証」(http://developer.mixi.co.jp/appli/spec/pc/validating_signed_requests)のページをご参照ください。

また、検証の際に必要となる公開鍵は以下となります。

PC

-----BEGIN CERTIFICATE-----
MIIDfDCCAmSgAwIBAgIJAIzC8GwwTFzxMA0GCSqGSIb3DQEBBQUAMDIxCzAJBgNV
BAYTAkpQMREwDwYDVQQKEwhtaXhpIEluYzEQMA4GA1UEAxMHbWl4aS5qcDAeFw0x
MTA1MjQwNTMxMTBaFw0xMzA1MjMwNTMxMTBaMDIxCzAJBgNVBAYTAkpQMREwDwYD
VQQKEwhtaXhpIEluYzEQMA4GA1UEAxMHbWl4aS5qcDCCASIwDQYJKoZIhvcNAQEB
BQADggEPADCCAQoCggEBAMbpHo2BGgxSDO9jQmFoWEwscPJV/96LMtBNq7qm3NuD
8vX8Y1zF5VTKzpOhlX9uvOMrmOaWkMnPcQK2WxbocyB6lCF3Ewv41dR3lfR3oVbX
mF9tx+lLDYxyp5qoDzk/aOIgh0YHbwGuWwP8/kCwd2wUuXO6qMEEEOrqIafmGJdZ
KKFWwNSV8h4K1/guP4XK3gwTeiawJzYcKwHM+tMHAZax58HPr7lMbN0DGeeNXjW9
dNKqYjRw9XcTtv9ZQIcSvU+9c/dZHk3cm963vrxvtVsA4V/VSBaf6X0WJ44am//c
954poRVR0TA/4X76ZIgEKT12/H1MVJn4rQsrGtK4U68CAwEAAaOBlDCBkTAdBgNV
HQ4EFgQUVrpcuj6H3rI0IU7ZDBhIC7dCshwwYgYDVR0jBFswWYAUVrpcuj6H3rI0
IU7ZDBhIC7dCshyhNqQ0MDIxCzAJBgNVBAYTAkpQMREwDwYDVQQKEwhtaXhpIElu
YzEQMA4GA1UEAxMHbWl4aS5qcIIJAIzC8GwwTFzxMAwGA1UdEwQFMAMBAf8wDQYJ
KoZIhvcNAQEFBQADggEBAAkOHmJINcm8UEQWWSuYjIiwA/xSuFJKpGqSe3VAn2Gm
4W9seLN14duuu/CsNL31ih1jnSrYtzlOdmVwUOeYi5yhyHNkWtw1wSOQA8i+IFCt
WKXsxYyPblKjsNB9x3VyFSZYw+v41mVFQQGDH4V1JwyJW9Aebffv6oKROTkaIdt/
J5YoB712zHKVm0rZue3eUHdMiSIJLzhR6bL2bKV13wGSeKf7RBX/9lFTSVsyc9MQ
vjAOYWeGFYpup624CGWKPG+PEQe7vaDycaFHd0TPgoxLukUHkZhxvXo+tiweKnwI
WcfqZCQCnoPfIDIoVWFdMw6T9hJLICb5a8f05k1JFoQ=
-----END CERTIFICATE-----

スマートフォン

-----BEGIN CERTIFICATE-----
MIIDfDCCAmSgAwIBAgIJALlFXlCiAFLyMA0GCSqGSIb3DQEBBQUAMDIxCzAJBgNV
BAYTAkpQMREwDwYDVQQKEwhtaXhpIEluYzEQMA4GA1UEAxMHbWl4aS5qcDAeFw0x
MTA3MDYwMTE5MjJaFw0xMzA3MDUwMTE5MjJaMDIxCzAJBgNVBAYTAkpQMREwDwYD
VQQKEwhtaXhpIEluYzEQMA4GA1UEAxMHbWl4aS5qcDCCASIwDQYJKoZIhvcNAQEB
BQADggEPADCCAQoCggEBAN21pHE0zoW5NF+0Qd0h10Lc+obTnn6uKV247xezGam5
vP0+729zo0Ch46abF9B5SUIk3/kFfrwWU73UB8j9GJPcx6dN/SB4C/EpYPanbK7N
FohgLPh+uihB3brOfe0fCYQUzfh5lgfzzHyNxR7vE5ErVvQH2YMC1dX0LnE70m3y
+8QTQpq0My2FvttBAZwr2wV4mG/xuvxR3sXtzkTf7DLkRXCcuImMrRd+AI8oi9sG
xfB8ThFekgc9TARVgUiCgC/RNrIWmwh2s7ivCFDRPMfTJlNGTTu10SegS6+1cZgY
93/2fzsIUl86nxaNmLAu3+nzct/364lIwSB9/8hvsiUCAwEAAaOBlDCBkTAdBgNV
HQ4EFgQUqvQ+ztpLlBlv27Tmj+cXZn+7s/0wYgYDVR0jBFswWYAUqvQ+ztpLlBlv
27Tmj+cXZn+7s/2hNqQ0MDIxCzAJBgNVBAYTAkpQMREwDwYDVQQKEwhtaXhpIElu
YzEQMA4GA1UEAxMHbWl4aS5qcIIJALlFXlCiAFLyMAwGA1UdEwQFMAMBAf8wDQYJ
KoZIhvcNAQEFBQADggEBADDwaSXWL755GVQ5hcWEQGAQZFIpK1LSUuup0i2cRwAF
QnQE5cyQcQuy2qE7+dqSz6RHtRW4fnaJygPmpM912xjdG0Hbo/grKbrkVrpa1Hg5
Oi1ffKBUhT9ygttv/FxJDy3d7wqHgQXPT/Qkp1VJE6q24uKDHyEB/FiL01lbgZWm
73pSvRPXTBr2CY21SfPfhLzQoulr4KYx57U9C8BJoNJKXoHgOZ00NbDcc8VyB59H
RPtjxzf6g1yUOuefBoshCryaixWqmIUmv6RcE3ZGB5MCyJi8K3qo0Keo2W7HBH0t
NW1Lho60tFXYbHDeXiYlw3dT+R+al9zojfOUB3sJ/vU=
-----END CERTIFICATE-----

モバイル

mixiページアプリは任意のドメインに設置します。
ユーザがmixiページアプリを起動するURLの例は以下になります。

http://mpa.mixi.net/[page_id]/[module_id]/?url=[エスケープ済みURL]
パラメータ名 指定する値
page_id mixiページのID
module_id mixiページ上で複数の同一アプリが配置されていた場合に識別するためのID
url アプリURL。Start URL以外へ遷移したい場合に指定。アプリに渡す任意のパラメータはURLのクエリパラメータで指定(例:&uid=1569)

mixiアプリモバイルと同様に、mixiのサーバがProxyとして介入します。
アプリのコンテンツの描画は、アプリを提供するサーバに任せ、mixiのサーバがヘッダ&フッタを追加します。
アプリを提供するサーバに送られるURL例は以下のようになります。

http://application.server.domain/path?mixi_page_id=123&mixi_module_id=3&mixi_is_owner=false&mixi_is_follower=ture&mixi_viewer_id=21n6bmkduiq7c

mixiページアプリに渡るパラメータは以下になります。

パラメータ名 渡される値
mixi_page_id mixiページのID
mixi_module_id mixiページ上で複数の同一アプリが配置されていた場合に識別するためのID
mixi_is_owner 閲覧者がmixiページのオーナーであるかどうかを表す真偽値(true/false)
mixi_is_follower 閲覧者がmixiページのフォロワーであるかどうかを表す真偽値(true/false)
mixi_viewer_id 閲覧者のプラットフォームID
※ 該当のmixiページアプリが、GraphAPIの認証認可でr_profileを取得している時のみ。取得していない場合はパラメータに含まれません。
上記appParamsで指定したパラメータ名(例:uid) 上記appParamsで指定した値(例:1569)

アプリを提供するサーバに送信されるリクエストは、全て署名付きリクエストとなります。
必ずリクエストを検証し、mixiからのリクエストであることを確認してください。

検証の方法は、「OAuth Signatureの検証方法について」(http://developer.mixi.co.jp/appli/spec/mob/validate-oauth-signature)のページをご参照ください。

テストサイトについて

モバイル版mixiページアプリでは、mixiアプリ同様に、PCからアプリの動作確認ができるテストサイトを用意しています。
テストサイトのURLは以下となります。

http://mpa.test.mixi.net/[page_id]/[module_id]/

利用にあたっていくつかの制限事項がありますのでご注意ください。

  • パートナーアカウントまたはテストアカウントのみログイン可能です。
  • 自分が作成したアプリ、または開発者とマイミクのアプリのみ利用可能です。
  • ホーム等、アプリ以外のmixiモバイル本体の閲覧はできません。
  • ユーザ認可、外部サイト遷移などの動作確認を行うことはできません。
  • ブラウザのcookie機能が有効になっている必要があります。

認証認可手順

mixiページアプリから行う認証認可手順は、一部を除き既存のmixi Graph APIの認証認可手順(http://developer.mixi.co.jp/connect/mixi_graph_api/api_auth)と同じです。

以降で異なる点を説明します。

認証認可手順

PC、スマートフォン

PC、スマートフォンのmixiページアプリでは、mixiの提供するJavascript APIを利用して、
簡単にユーザ認可とAuthorization Codeを取得することができます。
詳しくは、「JavaScript API」の項(http://developer.mixi.co.jp/page-apps/spec/javascript-api/)をご確認ください。

モバイル

モバイルのmixiページアプリからユーザ認可を行うには、UserFlowAPIを利用します。
詳しくは、「Mobile UserFlowAPI」の項(http://developer.mixi.co.jp/page-apps/spec/mobile-user-flow-api/)をご確認ください。

アクセストークンの取得(クライアント認証)

ユーザの認可が不要なAPIを利用するには、クライアント認証されたアクセストークンを取得する必要があります。
アクセストークンを取得するためのURIは以下の仕様となります。

POST https://secure.mixi-platform.com/2/token

以下のパラメータをリクエストボディにapplication/x-www-form-urlencoded形式で指定します。

パラメータ名 指定する値
grant_type "client_credentials"
client_id Consumer key
client_secret Consumer secret

各パラメータが正しければ、レスポンスで以下のようなJSON形式の認可情報を返します。

{"refresh_token":"391e1188f707bc5d599d53c3f7b13664ba2fc3d3","expires_in":900,"access_token":"5d73a24c593234f17f389d3221225aa635a6a796"}
パラメータ名 指定する値
access_token アクセストークン
refresh_token リフレッシュトークン
expires_in 有効期間 (秒)

 

このページの上部へ