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

mixiアプリ

mixiアプリ » 技術仕様(新方式) » PC » 写真をフォトアルバムにアップロードしてみよう

写真をフォトアルバムにアップロードしてみよう

mixiアプリからフォトアップロードAPIを利用することにより、SAPが生成や加工を施した画像ファイルを、mixiアプリからユーザのかんたん公開アルバムに登録することができます。例えば、ユーザが既にmixiフォトのアルバムに登録した写真について、mixiアプリ上で加工などを行い、その結果をアルバムに再登録させることで、その加工された写真を元に友人とのコミュニケーションを生み出すことが可能です。更にその写真を見た友人がそのmixiアプリを使って新しい加工を施す・・・といった連鎖も行われるようになるでしょう。

本文書では、mixiアプリからフォトアップロードAPIについて、技術的な利用方法について説明いたします。

フォトアップロードAPI利用の事前準備

フォトアップロードAPIを利用するには、以下の事前準備をしておく必要があります。

  • JavaScript API で提供されていますので、JavaScript API の利用準備を行っておく必要があります
  • 利用には mixi_apps2 スコープのユーザ認可を取得しておく必要があります
    ユーザ認可の方法についてはユーザ認可についてをご参照ください

アップロードの手順

mixiアプリからフォトアップロードAPIを使って画像ファイルをかんたん公開アルバムに登録するための手順は、以下となります。

  1. 登録したい画像ファイルをSAP側Webサーバ上で準備します。
  2. mixiアプリ内でフォトアップロード用APIを呼び出します。
  3. mixiサーバからSAP側Webサーバにフォトの取得要求が送信されます。
  4. SAP側Webサーバで署名の検証を行います。
  5. SAP側Webサーバは画像ファイルをmixiサーバに返送します。
  6. ユーザはmixiアプリ上で画像ファイルのサムネイルを閲覧し、登録するか選択します。
  7. mixiサーバ内でかんたん画像アルバムに画像ファイルが登録されます。
画像ファイルの準備

登録したい画像ファイルを、mixiアプリが動作しているWebブラウザ上ではなく、SAP側のWebサーバ上で準備します。登録可能な画像ファイルの形式は「JPEG、PNG」となります。準備された画像ファイルをmixiサーバから取得可能とするため、ここで画像ファイルのURLを決定し、mixiアプリに伝えます。

フォトアップロード用APIの呼び出し

画像ファイルのURLを受け取ったmixiアプリ上で、フォトアップロード用APIを呼び出します。このAPIは、mixi.requestUploadMediaItem()関数となります。

static void mixi.requestUploadMediaItem(mediaItem, optCallback);

引数は以下となります。

名前 説明
mediaItem アップロードする画像ファイルのURLを持つopensocial.MediaItemオブジェクト
optCallback 処理が完了した後に呼び出されるコールバック関数。

この関数の呼び出し例を以下に示します。

var mediaItem = opensocial.newMediaItem(
        opensocial.MediaItem.Type.IMAGE, "http://server.name/image.png");
mixi.requestUploadMediaItem(mediaItem, function(response) {
    if (response.hadError()) {
        var code = response.getErrorCode();
        var msg = response.getErrorMessage();
        // エラー時の処理
    } else {
        // 成功時の処理
    }
});
画像ファイルのmixiサーバからの取得

上記のmixi.requestUploadMediaItem()関数を呼び出した後に、mixiサーバは指定されたURLに基づいて、画像ファイルの取得要求を送信します。SAP側Webサーバは、この取得要求に基づいて、予め準備しておいた画像ファイルをレスポンスとしてmixiサーバに返送します。

mixiサーバからのリクエストには、署名が付与されます。署名の検証には、この文書の最後に記載されている公開鍵を利用します。SAP側Webサーバは、この公開鍵を使って署名の検証を行うことで、mixiサーバからのリクエストかどうかの妥当性を必ず判断するようにしてください。

また、リクエストには「opensocial_owner_id」および「opensocial_app_id」パラメータが含まれます。これは署名のBase stringにも含まれるものです。mixiサーバからのリクエストであるという妥当性検証のほかにも、これらのパラメータを使用することで本人確認(画像ファイルを本当に対象ユーザに渡していいかどうか)も合わせて行うようにしてください。

署名つきリクエストの具体的な検証方法は、以下のドキュメントをご覧ください。

[署名つきリクエストの検証]
http://developer.mixi.co.jp/appli/spec/pc/require_servers#toc-4

ユーザの登録確認とコールバック関数の呼び出し

mixiサーバが画像ファイルの取得を完了した後に、本当にかんたん公開アルバムに公開していいかどうかを問い合わせるポップアップ画面が表示されます。そのポップアップ画面には、先ほどmixiサーバが取得した画像ファイルのサムネイル画像が表示されます。

ユーザが登録に同意あるいは拒否を行った後に、ポップアップ画面は閉じられ、mixi.requestUploadMediaItem()関数に指定したコールバック関数が呼び出されます。このコールバック関数の引数を使用して、登録に成功したかどうかを確認することが可能です。mixiアプリは成功したかどうかを必ず確認し、それぞれ適切な処理を実装するようにしてください。

エラーコード

もし投稿に失敗した場合、コールバック関数の引数に対してgetErrorCode()関数およびgetErrorMessage()関数を呼び出すことにより、エラーコードおよびエラーメッセージを取得することができます。以下に、エラーコードおよびその意味について示します。それぞれのエラーについて、ユーザに投稿処理の失敗を表示するなど、適切な処理を実装するようにしてください。

エラーコード エラーメッセージ 説明
400 Failed to fetch URL 指定されたURLへ画像を取りにいったが正常な応答(200)が得られなかった
400 Not supported image format 取得したコンテンツのmime-typeが、jpeg または png でなかった
400 Invalid params 引数が不正 (URLがURLとして正しくない、など)
401 Insufficient scope mixi_apps2 スコープのユーザ認可を取得していない
403 Quota full ユーザがアップロードできる容量を越えている
403 Forbidden なんらかの理由によりアップロードAPIの使用が禁止されている
403 User canceled ユーザが処理の継続を拒否した
413 Image too large リクエストされた画像のサイズが大きすぎる
500 Internal Server Error mixi側のサーバエラーにより処理が完了できなかった

公開鍵

署名つきリクエストの妥当性を検証するために使用する公開鍵は以下となります。

-----BEGIN CERTIFICATE-----
MIICdzCCAeCgAwIBAgIJAK6oiSkLW/goMA0GCSqGSIb3DQEBBQUAMDIxCzAJBgNV
BAYTAkpQMREwDwYDVQQKEwhtaXhpIEluYzEQMA4GA1UEAxMHbWl4aS5qcDAeFw0x
MDA3MjEwODI0MDFaFw0xMjA3MjAwODI0MDFaMDIxCzAJBgNVBAYTAkpQMREwDwYD
VQQKEwhtaXhpIEluYzEQMA4GA1UEAxMHbWl4aS5qcDCBnzANBgkqhkiG9w0BAQEF
AAOBjQAwgYkCgYEAzSWXar2xZ1+2kdJKW6FzJBB8/RtDOWY46sQN3q93UQP6RQi/
AGeyhd0UNcx8uw+N7ulz/dNDdy1EbwrXMdN0jfK0SRHF61HIfyLfBNrWNUqhlwbj
j0duZcdLeHkWDmoZdB9bekOvFfLKIF9Qey/njQSUdglfTL9P2XwaYjFXjqkCAwEA
AaOBlDCBkTAdBgNVHQ4EFgQUsqTgGT8ThFGs/6EcCNDEH/QivKswYgYDVR0jBFsw
WYAUsqTgGT8ThFGs/6EcCNDEH/QivKuhNqQ0MDIxCzAJBgNVBAYTAkpQMREwDwYD
VQQKEwhtaXhpIEluYzEQMA4GA1UEAxMHbWl4aS5qcIIJAK6oiSkLW/goMAwGA1Ud
EwQFMAMBAf8wDQYJKoZIhvcNAQEFBQADgYEAe2KWtJV2tSVAqZ988NuwXym73yPy
PphRet/GzFnA4kWJzJ47AXbpSW2hwx/zbnV57bJ1/+nRau4T6E+FkaBnYgVQB1AH
1RPhIEXlaueur1Zd2cTe2c09IHSfiiv6Vx3rc+oqTtjmKys6OqV1U+rMZg2wO7qN
0n8x+NIZc268bzY=
-----END CERTIFICATE-----

 

このページの上部へ