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を記述します。
01 | <!--//--><![CDATA[// ><!-- |
03 | <?xml version="1.0" encoding="UTF-8"?> |
05 | <ModulePrefs title="Hello, world!"> |
06 | <Require feature="opensocial-0.8" /> |
08 | <Content type="html"><![CDATA[ |
10 | //この中にHTML&JavaScriptを記述 |
基本は一番外にタグがあり、その下にタグとタグがあります。
には、OpenSocialガジェットのタイトルや説明、作者のメールアドレス、feature（ライブラリ）の読み込みなど、そのガジェットのメタ情報を記述します。＜Content>には、実際に描画されるHTMLを記述します。次に描画領域になるHTMLをContentタグ内に記述します。
1 | <!--//--><![CDATA[// ><!-- |
3 | <div>Hello, <span id="target"></span>!</div> |
Content内にはBodyタグは記述しません。描画時に以下のように変換されると考えて問題ありません。
1 | <!--//--><![CDATA[// ><!-- |
3 | <Content type="html"><![CDATA[ →→→ <body><br /> |
4 | ]]></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上で動かしてみます。
