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
Flutterとfirebaseを使ってモバイルアプリに挑戦してみる
Search
Masaya Nasu
April 02, 2018
Technology
3
3k
Flutterとfirebaseを使ってモバイルアプリに挑戦してみる
Flutterとfirebaseを使ってモバイルアプリを作ろうとしている話。
サンプルコード
https://github.com/nasum/flutter_firebase_playground
Masaya Nasu
April 02, 2018
Tweet
Share
More Decks by Masaya Nasu
See All by Masaya Nasu
What's new in Go 1.23
nasum
0
98
カミナシのフロントエンド開発の効率化の取り組み
nasum
2
290
新参者だけどバーンアウトしかけているチームを立て直す
nasum
21
11k
DjangoではじめるGraphQLとフロントエンド開発の協業
nasum
1
3.5k
grpc-gatewayで作るマイクロサービスの管理画面
nasum
1
7.6k
コストをかけずに機械学習の環境を整える&学習環境(人間の)
nasum
0
1.7k
Elixirの好きなところ
nasum
0
510
ElectronでFirebaseを使ってみた(仮)
nasum
2
3.4k
Vue.jsを導入する際失敗したこと
nasum
1
4.2k
Other Decks in Technology
See All in Technology
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
47
18k
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
PO初心者が考えた ”POらしさ”
nb_rady
0
210
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
120
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
130
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
6.9k
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
250
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
330
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
120
怖くない!はじめてのClaude Code
shinya337
0
390
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
BBQ
matthewcrist
89
9.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Navigating Team Friction
lara
187
15k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Rails Girls Zürich Keynote
gr2m
95
14k
Typedesign – Prime Four
hannesfritz
42
2.7k
Transcript
FlutterͱfirebaseΛ ͬͯϞόΠϧΞϓϦ ʹઓͯ͠ΈΔ Firebase Japan User Group / meetup /
3 ಹਢཧ
ࣗݾհ • ಹਢཧ ීஈRailsͱ͔Ͱ͓ࣄͯ͠·͢ • Twitter : @tomato360 GitHub: @nasum
• Vue.js͕͖
ࢲͱfirebase
ͪΐͬͱલʹগ͠৮ͬͯͨ https://speakerdeck.com/nasum/ electrondefirebasewoshi-tutemita-jia
࠷ֶۙͼͯ͠·͢ श࡞ɿMarkdownEditor https://spellnote.com/
৽͍͠ςʔϚΛࡧத
Flutter
Flutter • Google • ϞόΠϧΞϓϦ։ൃϑϨʔϜϫʔΫ • ΫϩεϓϥοτϑΥʔϜ • Dartʢʂʁ
Flutterͱfirebase͍͍Έ߹Θͤ ʢݸਓͷҙݟ • Flutter • ΫϩεϓϥοτϑΥʔϜ • firebase • αʔόϨε
• ࠷খͷͷΛ࠷Ͱ࡞Εͦ͏ͳΠϝʔδ
༻ײΛ୳ͬͯΈΔ
firebase auth buildscript { repositories { google() jcenter() } dependencies
{ classpath 'com.android.tools.build:gradle:3.0.1' classpath 'com.google.gms:google-services:3.2.0' } } android/build.gradle
firebase auth apply plugin: 'com.google.gms.google-services' android/app/build.gradle
firebase auth import 'package:google_sign_in/google_sign_in.dart'; import 'package:firebase_auth/firebase_auth.dart'; lib/main.dart
firebase auth final FirebaseAuth _auth = FirebaseAuth.instance; final GoogleSignIn _googleSignIn
= new GoogleSignIn(); lib/main.dart
firebase auth void _handleSignIn() async { GoogleSignInAccount googleUser = await
_googleSignIn.signIn(); GoogleSignInAuthentication googleAuth = await googleUser.authentication; FirebaseUser siginUser = await _auth.signInWithGoogle( accessToken: googleAuth.accessToken, idToken: googleAuth.idToken, ); setState(() { user = siginUser; }); } lib/main.dart
firebase auth if (user != null) { displayName = new
Text(user.displayName); email = new Text(user.email); avator = new CircleAvatar(backgroundImage: new NetworkImage(user.photoUrl)); } lib/main.dart
firebase auth
ग़དྷͨը໘
ͪΌΜͱAnalyticsಈ͘
firebase auth • ඞཁͳϥΠϒϥϦ • google_sign_in https://pub.dartlang.org/packages/google_sign_in • firebase_auth https://pub.dartlang.org/packages/firebase_auth
• ίʔυྫ • https://github.com/nasum/flutter_firebase_playground/ commit/66acc51fc6d67258dfb4b0194b3dcac72ff8992a
firebase auth ༻ײ • FirebaseUserͷΠϯελϯεΛ࡞ΕOK • JS൛ͱ༻ײࣅ͍ͯΔ
DartͷϥΠϒϥϦͷϖʔδ
cloud firestore import ‘package:cloud_firestore/cloud_firestore.dart'; QuerySnapshot snapShot = await Firestore.instance.collection(‘memo').getDocuments(); Firestore.instance
.collection('memo') .document() .setData({'text': _inputText}); lib/main.dart
cloud firestore
cloud firestore void _getDocument(List<Widget> list) async { QuerySnapshot snapShot =
await Firestore.instance.collection('memo').getDocuments(); setState(() { snapShot.documents.forEach((DocumentSnapshot ds) { SizedBox box = new SizedBox( width: 300.0, height: 50.0, child: new Card(child: new Text(ds.data['text'])), ); list.add(box); }); }); } lib/main.dart
ग़དྷͨը໘
cloud firestore
cloud firestore
cloud firestore • ඞཁͳϥΠϒϥϦ • cloud_firestore https://pub.dartlang.org/packages/cloud_firestore • ίʔυྫ https://github.com/nasum/
flutter_firebase_playground/commit/ 16960fb4ceafe0f1ed5bc85eb388a722e4739079
cloud firestoreײ • ༻ײJSͷͱࣅ͍ͯΔ • ࠷৽ͷ0.3.2Λ͏ͱίϯύΠϧग़དྷͳ͍ ʢཁௐࠪ • Ή͠ΖFlutterͷঢ়ଶཧͰۤ࿑ͨ͠
·ͱΊ • JSಉ༷ʹDart൛ָʹ͑Δ • FlutterͱDartʹ׳Εͳͯۤ͘࿑ͨ͠ʢ׳Εͷ • ΫϩεϓϥοτϑΥʔϜͱαʔόϨε࠷ڧͳؾ ͕͍ͯ͠Δ • ΞϓϦΛͭ͘Γ͍ͨਓʹ͓קΊ͍ͨ͠Έ߹Θͤ
αϯϓϧίʔυ • https://github.com/nasum/flutter_firebase_playground