More than 5 years have passed since last update.

FirebaseをJavascriptでできる範囲で一通り触ってみる

Last updated at 2016-11-24Posted at 2016-09-14

公式の quickstart-js を使ってFirebaseをいろいろ使ってみたログ。

【Analytics】

マイレポート一覧
- いわゆるダッシュボード的なやつ
イベント
- first_open, notification_foreground, notification_open, notification_receive, session_start がデフォルトで用意されている
ユーザー
- All Users, Purchasers がデフォルトでセグメントされている
アトリビュージョン
目標達成プロセス
コホート
ユーザープロパティ

【DEVELOP】

Cloud Messaging

https://firebase.google.com/docs/cloud-messaging/http-server-ref
https://firebase.google.com/docs/cloud-messaging/server
WebのGUIから送る機能がないので、Webプッシュ通知を送るにはFCM App Server Protocolを叩く必要がある。
Notificationと違ってFirebaseのコンソールでログを確認できないのが残念。

https://fcm.googleapis.com/fcm/send
Content-Type: application/json
Authorization: key=AIzaSyC...akjgSX0e4

{ "notification": {
    "title": "Background Message Title",
    "body": "Background message body",
    "click_action" : "https://dummypage.com"
  },
  "data": {
    "uid": "012345",
    "category": "dummy"
  },
  "to" : "eEz-Q2sG8nQ:APA91bHJQRT0JJ..."

}

Webブラウザに対してFCMを送るときは payload を暗号化しないと送れなかったが、
javascript SDKを使うとSDKがよろしくやってくれるので title や body がそのまま送れるようになった。
javascript SDKのドキュメントは英語しかないため、言語設定を 日本語 にしていると左カラムのメニューに出てこない。
ここ以外にも英語しかないページがあるので、ページ下部の言語設定で English にしておこう。

Auth

メール/パスワード
Google
Facebook
Twitter
Github
匿名

で、ログインできるサンプルがGithubで提供されている。
https://github.com/firebase/quickstart-js
すげぇ便利！！

事前にログインに利用したいプロバイダのステータスを有効にしてから、
https://github.com/firebase/quickstart-js
にサンプルがあるのでcloneして、各index.htmlの指定の場所に「ウェブアプリに Firebase を追加」で出てくるスクリプトを入れ込むだけ。

後述するHostingを使ってアップロードすればFirebaseだけでいろいろ試すことができる。

Database

GoogleのOAuthログインをすると簡易ブログが利用できる。
Authは前述のFirebase Authを使っていて、
ブログのデータはすべてFirebase Databaseにjsonで格納されている。

Storage

ファイルをアップロードして利用できる。
直リンできるのでファイルサーバー的にも利用できる。
ルールで利用できるフォルダやファイルをauthグループごとに権限管理できる。

Hosting

静的ファイルをホスティングできる。
quickstart-jsをそのままアップロードすると、
Auth/Database/Storageを試せるのでやってみるとよいかと。

$ npm install -g firebase-tools
$ firebase login --no-localhost
? Allow Firebase to collect anonymous CLI usage information? Yes

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=*****

? Paste authorization code here: *****

✔  Success! Logged in as yourmail@gmail.com

# firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /usr/local/quickstart-js

Before we get started, keep in mind:

  * You are currently outside your home directory

? What Firebase CLI features do you want to setup for this folder? Database: Deploy Firebase Realtime Database Rules, Hosting: Configure and deploy Fireb
ase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? What Firebase project do you want to associate as default? 
どのプロジェクトか選ぶ

=== Database Setup

Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.

? What file should be used for Database Rules? database.rules.json
✔  Database Rules for webpush-6d46b have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
✔  Wrote public/404.html
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

# firebase deploy

=== Deploying to 'プロジェクト名'...

i  deploying database, hosting
✔  database: rules ready to deploy.
i  hosting: preparing public directory for upload...
✔  hosting: 2 files uploaded successfully
i  starting release process (may take several minutes)...

✔  Deploy complete!

Hosting Site: https://プロジェクト名.firebaseapp.com
Dashboard: https://console.firebase.google.com/project/プロジェクト名/overview

Visit the URL above or run firebase open

https://groups.google.com/forum/#!topic/firebase-talk/JA-DpZ2hmvw
--no-localhost を付けないとGoogle認証後に
localhostへリダイレクトされて認証失敗する。

public配下のファイルのみがアップロードされる。
firebase.jsonでhosting対象のフォルダを指定できる。

publicフォルダに新たにファイルと追加後、
再度 firebase deploy でアップロードできる。

Remote Config

https://firebase.google.com/docs/remote-config/
Key/Valueでアプリで使える設定値を定義できる。

Test Lab

https://firebase.google.com/docs/test-lab/
リモートでAndroidアプリをテストすることができる。
エミュレーターなのでバージョンや機種も選択可能。

Crash

https://firebase.google.com/docs/crash/
アプリがクラッシュしたときのレポートを出してくれる。

【GROW】

これ以降はアプリ専用なので紹介だけ。

Notification

https://firebase.google.com/docs/notifications/
アプリでnotificationを送るのに使える。
Firebase Cloud Messageと違いコンソールから開封確認などできる。

App Indexing

https://firebase.google.com/docs/app-indexing/
Googleの検索結果にアプリを表示させるあれ。

Dynamic Links

https://firebase.google.com/docs/dynamic-links/
notificationからアプリを開いた際に、
アプリ内の特定のページを開かせるあれ。

Invites

https://firebase.google.com/docs/invites/
https://googledevjp.blogspot.jp/2016/08/firebase-invites.html

Firebase Invites は Firebase Dynamic Links の上に構築されています。そのため、ユーザーは特定のディープリンク情報を友人と共有することができます。つまり、招待を受け取った方は、アプリのホームスクリーンではなく、クリックした招待に関連づけれられたエクスペリエンスによってアプリの利用をすぐに開始できます。