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
930
Other Decks in Technology
See All in Technology
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
590
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
200
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
160
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
390
KMP の Swift export
kokihirokawa
0
330
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
190
Findy Team+のSOC2取得までの道のり
rvirus0817
0
330
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
roki18d
1
340
o11yで育てる、強い内製開発組織
_awache
3
120
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
0
110
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
970
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Agile that works and the tools we love
rasmusluckow
331
21k
Code Review Best Practice
trishagee
72
19k
Become a Pro
speakerdeck
PRO
29
5.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
A Modern Web Designer's Workflow
chriscoyier
697
190k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Docker and Python
trallard
46
3.6k
We Have a Design System, Now What?
morganepeng
53
7.8k
Automating Front-end Workflow
addyosmani
1371
200k
Raft: Consensus for Rubyists
vanstee
139
7.1k
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