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
かごもく #31 Firebase
Search
gangan
April 11, 2020
Technology
0
49
かごもく #31 Firebase
かごもく #31 Firebase
での発表資料。
-
my report
gangan
April 11, 2020
Tweet
Share
More Decks by gangan
See All by gangan
Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに利用して開発するコーポレートサイト@Vue Fes Japan 2024
shingangan
3
1.6k
Nuxt Scriptsって何ができるの? Nuxt4メインセッションに添えて@Vue.js v-tokyo Meetup #21
shingangan
1
1.2k
Vue.js, React.jsとSwiftUIのpropsを比較する@神山.swift
shingangan
1
610
あなたとチームのためのPublic Outputのススメ@ししとうLT #3
shingangan
1
140
Dockerコンテナのセキュリティを考えてみよう@TOKUSHIMA Cybersecurity Meetup #14
shingangan
1
410
Nuxt Auto-imports機能の深淵を求めて@Reboot v-kansai Meetup #15
shingangan
1
220
「プロダクトの技術選定を1から行ってください」そう言われた時のための技術選定基準@SPARK
shingangan
0
69
プロダクト開発ってどんな感じで進むんですかー?@SPARK
shingangan
1
70
エンジニア就活におけるRPGのススメ@Gstylus
shingangan
0
130
Other Decks in Technology
See All in Technology
Coding Agentに値札を付けろ
watany
3
490
UIパフォーマンス最適化: AIを活用して100倍の速度向上を実現した事例
kinocoboy2
0
210
Developer 以外にこそ使って欲しい Amazon Q Developer
mita
0
130
VitePress & MCPでアプリ仕様のオープン化に挑戦する
hal_spidernight
0
110
250510 StepFunctionのテスト自動化始めました vol.1
east_takumi
1
230
猫でもわかるS3 Tables【Apache Iceberg編】
kentapapa
2
200
ユーザーコミュニティが海外スタートアップのDevRelを補完する瞬間
nagauta
0
180
MagicPod MCPサーバー開発の裏側とAIエージェント活用の展望
magicpod
0
220
Cursorを全エンジニアに配布 その先に見据えるAI駆動開発の未来 / 2025-05-13-forkwell-ai-study-1-cursor-at-loglass
itohiro73
2
570
2025年8月から始まるAWS Lambda INITフェーズ課金/AWS Lambda INIT phase billing changes
quiver
1
1k
LLMの開発と社会実装の今と未来 / AI Builders' Community (ABC) vol.2
pfn
PRO
1
140
正式リリースされた Semantic Kernel の Agent Framework 全部紹介!
okazuki
1
1.1k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
183
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Fireside Chat
paigeccino
37
3.4k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
It's Worth the Effort
3n
184
28k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
How to Ace a Technical Interview
jacobian
276
23k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
かごもく#31 FIREBASE 鹿児島大学大学院 GANGAN
Agenda • About me • Firebaseとは? • Example • まとめ
2
About me 3
About me GANGAN (@gangan_nikki) 北九州高専(制御系)→鹿児島大学(情報系) 5社以上の企業さんでインターン (現在、東京の企業でリモートインターン中) 学生団体:KADAI INFO所属 4
技術の学習遷移 高専時代 • ハードウェア • 組み込み系 • 電子工作 大学時代 •
機械学習 • Edge Computing,IoT • AWS,Azure 2020~ • Webアプリ • Androidアプリ • Firebase,GCP • React.js,Next.js 5
FIREBASE 6
Firebaseについて • Googleが提供するBaaS (Backend as a Service) • 基本的に無料で使用できる •
モバイルのインフラとして使われることが多いので mBaaSともいう • PoC検討やモックの作成、 エンジニア不足によるフルスタックにならざるをえない エンジニアの頼れる味方 7
Firebaseに存在するサービス • Firebase Authentication • Firebase Hosting • Cloud Function
for firebase • Realtime Database • Cloud Firestore for firebase • Cloud Storage for firebase • ML Kit • Cloud Messaging • Test Lab And more… 8
Firebase Authentication • Firebaseが提供する認証機能 • TwitterログインなどのSNSログインや匿名認証などの認証方法が用意されている • 開発においてネックになる認証を手軽に実装可能 9
Firebase Hosting 10 • Firebaseが提供するホスティングサービス • 基本的に静的サイトのホスティング (GitHub Pagesなどと同じ) •
Cloud Functionsなどと組み合わせることでSSRなども可能 • Nodeのバージョン:8.0.0以上
Cloud Functions for firebase • GCPが提供するCloud FunctionsのFirebase版 • 競合他社であれば、AWSが提供するAWS Lambda,
Microsoft Azureが提供するAzure Functionsと同じものという認識で 大丈夫です • 使用言語:JavaScriptのみ (GCPではPython,Goなども使用可能) • Nodeのランタイムは8.0 (ベータ版は10.0) 11
Realtime Database • Firebaseが提供するRealtime Database • Cloud Firestoreが提供される前から存在 • DB形式はNoSQL
• チャットのリアルタイムDBなどで使用 12
Cloud Firestore for firebase • Firebaseが提供するNoSQLデータベース 13
Cloud Storage for firebase 14
ML Kit • 機械学習をモバイルアプリへ簡単に組み込めるライブラリ 15
EXAMPLE 16
手順 1. Firebaseプロジェクトの作成 2. Firebaseアプリの作成 3. 環境構築 (on Docker) 4.
ローカルで確認 5. Firebaseにデプロイ 17
1.Firebaseプロジェクトの作成 18
2.Firebaseアプリの作成 19
3.環境構築 (on Docker) 20
4.ローカルで確認 http://localhost:8080で 右の画面が表示されたらOK 21
5.Firebaseにデプロイする 1. Firebase loginでログイン 2. Firebase init hostingで初期化 3. npm
run buildでVueプロジェクトをビルドし、firebaseへdeploy 22
5.Firebaseにデプロイする 23
FIREBASE使用ケース 24
Firebase使用ケース • Next.jsアプリをFirebase Hostingにデプロイ (現在メインで作業中) • SSRとして、Cloud Functions (or Google
Cloud Run)を使用 • DBとして、Firestore、StorageとしてCloud Storageを使用 • 認証として、Authenticationを使用 • Andoridアプリ(Kotlin)で外部DBとして使用 (検討ケース) • GCPサイドで処理 → Andoridからの呼び出しDBはFirestore • MLサイドとしては、ML Kitを用いた機械学習アプリ(今後) 25
設計 User App Engine Nonログイン Nonログイン画面 ログイン 処理 ログイン
画像の処理 Firebase Userの情報など マイデザイン処理など Google Adsense
まとめ 27
まとめ • Firebaseについての紹介 • Firebase Hostingで簡単な実装実験 • 使い方は無限大なので是非使ってみてください。 28
AND MORE… 29
告知 • KADAI INFOという学生団体でエンジニア (https://kadai-info.com/) 30
告知 •ganganの備忘録にてFirebase関連の記事を公開中 (https://gangannikki.hatenadiary.jp) 31