2010/10/05 gumiStudy #4




                                       mixi




Copyright 2010, All rights reserved.
@weboo

•  1999
•  2006

•  2008
      gumi Platform

•  2009 mixi      

      mixi              


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

                      3
• 
     iPhone

              2010   5   mixi Touch




•  2010     Android
•  Windows Phone 7
•  WebKit                  ...
5
gumi Platform
             mixi
     	
                                  	
 
     	
      GREE Platform
     	
      mixi ...
7


                   

                       

	

              	




                           8
Day
 	
   gumi   	
             	
   	




                                       9
10
11
• Android               	
                                          

                                	

•  iPhone / iPod ...
• Android                        	
                                                          

                           ...
Mobile Phone                                    Third Party Developers
(no JavaScript)
                   Application Prox...
OpenSocial JavaScript API                    mixi
                                                        Social Data



 ...
iframe




              16
1.               run_appli.pl                 HTTP        	
2.                iframe              HTML mixi      	
3.     ...
mixi
                                              Social Data

    OpenSocial JavaScript API


                          ...
•  iframe
          iframe    SAP                 	
•  RESTful API                               	
•           XML        ...
•  Person & Friends
•  Persistence
•  Albums

•  Invite
•  Communication Feed	
•  Message
•  Geolocation
•  Request


    ...
21
<?xml version=“1.0” encoding=“utf-8”?>
<Module>
  <ModulePrefs title=“Hello, world!”></ModulePrefs>

  <Content type=“url”...
/           /

<?xml version=“1.0” encoding=“utf-8”?>
<Module>
  <ModulePrefs title=“Hello, world!”>
    <Require feature=...
URL

http://example.com/t/




opensocial_app_id=xxx      …     ID
opensocial_owner_id=xxx    …             ID
opensocial_...
<!DOCTYPE html>
<html>
<head>
 <meta charset=”UTF-8” />
 <title>        mixi      for Touch</title>

 <script type="text/j...
opensocial.requestShareApp("VIEWER_FRIENDS", null,
function(response) {
  if (response.hadError()) {
    var errCode = res...
var params = {};
params[opensocial.Activity.Field.TITLE] = "Hello!";
var activity = opensocial.newActivity(params);

opens...
Geolocation	
mixi.requestFetchGeolocation(function(response) {
  if (response.hadError()) {
    var errCode = response.get...
Android 2.0

navigator.geolocation                                           	
        Gears                              ...
http://example.com/t/?oauth_consumer_key=mixi.jp&
oauth_nonce=8edf6cde90a884f2d1af&
oauth_signature=……&
oauth_signature_me...
PHP             	
function checkSignature() {
  $request = OAuthRequest::from_request(
                null, null, array_m...
32
•       Chrome    UA


                 --user-agent="Mozilla/5.0 (iPhone; U;
                 CPU iPhone OS 3_1 like Mac ...
•  opensocial-jquery          jQuery
•  mixi Touch        js
     querySelctor CSS Anim.




                             ...
• 
     Android   Location Spoofer




                                  35
•  iframe
•  mixi         Cookie

•  Safari                Cookie
   iframe        set-cookie

• 

            SAP        ...
•    POST       set-cookie




•           form            POST
•              Cookie   iframe
                           ...
38
•                   PC/
• 
• 
•  Android

•  mixi Graph API




                          39
40
Upcoming SlideShare
Loading in...5
×

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

4,142

Published on

先日リリースした「mixiアプリ」スマートフォン版について
PC版/モバイル版アーキテクチャとの違いや開発方法などを
紹介します。社外に向けて詳細な説明をするのは今回が
初となります。

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,142
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

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

  1. 1. 2010/10/05 gumiStudy #4 mixi Copyright 2010, All rights reserved.
  2. 2. @weboo •  1999 •  2006 •  2008 gumi Platform •  2009 mixi 
 mixi 
 2
  3. 3. •  •  •  mixi —  —  —  API —  C/ P —  —  Tips •  3
  4. 4. •  iPhone 2010 5 mixi Touch •  2010 Android •  Windows Phone 7 •  WebKit 4
  5. 5. 5
  6. 6. gumi Platform mixi GREE Platform mixi for Touch •  API API •  6
  7. 7. 7
  8. 8. 
 
 
 8
  9. 9. Day gumi 9
  10. 10. 10
  11. 11. 11
  12. 12. • Android 
 •  iPhone / iPod Touch Safari 12
  13. 13. • Android 
 •  iPhone / iPod Touch Safari •  UserAgent •  Canvas Home, Profile •  viewer = owner Canvas •  PC/ /Touch •  Touch PC •  Touch 13
  14. 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. 15. OpenSocial JavaScript API mixi Social Data Invite Activity etc. makeRequest gadgets.util.registerOnLoadHandler() SAP Server * Rewrite HTML by Shindig
  16. 16. iframe 16
  17. 17. 1. run_appli.pl HTTP 2. iframe HTML mixi 3. iframe SAP 4. RESTful API 5. RESTful API 6. SAP HTML
  18. 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. 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. 20. •  Person & Friends •  Persistence •  Albums •  Invite •  Communication Feed •  Message •  Geolocation •  Request 20
  21. 21. 21
  22. 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. 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. 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. 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. 26. opensocial.requestShareApp("VIEWER_FRIENDS", null, function(response) { if (response.hadError()) { var errCode = response.getErrorCode(); // do something... } else { // do something... } }); 26
  27. 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. 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. 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
  30. 30. 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
  31. 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. 32
  33. 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. 34. •  opensocial-jquery jQuery •  mixi Touch js querySelctor CSS Anim. 34
  35. 35. •  Android Location Spoofer 35
  36. 36. •  iframe •  mixi Cookie •  Safari Cookie iframe set-cookie •  SAP mixi JavaScript 36
  37. 37. •  POST set-cookie •  form POST •  Cookie iframe 37
  38. 38. 38
  39. 39. •  PC/ •  •  •  Android •  mixi Graph API 39
  40. 40. 40
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×