はじめに
はじめまして、ミクシィの鈴木理恵子(@asyoulike007)です。今年の8月31日にリリースされました「mixiページ」という新しいサービスをご存じでしょうか? mixiページには好きなアプリを選んで設置する機能があるのですが、このたびmixiページアプリのプラットフォームを開放し、一般の開発者の方にもmixiページアプリを作っていただけるようになりました[1]。本稿ではこのmixiページアプリの作り方を解説します。
mixiページとは
mixiページとは、好きなことを発信できる「自分の場」(=ページ)を誰もが自由に持つことのできるサービスです。デザインも機能も自由にカスタマイズでき、店舗やブランド、アーティスト作品や趣味活動を“うわさ”にして盛り上げる、工夫しだいで無限大に広がる新しいコミュニケーションサービスです。一部のmixiページはインターネットの検索エンジンの検索対象になり、mixiにログインしていない人も見ることができる点も話題になっています[2]。記事執筆時点(2011年11月上旬)で、すでに18万を超えるページが作られています。その他、mixiページの詳細については、mixiページnaviをご覧ください。
mixiページアプリとは
mixiページの中央には、ページアプリを表示するエリアがあります。mixiページを作った時点では、ミクシィが提供している基本アプリ(日記、フォト、Twitter連携)が設置されていますが、みなさんが作成したアプリもここに追加できます。アプリはミクシィ所定の審査を通ると公開でき、ほかの方が作成したmixiページにもアプリを追加してもらえるようになります(審査前は自分が作成したページのみに設置できます)。
mixiページアプリは、ページ情報を操作できるPage API、ページアプリ管理ができるPage App APIのほかに、すでにmixi Graph APIでご提供しているAPIも利用でき、多様なアプリの開発が可能です(※3、表1)。
mixiページは、PC・モバイル(ガラケー)・スマートフォンの3デバイスに対応していて、mixiページアプリも同様に3デバイスに対応させることができます。本稿で説明するのはPCとスマートフォンに対応したアプリです[4]。
表1 mixiページアプリが使えるAPI(抜粋)
API | 機能 |
Page API | ページ情報の取得 |
ページに紐付くフィードの取得・投稿・削除 |
フィードなどへのコメントの取得・投稿・削除 |
フィードなどへのイイネ!の取得・投稿・削除 |
Page App API | アプリが設置されているページの取得 |
mixi Graph API | プロフィールの取得(People API) |
ボイスの取得・投稿・削除(Voice API) |
写真の取得・登録・削除(Photo API) |
位置情報の取得・登録・削除(Check-in API) |
※:この表は一部のAPIのみを抜粋したものです。ほかのAPIについては、表中に記載したURLを参照してください。
アプリ作成の流れ
今回は、ログインしているユーザのプロフィール情報と、ページに投稿されているフィード情報(つぶやき)を表示するアプリを作成します。作成手順は次のとおりです。
- ① 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.php | PC版mixiページからアプリを起動したときに呼び出すURL |
スタートURL(スマートフォン) | http://mixipage-test01.fluxflex.com/index.php | スマートフォン版mixiページからアプリを起動したときに呼び出すURL |
リダイレクトURL | http://mixipage-test01.fluxflex.com/callback.php | OAuth 2.0のユーザ認可後にリダイレクトするURL |
お問い合わせ用メールアドレス | ひみつ | あなたのメールアドレス |
④ mixiページにアプリを設置する
前述の「① mixiページを作る(未作成の場合のみ)」で作成したmixiページの「メニューを追加・編集」をクリックすると、メニュー管理画面(アプリ管理画面)に遷移します。「メニューを追加」ボタンを押すと、ページに設置可能なアプリの一覧が表示されますので、先ほど登録したアプリを探して追加してください。mixiページにアプリへのリンクが追加されれば成功です。今はまだアプリを作っていないので、クリックしても404エラーなどが表示されると思います。
⑤ コーディング
では、さっそくコーディングに入りましょう。次の順番で行います。
- プロフィール情報を取得して画面に表示
- フィード情報一覧を取得して画面に表示
APIでアクセスできる情報にはユーザの個人情報も含まれます。そのため、アプリがユーザの情報にアクセスすることを事前にユーザに認可してもらったり、APIにアクセスするアプリの身元を確認したりする必要があります。その手段としてアクセストークンを取得します[6]。
プロフィールの取得に必要な「r_profile」スコープを認可しているアクセストークンを取得してみましょう[7]。mixiページアプリでは、ミクシィが提供しているpage.jsを読み込んでユーザ認可画面を呼び出します。「スタートURL」に設定したファイル(本記事ではindex.php)を作成し、<head>タグ内にリスト1の内容を追加してください[8]。
mixi.init()は初期化処理を行うメソッドです。アプリを登録した際に発行されたConsumer Keyを引数として指定します。mixi.auth()はユーザ認可画面を呼び出すメソッドです。ユーザに認可してもらいたいスコープを半角スペース区切りで指定します。今回は、プロフィールを取得するPeople APIに必要な「r_profile」スコープを指定しています。
mixiページ上でアプリを起動しましょう。図1のようにユーザ認可画面が表示されたら成功です。
このユーザ認可画面でユーザが「同意」または「拒否」ボタンを押すと、アプリ登録で入力した「リダイレクトURL」にリダイレクトします。
次は、リダイレクト先のcallback.phpを作成しましょう(リスト2)。ユーザが「同意」ボタンを押した場合、「code」という名でAuthorization codeが送られてきます。このAuthorization codeを使ってアクセストークンを取得します[9]。アクセストークンが取得できたら、People APIをたたいてプロフィール情報を取得してみましょう[10]。
次に、フィード情報の取得に必要なアクセストークンを取得しましょう(リスト3)。アクセストークンは2種類あり、アクセスする情報の種類により使い分けます。先ほどのプロフィール情報のようにユーザに情報へのアクセスを認可してもらう必要がある情報[11]と、アプリの身元さえ確認できればユーザの認可は不要な情報の2種類です[12]。フィード情報は一般に公開されている情報で後者になり、先ほどのプロフィール情報とは別のアクセストークンを取得します。
アクセストークンを取得したら、mixiページに投稿されているフィードの一覧を取得してみましょう[13]。このフィードはmixiページの「新着」で投稿・表示している情報です。フィード取得のURIのPathInfoにページIDを指定します。ページIDは、mixiページをブラウザで表示する際のURLに含まれている「page_id=xxxxx」という値です。また、mixiページからアプリが呼び出されるときのリクエストパラメータにも含まれています[14]。フィード一覧を取得したら、投稿者のニックネーム・投稿者の画像・本文・投稿日時を画面に表示してみましょう。
ここまでを動作させると、図2のようになります。
リクエストの検証
今回は誌面の都合で説明を省略しましたが、mixiページからアプリが呼ばれたときに(本記事の場合はindex.php)、そのリクエストがmixiからの正しいものかを必ず確認してください。確認の方法は、mixi Developer Centerの「署名付きリクエストの検証」ページを参照してください。mixiページ用の公開鍵は、mixi Developer Centerの技術仕様概要をご確認ください。
さいごに
いかがでしょうか? 今回はごくごくシンプルなサンプルアプリを作りました。本記事内のコードには、さらにセキュリティ対策やエラー処理などを組み込む必要があります。このコードをもとに作ったアプリをこちらのmixiページで公開しています。
mixiページは今話題のサービスです。たくさんのAPIをご用意していますので、ぜひみなさんの工夫でバイラルする人気アプリを作ってください。
mixiではエンジニアを募集しています。
詳細はこちら