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
53
かごもく #31 Firebase
かごもく #31 Firebase
での発表資料。
-
my report
gangan
April 11, 2020
Tweet
Share
More Decks by gangan
See All by gangan
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
180
Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに利用して開発するコーポレートサイト@Vue Fes Japan 2024
shingangan
3
1.9k
Nuxt Scriptsって何ができるの? Nuxt4メインセッションに添えて@Vue.js v-tokyo Meetup #21
shingangan
1
1.4k
Vue.js, React.jsとSwiftUIのpropsを比較する@神山.swift
shingangan
1
670
あなたとチームのためのPublic Outputのススメ@ししとうLT #3
shingangan
1
170
Dockerコンテナのセキュリティを考えてみよう@TOKUSHIMA Cybersecurity Meetup #14
shingangan
1
450
Nuxt Auto-imports機能の深淵を求めて@Reboot v-kansai Meetup #15
shingangan
1
240
「プロダクトの技術選定を1から行ってください」そう言われた時のための技術選定基準@SPARK
shingangan
0
88
プロダクト開発ってどんな感じで進むんですかー?@SPARK
shingangan
1
84
Other Decks in Technology
See All in Technology
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
940
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2.1k
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.7k
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
100
生成AI時代のセキュアコーディングとDevSecOps
yuriemori
0
140
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
1k
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
160
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
4
2.2k
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
AWSでAgentic AIを開発するための前提知識の整理
nasuvitz
2
220
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
1
260
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Scaling GitHub
holman
463
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
KATA
mclloyd
PRO
32
15k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
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