PR

mixiアプリを動かしてみよう(基本編)

2010年9月22日(水)
森 和之

mixiアプリを動かしてみよう

こんにちは。第1回第2回に引き続き、第3回も私mainyaこと森和之が解説させていただきます。

第3回となる今回の目的は、簡単なmixiアプリを実際に作って動かしてみることです。実現する機能は以下のとおりです。

  • 自分の情報を表示する
  • マイミクの一覧を表示する
  • ウィンドウの高さを自動的に調整する
  • 3つのビューに対応する

実際にmixiアプリの開発を体験して、今後本格的なソーシャルアプリを開発するための基礎知識の習得を目指します。この章を読み進めていけば、あとは必要な機能を自分で調べて実装出来るようになるでしょう。ただ読むのと実際に開発を体験するのとでは習得度が全然違います。ぜひ実際に手を動かして自分でmixiアプリを作ってみてください。

前回も説明したように、mixiアプリはOpenSocialに準拠しています。OpenSocialはXMLで定義され、内部はHTMLとJavaScriptで記述されています。読み込み時にXMLが展開されてHTMLが描画されます。そのため大部分をJavaScriptで記述することになります。JavaScriptには様々な制約があり、JavaScriptだけでサービスを提供するのは難しいのではないかと思うかもしれません。しかしOpenSocialでは、JavaScriptの弱点ともいえるクロスドメイン制限を補うための外部接続APIや、クッキー以外の方法で情報を保存しておくための永続化APIなどが、JavaScriptAPIとRestfulAPIの両方で提供されており、JavaScriptだけでサービスを提供出来るようになっています。

Hello, World

では、早速OpenSocialの第1歩として、プログラミングの基本である「Hello, World」を表示してみましょう。ただ「Hello, World」と表示するだけでなく、「Hello, 」と表示してみましょう。

まずは基本のXMLを記述します。

基本は一番外にタグがあり、その下にタグとタグがあります。

には、OpenSocialガジェットのタイトルや説明、作者のメールアドレス、feature(ライブラリ)の読み込みなど、そのガジェットのメタ情報を記述します。<Content>には、実際に描画されるHTMLを記述します。次に描画領域になるHTMLをContentタグ内に記述します。

Content内にはBodyタグは記述しません。描画時に以下のように変換されると考えて問題ありません。

さて、ここからがOpenSocialの本丸であるJavaScriptです。viewerの情報を取得するJavaScriptを記述します。

ここで重要なのはopensocial.DataRequestです。プロフィールの取得やマイミクの取得などの処理はすべてAjaxで非同期に通信されるため、複数の処理を一度に取ってくることで高速化出来ます。これをやってくれるのがDataRequestです。

詳細情報:Opensocial.DataRequest (v0.8)

基本的な流れは、opensocial.newDataRequestでDataRequestオブジェクトを作り、取得した処理をadd関数に渡し、send関数でそれを一気にとってきます。

add(request, opt_key)

opensocial.DataRequest.add関数の第1引数には取得したい関数の戻り値を指定します。第2引数にはそのリクエストに紐付ける文字列を指定します。ここでは第1引数にnewFetchPersonRequest関数の戻り値を指定します。

Object newFetchPersonRequest(id, opt_params)

newFetchPersonRequest関数は特定のひとりのプロフィール情報を取得する場合に利用します。第1引数にはデータを取得する対象を、第2引数には詳細なプロフィールを取得したい場合はそのフィールドを指定します。ここでは第1引数にopensocial.IdSpec.PersonId.VIEWERを指定しています。IdSpecについては第2章で説明したいと思います。

send関数が呼ばれると、DataRequestオブジェクトにaddされたリクエスト(この場合はViewerの情報の取得)をまとめて、SNSにAjax通信を行います。

send(opt_callback)

send関数の第1引数にはコールバック関数を指定出来ます。データの取得が完了すると、コールバック関数がデータ取得結果を引数に渡されて自動的に呼ばれます。ここでは後述するdisplayData関数をコールバック関数として渡しています。

以上でプログラムは完成です!2ページ目では、早速mixi上で動かしてみます。

Think IT会員限定特典
  • 「mixiアプリを動かしてみよう(基本編)」サンプルプログラム(1)

株式会社ミクシィ

パートナーサービス部 第1プラットフォーム開発チーム
1985年生まれ。2007年に株式会社ミクシィの最初の新卒として入社。Find Job !の開発を半年間経験したのち、mixi開発グループに移動。mixiアプリのプロジェクトの立ち上げから開発を担当し、以降現在までmixiアプリ及び mixi Platformの開発をしている。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています