Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
[開発合宿] Firebase + Nuxt.js + RaspberryPiによる猫監視シス...
Search
reireias
July 01, 2019
Technology
0
290
[開発合宿] Firebase + Nuxt.js + RaspberryPiによる猫監視システム / Cat Watcher
開発合宿で作成したシステムです。
Firebaseの使い心地の検証の目的で作成しました。
reireias
July 01, 2019
Tweet
Share
More Decks by reireias
See All by reireias
MedPeer SREチームによるAWSアカウント運用効率化 / Improving efficiency of AWS account operations by MedPeer SRE team
reireias
7
1.7k
メドピア AWS勉強会 ECS編 / MedPeer AWS Seminar ECS
reireias
15
12k
複雑なサービスの開発環境 / Complex Service Development
reireias
0
920
Other Decks in Technology
See All in Technology
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
9
4.2k
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
160
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.2k
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
4
13k
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
270
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
510
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
130
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Visualization
eitanlees
146
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
4 Signs Your Business is Dying
shpigford
184
22k
For a Future-Friendly Web
brad_frost
179
9.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Adopting Sorbet at Scale
ufuk
77
9.5k
Docker and Python
trallard
44
3.5k
Optimizing for Happiness
mojombo
379
70k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A Tale of Four Properties
chriscoyier
160
23k
Transcript
ねこかん ねこかん Firebaseを活用した猫監視システム Firebaseを活用した猫監視システム reireias 1
モチベーション モチベーション FirebaseがWebアプリ用のインフラとしてどの程度使え るか知りたかった 不在中の猫が家で何しているのか気になる 2
できたもの(PWA版) できたもの(PWA版) 3 . 1
できたもの(Web版) できたもの(Web版) 3 . 2
ソースコード ソースコード reireias/cat-watcher reireias/raspberrypi-ansible 3 . 3
採用技術 採用技術 4 . 1
RaspberryPi Zero RaspberryPi Zero 512MB RAM, 802.11b/g/n カメラモジュール モバイルバッテリーからの供給での稼働を想定 4
. 2
Vue.js + Vuetify.js + Nuxt.js Vue.js + Vuetify.js + Nuxt.js
(個人的に)鉄板の組み合わせ Vuetify.jsのUIコンポーネント Nuxt.jsによるSPA、PWA Nuxt.jsが内包するVuexによるFluxでのデータ管理 4 . 3
Firebase Firebase mBaaS(modile Backend as a Service) Authentication: 認証 Hosting:
静的サイトホスティング Firestore: リアルタイムNoSQL Storage: データ保存ストレージ Functions: イベント駆動形FaaS Messaging: Push通知 4 . 4
システム構成 システム構成 5 . 1
処理フロー(画像追加) 処理フロー(画像追加) 1. コマンドが動体を検知し、画像を保存 2. shellスクリプトが画像の追加を検知し、 コマンド でCloud Storage for
Firebaseにアップロード 3. FunctionsがStorageへのファイル追加をトリガーに起動 Cloud Vision APIで画像にラベル付け Cat が含まれていれば、DL URLを発行し、Firestore にデータ登録 含まれていなければ、画像を削除する 5 . 2
4. Firestoreへのデータ追加をトリガーに、Functionsが起動 MessagigでCatトピックを購読しているデバイスに push通知送信 5. クライアントはHostingされた静的サイトへアクセス 6. AuthenticationによるGoogle認証連携 7. クライアントからFirestoreに接続し、画像一覧のデータ
を取得 8. データ中のDL URLでStorageから画像を取得 5 . 3
処理フロー(ユーザー登録) 処理フロー(ユーザー登録) 1. Google認証でログインしたイベントをトリガーに Functionsが起動 ユーザーのデータをFirestoreに追加する 2. 通知ONボタンをユーザーがクリック ブラウザの通知の許可を利用し、許可された場合 registerTokenが発行される
発行されたregisterTokenをFIrestore上のユーザーデー タの属性にセット 5 . 4
3. Firestoreのユーザーデータの更新をトリガーに Functionsが起動 registerTokenが更新されていた場合は、それ で をsubscribeする registerTokenのみでも個々にメッセージを送ることがで きるが、最大で同時に100通が上限 Topicに対する配信なら上限は無制限 5
. 5
Firebaseに対する考察 Firebaseに対する考察 6 . 1
Webアプリエンジニア Webアプリエンジニア (サーバーサイド/フロントエンド)として (サーバーサイド/フロントエンド)として 認証連携周りがかなり楽。革命レベル。 デプロイが簡単 Storage/Firestoreのアクセス権が簡単に定義できる FunctionsをWebエンジニアだけで簡単に実装/デプロイ Push通知機能がある NoSQLの設計と、Functionsによるイベント駆動のサー
バーサイド設計の難易度が高い 全てNoSQLのFirestoreで実現できるわけではない 6 . 2
SREとして SREとして 圧倒的にフルマネージド = 管理コスト低 証明書管理不要 スケーリング(Functions/Firestore/Hosting) もろもろのサーバーの管理コスト無し GCPとの統合が容易 足りない機能はGCPでまかなうことができる
親和性というのは大事、親和性が低いと権限管理がう まくいかない 6 . 3
Firebaseの個々の機能に関して Firebaseの個々の機能に関して 7 . 1
Authentication Authentication firebase-uiを使うと超低コストで3rdPatyログインのボ タン+機能が実現可能 ただし、リダイレクト時のこまかい挙動に関して手を 入れれないのは微妙 BtoB向けのような、ユーザー管理者によるユーザー管理 機能の提供は難易度高そう 運用者によるユーザー管理画面はAdmin SDK
+ Serverで いけそう 7 . 2
Hosting Hosting CDN、証明書、HTTP2対応等が簡単に実現できる 静的サイトがメイン(or Mobileアプリ)の場合はこれで十 分 7 . 3
Storage Storage 複雑なアクセス権制御さえなければ十分 裏はGoogle Cloud Storageなので、S3と同等と思ってよ いです 7 . 4
Firestore Firestore Firebaseを使いこなせるかは、Firestoreを使いこなせる かにかかっていると言っても過言ではない リアルタイムNoSQL(マジでクライアントにリアルタイム に変更が伝わるので、UXが良い) NoSQLの一般的な特徴になるが、複雑なジョイン、複雑 な検索、複雑なリレーショナルは苦手 それと引き換えにパフォーマンスとスケーラビリティが 高い
これらの特性から従来のRDBMSとは異なる設計を求めら れる点が難しい 7 . 5
Functions Functions FirebaseのバックエンドがGCPなので、いい感じに統合 されている GCPのAPI(今回はVision API)がAPIキー等なしで簡単に利 用できる デバッグをローカルでできる機能があるが、試せていな い 7
. 6
Messaging Messaging Push通知がまあまあ簡単にできる 認証キーとかトークンの関係で、意外とサーバーサイド (Functions)上でしかできない(クライアント側でやると面 倒な)ことがあったりする トピックの購読による配信は複数のトピックを組み合わ せられるので、これで基本はいろんな配信パターンを実 現できるはず 7
. 7
結論 結論 Firebaseの機能で満たせる要件の場合、圧倒的に開発コ ストを抑えることが可能 NoSQLで足りるか? Functionsの制約下でバックエンドは十分か? 上記の見極めは難しい 開発初期に見通せるか? 最初からRailsありきと、(Firebaseで作って)途中で Rails等を足すのとどちらがコストが低いか
8
その他感想1 その他感想1 やはりベースはmBaaSであり、モバイルでしか利用でき ない機能のほうが多い FirebaseのAPIリファレンスサイトがちょっと重い functionsの名前をイベント名ベースにするのか、処理内 容にするのか悩む PWAのservice workerのデバッグめっちゃ辛い 9
. 1
その他感想2 その他感想2 参考になった push通知をクリックした際、PWAで開くのか、ブラウザ で開くのかはユーザーの設定次第 firebase-uiは簡単にログインボタンを出せるが、リダイ レクト時のロードをアニメで制御するのが難しい iOSのPWAでのリダイレクトを伴うGoogle認証が、最新 のOSでないと成功しない(iOSのPWA対応が遅い) ここ
9 . 2
その他感想3 その他感想3 ステージング環境が勝手に作成される(まだ試せていな い) USB-OTGむずい 9 . 3