gumiStudy#4 mixiアプリのスマートフォン版について

@weboo • 1999 • 2006 • 2008 gumi Platform • 2009 mixi   mixi   2

• • • mixi — — — API — C/ P — — Tips • 3

• iPhone 2010 5 mixi Touch • 2010 Android • Windows Phone 7 • WebKit 4

gumi Platform mixi GREE Platform mixi for Touch • API API • 6

      8

Day gumi 9

• Android   • iPhone / iPod Touch Safari 12

• Android   • iPhone / iPod Touch Safari • UserAgent • Canvas Home, Profile • viewer = owner Canvas • PC/ /Touch • Touch PC • Touch 13

Mobile Phone Third Party Developers (no JavaScript) Application Proxy Application Server XHTML Media Cache Proxy swf, gif, jpg, etc. RESTful API mixi with 2-legged Social Data DB OAuth 14

OpenSocial JavaScript API mixi Social Data Invite Activity etc. makeRequest gadgets.util.registerOnLoadHandler() SAP Server * Rewrite HTML by Shindig

iframe 16

1. run_appli.pl HTTP 2. iframe HTML mixi 3. iframe SAP 4. RESTful API 5. RESTful API 6. SAP HTML

mixi Social Data OpenSocial JavaScript API RESTful API Invite with 2-legged Activity OAuth etc. <script src=“touch.js”></script> * Request with OAuth Signature DB SAP Server 18

• iframe iframe SAP • RESTful API • XML URL • iframe URL   app_id, owner_id, viewer_id • URL OAuth Signature • Iframe mixi js Gadgets API User Flow API

• Person & Friends • Persistence • Albums • Invite • Communication Feed • Message • Geolocation • Request 20

<?xml version=“1.0” encoding=“utf-8”?> <Module> <ModulePrefs title=“Hello, world!”></ModulePrefs> <Content type=“url” view=“touch” href=“http://example.com/” /> </Module> url URL 22

/ / <?xml version=“1.0” encoding=“utf-8”?> <Module> <ModulePrefs title=“Hello, world!”> <Require feature=“opensocial-0.8” /> </ModulePrefs> PC <Content type=“html” view=“home,canvas,profile”><![CDATA[ <div>Hello, mixi !</div> ]]></Content> <Content type=“url” view=“mobile” href=“http://example.com/” /> <Content type=“url” view=“touch” href=“http://example.com/t/” /> </Module> Touch 23

URL http://example.com/t/ opensocial_app_id=xxx … ID opensocial_owner_id=xxx … ID opensocial_viewer_id=xxx … ID oauth_xxx=xxxxx … OAuth Signature owner_id = viewer_id 24

<!DOCTYPE html> <html> <head> <meta charset=”UTF-8” /> <title> mixi for Touch</title> <script type="text/javascript" charset="UTF-8“ src="http://mixi.jp/application/touch.js"></script> </head> <body> mixi js mixi for Touch </body> UserFlow API </html> 25

opensocial.requestShareApp("VIEWER_FRIENDS", null, function(response) { if (response.hadError()) { var errCode = response.getErrorCode(); // do something... } else { // do something... } }); 26

Geolocation mixi.requestFetchGeolocation(function(response) { if (response.hadError()) { var errCode = response.getErrorCode(); alert(response.getErrorMessage()); } else { var geo = response.getData(); if (typeof(geo) != 'undefined') { geo.getCurrentPosition(function(position) { show_map(position.coords.latitude, position.coords.longitude); }); } else { alert(“error"); } } }); 28

Android 2.0 navigator.geolocation Gears <script src=”gears_init.js”></script> <script> if (geo) { // do something } else if (google.gears) { geo = google.gears.factory.create('beta.geolocation'); geo.getCurrentPosition(function(position) { show_map(position.latitude, position.longitude); }); } else { alert("Your browser doesn't support geolocation."); } </script> 29

http://example.com/t/?oauth_consumer_key=mixi.jp& oauth_nonce=8edf6cde90a884f2d1af& oauth_signature=……& oauth_signature_method=RSA-SHA1& oauth_timestamp=1277104016& oauth_version=1.0& opensocial_app_id=394& opensocial_owner_id=12345& opensocial_viewer_id=12345 • RSA-SHA1 • PC mixi • mixi Platform 30

PHP function checkSignature() { $request = OAuthRequest::from_request( null, null, array_merge($_GET, $_POST)); $signature_method = new OrkutSignatureMethod(); //Check the request signature @$signature_valid = $signature_method->check_signature( $request, null, null, $_GET["oauth_signature"]); //Build the output object if ($signature_valid != true) { header('HTTP', true, 400); print "Invalid Signature."; } } 31

• Chrome UA --user-agent="Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1 like Mac OS X; ja-jp) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/ 7C144" • Ubuntu Safari 33

• opensocial-jquery jQuery • mixi Touch js querySelctor CSS Anim. 34

• Android Location Spoofer 35

• iframe • mixi Cookie • Safari Cookie iframe set-cookie • SAP mixi JavaScript 36

• POST set-cookie • form POST • Cookie iframe 37

• PC/ • • • Android • mixi Graph API 39

gumiStudy#4 mixiアプリのスマートフォン版について

by gumilab on Oct 19, 2010

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 3

Statistics

gumiStudy#4 mixiアプリのスマートフォン版について Presentation Transcript

http://paper.li	2
https://twimg0-a.akamaihd.net	1