全ゲ連発表黒

Size: px

Start display at page:

Download "全ゲ連発表黒"

こうざぶろうひろもり
7 years ago
Views:

1 mixiアプリをちょっとかじってみた黒河優介

2 発表者について全ゲ連第二回で Wiiリモコン使ったゲームについて発表した人とある会社の社蓄でもソーシャルアプリは業務とは全く関係ない

3 mixiアプリとは? mixi 上で動かすことが出来るアプリです全画面はもちろんガジェットのようにページの一部のみ表示のアプリも作れます mixi 上の情報を使ったアプリも作れます

4 なぜmixi? ぶっちゃけ GREEとかモバゲーの方が今元気じゃね? 法人じゃないとアプリ作らせてくれない mixiは個人でも作れる環境を提供してくれてます!! といいつつ個人で作成できるのはPCアプリのみです ( 携帯向けは法人じゃないと ry)

5 mixi アプリ制作に必要なもの携帯電話 + 携帯のアドレス mixiアカウント mixi アプリ開発者登録 Webサーバー(HTTPサーバー)

6 mixi アプリに求められる知識必須 XML HTML JavaScript あるとベター Flash(ActionScriptなど) CGIなどの知識その他 Web 系知識

7 mixi アプリの仕組み1 Iframeで区切られたCanvas 上に自由な HTMLを書き込める htmlはもちろん JavaScript FlashなどWeb ブラウザ上で表現可能なら何でもあり

8 mixi アプリの仕組み2 Gadget XMLという中に表示したいHTML やJavaScriptなどをCData(XML 中の文字列データ)として表記 JavaScriptで用意されたAPIを用いて mixi 上のデータにアクセス Opensocialという規格に準拠

9 OpenSocialについてソーシャルアプリケーションの共通 API です JavaScriptとHTMLを使用して SNS 上のアプリが作れます 1つのAPIで多様なサイトに対応 GREE,モバーゲー,mixi, goo Home, Yahoo, MySpace OpenPNEなど残念ながらFacebookは対応しておらず

10 うだうだ言わず作成してみるまずは開発者登録 mixiにログイン後 jp/appli/pc/pc_prepare/developer_account_regist_pc にアクセスして開発者登録そしてアプリ登録にアクセスしてアプリ登録登録内容は修正可能なので適当でもOK

11 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を登録

12 実行結果

Hello World 解説 <?xml version="1.0" encoding="utf-8"?> <Module> <ModulePrefs title="hello, world!"> <Require feature="opensocial-0.8" /> </ModulePrefs> <Content type="html"><!

13 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 領域は複数指定が可能です ( 詳細は後ほど) 実際にユーザーに表示されるもの

14 mixiアプリ(pc) 動作時の概要図ユーザーアプリにアクセス mixi サーバー HTTPで Gadget XMLを要求アプリサーバーキャッシュ上の Gadget XMLから表示物を埋め込む Gadget XMLから表示物を埋め込む Gadget XMLを返します

15 次のアプリの前にキャッシュを消しましょう!! mixiサーバー内にGadgetXMLのキャッシュが残るのでアプリケーション変更時に必要! キャッシュのクリアはアプリの設定変更から出来ます

16 キャッシュクリア

17 画面によって表示物をわける <?xml version="1.0" encoding="utf-8"?> <Module> <ModulePrefs title="hello, world!"> <Require feature="opensocial-0.8" /> <Require feature="views" /> </ModulePrefs>  <Content type="html" view="home"><! [CDATA[ <div>hello, html!</div> ]]></Content>  <Content type="html" view="profile"><! [CDATA[ <div>hello, Profile!</div> ]]></Content>  <Content type="html" view="canvas"><! [CDATA[ <div>hello, Canvas!</div> ]]></Content> </Module> 画面によって表示内容を分けることを明示しますどの画面で表示するかを指定します

18 アプリ画面実行結果

19 ホーム画面実行結果

20 プロフィール画面実行結果

21 プロフィールデータを利用してみる <Content type="html"><![cdata[ <div>hello, <span id="target"></span>!</div>  <script type="text/javascript"> EntryPointとなる関数 *データリクエスト用のオブジェクトの作成 * 取得したい情報コールバック関数を指定してデータのリクエストを行います */ function init() { var req = opensocial.newdatarequest(); req.add(req.newfetchpersonrequest(opensocial.idspec.personid.viewer), "viewer"); req.send(onrequestcomplete); } opensocialのデータリクエスト完了後に呼び出されます [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>

22 実行結果

23 mixi のデータ利用のイメージ図 Userコード opensocial ライブラリサーバー DataReque st オブジェクト Data Requestオブジェクトを渡しますサーバーにデータ要求 DataRequest オブジェクトに指定されているコールバック関数を呼び出すサーバーからデータ応答

24 ViewerとOwner Mixiアプリでは他人のアプリを見ることが出来る他人のアプリを見たとき見た人の情報は Viewerとして取得可能そのアプリを持っている人をOwnerとしてその人のプロフィールをOwnerとして取得可能

25 友達のプロフィールを使うマイミクリストをゲット */ 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); } Myミクリストの取得が終わったときに呼び出されます */ function CallBackMyMiku(data){ var friends = data.get("friends").getdata(); friends.each(eachfriend); } マイミク一人一人処理するための関数 */ 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);

26 実行結果

27 アクティビティとは? マイミク( 友達 )にmixiアプリをどのように楽しんでいるか送りつける単に文字列だけでなく画像付でアプリの状況を送りつけることも可能あて先を指定して特定のユーザーにのみ送ることも可能

28 具体的には

29 コード <![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> ]]>

30 他に出来ること一覧 mixiサーバーにデータを保存 PCアプリで言う HDDに保存みたいなもの持ち主のID アクセス用のキー保存する文字列でセットユーザーにメッセージを送信する外部サーバーからデータを取得する HTTPでアクセス(GET POSTなど大体サポート) マイミクを招待同級生コミュニティの情報を利用

機能概要概要平成 24 年度シームレスな地域連携医療の実現実証事業に対応するため地域連携システム( 能登北部版 )を構築する機能 < 機能追加変更一覧 > 1. 画像連携機能院内で撮影

機能概要概要平成 24 年度シームレスな地域連携医療の実現実証事業に対応するため地域連携システム( 能登北部版 )を構築する機能 < 機能追加変更一覧 > 1. 画像連携機能院内で撮影厚生労働省シームレスな健康情報活用基盤実証事業地域連携システムシステム仕様書 1 機能概要概要平成 24 年度シームレスな地域連携医療の実現実証事業に対応するため地域連携システム( 能登北部版 )を構築する機能 < 機能追加変更一覧 > 1. 画像連