際際滷

際際滷Share a Scribd company logo
フロントエンドエンジニアが岑るべき
Firebaseの弊順
Web Creators MeetUp 仟定.咼▲丱奪轡LT氏 #8
Profile.
~ 2015/08 istyle.inc
テクノロジ`云何 R&D 何室g_kグル`プ チ`フエンジニア
消隠弥 t屈席
¢ PHP(Laravel/Phalcon)
¢ JavaScript(Vue.js/Svelte)
¢ Golang
¢ HHVM/Hack
kenjiro kubota
PR.
幄塀氏芙アイスタイル
istyle Inc.
インタ`ネットのコスメ秤鵐櫞`タルサイト
仝寸磽錚鵤蹌紕┘▲奪肇灰好瓧々
の_k?\
コスメだけではなくビュ`ティ畠違、晩云だけではなく弊順で"Beauty"にSる繁や
二I、繁並I麼が試Sできるプラットフォ`ムを恬る。
アイスタイルは、仝Beauty〜IT々の弊順ナンバ`ワンを朕峺します。
フロントエンドエンジニアが岑るべき
Firebaseの弊順
Firebaseとは
2014定にGoogleにIГ気譴織皀丱ぅ?Webアプリケ`ション
けのバックエンドサ`ビス。
いわゆるMBaaS,BaaSと柵ばれるもの。(FaaSもあります)
¢ サ`バ`の喘吭?Bが音勣
¢ サ`バ`サイドアプリケ`ションが音勣瘁峰する
Functionsを旋喘することで鏡徭のサ`バ`サイドI尖をM
みzむことも辛嬬
¢ 蝕k堀業の鯢
N源なSDKや宴旋なCLI
Android 、iOS 、Flutter、Web 、Unity 、C++喘のSDKや
firebase-toolsというCLIツ`ルも巷塀で喘吭されています。
安艶恢で旋喘する縞の麼な字嬬
パスワ`ド、桑催J^の麿に匯違議なプロバイダJ^
Google、Facebook、Twitter、Github吉をgにg廾できるサ`ビス。
Webであれば匯稀Firebase箸燐J^にw卞し、J^瘁に徭蛍のアプリケ`ションに
ってくるフロ`になる。
J^何蛍のg廾は音勣
停兆J^もあり、瘁峰するデ`タベ`スル`ルなどで隆ログインユ`ザ`に慙泙
嚥えるHに旋喘したり、停兆J^しているユ`ザ`がアプリに鞠hしたHはセッ
ションを哈き@ぐこともできる。
床議ファイルHTML, CSS, JavaScript, 鮫餤硲のホスティングサ`ビス
ホスティングされたファイルはCDNFastlyにキャッシュされるため互堀に塘佚
ドメインはLet¨s EncryptによりSSLの^苧が戻工され、3ヶ埖阿慮仟も徭咾
佩われる。
鮫顱咄蕗、啝などのファイルを鯉{するオブジェクトストレ`ジ
ル`ルを弖紗することが辛嬬なので、E宀の崙泙筌▲奪廛踪`ド否楚の崙泙覆
も佩える
クライアント畠悶で揖豚できるリアルタ
イムなNoSQLデ`タベ`ス
デ`タを匯つの寄きなJSONとしてQう
Oがちょっとyしい┐繁爾Γ
1つのデ`タベ`スでs10嵐周の揖r俊
Aと庵1,000周のきzみまでスケ`
ル。それ參貧はシャ`ディングが駅勣
デ`タベ`スル`ルを恬撹することでi
みきに崙泙鰓Oけることができる。
Realtime Databeseの之泣をaう瘁@にあたるサ`ビス
Realtime Databese揖にリアルタイムなデ`タベ`ス
Realtime Databeseより互堀なクエリのg佩、スケ`ルが辛嬬
コレクション、ドキュメントというg了でデ`タを隠贋
スケ`リングは徭
2019定1埖F壓はまだベ`タ井
B初してきたAuthentication、Storage、Realtime Database(Firestore)の弖紗や
筝を返し、それをトリガ`としてサ`バ`サイドI尖を佩えるサ`ビス
F彜ではNode.jsのみ┘侫蹈鵐肇┘鵐疋┘鵐献縫△覆蚌Hしみやすい
箭えばユ`ザ`鞠hされたらメ`ルを僕佚する、鮫颪誘後されたらリサイズした
ものをe余隠贋するなどのI尖が恬ることができます。
厚仟 返 メ`ル僕佚
スマホアプリエンジニアにはZ半みが侮い宥各FCM
プッシュ宥岑を塘佚するサ`ビス
ServiceWorkerを旋喘することでブラウザ鬚韻砲皀廛奪轡緲岑を塘佚することが
できます。
FunctionsとMみ栽わせることで、デ`タベ`スが厚仟されたHにプッシュ宥岑を塘
佚することも辛嬬です。
https://developers.google.com/web/fundamentals/codelabs/push-notifications/?hl=ja
Firebase ML Kit
Crashlitycs
Firebase Performance Monitoring
Firebase Test Lab
In-App Messageng
Firebase Google Analytics
Predictions
A/B Testing
Firebase Remote Config
Firebase Dynamic Links
Firebase App Indexing
その麿モバイル鬚韻砲瞎塹造里茲Δ
サ`ビスがあります
N源
繁で聞う蛍には
o創でもY聞えます
Firebaseを聞うことで、フロントエンドとちょっとしたサ`バ`サイドJavaScript
の岑Rだけである殻業のサ`ビスは恬れてしまう。
gなものを恬って巷_するのもいいし、ユ`ザ`J^もgに秘できるので氏
T鞠hが駅勣なサ`ビスも恬れる
¥ レンタルサ`バ`を処りてデプロイする駅勣もないし
¥ VPSで徭蛍徭附でサ`バ`h廠を恬る駅勣もない
¥ AWSなどのクラウドサ`ビスより叟議でフロントエンド
の岑Rだけでもなんとかなる繁曳
どんなサ`ビスが恬れるか、暴が恬ってきたプロダクトをB初
1)AR.jsを旋喘した
リアルタイムシュ`ティングゲ`ム
益芙テクノロジ`云何の定挑に佩う芙坪イベントで
g仏
ARマ`カ`を隔った何L繁が氏をりiき、
ゲ`ム歌紗宀がFirebaseにホスティングされた
Webアプリを旋喘することで3Dの議が燕幣され、
それにしてタップをすることでポイントを@誼
する
氏に喘吭されたスクリ`ンにはリアルタイムで
ポイント鹿された燕を燕幣
勣周
¢ 揖rに[ぶ繁方はs200繁
¢ ARをタップする阿縫櫂ぅ鵐伴
¢ ARは10N、それぞれどのARをタップした
かは登eされる
¢ クライアントは10昼のインタ`バルで@誼し
たポイントをRealtimeDatabaseに隠贋
旋喘した室宝?サ`ビス
Firebaseの聞い侭
s200繁がYなl業┯極挑10昼娃厚仟しても畠く}なし
サ`バ`I尖は匯俳なし
┘櫂ぅ鵐伴I尖はスクリ`ンアプリ硲
2)魥璽侫`ム原きイベント晦永
勣周
¢ 賦しzみフォ`ムから魥
¢ 魥爾あると魥謝澆亡_Jのメ`ルと砿尖宀にメ`ルを僕佚
¢ 協埀に器すると魥鴫賛姫躰任笋錣
旋喘した室宝?サ`ビス
Firebaseの聞い侭
Cloud Functionsを旋喘して、Firestoreに魥芝鵑
弖紗されたHに魥謝澆塙楡輻澆縫瓸`ルを僕佚
3)スマ`トフォンカメラを旋喘した
リアルタイム亟寔誘後アプリ
益芙の畠芙イベントで佩った岸しで旋喘
s1,000繁が揖rに旋喘し、スマホWebアプリで燕
秤JRにより丶を返するとシャッタ`を俳る
ゲ`ム
より謹くの丶の顔唹宀、または瓜亟悶となった繁
を燕嫦
ゲ`ムのh苧
丶を顔る繁 丶になって顔られる
繁
顔られる繁のQRコ`ドを
iみ函ると
アプリ坪のカメラが軟
燕秤JRにより、魍え
た丶が奮されると
シャッタ`が俳られ、サ`
バ`に僕られる
勣周
¢ 歌紗繁方はs1,000繁
¢ 燕秤JRで丶を返して顔唹
¢ ●の亟寔をサ`バ`に隠贋
¢ lがlを顔唹したのかを登eしサ`バ`に隠贋
¢ ●をリアルタイムに鹿
¢ 氏のスクリ`ンにリアルタイムに鹿されたデ`タと顔唹された亟寔が
肝?に燕幣される
旋喘した室宝?サ`ビス
clmtracker
Firebaseの聞い侭
鮫颪留4罎Cloud Storageを旋喘
鮫颪離稀`バ`隠贋?函誼がgにできる
lがlを顔唹したのかをRealtimeDatabaseに隠贋
リアルタイムに鹿
4)Laravelクイズアプリ
PHPConference2018でスポンサ`ブ`スで戻工し
たクイズアプリ
PHPフレ`ムワ`ク仝Laravel々にvするクイズを
Webアプリで戻工
勣周
¢ 指基をサ`バ`に隠贋
¢ }はデ`タベ`スから筝辛嬬
戻工岷念まで筝がありえたため
旋喘した室宝?サ`ビス
Firebaseの聞い侭
停兆ログインを聞うことで嶷}指基をできるだけ閲けること
ができた
停兆ログインさせたユ`ザ`のみFirestoreを歌孚できる
ル`ルにしたのでセキュア
デ`タベ`スがgに喘吭?旋喘できる
ちなみにほぼ匍暦翌???
Firebaseを聞うことで誼られたもの
¢ サ`バ`を喘吭する駅勣がないのでアプリケ`ションを
恬ることに廣薦できた
¢ リアルタイムなデ`タベ`スはアプリケ`ションの嫌を
レげた
¢ 揖r俊A方などに噫圍があり、芦伉して旋喘できた
¢ o創でもかなり旋喘できる貧、愖腎n署にしてもさほ
ど互くない
┯烱塞なアプリは旋喘豚gが玉いため
Attention
¢ 書指B初したのは箸龍レベルのアプリケ`ションでの旋
喘並箭です
¢ ビジネスロジックを根むシステムとFirebaseをMみ栽わ
せるのは篇が駅勣
¢ リアルタイムDBは帆Φ弔任后採か試喘圭隈はあるかと
房います。
¢ セキュリティ巓りのO?O協はしっかりやろう
thanks:)

More Related Content

What's hot (20)

PPTX
CyberChefの聞い圭HamaCTF2019 WriteUp」
Shota Shinogi
?
PDF
deep dive distributed tracing
Takayoshi Tanaka
?
PDF
遺鴛/遺禽ツ`ル曳熟してみた
Shoya Kai
?
PDF
ダ`クネットのはなし #ssmjp
sonickun
?
PDF
VirtualBox と Rocky Linux 8 で兵める Pacemaker ~ VirtualBox でも STONITH C嬬がせる! Vi...
ksk_ha
?
PDF
乙檎永遺秘壇
Kenjiro Kubota
?
PPTX
Kubernetesでの來嬬盾裂 ゛なんとなくWいからの用抜゛Kubernetes Meetup Tokyo #33 k燕Y創
NTT DATA Technology & Innovation
?
PDF
禽鰻皆壅秘壇
Takashi Takizawa
?
PDF
アプリ塁もDockerをドカドカ聞おう ゛ Docker秘T
Hori Tasuku
?
PDF
これからのネイティブアプリにおけるOpenID Connectの試喘
Masaru Kurahayashi
?
PDF
檎艶糸馨庄稼艶によるメ`ル鬽楡蹐淋睦段太
Go Maeda
?
PDF
粥禽檎という深えを函り秘れてみて
infinite_loop
?
PDF
2021-12-16 テストコ`ドのないレガシ`アプリケ`ションとの鬚栽い圭
naoto teshima
?
PDF
粥恢艶馨温意閣の強鮫塘佚を屶えるサ`バ`サイドシステム
yuichiro nakazawa
?
PDF
D└veloppement mobile multi-plateforme avec Flutter
erick G
?
PDF
DDD x CQRS 厚仟狼と歌孚狼でなるORMを穩辰靴読亙屬いった
Koichiro Matsuoka
?
PDF
編^桟廠を赫看京赫永で自薦∀觧してみた
Toshiya Mabuchi
?
PPTX
PostgreSQL 12は ここがスゴイ ゛來嬬個鋲やpluggable storage engineなどの仟C嬬を莿彌瞠h゛ NTTデ`タ テクノ...
NTT DATA Technology & Innovation
?
PDF
Dockerfile をくためのベストプラクティス盾h
Masahito Zembutsu
?
PDF
Docker Compose 莿彌瞠h
Masahito Zembutsu
?
CyberChefの聞い圭HamaCTF2019 WriteUp」
Shota Shinogi
?
deep dive distributed tracing
Takayoshi Tanaka
?
遺鴛/遺禽ツ`ル曳熟してみた
Shoya Kai
?
ダ`クネットのはなし #ssmjp
sonickun
?
VirtualBox と Rocky Linux 8 で兵める Pacemaker ~ VirtualBox でも STONITH C嬬がせる! Vi...
ksk_ha
?
乙檎永遺秘壇
Kenjiro Kubota
?
Kubernetesでの來嬬盾裂 ゛なんとなくWいからの用抜゛Kubernetes Meetup Tokyo #33 k燕Y創
NTT DATA Technology & Innovation
?
禽鰻皆壅秘壇
Takashi Takizawa
?
アプリ塁もDockerをドカドカ聞おう ゛ Docker秘T
Hori Tasuku
?
これからのネイティブアプリにおけるOpenID Connectの試喘
Masaru Kurahayashi
?
檎艶糸馨庄稼艶によるメ`ル鬽楡蹐淋睦段太
Go Maeda
?
粥禽檎という深えを函り秘れてみて
infinite_loop
?
2021-12-16 テストコ`ドのないレガシ`アプリケ`ションとの鬚栽い圭
naoto teshima
?
粥恢艶馨温意閣の強鮫塘佚を屶えるサ`バ`サイドシステム
yuichiro nakazawa
?
D└veloppement mobile multi-plateforme avec Flutter
erick G
?
DDD x CQRS 厚仟狼と歌孚狼でなるORMを穩辰靴読亙屬いった
Koichiro Matsuoka
?
編^桟廠を赫看京赫永で自薦∀觧してみた
Toshiya Mabuchi
?
PostgreSQL 12は ここがスゴイ ゛來嬬個鋲やpluggable storage engineなどの仟C嬬を莿彌瞠h゛ NTTデ`タ テクノ...
NTT DATA Technology & Innovation
?
Dockerfile をくためのベストプラクティス盾h
Masahito Zembutsu
?
Docker Compose 莿彌瞠h
Masahito Zembutsu
?

Similar to フロントエンドエンジニアが岑るべき酷庄姻艶恢温壊艶の弊順 (20)

PPTX
酷庄姻艶恢温壊艶ではじめるサ`バレス皆永粥蝕k
GIG inc.
?
PDF
Firebase 古勣
Kaname Noto
?
PDF
Mobile Web
Makoto Kato
?
PDF
Webフロントエンド_kの恷仟トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
?
PDF
酷庄姻艶恢温壊艶を聞ってアプリを恬ってみた
Gunma University
?
PDF
Dist 29 gcp_serverless_web_app_development
Shotaro Suzuki
?
PDF
ゼロからわかる々鷁抗Ρ隹看看一アプリの恬り圭
Shuichi Takenaka
?
PPTX
2016 03 05_yokohama_north
Ryo Tomidokoro
?
PDF
Webエンジニアがラクして二I鬚吋皀丱ぅ襯▲廛蠅鰈る圭隈 ゛Salesforce1モバイルコンテナを聞った_k返隈゛
Mitch Okamoto
?
PDF
MONET冩梢氏 #14
kmiyako
?
PDF
酷庄姻艶恢温壊艶兜伉宀が敬艶恢チャットアプリを恬ってみた
SHOYAYAMAMOTO
?
PDF
恷除の安艶恢v銭室宝の強鬚△譴海
dsuke Takaoka
?
PPTX
臼今祇茶膿氏喝20140531
Hiraku Komuro
?
PDF
恢庄岳恢温稼一フロントエンド蝕kについて
Kou Matsumoto
?
PDF
翌何サイトのFacebook銭強
Hiroshi Kotani
?
PDF
Api
Jun Chiba
?
PDF
厘が社のフロントエンド蝕k並秤
Naoki Yamada
?
PDF
Firebase hands on_#1
Yuichi Morioka
?
ODP
HTML5 アプリ_k
tomo_masakura
?
PDF
App exchange conference facebookがビジネスアプリに嚥えるインパクト
Kazuki Nakajima
?
酷庄姻艶恢温壊艶ではじめるサ`バレス皆永粥蝕k
GIG inc.
?
Firebase 古勣
Kaname Noto
?
Mobile Web
Makoto Kato
?
Webフロントエンド_kの恷仟トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
?
酷庄姻艶恢温壊艶を聞ってアプリを恬ってみた
Gunma University
?
Dist 29 gcp_serverless_web_app_development
Shotaro Suzuki
?
ゼロからわかる々鷁抗Ρ隹看看一アプリの恬り圭
Shuichi Takenaka
?
2016 03 05_yokohama_north
Ryo Tomidokoro
?
Webエンジニアがラクして二I鬚吋皀丱ぅ襯▲廛蠅鰈る圭隈 ゛Salesforce1モバイルコンテナを聞った_k返隈゛
Mitch Okamoto
?
MONET冩梢氏 #14
kmiyako
?
酷庄姻艶恢温壊艶兜伉宀が敬艶恢チャットアプリを恬ってみた
SHOYAYAMAMOTO
?
恷除の安艶恢v銭室宝の強鬚△譴海
dsuke Takaoka
?
臼今祇茶膿氏喝20140531
Hiraku Komuro
?
恢庄岳恢温稼一フロントエンド蝕kについて
Kou Matsumoto
?
翌何サイトのFacebook銭強
Hiroshi Kotani
?
厘が社のフロントエンド蝕k並秤
Naoki Yamada
?
Firebase hands on_#1
Yuichi Morioka
?
HTML5 アプリ_k
tomo_masakura
?
App exchange conference facebookがビジネスアプリに嚥えるインパクト
Kazuki Nakajima
?
Ad

More from Kenjiro Kubota (19)

PDF
いまどき┐海譴らの永堰永蝕k
Kenjiro Kubota
?
PDF
アイスタイル蒙譜サイトにおける閣顎艶.逮壊擬秘並箭壅處
Kenjiro Kubota
?
PDF
アイスタイル蒙譜サイトにおける閣顎艶.逮壊の擬秘並箭
Kenjiro Kubota
?
PDF
Akkaとは。アクタ`モデル とは。
Kenjiro Kubota
?
PDF
永堰永,赫看,掘鉛温壊岳庄界壊艶温姻界鞄による、葵界看壊馨艶を5蔚堀くする函り怏み
Kenjiro Kubota
?
PDF
カメラを旋喘したアプリを恬って埃1000繁で嗄んだ三
Kenjiro Kubota
?
PDF
嶄?寄号庁で晦温姻温厩艶鉛を擬秘する意庄沿壊
Kenjiro Kubota
?
PDF
酷庄姻艶恢温壊艶と鰻顎恰岳で晦永を恬って需た
Kenjiro Kubota
?
PDF
introducing vue-wait-component
Kenjiro Kubota
?
PDF
堰堰閣珂/堰温界一を云桑誘秘した三
Kenjiro Kubota
?
PDF
堰温界一の粥壊霞稼界遺顎姻鉛で棒んだ三
Kenjiro Kubota
?
PDF
晦温姻温厩艶鉛て?粥永鴛協吶を砿尖する
Kenjiro Kubota
?
PDF
2017: A CSS Design Odyssey
Kenjiro Kubota
?
PDF
Introducing hhvm hack-async
Kenjiro Kubota
?
PDF
檎艶壊沿看稼壊温恢鉛艶を聞った温糸姻g廾
Kenjiro Kubota
?
PDF
輿晩て?晦庄稼艶みたいなチャット恬ってきた
Kenjiro Kubota
?
PDF
閣庄艶敬を試喘して鹸j晒と蕕
Kenjiro Kubota
?
PDF
Laravel aspectでv伉の蛍x
Kenjiro Kubota
?
PDF
晦温姻温厩艶鉛で韓温界温糸艶を聞わない蝕k
Kenjiro Kubota
?
いまどき┐海譴らの永堰永蝕k
Kenjiro Kubota
?
アイスタイル蒙譜サイトにおける閣顎艶.逮壊擬秘並箭壅處
Kenjiro Kubota
?
アイスタイル蒙譜サイトにおける閣顎艶.逮壊の擬秘並箭
Kenjiro Kubota
?
Akkaとは。アクタ`モデル とは。
Kenjiro Kubota
?
永堰永,赫看,掘鉛温壊岳庄界壊艶温姻界鞄による、葵界看壊馨艶を5蔚堀くする函り怏み
Kenjiro Kubota
?
カメラを旋喘したアプリを恬って埃1000繁で嗄んだ三
Kenjiro Kubota
?
嶄?寄号庁で晦温姻温厩艶鉛を擬秘する意庄沿壊
Kenjiro Kubota
?
酷庄姻艶恢温壊艶と鰻顎恰岳で晦永を恬って需た
Kenjiro Kubota
?
introducing vue-wait-component
Kenjiro Kubota
?
堰堰閣珂/堰温界一を云桑誘秘した三
Kenjiro Kubota
?
堰温界一の粥壊霞稼界遺顎姻鉛で棒んだ三
Kenjiro Kubota
?
晦温姻温厩艶鉛て?粥永鴛協吶を砿尖する
Kenjiro Kubota
?
2017: A CSS Design Odyssey
Kenjiro Kubota
?
Introducing hhvm hack-async
Kenjiro Kubota
?
檎艶壊沿看稼壊温恢鉛艶を聞った温糸姻g廾
Kenjiro Kubota
?
輿晩て?晦庄稼艶みたいなチャット恬ってきた
Kenjiro Kubota
?
閣庄艶敬を試喘して鹸j晒と蕕
Kenjiro Kubota
?
Laravel aspectでv伉の蛍x
Kenjiro Kubota
?
晦温姻温厩艶鉛で韓温界温糸艶を聞わない蝕k
Kenjiro Kubota
?
Ad

Recently uploaded (6)

PDF
フィシ?カル粥鴛扮旗のセキュリティ坤蹈?ティクスと粥鴛セキュリティの蛮栽のあり圭
Osaka University
?
PDF
React Native vs React Lynx (React Native Meetup #22)
Taiju Muto
?
PPTX
[Liberaware] Engineer Summer Internship.pptx
koyamakohei
?
PDF
AWS BedrockによるIoTg廾箭B初とAIM晒の婢李@AWS Summit ExecLeaders Scale Session
Osaka University
?
PDF
‐粥鴛意檎鴛或皆/繁厩壊伏撹粥鴛でジェスチャ`ゲ`ムを粥鴛意鴛檎或皆を聞ってしてみた
ueda0116
?
PDF
咄僥シンポジウム2025 孃棋讐處 垓侯氏三咄蕗範紛のための咄蕗膿距フロントエント?左賭と厘?の函り怏み
Tsubasa Ochiai
?
フィシ?カル粥鴛扮旗のセキュリティ坤蹈?ティクスと粥鴛セキュリティの蛮栽のあり圭
Osaka University
?
React Native vs React Lynx (React Native Meetup #22)
Taiju Muto
?
[Liberaware] Engineer Summer Internship.pptx
koyamakohei
?
AWS BedrockによるIoTg廾箭B初とAIM晒の婢李@AWS Summit ExecLeaders Scale Session
Osaka University
?
‐粥鴛意檎鴛或皆/繁厩壊伏撹粥鴛でジェスチャ`ゲ`ムを粥鴛意鴛檎或皆を聞ってしてみた
ueda0116
?
咄僥シンポジウム2025 孃棋讐處 垓侯氏三咄蕗範紛のための咄蕗膿距フロントエント?左賭と厘?の函り怏み
Tsubasa Ochiai
?

フロントエンドエンジニアが岑るべき酷庄姻艶恢温壊艶の弊順