PR

mixiアプリを動かしてみよう(応用編)

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

クチコミを生み出そう

第1回第2回で説明したmixiアプリを広めるうえで重要ポイントとして、クチコミがありました。今回は、そのクチコミを生む上で重要な機能である「アクティビティ」「招待」「メッセージ」を使ったアプリを実際に作ってみましょう。

アクティビティ

アクティビティは、自分がアプリで遊んだ行動履歴をマイミクに通知する仕組みです。アクティビティには2種類あります。アクティビティフィードとコミュニケーションフィードです。コミュニケーションフィードの投稿はユーザーの同意が必要なのでポップアップが表示され、アクティビティフィードは、ユーザーの許可は必要なく暗黙的に投稿出来るという違いがあります。それでは、早速アクティビティを送信するコードを見てみましょう。

アクティビティを作成するにはopensocial.newActivityでアクティビティのタイトルなどを設定し、それをopensocial.requestCreateActivityを呼ぶことで投稿出来ます。

opensocial.newActivity(params)

newActivity関数の第1引数にはopensocial.Activity.FieldをキーにしたObject(hash)を受け取ります。ここではTITLEにHello!という文字列を設定しています。

opensocial.requestCreateActivity(activity, priority, opt_callback)

opensocial.requestCreateActivity関数の第1引数にはさきほどのopensocial.newActivityの結果を渡します。

第2引数ではアクティビティフィード、コミュニケーションフィードのいずれかを指定しています。opensocial.CreateActivityPriority.LOWでアクティビティフィード、opensocial.CreateActivityPriority.HIGHでコミュニケーションフィードになります。

第3引数はコールバック関数をです。ここでは無名関数を渡しています。アクティビティを送信するのはたったこれだけです。アクティビティは、遷移先のビューにパラメータを渡したり、画像をつけれたり、宛先指定が出来きます。詳しくは以下のページを御覧下さい。

詳細情報:mixi Developer Center「アクティビティを送信してみよう」

招待

次は招待を送信します。招待は現在アプリを使っているユーザーが、他のユーザーにアプリをおすすめする機能です。招待が送信されると、招待されたユーザーのhomeに赤文字で表示されます。プログラムからユーザーの同意を得ないまま招待を送ることはできず、ユーザーに招待を送信する選択画面を表示するという形式になります。招待を送信するコードは以下のとおりです。

招待を送信するにはopensocial.requestShareAppを呼び出します。

opensocial.requestShareApp(recipients, reason, opt_callback,opt_params)

第1引数にはVIEWER_FRIENDSという文字列を指定します。第2引数は無視されるので、ここではnullを渡します。第3引数はコールバック関数を指定します。コールバック関数の引数には招待を送信したかどうか、誰に招待を送信したかどうかが渡ってきます。第4引数は指定しません。

招待を送るコードは以上です。非常に単純ですが、canvasでないと招待ページが出ない、viewerがアプリを追加していなければならないなどの制限があるため、注意が必要です。また、招待のウィンドウは、アプリのiframeの上に来るため、アプリ内でFlashを使っていた場合は招待のウィンドウの上にFlahsが表示されてしまいます。一時的にFlashを非表示にしましょう。

詳細情報:mixi Developer Center「マイミクを招待しよう」

メッセージ送信

招待よりもユーザーが入力する欄が広く、プログラム主体というよりもユーザー同士のコミュニケーションを主体として、そのやりとりを補足するよようなアプリに向いていると言えます。招待と同じようにユーザーにメッセージの送信画面を表示する形式です。メッセージを送信するコードは以下のとおりです。

メッセージを送信するにはopensocial.newMessageでメッセージの詳細を設定し、opensocial.requestSedMessageを呼び出してメッセージを送信します。

opensocial.newMessage(body, opt_params)

opensocial.newMessage関数の第1引数には本文を設定します。ここではHelloという文字列を指定しています。第2引数にはopensocial.Message.Fieldをキーに持つObject(hash)を指定します。ここではTITLEにtitleという文字を指定しています。

hah.opensocial.requestSendMEssageで実際にメッセージを送信します。

opensocial.requestSendMessage(recipients, message, opt_callback,opt_params)

第1引数には送信する宛先のユーザーIDを設定します。第2引数には先程opensocial.newMessageの戻り値を設定します。第3引数にはコールバック関数を指定します。コールバック関数の引数にはメッセージの送信が成功したかどうかが渡ってきます。第4引数は指定しません。

詳細情報:mixi Developer Center「ユーザにメッセージを送信してみよう」

デバッグ

ここまで様々なJavaScriptを書いてきましたが、うまく動かないこともあると思います。うまく動かない場合はFirebugなどを使ってデバッグしましょう。JavaScriptの開発でよく話題に出てくるのがFirebugです。FirebugはFirefoxのAdd-onです。マウスの下のHTMLを表示、ブレークポイントの設定、スタックトレースの表示、ページの読み込み時間やJavaScriptの実行時間の計測、Ajaxリクエストの中身を覗くなど、デバッグに便利な機能が揃っており、JavaScriptのデバッグツールとしてはデファクトスタンダードの地位を獲得しています。

OpenSocialはHTMLとJavaScriptでブラウザ上で動くため、デバッグツールがあるとないのとでは、開発効率がだいぶ変わってきます。この連載では詳しくは解説しませんが、JavaScriptの開発で詰まったときは使ってみるといいでしょう。

また、mixiアプリではXMLのキャッシュが強力に効くため、デバッグや開発時にはそれをOFFにするのがいいでしょう。run_appli.plのurlにnocache=1をつけるとキャッシュをOFFにできます。

詳細情報:mixi Developer Center「よくあるご質問 Gadget XMLファイルのキャッシュについて」

株式会社ミクシィ

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

連載バックナンバー

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

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

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

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

mixiアプリを動かしてみよう(応用編) | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。