Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CrocosにおけるFacebookアプリの開発と運用

 CrocosにおけるFacebookアプリの開発と運用

Facebook Night Vol.5 #fbnight にて発表したスライドです。

Sotaro Karasawa

April 24, 2012
Tweet

More Decks by Sotaro Karasawa

Other Decks in Technology

Transcript

  1. Crocos, Inc. Sotaro Karasawa http://facebook.com/sotarok at. Facebook Night Vol.5, Apr

    24, 2012 ʹ͓͚Δ FacebookΞϓϦ ͷ ։ൃͱӡ༻
  2. CTO @ Crocos, Inc. Ethna git-daily ύʔϑΣΫτPHP ࣗݾ঺հ Sotaro Karasawa

    / @sotarok ฑ୔૱ଠ࿠
  3. None
  4. Crocos, Inc (Ϋϩίε) FacebookΛத৺ʹιʔγϟϧάϥϑΛར༻͠ ͨΞϓϦέʔγϣϯ։ൃ ઃཱ 2011/2 ैۀһ 8໊ (ΤϯδχΞ

    5໊) http://crocos.co.jp/ http://www.facebook.com/Crocos.Inc
  5. Crocosεέδϡʔϥ Facebookͷ༑ୡͰ εέδϡʔϧௐ੔ ͕Ͱ͖ΔΞϓϦ 2011/4 ϦϦʔε Install 20,000 MAU 3,000~5,000

    http://scheduler.crocos.jp/
  6. CrocosϚʔέςΟϯά ݒ৆ 2011/7 ϦϦʔε ྦྷܭ 67ສ Ԡื ྦྷܭ։࠵ 2,000 ݅

    ಉ࣌։࠵ 350 ݅ Install 72,000 MAU 40,000~65,000 http://marketing.crocos.jp/
  7. ϓϨϞϧͰ͓͔ͭΕ͞· αϯτϦʔञྨגࣜձ༷ࣾ 2011/9 ϦϦʔε

  8. ೝఆϚʔέςΟϯάσϕϩούʔ Preferred Marketing Developer αΠόʔυ ϝϯόʔζ ి௨ϨΠβʔϑΟογϡ Ϋϩίε https://developers.facebook.com/preferredmarketingdevelopers

  9. ΞϓϦͷ঺հ ։ൃͷ࿩ ։ൃ؀ڥ ΞϓϦͷߏ੒ ։ൃͷ޻෉ ӡ༻ͷ࿩ τϥϒϧγϡʔςΟϯά ৘ใͷ࢓ೖΕํ ࠓ೔ͷ࿩ ΘΓͱΤϯδχΞ޲͚ͷ࿩͕த৺ͱͳΓ·͢ʼʻ

  10. ։ൃͷ࿩ FacebookΞϓϦ

  11. CrocosϚʔέςΟϯά Crocosݒ৆

  12. CrocosϚʔέςΟϯά اۀ޲͚ΞϓϦ 㱺 Ωϟϯϖʔϯ։࠵ɾϖʔδ ্ͷπʔϧ 㱺 ݒ৆ ͘͡ Ϋʔϙϯ Twitter

    ϖʔδ YouTube FAQ Ϛοϓ Χλϩά اۀΞΧ΢ϯτ2,000
  13. Crocosݒ৆ ྦྷܭ67ສԠื / MAU 40,000ʙ65,000 ಉ࣌։࠵350݅

  14. Crocosݒ৆ 0 50,000 100,000 150,000 200,000 2011-07 2011-08 2011-092011-102011-11 2011-12

    2012-01 2012-02 2012-03 Ԡื਺
  15. ։ൃ؀ڥ

  16. ؀ڥ Apache 2.2 PHP 5.3 Symfony2 CrocosFrameworkBundle Facebook - PHP

    SDK - JS SDK Amazon Web Service ELB + EC2, RDS
  17. ؀ڥ Apache 2.2 PHP 5.3 Symfony2 CrocosFrameworkBundle Facebook - PHP

    SDK - JS SDK Amazon Web Service ELB + EC2, RDS Facebookͱͷͭͳ͗ࠐΈ
  18. ؀ڥ ΞϓϦͷߏ੒ Marketing: marketing.crocos.jp Present present.crocos.jp apps.facebook.com/crocos-present Lot ...

  19. ؀ڥ ΞϓϦͷߏ੒ Marketing: marketing.crocos.jp Present present.crocos.jp apps.facebook.com/crocos-present Lot ... ͦΕͧΕ͕

    Symfony2 ͷ apps Facebook ΞϓϦͱͯ͠ಠཱ શΞϓϦͷ؅ཧը໘
  20. FacebookΞϓϦͷઃఆ ࣗ෼ͷ։ൃ༻ Staging༻ Production༻ appId: 11111111 secret: xxxxxxxxx sandbox: on

    appId: 2222222 secret: YYYYYYYY sandbox: on appId: 33333333 secret: ZZZZZZZZ sandbox: off
  21. FacebookΞϓϦͷઃఆ ࣗ෼ͷ։ൃ༻ Staging༻ Production༻ appId: 11111111 secret: xxxxxxxxx sandbox: on

    appId: 2222222 secret: YYYYYYYY sandbox: on appId: 33333333 secret: ZZZZZZZZ sandbox: off ࣗ෼ͷ։ൃ͸ࣗ෼ͷ։ൃ༻ΞϓϦͰ
  22. FacebookΞϓϦͷઃఆ ࣗ෼ͷ։ൃ༻ Staging༻ Production༻ appId: 11111111 secret: xxxxxxxxx sandbox: on

    appId: 2222222 secret: YYYYYYYY sandbox: on appId: 33333333 secret: ZZZZZZZZ sandbox: off ϦϦʔεલͷςετ͸εςʔδϯά؀ڥ
  23. FacebookΞϓϦͷઃఆ ࣗ෼ͷ։ൃ༻ Staging༻ Production༻ appId: 11111111 secret: xxxxxxxxx sandbox: on

    appId: 2222222 secret: YYYYYYYY sandbox: on appId: 33333333 secret: ZZZZZZZZ sandbox: off ϦϦʔεޙӡ༻͢Δຊ൪༻ΞϓϦ
  24. ૿͑Δ ...

  25. FacebookΞϓϦͷઃఆ Symfony2 - config Λ Environment Ͱ෼͚Δ - ex. config.prod.yml

    / config.dev.yml - parameter ؔ࿈ΛσϓϩΠͰ෼͚Δ - $ cap staging deploy → parameters.ini-staging
  26. FaceboookΞϓϦͷ ߏ੒

  27. CrocosͷFacebookΞϓϦͷߏ੒ /dispatch Page App /{id} (permalink) Signed Request Redirect ͦͷଞͷσόΠε

  28. εϚʔτϑΥϯͷ৔߹ (ݒ৆ͷ৔߹) /{id}/entry Page App /{id} (permalink) Signed Request ΞϓϦ

    ೝূ
  29. ։ൃͷ޻෉

  30. Facebook PHP SDK Λ wrap ͨ͠ Service 1. API ͷ

    RequestɺResponse ͷ Trace 2. JSON ʹؚ·ΕΔ Facebook ID ͷमਖ਼ 3. Access Token ͷνΣοΫ 4. ֤छAPI͝ͱͷ֦ுΠϯλʔϑΣΠε
  31. API ͷ RequestɺResponse ͷ Trace ϩάܗࣜͰऔಘ ɾRequest URIɺύϥϝʔλ ɾੜͷ JSON

    Response ɾResponse Time ຊ൪: Τϥʔൃੜ࣌ͷAccessTokenɺϦΫΤετΛ͙͢ ʹ೺ѲͰ͖Δ
  32. API ͷ RequestɺResponse ͷ Trace

  33. API ͷ RequestɺResponse ͷ Trace [2012-04-21 11:37:03] request.INFO: Matched route

    "present_facebook_show" (parameters: "_controller": "Crocos\PresentBundle\Controller\Facebook\PresentController::showAction", "id": "13034", "_route": "present_facebook_show") [] [] [2012-04-21 11:37:03] app.DEBUG: Facebook API[1]: https://graph.facebook.com/oauth/ access_token - {"client_id":"11111","client_secret":"xxxxx","redirect_uri":"","code":"2.AQBVWlPrgM3KmxDP. 3600.1334980800.5-100003311356353|zzzzz"} (11111|xxxxx) [] [] [2012-04-21 11:37:03] app.DEBUG: Facebook API[2]: https://graph.facebook.com/? ids=115014768608225 - {"method":"GET"} (xxxxxaccess_tokenxxxxx) [] [] [2012-04-21 11:37:04] app.DEBUG: Facebook API[2] result: {"115014768608225": {"id":"11111","name":"\u30af\u30e9\u30d6","picture":"http:,,,.jpg","link":"http:\/\/ www.facebook.com\/kamekameclub","likes":589,"cover":{"cover_id": 199653950144306,"source":"http:,,.jpg","offset_y":0},"category":"Internet\/ software","is_published":true,"has_added_app":true,"username":"kamekameclub", ...,"latitude": 35.199837218473,"longitude":136.99680292309},"can_post":true,"checkins": 1,"talking_about_count":96}} [] [] [2012-04-21 11:37:04] app.DEBUG: Fetched pages expected(11111), actual(11111) [] [] [2012-04-21 11:37:04] app.DEBUG: Facebook API[3]: https://graph.facebook.com/12344/likes/ 23456 - {"method":"GET"} (xxxxxaccess_tokenxxxxx) [] [] [2012-04-21 11:37:05] app.WARNING: Facebook API[3] error: OAuthException: Error validating application. Invalid application ID. [] [] [2012-04-21 11:37:05] app.WARNING: Caught a FacebookApiException: OAuthException: Error validating application. Invalid application ID. [] [] [2012-04-21 11:37:05] request.CRITICAL: FacebookApiException: Error validating application. Invalid application ID. (uncaught exception) at vendor/facebook/src/base_facebook.php line 1040 [] []
  34. JSON ʹؚ·ΕΔ Facebook ID ͷमਖ਼ ɾFacebook ͷ ID ͕Ͱ͔͗ͯ͢ 32bit

    ؀ڥ ͰյΕΔ ɾੲAWSͷখ͍͞ͷ͸64bit൛͕ͳ͔ͬͨ ɾJSON ͷͰ͔͍ Integer Λ String ʹม׵ ʢPHP >= 5.4: JSON_BIGINT_AS_STRING ) {id: 123456789012, ...} → {id:"123456789012", ...}
  35. JSON ʹؚ·ΕΔ Facebook ID ͷमਖ਼ protected function fixjson($json) { $pattern

    = '/(":)(\d+)([,\}])/'; return preg_replace_callback($pattern, function($matches) { return $matches[1] ɹɹɹɹɹɹɹɹ. '"'.$matches[2].'"' ɹɹɹɹɹɹɹɹ. $matches[3]; }, $json); }
  36. Access Token ͷνΣοΫ Access Token ɾApplication Access Token ɾUser Access

    Token ɾPage Access Token /me → User Access Token ͕ඞཁ
  37. Access Token ͷνΣοΫ if ($facebook->hasUserAccessToken()) { $facebook->api('/me'); } OAuthException: An

    active access token must be used to query
  38. ࠷ऴ๷ӴϥΠϯ Uncaught Exception Ͱ Fatal ͸ਏ͍ ๷͗Α͏ͷͳ͍໰୊ͨͪ: ɾSSL read: error

    00000000:lib(0):func(0).. errno 104 ɾEmpty reply from server ɾOperation timed out after 60001 milliseconds ɾAn unexpected error has occurred. Please retry your request later ʮ͍ͨͩ·Facebookʹ໰୊͕ੜ͓ͯ͡Γ·͢ʯ
  39. APIΛར༻ͨ͠։ൃ ɾجຊతʹಈ͔ͳ͍લఏͰͭ͘Δ ɾࣄલʹ๷͛Δͱ͜Ζ͸๷͙ ɾ࠷ऴ๷ӴϥΠϯΛ͘͠ Image By Battlefield 3 Caspian Border

  40. ֤छAPI͝ͱͷ֦ுΠϯλʔϑΣΠε ࠓͷͱ͜Ζ... ɾUser ɾPage ɾUrl ʢURLੜ੒ؔ࿈ʣ ɾϦΫΤετͷ Cache ɾඇެ։ϖʔδΛআ͍ͨΓ ...

    ͳͲ
  41. ϦΫΤετͷ Cache (୤ઢ) Facebook Graph API ɾ࠷৽ͷ৘ใ͸ͱΓ͍ͨ ɾͰ΋ॏ͍ ... ɾ0.8

    sec / request ͘Β͍ ɾϖʔδ৘ใͱ͔ → Cache Ͱ͖Δ
  42. ϦΫΤετͷ Cache (୤ઢ) Cache ૢ࡞ͷྫ: ɾFacebook Page ͷ৘ใΛ·ͱΊͯऔಘ ɹ→ 1111,

    2222, 3333 ɾAPI: /?ids=1111,2222,3333 $facebook->getPageInfo([1111, 2222, 3333]); Cache ʹ৐ͬͯͳ͍ ID ͚ͩϦΫΤετΛ౤͛Δ
  43. Facebook ΞϓϦͷ։ൃ (·ͱΊ) ɾṖͷϊ΢ϋ΢ (BK) ɾ࢓༷೺Ѳ (Exception ͷ಺༰ɾڍಈ) ɾSDK ͷڍಈ೺Ѳ

    ɹɾඞཁ͕͋Ε͹मਖ਼ɺόάϨϙʔτ ɹɾPHP SDK ಡΈ΍͍͢ ɾ→ ͦΕͳΓʹେม ɾ→ ৘ใڞ༗͍͖ͯ͠·͠ΐ͏
  44. σβΠϯɾCSS 1. ΞϓϦCanvas಺/֎Ͱ੾Γ׵͑ 2. Responsive Design

  45. ΞϓϦCanvas಺/֎Ͱ੾Γ׵͑

  46. ΞϓϦCanvas಺/֎Ͱ੾Γ׵͑

  47. Responsive Design AUDIOVROOM http://apps.facebook.com/audiovroom/ Responsive Design Essentials: Look Great on

    any Device http://developers.facebook.com/html5/blog/ post/4/
  48. FacebookΞϓϦ ӡ༻ͷ࿩ Image By Battlefield 3 Operation Firestrom

  49. τϥϒϧγϡʔςΟϯά

  50. τϥϒϧγϡʔςΟϯάͷखॱ 1. OAuth Exception / ಈ࡞͠ͳ͍໰୊ൃੜ 2. ো֐νΣοΫ 3. ࢓༷೺Ѳ

    4. υΩϡϝϯτνΣοΫ 5. όάϨϙʔτνΣοΫ 6. ରࡦ
  51. ࣮ࡍʹ͋ͬͨ࿩ Facebook ϖʔδͷ৘ใ͕औಘͰ͖ͳ͍৔ ߹͕͋Δ

  52. ϖʔδ৘ใ͕औಘͰ͖ͳ͍ 1. ໰୊ൃੜ ಛఆͷFacbeookϖʔδͰɺ৘ใ͕औಘͰ ͖ͳ͍ ɾGraph API: /12345 ɹ㱺 false

  53. ϖʔδ৘ใ͕औಘͰ͖ͳ͍ 1. ໰୊ൃੜ ී௨ͷϖʔδ औಘͰ͖ͳ͍ϖʔδ

  54. ϖʔδ৘ใ͕औಘͰ͖ͳ͍ 2. ো֐νΣοΫ ো֐͸ൃੜ͍ͯ͠ͳ͔ͬͨ

  55. ϖʔδ৘ใ͕औಘͰ͖ͳ͍ 3. ࢓༷೺Ѳ ɾException ͕ग़ͳ͍Ͱ false ɾGraph API Explorer Ͱ֬ೝ

    ɹɾࣗ෼ͷAccess Token / ΞϓϦAccess Token ɹɾࣗ෼ͷϖʔδ / ଞͷਓͷϖʔδ ɹ㱺 جຊతʹσʔλ͸ฦͬͯ͘Δ ɹ㱺 ΞϓϦͷAccess TokenͰ΋ެ։৘ใ͸ͱΕ ɹɹΔ
  56. ϖʔδ৘ใ͕औಘͰ͖ͳ͍ 3. ࢓༷೺Ѳ ɾެ։৘ใʁ ɾσʔλ͕ඇެ։ʹͳΔ৚݅ͬͯͳΜ͚ͩͬ ɹ㱺 ඇެ։ϖʔδ ɹ㱺 ͔ͨ͠ʹ false

    ͕ฦͬͯ͘Δ
  57. ϖʔδ৘ใ͕औಘͰ͖ͳ͍ 3. ࢓༷೺Ѳ ɾެ։৘ใʁ ɾσʔλ͕ඇެ։ʹͳΔ৚݅ͬͯͳΜ͚ͩͬ ɹ㱺 ΋͔ͯ͠͠: ೥ྸ੍ݶ ࠃ੍ݶ

  58. ϖʔδ৘ใ͕औಘͰ͖ͳ͍ 3. ࢓༷೺Ѳ ɾਖ਼ղ ɾ৚݅: ɹ ඇެ։ϖʔδ·ͨ͸੍ݶͷ͔͔ͬͨϖʔδ ɹˍΞϓϦͱίωΫτ͍ͯ͠ͳ͍ ɹɹ (ΞϓϦͷAccess

    Tokenʣ ɹ㱺 false ɹis_published => true ͕͋Δͷʹʂ
  59. ϖʔδ৘ใ͕औಘͰ͖ͳ͍ 3. ࢓༷೺Ѳ ɾis_published ɹGraph API ͷ݁Ռʹؚ·Ε͍ͯΔ ɹͨͩ͠ɺ͜Ε͕ false ͷϖʔδͰ৘ใ͕औಘͰ͖

    Δͷ͸ɺͦ΋ͦ΋ͦͷϖʔδͷ؅ཧऀͷAccess TokenΛ࢖͍ͬͯΔ৔߹ ɹʢߟ͑ͯΈΕ͹ɺ౰ͨΓલʣ
  60. ϖʔδ৘ใ͕औಘͰ͖ͳ͍ 3. ࢓༷೺Ѳ ɾ໰୊఺ (࢓༷೺Ѳʹؔͯ͠) ɹެ։ϖʔδˍΞϓϦͱίωΫτ͍ͯ͠ͳ͍ ɹ͜ͷ৚݅Ͱͷςετ͸ඇৗʹ೉͍͠ ɹʢςετϢʔβΛ࢖͏ͷ͕Ұ൪͔ͳʣ

  61. ϖʔδ৘ใ͕औಘͰ͖ͳ͍ 4. υΩϡϝϯτνΣοΫ ɾಛʹॻ͍ͯͳ͍ (Α͋͘Δ)

  62. ϖʔδ৘ใ͕औಘͰ͖ͳ͍ 6. ରࡦ ɾެ։ϖʔδ͔ͭ೥ྸ੍ݶ ɹ㱺 ΞϓϦͷίωΫτΛٻΊΔΑ͏ʹͨ͠

  63. ϖʔδ৘ใ͕औಘͰ͖ͳ͍ 6. ରࡦ (ࠓޙ) ɾ͍͖ͳΓΞϓϦίωΫτΛٻΊΔͷ͸ݫ͍͠ 㱺 Landing ϖʔδͰɺGraph API Λୟ͔ͳͯ͘

    ࡁΉΑ͏ͳߏ଄ʹ͢Δ
  64. ͦͷଞ࣮ࡍʹ͋ͬͨ࿩ ɾ all.js ಡΊͳ͍ ... ɹ㱺 connect.facebook.net DNS ো֐ ɾFacebookApiException:

    (#21) Page ID xxxx was migrated to page ID yyyy. Please update your API calls to the new ID ɹ㱺 Facebookϖʔδ͕εϙοτొ࿥͢Δͱ ϖʔδID͕มΘΔ
  65. ͦͷଞ࣮ࡍʹ͋ͬͨ࿩ ɾ JS SDK ͷ getLoginStatus() ͕ݺ͹Εͳ͍ ɹ㱺 ϩάΠϯͯ͠ͳ͍ ɹɹ&&

    sandbox Ϟʔυ
  66. Facebook ΞϓϦͷӡ༻ (·ͱΊ) ɾͲΜͳ໰୊͕ىͬͯ͜΋͙͢ʹରԠͰ͖Δମ੍ ɹ㱺 ඈΜͰ͘ΔΤϥʔͳͲΛ೔ࠒ͔Β؍࡯ ɹ㱺 ϩάɾ௨஌ͳͲ ɾ৘ใΛνΣοΫ͢Δ ɾඇެ։ɾ੍ݶɾίωΫτͯ͠Δ/ͯ͠ͳ͍

    ɹͳͲɺ৚݅͝ͱʹςετ
  67. ৘ใͷ࢓ೖΕํ Image By Battlefield 3

  68. ৘ใͷ࢓ೖΕํ (1) υΩϡϝϯτ Facebook DEVELOPERS http://developers.facebook.com/docs/

  69. ৘ใͷ࢓ೖΕํ (2) Bugs / Platform Status Bugs http://developers.facebook.com/bugs Platform Status

    http://developers.facebook.com/live_status 㱺 Crocos Ͱ͸ɺ͜ͷ಺༰Λ IRC ʹ௨஌
  70. ৘ใͷ࢓ೖΕํ (3) Developer Blog Developer Blog http://developers.facebook.com/blog/ 㱺 API ͷ࢓༷มߋɾػೳ֦ॆͷ৘ใ͸͕͜͜

    ɹҰ൪ૣ͍ 㱺 ϝʔϧͰߪಡͰ͖Δ
  71. ৘ใͷ࢓ೖΕํ (4) Facebookϖʔδ/Facebookάϧʔϓ Facebook Marketing Solutions Japan http://www.facebook.com/marketingjapan Facebook API

    Developers JAPAN http://www.facebook.com/groups/350715528292106/ Facebook Mobile Hack - Tokyo http://www.facebook.com/groups/243729729057503/
  72. ৘ใͷ࢓ೖΕํ (5) ೔ຊޠ৘ใ fb.developers’+ http://fb.dev-plus.jp/ CrocosΤϯδχΞϒϩά http://engineering.crocos.jp/ ͸͡Ί·ͨ͠ʂ ͍͍Ͷ!ΑΖ͘͠Ͱ͢

  73. ࠓ೔࿩͍ͯ͠ͳ͍಺༰ ɾFacebookΞϓϦͷϩάղੳ (Ϣʔβಈ޲ղੳ) ɹɾ& Insightͷ࿩ ɾࣗಈςετ؀ڥ

  74. ࣭ٙԠ౴ Image By Battlefield 3 Caspian Border