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

1. リアルFacebook
ガジェットを
作った
株式会社鳥人間
郷田 まり子

2. 株式会社鳥人間
プログラマ
郷田まり子

3. www.facebook.com/maripo

4. PageAge
いいニャ

5. 2011年4月発売
たぶん日本最古の
FBアプリ開発本

6. 苦労話を
しろと
言われたので

7. 苦労したという
前提
苦労話を
しろと
言われたので

8. 書いても
書いても
古くなる

9. 印刷所入稿の
直前に
API仕様変更

10. 発売の
直後に
API仕様変更

11. PageAge

12. 2011年
ユーザ & ページの
タイムライン表示が
開始

14. 重要な
出来事

15. まとめて表示

16. 静的HTML
+JavaScript
+FQL1本で
かんたん実装

17. Milestone

18. SELECT
id, owner_id, title,
description, start_time
FROM page_milestone
WHERE owner_id
IN (SELECT page_id
FROM page_fan
WHERE uid=me())
ORDER BY start_time;

19. 時系列で表示

20. いいニャ

21. Google
Chrome
拡張機能

23. いいね!

24. いいね!
いいニャ!

26. にゃー

38. Facebookが
気になって
仕方ない

39. 生産には
お金がかかる

40. クラウド
ファンディングで
支援を募集

42. 開発
チーム

43. 企画・デザイン
Bsize Inc. 八木 啓太

44. 中身・ソフトウェア
久川真吾 郷田まり子
株式会社鳥人間

45. Kickstarter担当
株式会社Cerevo

47. 試作

48. 基板を
作る

49. 設計
基板設計CAD EAGLE

50. プリント基板を
発注して
2週ほど待つ

51. 調達

52. 実装

53. 試作0号

54. 試作0号

55. ケース

56. USB

57. 対応OS
Mac OS X
Windows

58. 本日の
技術的
本題

59. Mac & Windows
ネイティブアプリで
Facebookの
APIを叩く

61. Facebook
API HTTPS Request
(FQL)
Response PC
(通知数)
Native
App
USB通信
(通知数)
NOTICE

62. Facebook
API HTTPS Request
(FQL)
Response PC
(通知数)
Native
App
アップデート前提
USB通信
(通知数)
NOTICE

63. 辛いところ1
公式SDKが
提供されてない

65. 辛いところ2
情報が
すごく少ない

66. 課題1
通知数を
取得する

67. FQL

68. 通知数
SELECT notification_id
FROM notification
WHERE recipient_id=me()
AND is_unread=1

69. 未読メッセージ数
SELECT tags
FROM unified_thread
WHERE has_tags('inbox')
AND NOT (has_tags('seen'))

70. 未読友達申請数
SELECT uid_from
FROM friend_request
WHERE uid_to=me() AND
unread=1

71. 小技
FQLのレスポンスを
ちょっと軽くする

72. FQLで
COUNTは
使えない
だめな例:
SELECT COUNT(*)
FROM friend_request ...

73. FQLで
COUNTは
使えない
だめな例:
SELECT COUNT(*)
FROM friend_request ...
SQL脳の恐怖

74. Query:
SELECT notification_id FROM notification
Response:
{
"data": [
{
"notification_id": "123456789"
}, {
"notification_id": "987654321"
}
]
}

75. Query:
SELECT notification_id FROM notification
Response:
{
"data": [
{
"notification_id": "123456789"
}, {
"notification_id": "987654321"
}
]
}
わりと
どうでもいい

76. Before:
SELECT notification_id
FROM notification ...

77. Before:
SELECT notification_id
FROM notification ...
After:
SELECT
FROM notification ...

78. Query:
SELECT FROM notification

79. Query:
SELECT FROM notification
{
"data": [
{
"anon": ""
}, {
"anon": ""
}
]
}

80. Query:
SELECT FROM notification
Response:
{
"data": [
{
"anon": ""
}, {
"anon": ""
}
]
}
すっきり
さわやか

81. 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"
}

82. 課題2
Authentication

83. Mac OS X

84. WebView

85. 表示&デリゲート登録
WebView *webView;
// デリゲートをセット
[webView setResourceLoadDelegate:self];
// URLを開く(認証ダイアログを表示)
[webView setMainFrameURL:@ https:// ];

86. URL変更をハンドル
- (void)webView:(WebView *)sender resource:(id)identifier
didFinishLoadingFromDataSource:(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);
}
}

87. Windows

88. WebBrowser

89. 表示
browser.Url = new Uri("https://...");

90. 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);
}
}

91. アクセス
トークンの
延長

92. アプローチ2
いつものブラウザ
+
独自URIスキーム

93. URIスキーム
http:
mailto:
tel:
などなど

94. 独自URIスキーム
myCoolApp:hogehoge
「こういうURLは
このアプリで開く」

95. 例: GitHub.app
github-mac:ほげほげ

96. <a href="github-mac://openRepo/https://github.com/maripo/
FbPageAge">
Clone in Mac
</a>

97. Facebook SDK
for iOSも
URIスキーム方式

98. 認証ダイアログから
直接独自URIスキームに
リダイレクトすることは
できない

99. 登録できない

100. https://www.facebook.com/
dialog/oauth
?client_id=XXXXXXXX
&redirect_uri=myCoolApp:auth
&response_type=token

101. 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=XXXXXXXX
Save &expires_in=4726
Access Open
by URI Scheme
Token

102. Mac OS X

103. URLを開く
[[NSWorkspace sharedWorkspace]
openURL:
[NSURL URLWithString:@"https://..."]];

104. カスタムスキーム登録
Info.plistに
書く

105. 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取得
}

106. Windows

107. URLを開く
System.Diagnostics
.Process.Start( http://...... )

108. カスタムスキーム登録
レジストリ
追加

109. HKEY_CLASSES_ROOT
hoge
(Default) = "URL:Hoge Protocol"
URL Protocol = ""
DefaultIcon
(Default) = "Hoge.exe,1"
shell
open
command
(Default) = "Hoge.exe" "%1"

110. 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);
}
}
}
}

112. 開発に必要な
スキルセット

113. ケース ソフトウェア
プロダクトデザイン 本体側
3D CAD AVR
試作品の製造 Mac OS X
美意識:-) Objective-C
C
Windows
回路 .Net + C#
回路設計 Facebook API
電磁気学
基板作り
PCB基板生産 量産
配線 (アートワーク) EMS (受託生産)
発注
部品調達
実装
普通のはんだづけ
表面実装
各種規制・規格

114. 企画・デザイン 中身・ソフト Kickstarter
・量産
Bsize Inc. 株式会社
株式会社鳥人間 Cerevo
八木 啓太

115. Kickstarter担当
株式会社Cerevo

116. NOTICE
開発メンバーで
イベントやります

117. 09/18
19:00
東京

119. Happy Hacking:-)