gumiStudy#4 mixiアプリのスマートフォン版について
4 likes1,367 views
This document discusses mixi's social platform for mobile devices called mixi Touch. It provides an overview of mixi Touch's features and capabilities including support for Android, iPhone, and other mobile browsers. Technical details are also included around the implementation using an iframe and RESTful APIs to integrate with the mixi social graph and allow access to social data and actions.
![/ /
<?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](https://image.slidesharecdn.com/20101005gumistudy-101019204313-phpapp02/85/gumiStudy-4-mixi-23-320.jpg)
![var params = {};
params[opensocial.Activity.Field.TITLE] = "Hello!";
var activity = opensocial.newActivity(params);
opensocial.requestCreateActivity(
activity, opensocial.CreateActivityPriority.HIGH, function
(response) {
if (response.hadError()) {
var code = response.getErrorCode();
// do something...
} else {
// do something...
}
});
27](https://image.slidesharecdn.com/20101005gumistudy-101019204313-phpapp02/85/gumiStudy-4-mixi-27-320.jpg)
![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](https://image.slidesharecdn.com/20101005gumistudy-101019204313-phpapp02/85/gumiStudy-4-mixi-31-320.jpg)
gumiStudy#4 mixiアプリのスマートフォン版について
- 1. 2010/10/05 gumiStudy #4 mixi Copyright 2010, All rights reserved.
- 2. @weboo • 1999 • 2006 • 2008 gumi Platform • 2009 mixi mixi 2
- 3. • • • mixi — — — API — C/ P — — Tips • 3
- 4. • iPhone 2010 5 mixi Touch • 2010 Android • Windows Phone 7 • WebKit 4
- 5. 5
- 6. gumi Platform mixi GREE Platform mixi for Touch • API API • 6
- 7. 7
- 9. Day gumi 9
- 10. 10
- 11. 11
- 12. • Android • iPhone / iPod Touch Safari 12
- 13. • Android • iPhone / iPod Touch Safari • UserAgent • Canvas Home, Profile • viewer = owner Canvas • PC/ /Touch • Touch PC • Touch 13
- 14. 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
- 15. OpenSocial JavaScript API mixi Social Data Invite Activity etc. makeRequest gadgets.util.registerOnLoadHandler() SAP Server * Rewrite HTML by Shindig
- 16. iframe 16
- 17. 1. run_appli.pl HTTP 2. iframe HTML mixi 3. iframe SAP 4. RESTful API 5. RESTful API 6. SAP HTML
- 18. 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
- 19. • 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
- 20. • Person & Friends • Persistence • Albums • Invite • Communication Feed • Message • Geolocation • Request 20
- 21. 21
- 22. <?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
- 23. / / <?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
- 24. 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
- 25. <!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
- 26. opensocial.requestShareApp("VIEWER_FRIENDS", null, function(response) { if (response.hadError()) { var errCode = response.getErrorCode(); // do something... } else { // do something... } }); 26
- 27. var params = {}; params[opensocial.Activity.Field.TITLE] = "Hello!"; var activity = opensocial.newActivity(params); opensocial.requestCreateActivity( activity, opensocial.CreateActivityPriority.HIGH, function (response) { if (response.hadError()) { var code = response.getErrorCode(); // do something... } else { // do something... } }); 27
- 28. 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
- 29. 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
- 31. 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
- 32. 32
- 33. • 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
- 34. • opensocial-jquery jQuery • mixi Touch js querySelctor CSS Anim. 34
- 35. • Android Location Spoofer 35
- 36. • iframe • mixi Cookie • Safari Cookie iframe set-cookie • SAP mixi JavaScript 36
- 37. • POST set-cookie • form POST • Cookie iframe 37
- 38. 38
- 39. • PC/ • • • Android • mixi Graph API 39
- 40. 40