Firebase Japan User Group meetup 参加メモ #FJUG

## はじめに

* [Firebase Japan User Group / meetup / 3](https://firebase-community.connpass.com/event/80526/) 　イベントのメモです。
* @メルカリ
* 資料も随時追加します。

*斜体は私のコメントです*

## コミュニティ、会場説明

* @k2wanko さん、 @sinmetal さん
* Firebase Japan User Group とは
    * Firebase の勉強会
    * Slack でコミュニティ > https://firebase.asia/join

## Firebase と Unity

* ドリコム @gremito さん
* 資料: [Firebase と Unity](https://speakerdeck.com/gremito/firebasetounity)
* Firebase を使うと
    * No サーバインスタンス
    * No サーバサイドエンジニア
* Unity
    * iOS
    * Android
    * Web GL

*Unity の iOS / Android 以外でも Analytics 使えるようになればな〜。*

## SDK連携を用いたAdMob活用法

* Supership @darquro さん
* 資料: [SDK連携を用いたAdMob活用法](https://speakerdeck.com/darquro/sdklian-xi-woyong-itaadmobhuo-yong-fa)
* AdMob 概要
    - フォーマット
        * バナー
        * インタースティシャル
        * ネイティブ
            + ~~Express~~
            + Advanced (beta) > 申請の必要あり
        * 動画リワード
    - AdMob Mediation
        * 他の広告事業者の広告も配信可能
        * アドネットワークの契約はそれぞれ行う必要あり
        * AdMob とは別にアドネットワークの SDK + Adapter のインストールが必要
    - SSP
        * リアルタイムビッティング

*AdMob は高単価なのでお気に入りです*

## Flutterとfirebaseを使ってモバイルアプリに挑戦してみる

* クラウドワークス @nasum さん
* 資料: [Flutterとfirebaseを使ってモバイルアプリに挑戦してみる](https://speakerdeck.com/nasum/fluttertofirebasewoshi-tutemobairuapurinitiao-zhan-sitemiru)
* Flutter
    * Google 製
    * モバイルアプリ開発フレームワーク
    * クロスプラットフォーム
* 使用感を探ってみる
    * firebase auth
    * Firebase Analytics 連携
    * cloud firestore
        - 使用感は JS のと似ている
* https://github.com/nasum/flutter_firebase_playground

*Flutter と React Native 比較したい*

## Firebase Realtime Databaseをフロントエンドで使って得た知見

* Cyberagent @brn0227 さん
* 資料: [Firebase Realtime Databaseをサービスで使った知見](https://speakerdeck.com/brn/firebase-realtime-databasewosabisudeshi-tutazhi-jian)
* チャットボットに Firebase Realtime Database を利用
* WebSocket の管理をしなくてすむ
* JS の SDK を利用
* 基本的に Frontend では Write しないような設計にしている
* いくつか問題発生
    * 初回データと新規データの分類
    * React を使っているので、メッセージを配列にしてループで DOM にする > RxJS
    * Timeout しないので書き込み失敗を検知できない
    * 大量のデータに sort をかけると一時的に Read が 100% になって Firebase が停止
        - BitTable を活用して、 sort などの処理はこちらに任せる
    * 遅延や障害が多い
    * Firebase の冗長化をするのが非常に難しいため、現在は Firebase が落ちたら機能停止する

*つらみは結構多そうだけど、こういった攻めた設計を試せる社風は良いですね*

## Firebase Cloud Messaging (FCM) を利用した Web Push 通知の実装

* CyberAgent @rilakkuma3x さん
* https://github.com/korilakkuma
* 資料: [Firebase Cloud Messaging (FCM) を利用した Web Push 通知の実装](https://docs.google.com/presentation/d/e/2PACX-1vScqhLVSwb_UVjglWnyIAvoTarhbZtJFdFtlMP7ocGqC4GL5Q4xk3zONDOaqjaTsPJ9ibNYqhl5_rx8/pub?start=false&loop=false&delayms=3000&slide=id.p)
* FCM
    * Web Push
    * iOS / Android Push
* FCM を使うと Firebase Token を使って Web Push の実装が非常に楽になる
* [Firebase Cloud Messaging の HTTP プロトコル](https://firebase.google.com/docs/cloud-messaging/http-server-ref)
* 通知を受け取るのは Service Worker の役割
* Service Worker
    * JavaScript Worker
    * ページを開いていなくても動作する
    * だからプッシュを受け取ることができる
* [Example code](https://github.com/Korilakkuma/web-push-example-by-fcm)

*Service Worker の説明が非常に腹落ちしました*

## FirebaseでSPAするときのSEO/OGP対応これでどうでしょう

* @o_tomomichi さん
* THE TOURNAMENT 製作
* Firebase 利用してリニューアルしたときのつらみ > SEO が弱くなった
* Google にインデックスされない
* Fetch as Google すると真っ白
* よくある対策
    * SSR
    * プリレンダリング
    * meta タグだけ入った html を返す
* 今回の方針
    * シンプル
    * SEO ペナルティは避ける
    * パフォーマンスには目をつぶる
* 対策
    * Functions で index の meta タグ差し替え
    * Functions で RSS フィード配信
    * スプレッドシートで sitemap 配信
        - 改行テキストでも OK
        - CSV でも OK
        - 外部ドメインにおいても OK
        - スプレッドシートは CSV 形式で公開できる
        - スプレッドシートをウェブで公開
        - IFTTT でスプレッドシートを更新

*同じようなことを GAS でやろうとしてたので参考になります*

## まとめ

自分はネイティブアプリの解析(Firebase Analytics)やプッシュのために Firebase を使ってたのですが、皆さんいろんな入り口から来ていて興味深かったです。

Web で Firebase Analytics 使いたかったんですが、懇親会で皆さんと話す限りでは無理そうとのこと。残念。もしやり方ご存知の方いらっしゃったら教えてください :bow: 

登壇者の方、運営の方お疲れ様でした！