GCPUG 福岡での Developer Advocate, Ian Lewis によるプレゼンテーションです。

1. 2015/04/11
Ian Lewis
Developer Advocate @Google
Firebaseによるリアルタイムモバ
イル開発
2015/04/11

2. 2015/04/11
Ian Lewis
Developer Advocate
Google Cloud Platform
google.com/+IanLewis-hoge
@IanMLewis

3. 2015/04/11
Getting Started
Agenda
— なんでモバイルにする必要があるのか
— バックエンドサーバーの構築は？
— なんでFirebaseを使うと便利か
— これから

4. 2015/04/11
なんでモバイルにする必要が
あるのか

5. 2015/04/11
なんでモバイルにする必要があるのか
マルチでバイス

6. 2015/04/11
なんでモバイルにする必要があるのか
本当にマルチデバイス
Wear TV Auto

7. 2015/04/11
バックエンドの構築は？

8. 2015/04/11
バックエンドの構築は困難

9. 2015/04/11
バックエンドの構築は？
モバイル開発は違う
— 様々な画面サイズ
— 個人で利用するデバイス
— ネットワークの信頼性が低い

10. 2015/04/11
バックエンドの構築は？
モバイル開発はチャレンジング
— 多数のプラットフォームで動く
— ユーザーはリアルタイム性を期待している
— 常に繋がっているデバイスは、アプリの状態が分散される
— 多数のデバイスは巨大なスケールが必要

11. 2015/04/11
なんでFirebaseを使うと
便利か

12. 2015/04/11
なんでFirebaseを使うと便利か
Firebase: リアルタイム
アプリケーションプラットフォーム
リアルタイムDB ユーザー管理
ファイル
ホスティング

13. 2015/04/11
なんでFirebaseを使うと便利か
リアルタイムデータベース
● NoSQL, JSON データベース
● ミリ秒単位で更新をプッシュ
● デバイスから直接のアクセスを
可能とするセキュリティモデル
● データとURLのマッピング
01 / 23

14. 2015/04/11
なんでFirebaseを使うと便利か
計算性能のシフト
Smart Client

15. 2015/04/11
なんでFirebaseを使うと便利か
両方向に同期
Firebase
Sync
Smart Client

16. 2015/04/11
なんでFirebaseを使うと便利か
コラボレーション
Smart Clients
Sync
Firebase

17. 2015/04/11
なんでFirebaseを使うと便利か
オフライン
Smart Clients
Sync
Firebase

18. 2015/04/11
なんでFirebaseを使うと便利か
ユーザー管理
以下の方法で簡単にログイン:
● メアドとパスワード
● oAuthプロバイダー
○ Google
○ Facebook
○ Twitter
○ Github
● カスタム認証トークン

19. 2015/04/11
認証とオンライン状態
認証プロバイダー

20. 2015/04/11
なんでFirebaseを使うと便利か
ファイルホースティング
一つのコマンドでホスティング:
● カスタムドメイン
● セキュア (SSL)
● 高速 (CDN)

21. 2015/04/11
簡単なコーディング
Legal Stuff
Copyright (c) 2014 Firebase
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

22. 2015/04/11
始めに

23. 2015/04/11
npm install -g firebase-tools

24. 2015/04/11
firebase init

25. 2015/04/11
簡単なコーディング
ファイルホスティング
{
"firebase": "myfirebase",
"public": "app",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
Java

26. 2015/04/11
firebase deploy

27. 2015/04/11
認証とオンライン状態

28. 2015/04/11
Create a new Google App
https://console.developers.google.com/project
1
Configure OAuth 2.0 Callback
https://auth.firebase.com/v2/<YOUR-FIREBASE>/auth/twitter/callback
2
Display Google Login Pop-Up3
var ref = new Firebase("https://<YOUR-FIREBASE>.firebaseio.com/");
ref.authWithOAuthPopup("google", function(error, authData) { ... });
簡単なコーディング
Example: Google認証を使う

29. 2015/04/11
簡単なコーディング
Example: Google認証を使う
private void getGoogleOAuthTokenAndLogin() {
AsyncTask<Void, Void, String> task = new AsyncTask<>() {
@Override
protected String doInBackground(Void... params) {
String scope = String.format("oauth2:%s", Scopes.PLUS_LOGIN);
String token = GoogleAuthUtil.getToken(this,
Plus.AccountApi.getAccountName(mGoogleApiClient), scope);
return token;
}
...
Java

30. 2015/04/11
簡単なコーディング
Example: Google認証を使う
SubtitleJavaJava
...
@Override
protected void onPostExecute(String token) {
Intent intentWithToken = new Intent(this,
OfficeMoverActivity.class);
intentWithToken.putExtra(AUTH_TOKEN_EXTRA, token);
startActivity(intentWithToken);
}
}

31. 2015/04/11
簡単なコーディング
Example: Google認証を使う
SubtitleJava
mFirebaseRef.authWithOAuthToken("google", authToken, new
Firebase.AuthResultHandler() {
@Override
public void onAuthenticated(AuthData authData) {
Log.v(TAG, "Auth success");
}
@Override
public void onAuthenticationError(FirebaseError firebaseError) {
Toast.makeText(getApplicationContext(),
"Auth failed. Please try again",
Toast.LENGTH_SHORT).show();
}
});
Java

32. 2015/04/11
簡単なコーディング
Example: オンライン状態
var amOnline = new Firebase('https://<YOUR-FIREBASE>.firebaseio.com/.
info/connected');
var presenceRef = new Firebase('https://<YOUR-FIREBASE>.firebaseio.
com/presence/'
+ userid);
amOnline.on('value', function(value) {
if (value.val() === true) {
// Connected (or reconnected)!
presenceRef.onDisconnect().set(false); // one off, has to be reregistered
presenceRef.set(true);
}
});
Java

33. 2015/04/11
セキュリティ

34. 2015/04/11
簡単なコーディング
Example: セキュリティ
{
...
"rules": {
".read": true,
".write": true
}
}
Java

35. 2015/04/11
簡単なコーディング
Example: セキュリティ
"foo": {
...
".validate": "newData.isString() && newData.val().length
< 100"
}
Java

36. 2015/04/11
簡単なコーディング
Example: セキュリティ
"users": {
"$uid": {
".read": "auth != null && auth.uid == $uid"
}
}
Java

37. 2015/04/11
01 / 23
読み取りと書き込み

38. 2015/04/11
簡単なコーディング
読み取りと書き込み
SubtitleJavaScript
Firebase ref = new Firebase("https://<your-firebase>.firebaseio.com");
ref.child("background").setValue("grid");
ref.child("background").addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(DataSnapshot dataSnapshot) {
System.out.println(dataSnapshot.getValue()); // prints “grid”
}
@Override public void onCancelled(FirebaseError error) { }
});

39. 2015/04/11
簡単なコーディング
読み取りと書き込み
Subtitle Java
Firebase ref = new Firebase("https://<your-firebase>.firebaseio.com");
ref.child("background").setValue("grid");
ref.child("background").addValueEventListener(new ValueEventListener()
{
@Override
public void onDataChange(DataSnapshot dataSnapshot) {
System.out.println(dataSnapshot.getValue()); // prints “Grid”
}
@Override public void onCancelled(FirebaseError error) { }
});

40. 2015/04/11
簡単なコーディング
読み取りと書き込み
Subtitle Java
Firebase ref = new Firebase("https://<your-firebase>.firebaseio.com");
ref.child("background").setValue("grid");
ref.child("background").addValueEventListener(new ValueEventListener()
{
@Override
public void onDataChange(DataSnapshot dataSnapshot) {
System.out.println(dataSnapshot.getValue()); // prints “grid”
}
...
});

41. 2015/04/11
簡単なコーディング
読み取りと書き込み
Subtitle JSON
{
"background": ”grid”
}

42. 2015/04/11
簡単なコーディング
読み取りと書き込み
SubtitleJavaScript
OfficeThing newThing = new OfficeThing();
newThing.setName(“Don Quixote”);
ref.child("object").setValue(newThing);
/* This will replace the data at “object” with
"object" : {
"name" : "Don Quixote",
}
*/

43. 2015/04/11
簡単なコーディング
読み取りと書き込み
SubtitleJavaScript
Map<String, Object> name = new HashMap<String, Object>();
name.put(“name”, “Don Quixote”);
ref.child("object").update_children(name);
// You could also setValue() with the entire object

44. 2015/04/11
Demo

45. 2015/04/11
01 / 23
これから

46. 2015/04/11
これから
リリースする予定
● New! より強力なクエリー
詳細はFirebaseブログまで
● 全プラットフォームのオフライン対応
● よりいいユーザー管理とAnalytics
● Google Cloud Platformとの連携

47. 2015/04/11
Google Cloud Platformと連携する
Triggers
Firebase AppEngine BigQuery
Mobile
Device
Sync
REST REST
これから

48. 2015/04/11
これから
Google Cloud Platformと連携
“.trigger": {
“criteria": “data == ‘hello world’",
“method": “'POST'",
“target": “'https://my.externalservice.com/endpoint'",
“body": {
“text": “’someone said hello!’",
}
}
JSON

49. 2015/04/11
www.firebase.com

50. 2015/04/11
Getting Started
firebase.com/tutorial

51. 2015/04/11
Thanks !
Ian Lewis
g+ — plus.google.com/+IanLewis-hoge
twitter — @IanMLewis
www — www.ianlewis.org
github — github.com/IanLewis