帰ってきた大規模Webサービスの裏側

第3回 はじめてのmixiページアプリ開発

この記事を読むのに必要な時間:およそ 6 分

アプリ作成の流れ

今回は,ログインしているユーザのプロフィール情報と,ページに投稿されているフィード情報(つぶやき)を表示するアプリを作成します。作成手順は次のとおりです。

  • ① mixiページを作る(未作成の場合のみ)
  • ② mixiにパートナー登録をする(未登録の場合のみ)
  • ③ mixiにアプリ情報を登録する
  • ④ mixiページにアプリを設置する
  • ⑤ コーディング

① mixiページを作る(未作成の場合のみ)

mixiページをお持ちでない方は,まずmixiページを作成してください。数クリックで完成します。詳細はmixiページnaviをご覧ください。

② mixiにパートナー登録をする(未登録の場合のみ)

パートナー登録(開発者登録)をしていない個人の方は,mixi Developer Centerのパートナー登録(個人の方)ページで開発者情報を登録してください。

③ mixiにアプリ情報を登録する

mixi Developer Centerのmixiページアプリ登録ページから,作りたいmixiページアプリの情報を登録します。ここでは,fluxflexというクラウドホスティングサービスを利用して,PHPでアプリを作成してみます※5)⁠アプリ登録は,表2の情報を登録するだけで完了します。

指定した「リダイレクトURL」と,登録完了後に発行される次の情報は,コーディング時に必要となります。

  • Consumer Key
  • Consumer Secret

表2 本記事で作るアプリの情報

項目入力した値項目の説明
アプリ名はじめてのmixiページアプリアプリの名称
スタートURL(PC)http://mixipage-test01.fluxflex.com/index.phpPC版mixiページからアプリを起動したときに呼び出すURL
スタートURL(スマートフォン)http://mixipage-test01.fluxflex.com/index.phpスマートフォン版mixiページからアプリを起動したときに呼び出すURL
リダイレクトURLhttp://mixipage-test01.fluxflex.com/callback.phpOAuth 2.0のユーザ認可後にリダイレクトするURL
お問い合わせ用メールアドレスひみつあなたのメールアドレス
※5)
fluxflexとは,GitHubと連動するクラウドホスティングサービスで,無料で2プロジェクトまで作ることができます。詳細はfluxflexのサイトをご覧ください。

④ mixiページにアプリを設置する

前述の「① mixiページを作る(未作成の場合のみ)⁠で作成したmixiページの「メニューを追加・編集」をクリックすると,メニュー管理画面(アプリ管理画面)に遷移します。⁠メニューを追加」ボタンを押すと,ページに設置可能なアプリの一覧が表示されますので,先ほど登録したアプリを探して追加してください。mixiページにアプリへのリンクが追加されれば成功です。今はまだアプリを作っていないので,クリックしても404エラーなどが表示されると思います。

⑤ コーディング

では,さっそくコーディングに入りましょう。次の順番で行います。

  1. プロフィール情報を取得して画面に表示
  2. フィード情報一覧を取得して画面に表示

APIでアクセスできる情報にはユーザの個人情報も含まれます。そのため,アプリがユーザの情報にアクセスすることを事前にユーザに認可してもらったり,APIにアクセスするアプリの身元を確認したりする必要があります。その手段としてアクセストークンを取得します※6)⁠

プロフィールの取得に必要な「r_profile」スコープを認可しているアクセストークンを取得してみましょう※7)⁠mixiページアプリでは,ミクシィが提供しているpage.jsを読み込んでユーザ認可画面を呼び出します。⁠スタートURL」に設定したファイル(本記事ではindex.php)を作成し,<head>タグ内にリスト1の内容を追加してください※8)⁠

リスト1 index.php

<script src="http://static.mixi.jp/js/page.js"></script>
<script>
    // 初期化
    mixi.init({
        appId: '[YOUR CONSUMER KEY]'
        // あなたのアプリのConsumer Key
    });
    // ユーザ認可画面の呼び出し
    mixi.auth({
        // ユーザに認可してほしいスコープ
        // を半角スペース区切りで
        scope: "r_profile"
    });
</script>

mixi.init()は初期化処理を行うメソッドです。アプリを登録した際に発行されたConsumer Keyを引数として指定します。mixi.auth()はユーザ認可画面を呼び出すメソッドです。ユーザに認可してもらいたいスコープを半角スペース区切りで指定します。今回は,プロフィールを取得するPeople APIに必要な「r_profile」スコープを指定しています。

mixiページ上でアプリを起動しましょう。図1のようにユーザ認可画面が表示されたら成功です。

図1 ユーザ認可画面

図1 ユーザ認可画面

このユーザ認可画面でユーザが「同意」または「拒否」ボタンを押すと,アプリ登録で入力した「リダイレクトURL」にリダイレクトします。

次は,リダイレクト先のcallback.phpを作成しましょうリスト2)⁠ユーザが「同意」ボタンを押した場合,⁠code」という名でAuthorization codeが送られてきます。このAuthorization codeを使ってアクセストークンを取得します※9)⁠アクセストークンが取得できたら,People APIをたたいてプロフィール情報を取得してみましょう※10)⁠

リスト2 callback.php

<?php
define('CONSUMER_KEY', '[YOUR CONSUMER KEY]');     	// あなたのアプリのConsumer Key
define('CONSUMER_SECRET', '[YOUR CONSUMER SECRET]');	// あなたのアプリのConsumer Secret
define('REDIRECT_URI', '[YOUR REDIRECT URI]');       	// あなたのアプリのリダイレクトURI
define('MIXI_TOKEN_ENDPOINT', 'https://secure.mixi-platform.com/2/token');
define('MIXI_API_ENDPOINT', 'http://api.mixi-platform.com/2');

// パラメータからAuthorization codeを取得
$authorization_code = $_GET["code"];

// Authorization codeを使い,ユーザ認可のアクセストークンを取得
$user_access_token = getUserAccessToken($authorization_code);

// ユーザのプロフィール情報を取得
$profile = getProfile($user_access_token);

// ユーザ認可のアクセストークンを取得
function getUserAccessToken($authorization_code) {
    $param = array(
        "grant_type" => "authorization_code",
        "code" => $authorization_code,
        "client_id" => CONSUMER_KEY,
        "client_secret" => CONSUMER_SECRET,
        "redirect_uri" => REDIRECT_URI
    );
    $context = array(
        "http" => array(
            "method" => "POST",
            "header" => 'Content-Type: application/x-www-form-urlencoded',
            "content" => http_build_query($param, "", "&")
        )
    );

    $json = file_get_contents(MIXI_TOKEN_ENDPOINT, false, stream_context_create($context));
    $list = json_decode($json, true);

    return $list["access_token"];
}

// プロフィールを取得
function getProfile($access_token) {
    $url = MIXI_API_ENDPOINT. "/people/@me/@self";

    $context = array(
        "http" => array(
            "method"  => "GET",
            "header"  => "Content-Type: application/x-www-form-urlencoded\r\n".
                         "Authorization: OAuth ". $access_token
        )
    );

    $json = file_get_contents($url, false, stream_context_create($context));
    $list = json_decode($json, true);

    return $list["entry"];
}

// サニタイズ
function h($str) {
    return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}
?>

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>はじめてのmixiページアプリ</title>
  <style>
    img {vertical-align: middle;}
    div {background-color:#CCCCCC;margin-top:5px;padding:3px;}
  </style>
</head>
<body>
  ようこそ,<?php echo h($profile["displayName"]); ?>さん
  <img src='<?php echo h($profile["thumbnailUrl"]); ?>' width='45' height='45' />
</body>
</html>
※6)
mixiでは,OAuth 2.0 draft 10の仕様を採用しています。
※7)
APIの仕様ページに,APIごとに必要なスコープが記されていますのでご確認ください。
※8)
今回は説明の都合上,アプリの起動時に認可画面を呼び出しますが,実際にはユーザがどのようなアプリなのかをしっかり理解できる画面を介したうえで,認可画面を呼び出すことをお勧めします。
※9)
Authorization codeの有効期限は3分です。期限が切れてしまったときは,再度ユーザの認可を取ると新たなcodeが発行されます。仕様はmixi Developer Centerの認証認可手順ページをご覧ください。
※10)
APIの仕様はmixi Developer CenterのPeople APIページをご覧ください。

著者プロフィール

鈴木理恵子(すずきりえこ)

(株)ミクシィ プラットフォームサービス開発部 第1開発チーム

Twitter:@asyoulike007

コメント

コメントの記入