Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
リアルFacebook ガジェットを   作った   株式会社鳥人間    郷田 まり子
株式会社鳥人間 プログラマ郷田まり子
www.facebook.com/maripo
PageAgeいいニャ
2011年4月発売たぶん日本最古のFBアプリ開発本
苦労話をしろと言われたので
苦労したという   前提苦労話をしろと言われたので
書いても書いても古くなる
印刷所入稿の直前にAPI仕様変更
発売の直後にAPI仕様変更
PageAge
2011年ユーザ & ページのタイムライン表示が    開始
重要な出来事
まとめて表示
いいニャ
GoogleChrome拡張機能
いいね!
いいね!いいニャ!
にゃー
Facebookが 気になって  仕方ない
生産にはお金がかかる
クラウドファンディングで  支援を募集
開発チーム
企画・デザインBsize Inc. 八木 啓太
中身・ソフトウェア久川真吾   郷田まり子  株式会社鳥人間
Kickstarter担当  株式会社Cerevo
試作
基板を 作る
設計基板設計CAD EAGLE
プリント基板を  発注して 2週ほど待つ
調達
実装
試作0号
試作0号
ケース
USB
対応OSMac OS XWindows
本日の技術的 本題
Mac & Windowsネイティブアプリで Facebookの  APIを叩く
Facebook  API        HTTPS Request                 (FQL)  Response           PC   (通知数)                   Native          ...
Facebook   API        HTTPS Request                  (FQL)   Response           PC    (通知数)                    Native     ...
辛いところ1 公式SDKが提供されてない
辛いところ2  情報がすごく少ない
課題1通知数を取得する
FQL
通知数SELECT notification_idFROM notificationWHERE recipient_id=me()AND is_unread=1
未読メッセージ数SELECT tagsFROM unified_threadWHERE has_tags(inbox)AND NOT (has_tags(seen))
未読友達申請数SELECT uid_fromFROM friend_requestWHERE uid_to=me() ANDunread=1
小技FQLのレスポンスを ちょっと軽くする
FQLで    COUNTは     使えないだめな例: SELECT COUNT(*) FROM friend_request ...
FQLで    COUNTは     使えないだめな例: SELECT COUNT(*) FROM friend_request ...             SQL脳の恐怖
Query:SELECT notification_id FROM notificationResponse:{  "data": [    {      "notification_id": "123456789"    }, {      "no...
Query:SELECT notification_id FROM notificationResponse:{  "data": [    {      "notification_id": "123456789"    }, {      "no...
Before:SELECT notification_idFROM notification ...
Before:SELECT notification_idFROM notification ...After:SELECTFROM notification ...
Query:SELECT   FROM notification
Query:SELECT        FROM notification{    "data": [      {        "anon": ""      }, {        "anon": ""      }    ]}
Query:SELECT      FROM notificationResponse:{  "data": [    {      "anon": ""    }, {      "anon": ""    }  ]}             ...
Multi-query    複数クエリをまとめて実行    結果もまとめて返ってくる{    "notification":    "SELECT  FROM notification       WHERE recipient_id=me() ...
課題2Authentication
Mac OS X
WebView
表示&デリゲート登録WebView *webView;// デリゲートをセット[webView setResourceLoadDelegate:self];// URLを開く(認証ダイアログを表示)[webView setMainFrameUR...
URL変更をハンドル- (void)webView:(WebView *)sender resource:(id)identifierdidFinishLoadingFromDataSource:(WebDataSource *)dataSour...
Windows
WebBrowser
表示browser.Url = new Uri("https://...");
URL変更をハンドルprivate void onLoad(object sender,WebBrowserDocumentCompletedEventArgs e){  string url = browser.Url.ToString();...
アクセストークンの  延長
開発に必要なスキルセット
ケース              ソフトウェア プロダクトデザイン        本体側 3D CAD             AVR 試作品の製造           Mac OS X 美意識:-)             Objective...
企画・デザイン 中身・ソフト Kickstarter                  ・量産Bsize Inc.           株式会社             株式会社鳥人間 Cerevo 八木 啓太
Kickstarter担当   株式会社Cerevo
NOTICE 開発メンバーでイベントやります
09/1819:00 東京
Happy Hacking:-)
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
リアルFacebookガジェットを作った
Upcoming SlideShare
Loading in …5
×

リアルFacebookガジェットを作った

1,514 views

Published on

Facebook Night vol.9 発表資料

リアルFacebookガジェットを作った

  1. 1. リアルFacebook ガジェットを 作った 株式会社鳥人間 郷田 まり子
  2. 2. 株式会社鳥人間 プログラマ郷田まり子
  3. 3. www.facebook.com/maripo
  4. 4. PageAgeいいニャ
  5. 5. 2011年4月発売たぶん日本最古のFBアプリ開発本
  6. 6. 苦労話をしろと言われたので
  7. 7. 苦労したという 前提苦労話をしろと言われたので
  8. 8. 書いても書いても古くなる
  9. 9. 印刷所入稿の直前にAPI仕様変更
  10. 10. 発売の直後にAPI仕様変更
  11. 11. PageAge
  12. 12. 2011年ユーザ & ページのタイムライン表示が 開始
  13. 13. 重要な出来事
  14. 14. まとめて表示
  15. 15. いいニャ
  16. 16. GoogleChrome拡張機能
  17. 17. いいね!
  18. 18. いいね!いいニャ!
  19. 19. にゃー
  20. 20. Facebookが 気になって 仕方ない
  21. 21. 生産にはお金がかかる
  22. 22. クラウドファンディングで 支援を募集
  23. 23. 開発チーム
  24. 24. 企画・デザインBsize Inc. 八木 啓太
  25. 25. 中身・ソフトウェア久川真吾 郷田まり子 株式会社鳥人間
  26. 26. Kickstarter担当 株式会社Cerevo
  27. 27. 試作
  28. 28. 基板を 作る
  29. 29. 設計基板設計CAD EAGLE
  30. 30. プリント基板を 発注して 2週ほど待つ
  31. 31. 調達
  32. 32. 実装
  33. 33. 試作0号
  34. 34. 試作0号
  35. 35. ケース
  36. 36. USB
  37. 37. 対応OSMac OS XWindows
  38. 38. 本日の技術的 本題
  39. 39. Mac & Windowsネイティブアプリで Facebookの APIを叩く
  40. 40. Facebook API HTTPS Request (FQL) Response PC (通知数) Native App USB通信 (通知数) NOTICE
  41. 41. Facebook API HTTPS Request (FQL) Response PC (通知数) Native Appアップデート前提 USB通信 (通知数) NOTICE
  42. 42. 辛いところ1 公式SDKが提供されてない
  43. 43. 辛いところ2 情報がすごく少ない
  44. 44. 課題1通知数を取得する
  45. 45. FQL
  46. 46. 通知数SELECT notification_idFROM notificationWHERE recipient_id=me()AND is_unread=1
  47. 47. 未読メッセージ数SELECT tagsFROM unified_threadWHERE has_tags(inbox)AND NOT (has_tags(seen))
  48. 48. 未読友達申請数SELECT uid_fromFROM friend_requestWHERE uid_to=me() ANDunread=1
  49. 49. 小技FQLのレスポンスを ちょっと軽くする
  50. 50. FQLで COUNTは 使えないだめな例: SELECT COUNT(*) FROM friend_request ...
  51. 51. FQLで COUNTは 使えないだめな例: SELECT COUNT(*) FROM friend_request ... SQL脳の恐怖
  52. 52. Query:SELECT notification_id FROM notificationResponse:{ "data": [ { "notification_id": "123456789" }, { "notification_id": "987654321" } ]}
  53. 53. Query:SELECT notification_id FROM notificationResponse:{ "data": [ { "notification_id": "123456789" }, { "notification_id": "987654321" } ]} わりと どうでもいい
  54. 54. Before:SELECT notification_idFROM notification ...
  55. 55. Before:SELECT notification_idFROM notification ...After:SELECTFROM notification ...
  56. 56. Query:SELECT FROM notification
  57. 57. Query:SELECT FROM notification{ "data": [ { "anon": "" }, { "anon": "" } ]}
  58. 58. Query:SELECT FROM notificationResponse:{ "data": [ { "anon": "" }, { "anon": "" } ]} すっきり さわやか
  59. 59. Multi-query 複数クエリをまとめて実行 結果もまとめて返ってくる{ "notification": "SELECT FROM notification WHERE recipient_id=me() AND is_unread=1", "message": "SELECT FROM unified_thread WHERE has_tags(inbox) and not (has_tags(seen))", "friend_request": "SELECT FROM friend_request WHERE uid_to=me() AND unread=1"}
  60. 60. 課題2Authentication
  61. 61. Mac OS X
  62. 62. WebView
  63. 63. 表示&デリゲート登録WebView *webView;// デリゲートをセット[webView setResourceLoadDelegate:self];// URLを開く(認証ダイアログを表示)[webView setMainFrameURL:@ https:// ];
  64. 64. URL変更をハンドル- (void)webView:(WebView *)sender resource:(id)identifierdidFinishLoadingFromDataSource:(WebDataSource *)dataSource{ NSString *url = dataSource.request.URL.absoluteString; NSRange match = [url rangeOfString:@"access_token="]; if (NSNotFound !=match.location) { // Access Token Found NSString *accessToken = [[url substringWithRange:match] substringFromIndex: [@"access_token=" length]]; NSLog(@"Short Access Token Found.: %@", accessToken); }}
  65. 65. Windows
  66. 66. WebBrowser
  67. 67. 表示browser.Url = new Uri("https://...");
  68. 68. URL変更をハンドルprivate void onLoad(object sender,WebBrowserDocumentCompletedEventArgs e){ string url = browser.Url.ToString(); if (url.Contains("access_token=")) { Regex regex = new Regex("access_token=([A-Za-z0-9]+)"); Match match = regex.Match(url); string token = match.Groups[1].Value; Console.WriteLine(token); }}
  69. 69. アクセストークンの 延長
  70. 70. 開発に必要なスキルセット
  71. 71. ケース ソフトウェア プロダクトデザイン 本体側 3D CAD AVR 試作品の製造 Mac OS X 美意識:-) Objective-C C Windows回路 .Net + C# 回路設計 Facebook API 電磁気学 基板作り PCB基板生産 量産 配線 (アートワーク) EMS (受託生産) 発注 部品調達 実装 普通のはんだづけ 表面実装 各種規制・規格
  72. 72. 企画・デザイン 中身・ソフト Kickstarter ・量産Bsize Inc. 株式会社 株式会社鳥人間 Cerevo 八木 啓太
  73. 73. Kickstarter担当 株式会社Cerevo
  74. 74. NOTICE 開発メンバーでイベントやります
  75. 75. 09/1819:00 東京
  76. 76. Happy Hacking:-)

×