mixiアプリをちょっとかじってみた 黒 河 優 介
発 表 者 について 全 ゲ 連 第 二 回 で Wiiリモコン 使 ったゲーム について 発 表 した 人 とある 会 社 の 社 蓄 でも ソーシャルアプリは 業 務 とは 全 く 関 係 な い
mixiアプリとは? mixi 上 で 動 かすことが 出 来 るアプリです 全 画 面 はもちろん ガジェットのようにページ の 一 部 のみ 表 示 のアプリも 作 れます mixi 上 の 情 報 を 使 ったアプリも 作 れます
なぜmixi? ぶっちゃけ GREEとかモバゲーの 方 が 今 元 気 じゃね? 法 人 じゃないとアプリ 作 らせてくれない mixiは 個 人 でも 作 れる 環 境 を 提 供 してくれて ます!! といいつつ 個 人 で 作 成 できるのはPCアプリの みです ( 携 帯 向 けは 法 人 じゃないと ry)
mixi アプリ 制 作 に 必 要 なもの 携 帯 電 話 + 携 帯 のアドレス mixiアカウント mixi アプリ 開 発 者 登 録 Webサーバー(HTTPサーバー)
mixi アプリに 求 められる 知 識 必 須 XML HTML JavaScript あるとベター Flash(ActionScriptなど) CGIなどの 知 識 その 他 Web 系 知 識
mixi アプリの 仕 組 み1 Iframeで 区 切 られたCanvas 上 に 自 由 な HTMLを 書 き 込 める htmlはもちろん JavaScript FlashなどWeb ブラウザ 上 で 表 現 可 能 なら 何 でもあり
mixi アプリの 仕 組 み2 Gadget XMLという 中 に 表 示 したいHTML やJavaScriptなどをCData(XML 中 の 文 字 列 データ)として 表 記 JavaScriptで 用 意 されたAPIを 用 いて mixi 上 のデータにアクセス Opensocialという 規 格 に 準 拠
OpenSocialについて ソーシャル アプリケーションの 共 通 API です JavaScriptとHTMLを 使 用 して SNS 上 のア プリが 作 れます 1つのAPIで 多 様 なサイトに 対 応 GREE,モバーゲー,mixi, goo Home, Yahoo, MySpace OpenPNEなど 残 念 ながらFacebookは 対 応 しておらず
うだうだ 言 わず 作 成 してみる まずは 開 発 者 登 録 mixiにログイン 後 http://developer.mixi.co. jp/appli/pc/pc_prepare/developer_account_regist_pc にアク セスして 開 発 者 登 録 そして アプリ 登 録 http://developer.mixi.co.jp/appli/com/lauch/register にアクセ スして アプリ 登 録 登 録 内 容 は 修 正 可 能 なので 適 当 でもOK
Hello World hello.xml <?xml version="1.0" encoding="utf-8"?> <Module> <ModulePrefs title="hello, world!"> <Require feature="opensocial-0.8" /> </ModulePrefs> <Content type="html"><![cdata[ <div>hello, World!</div> ]]></Content> </Module> 1.hello.xmlを Webサーバーに アップ 2.ガジェットURLの 項 目 にアップした hello.xmlのurlを 登 録
実 行 結 果
Hello World 解 説 <?xml version="1.0" encoding="utf-8"?> <Module> <ModulePrefs title="hello, world!"> <Require feature="opensocial-0.8" /> </ModulePrefs> <Content type="html"><![cdata[ <div>hello, World!</div> ]]></Content> </Module> ヘッダー 部 分 このアプリのタイト ルなどの 情 報 の 他 に このアプリ がどの 機 能 を 利 用 するかなどを 書 きます コンテンツ 部 分 アプリが 実 際 に 表 示 する 表 示 設 定 が 書 いてあり ます Content 領 域 は 複 数 指 定 が 可 能 です ( 詳 細 は 後 ほど) 実 際 に ユーザーに 表 示 されるも の
mixiアプリ(pc) 動 作 時 の 概 要 図 ユーザー アプリに アクセス mixi サーバー HTTPで Gadget XMLを 要 求 アプリ サーバー キャッシュ 上 の Gadget XMLから 表 示 物 を 埋 め 込 む Gadget XMLから 表 示 物 を 埋 め 込 む Gadget XMLを 返 します
次 のアプリの 前 に キャッシュを 消 しましょう!! mixiサーバー 内 にGadgetXMLのキャッシュが 残 るので アプリケーション 変 更 時 に 必 要! キャッシュのクリアはアプリの 設 定 変 更 から 出 来 ます
キャッシュクリア
画 面 によって 表 示 物 をわける <?xml version="1.0" encoding="utf-8"?> <Module> <ModulePrefs title="hello, world!"> <Require feature="opensocial-0.8" /> <Require feature="views" /> </ModulePrefs> <!-- HOMEに 表 示 する 内 容 --> <Content type="html" view="home"><! [CDATA[ <div>hello, html!</div> ]]></Content> <!-- プロフィールに 表 示 する 内 容 --> <Content type="html" view="profile"><! [CDATA[ <div>hello, Profile!</div> ]]></Content> <!-- Canvasに 表 示 する 内 容 --> <Content type="html" view="canvas"><! [CDATA[ <div>hello, Canvas!</div> ]]></Content> </Module> 画 面 によって 表 示 内 容 を 分 ける ことを 明 示 します どの 画 面 で 表 示 するかを 指 定 します
アプリ 画 面 実 行 結 果
ホーム 画 面 実 行 結 果
プロフィール 画 面 実 行 結 果
プロフィールデータを 利 用 してみる <Content type="html"><![cdata[ <div>hello, <span id="target"></span>!</div> <!-- 以 下 JavaScriptコード --> <script type="text/javascript"> /** @brief EntryPointとなる 関 数 *データリクエスト 用 のオブジェクトの 作 成 * 取 得 したい 情 報 コールバック 関 数 を 指 定 してデータのリクエストを 行 います */ function init() { var req = opensocial.newdatarequest(); req.add(req.newfetchpersonrequest(opensocial.idspec.personid.viewer), "viewer"); req.send(onrequestcomplete); } /** @brief opensocialのデータリクエスト 完 了 後 に 呼 び 出 されます * @param [in] data mixiからとってきたデータが 引 数 として 渡 されます */ function OnRequestComplete(data) { var viewer = data.get("viewer").getdata(); var name = viewer.getdisplayname(); /*< 閲 覧 者 の 名 前 をname 変 数 に 代 入 */ document.getelementbyid( target ).innerhtml = name; /*< 実 際 に 名 前 をHTMLに 挿 入 */ } /* JavaScriptのEntryPointの 登 録 を 行 います */ gadgets.util.registeronloadhandler(init); </script> ]]></Content>
実 行 結 果
mixi のデータ 利 用 のイメージ 図 Userコード opensocial ライブラリ サーバー DataReque st オブジェクト Data Requestオブ ジェクトを 渡 します サーバーに データ 要 求 DataRequest オブジェクトに 指 定 されている コールバック 関 数 を 呼 び 出 す サーバーから データ 応 答
ViewerとOwner Mixiアプリでは 他 人 のアプリを 見 ることが 出 来 る 他 人 のアプリを 見 たとき 見 た 人 の 情 報 は Viewerとして 取 得 可 能 そのアプリを 持 っている 人 をOwnerとして その 人 のプロフィールをOwnerとして 取 得 可 能
友 達 のプロフィールを 使 う /** @brief マイミクリストをゲット */ function GetMyMiku(){ var ip = {}; ip[opensocial.idspec.field.user_id] = opensocial.idspec.personid.viewer; ip[opensocial.idspec.field.group_id] = "FRIENDS"; var idspec = opensocial.newidspec(ip); var req = opensocial.newdatarequest(); req.add(req.newfetchpeoplerequest(idspec), "friends"); req.send(callbackmymiku); } /** @brief Myミクリストの 取 得 が 終 わったときに 呼 び 出 されます */ function CallBackMyMiku(data){ var friends = data.get("friends").getdata(); friends.each(eachfriend); } /** @brief マイミク 一 人 一 人 処 理 するための 関 数 */ function EachFriend(friend){ var id = friend.getid(); var nickname = friend.getdisplayname(); var thumbnailurl = friend.getfield(opensocial.person.field.thumbnail_url); document.getelementbyid("friends").innerhtml += "ID : " + id + "<br/>" + " 表 示 名 : " + nickname + "<br />" + "アイコン: " + thumbnailurl + "<br />"; } /* 初 期 化 */ gadgets.util.registeronloadhandler(getmymiku);
実 行 結 果
アクティビティとは? マイミク( 友 達 )にmixiアプリをどのように 楽 し んでいるか 送 りつける 単 に 文 字 列 だけでなく 画 像 付 でアプリの 状 況 を 送 りつけることも 可 能 あて 先 を 指 定 して 特 定 のユーザーにのみ 送 ることも 可 能
具 体 的 には
コード <![CDATA[ <script type="text/javascript"> function postactivity(activity_msg) { var parms = {}; parms[opensocial.activity.field.title] = activity_msg; var activity = opensocial.newactivity(parms); opensocial.requestcreateactivity(activity, opensocial.createactivitypriority.high, activityresultcallback); var panel = document.getelementbyid("activity_panel"); } function activityresultcallback(status) { if (status.haderror()) { alert("error Creating activity."); } } function startactivity() { postactivity("アクティビティのテストです!クリックして!"); } gadgets.util.registeronloadhandler(startactivity); </script> <div id="activity_panel"></div> ]]>
他 に 出 来 ること 一 覧 mixiサーバーにデータを 保 存 PCアプリで 言 う HDDに 保 存 みたいなもの 持 ち 主 のID アクセス 用 のキー 保 存 する 文 字 列 でセット ユーザーにメッセージを 送 信 する 外 部 サーバーからデータを 取 得 する HTTPでアクセス(GET POSTなど 大 体 サポート) マイミクを 招 待 同 級 生 コミュニティの 情 報 を 利 用