gumiStudy#4 mixiアプリのスマートフォン版について
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 4,720 views
Uploaded on

先日リリースした「mixiアプリ」スマートフォン版について ...

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,720
On Slideshare
4,717
From Embeds
3
Number of Embeds
2

Actions

Shares
Downloads
29
Comments
0
Likes
6

Embeds 3

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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 8. 
 
 
 8
  • 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
  • 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. 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