リアルFacebook ガジェットを   作った   株式会社鳥人間    郷田 まり子
株式会社鳥人間 プログラマ郷田まり子
www.facebook.com/maripo
PageAgeいいニャ
2011年4月発売たぶん日本最古のFBアプリ開発本
苦労話をしろと言われたので
苦労したという   前提苦労話をしろと言われたので
書いても書いても古くなる
印刷所入稿の直前にAPI仕様変更
発売の直後にAPI仕様変更
PageAge
2011年ユーザ & ページのタイムライン表示が    開始
重要な出来事
まとめて表示
静的HTML+JavaScript +FQL1本で かんたん実装
Milestone
SELECT id, owner_id, title, description, start_timeFROM page_milestoneWHERE owner_id IN (SELECT page_id    FROM page_fan  ...
時系列で表示
いいニャ
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();...
アクセストークンの  延長
アプローチ2いつものブラウザ    +独自URIスキーム
URIスキームhttp:mailto:tel:などなど
独自URIスキームmyCoolApp:hogehoge「こういうURLは このアプリで開く」
例: GitHub.appgithub-mac:ほげほげ
<a href="github-mac://openRepo/https://github.com/maripo/FbPageAge">  Clone in Mac</a>
Facebook SDK  for iOSもURIスキーム方式
認証ダイアログから直接独自URIスキームにリダイレクトすることは    できない
登録できない
https://www.facebook.com/dialog/oauth?client_id=XXXXXXXX&redirect_uri=myCoolApp:auth&response_type=token
App                          Browser                https://www.facebook.com/dialog/oauth         Open   ?client_id=XXXXXX...
Mac OS X
URLを開く[[NSWorkspace sharedWorkspace]  openURL:  [NSURL URLWithString:@"https://..."]];
カスタムスキーム登録Info.plistに    書く
myCoolApp:hogeを開くと    アプリが起動- (void)applicationWillFinishLaunching:(NSNotification *)aNotification{   // イベントマネージャ取得   NSApp...
Windows
URLを開くSystem.Diagnostics  .Process.Start( http://...... )
カスタムスキーム登録レジストリ  追加
HKEY_CLASSES_ROOT  hoge    (Default) = "URL:Hoge Protocol"    URL Protocol = ""    DefaultIcon       (Default) = "Hoge.exe...
hoge:fugafuga を開くとアプリが起動namespace Hoge{  class Program  {    static string ProcessInput(string s)    {      return s;    }...
開発に必要なスキルセット
ケース              ソフトウェア プロダクトデザイン        本体側 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ガジェットを作った(ロングバージョン)

4,527

Published on

Facebook Night vol9の資料。
こちらは時間の関係で削ったボツネタ
(PageAgeの技術的解説、Windows & Mac OS Xネイティブアプリで独自URIスキームを使用してユーザ認証を行う方法)
も含んでいます。

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide

リアル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. 静的HTML+JavaScript +FQL1本で かんたん実装
  16. 16. Milestone
  17. 17. SELECT id, owner_id, title, description, start_timeFROM page_milestoneWHERE owner_id IN (SELECT page_id FROM page_fan WHERE uid=me())ORDER BY start_time;
  18. 18. 時系列で表示
  19. 19. いいニャ
  20. 20. GoogleChrome拡張機能
  21. 21. いいね!
  22. 22. いいね!いいニャ!
  23. 23. にゃー
  24. 24. Facebookが 気になって 仕方ない
  25. 25. 生産にはお金がかかる
  26. 26. クラウドファンディングで 支援を募集
  27. 27. 開発チーム
  28. 28. 企画・デザインBsize Inc. 八木 啓太
  29. 29. 中身・ソフトウェア久川真吾 郷田まり子 株式会社鳥人間
  30. 30. Kickstarter担当 株式会社Cerevo
  31. 31. 試作
  32. 32. 基板を 作る
  33. 33. 設計基板設計CAD EAGLE
  34. 34. プリント基板を 発注して 2週ほど待つ
  35. 35. 調達
  36. 36. 実装
  37. 37. 試作0号
  38. 38. 試作0号
  39. 39. ケース
  40. 40. USB
  41. 41. 対応OSMac OS XWindows
  42. 42. 本日の技術的 本題
  43. 43. Mac & Windowsネイティブアプリで Facebookの APIを叩く
  44. 44. Facebook API HTTPS Request (FQL) Response PC (通知数) Native App USB通信 (通知数) NOTICE
  45. 45. Facebook API HTTPS Request (FQL) Response PC (通知数) Native Appアップデート前提 USB通信 (通知数) NOTICE
  46. 46. 辛いところ1 公式SDKが提供されてない
  47. 47. 辛いところ2 情報がすごく少ない
  48. 48. 課題1通知数を取得する
  49. 49. FQL
  50. 50. 通知数SELECT notification_idFROM notificationWHERE recipient_id=me()AND is_unread=1
  51. 51. 未読メッセージ数SELECT tagsFROM unified_threadWHERE has_tags(inbox)AND NOT (has_tags(seen))
  52. 52. 未読友達申請数SELECT uid_fromFROM friend_requestWHERE uid_to=me() ANDunread=1
  53. 53. 小技FQLのレスポンスを ちょっと軽くする
  54. 54. FQLで COUNTは 使えないだめな例: SELECT COUNT(*) FROM friend_request ...
  55. 55. FQLで COUNTは 使えないだめな例: SELECT COUNT(*) FROM friend_request ... SQL脳の恐怖
  56. 56. Query:SELECT notification_id FROM notificationResponse:{ "data": [ { "notification_id": "123456789" }, { "notification_id": "987654321" } ]}
  57. 57. Query:SELECT notification_id FROM notificationResponse:{ "data": [ { "notification_id": "123456789" }, { "notification_id": "987654321" } ]} わりと どうでもいい
  58. 58. Before:SELECT notification_idFROM notification ...
  59. 59. Before:SELECT notification_idFROM notification ...After:SELECTFROM notification ...
  60. 60. Query:SELECT FROM notification
  61. 61. Query:SELECT FROM notification{ "data": [ { "anon": "" }, { "anon": "" } ]}
  62. 62. Query:SELECT FROM notificationResponse:{ "data": [ { "anon": "" }, { "anon": "" } ]} すっきり さわやか
  63. 63. 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"}
  64. 64. 課題2Authentication
  65. 65. Mac OS X
  66. 66. WebView
  67. 67. 表示&デリゲート登録WebView *webView;// デリゲートをセット[webView setResourceLoadDelegate:self];// URLを開く(認証ダイアログを表示)[webView setMainFrameURL:@ https:// ];
  68. 68. 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); }}
  69. 69. Windows
  70. 70. WebBrowser
  71. 71. 表示browser.Url = new Uri("https://...");
  72. 72. 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); }}
  73. 73. アクセストークンの 延長
  74. 74. アプローチ2いつものブラウザ +独自URIスキーム
  75. 75. URIスキームhttp:mailto:tel:などなど
  76. 76. 独自URIスキームmyCoolApp:hogehoge「こういうURLは このアプリで開く」
  77. 77. 例: GitHub.appgithub-mac:ほげほげ
  78. 78. <a href="github-mac://openRepo/https://github.com/maripo/FbPageAge"> Clone in Mac</a>
  79. 79. Facebook SDK for iOSもURIスキーム方式
  80. 80. 認証ダイアログから直接独自URIスキームにリダイレクトすることは できない
  81. 81. 登録できない
  82. 82. https://www.facebook.com/dialog/oauth?client_id=XXXXXXXX&redirect_uri=myCoolApp:auth&response_type=token
  83. 83. App Browser https://www.facebook.com/dialog/oauth Open ?client_id=XXXXXX &redirect_uri=http://www.example.com/auth/ &&response_type=token Authentication http://www.example.com/auth/ #access_token=XXXXXXXX &expires_in=4726 Redirect myCoolApp:auth? access_token=XXXXXXXXSave &expires_in=4726Access Open by URI SchemeToken
  84. 84. Mac OS X
  85. 85. URLを開く[[NSWorkspace sharedWorkspace] openURL: [NSURL URLWithString:@"https://..."]];
  86. 86. カスタムスキーム登録Info.plistに 書く
  87. 87. myCoolApp:hogeを開くと アプリが起動- (void)applicationWillFinishLaunching:(NSNotification *)aNotification{ // イベントマネージャ取得 NSAppleEventManager *eventManager = [NSAppleEventManager sharedAppleEventManager]; // イベントハンドラをセット [eventManager setEventHandler:self andSelector:@selector(handleGetURLEvent:withReplyEvent:) forEventClass:kInternetEventClass andEventID:kAEGetURL];}- (void)handleGetURLEvent:(NSAppleEventDescriptor *)event withReplyEvent:(NSAppleEventDescriptor *)replyEvent{ NSString * url = [[event paramDescriptorForKeyword:keyDirectObject] stringValue]; NSLog(@"URL=%@",url); //起動時のURL取得}
  88. 88. Windows
  89. 89. URLを開くSystem.Diagnostics .Process.Start( http://...... )
  90. 90. カスタムスキーム登録レジストリ 追加
  91. 91. HKEY_CLASSES_ROOT hoge (Default) = "URL:Hoge Protocol" URL Protocol = "" DefaultIcon (Default) = "Hoge.exe,1" shell open command (Default) = "Hoge.exe" "%1"
  92. 92. hoge:fugafuga を開くとアプリが起動namespace Hoge{ class Program { static string ProcessInput(string s) { return s; } static void Main(string[] args) { foreach (string arg in args) { Console.WriteLine("arg=" + arg); } } }}
  93. 93. 開発に必要なスキルセット
  94. 94. ケース ソフトウェア プロダクトデザイン 本体側 3D CAD AVR 試作品の製造 Mac OS X 美意識:-) Objective-C C Windows回路 .Net + C# 回路設計 Facebook API 電磁気学 基板作り PCB基板生産 量産 配線 (アートワーク) EMS (受託生産) 発注 部品調達 実装 普通のはんだづけ 表面実装 各種規制・規格
  95. 95. 企画・デザイン 中身・ソフト Kickstarter ・量産Bsize Inc. 株式会社 株式会社鳥人間 Cerevo 八木 啓太
  96. 96. Kickstarter担当 株式会社Cerevo
  97. 97. NOTICE 開発メンバーでイベントやります
  98. 98. 09/1819:00 東京
  99. 99. Happy Hacking:-)
  1. A particular slide catching your eye?

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

×