JSでFirebaseのML Kitを使う

Slide 1

Slide 1 text

JSͰFirebaseͷML KitΛ࢖͏ 2019/02/21 #0 Fukuoka.Firebase@LTΠϕϯτ

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

ࣗݾ঺հ גࣜձࣾFusic ΤϯδχΞ ٢໺ խ໹ (Yoshino Masaya) @ayasamind

Slide 4

Slide 4 text

ࣗݾ঺հ

Slide 5

Slide 5 text

ͪΐͬͱࠂ஌

Slide 6

Slide 6 text

ͪΐͬͱࠂ஌ ֶੜ޲͚AlexaϋοΧιϯΠϕϯτ 3/27ʙ։࠵!!!

Slide 7

Slide 7 text

JSͰFirebaseͷML KitΛ࢖͏ 2019/02/21 #0 Fukuoka.Firebase@LTΠϕϯτ

Slide 8

Slide 8 text

໨࣍ ɾࣗ෼ͱFirebase ɾML Kitಋೖ·Ͱ ɾML KitΛ࣮ࡍʹ࢖༻͢Δ ɾ·ͱΊ

Slide 9

Slide 9 text

ࣗ෼ͱFirebase

Slide 10

Slide 10 text

୹ظΠϯλʔϯੜͷϓϩάϥϛϯάମݧͱͯ͠ ࣗ෼ͱFirebase Authetication(Facebook࿈ܞ) ࢖༻ͨ͠Firebaseͷػೳ

Slide 11

Slide 11 text

୹ظΠϯλʔϯੜͷϓϩάϥϛϯάମݧͱͯ͠ ࣗ෼ͱFirebase ɾϓϩάϥϛϯάະܦݧऀ͕ɺ1िؒͰFacebookೝূΛ ɹ࡞Δ͜ͱ͕Ͱ্͖ͨɺڭ͑Δίετ΋௿͔ͬͨɻ ɾΠϯλʔϯੜʹͱͬͯ΋ɺීஈΑ͘࢖͏΋ͷΛ࡞Εͨ ɹܦݧʹͳͬͯɺࣗ৴͕͍͍ͭͯͨɻ ײ૝

Slide 12

Slide 12 text

։ൃ߹॓Ͱ࡞ͬͨPWAͰ ࣗ෼ͱFirebase Firebase CLI Hosting ࢖༻ͨ͠Firebaseͷػೳ

Slide 13

Slide 13 text

։ൃ߹॓Ͱ࡞ͬͨPWAͰ ࣗ෼ͱFirebase ɾແྉSSLԽ͕ͱͯ΋خ͍͠ɻ ɾGoogleͳ͚ͩ͋ͬͯPWA͕࡞Γ΍͍͢ ײ૝

Slide 14

Slide 14 text

ML Kitಋೖ·Ͱ

Slide 15

Slide 15 text

ࠓճLTΛ͢Δʹ͋ͨͬͯ ML Kitಋೖ·Ͱ FirebaseͬͯଞʹͲΜͳػೳ͕͋Δ͚ͬ

Slide 16

Slide 16 text

ࠓճLTΛ͢Δʹ͋ͨͬͯ ML Kitಋೖ·Ͱ FirebaseͬͯଞʹͲΜͳػೳ͕͋Δ͚ͬ

Slide 17

Slide 17 text

Google Analytics Authentication Realtime Database Cloud Firestore Cloud Storage Hosting Cloud Functions ML Kit App Indexing Dynamic Links ML Kitಋೖ·Ͱ ࠓճLTΛ͢Δʹ͋ͨͬͯ Crashlytics Performance Monitoring Test Lab Crash Reporting Cloud Messaging Predictions Remote Conﬁg A/B Test Notiﬁcations Invites

Slide 18

Slide 18 text

ࠓճLTΛ͢Δʹ͋ͨͬͯ ML Kitಋೖ·Ͱ ΊͪΌଟ͍ɺɺɺ

Slide 19

Slide 19 text

ࠓճLTΛ͢Δʹ͋ͨͬͯ ML Kitಋೖ·Ͱ શମతʹWebΞϓϦ։ൃΛ͠΍͘͢͢Δ΋ͷ͕େ൒

Slide 20

Slide 20 text

ࠓճLTΛ͢Δʹ͋ͨͬͯ ML Kitಋೖ·Ͱ ML Kit͸ɺGoogleͷػցֶशϞσϧΛ Firebaseͷ͋ͷ؆୯͞Ͱ࢖͑Δͷ͔ͳ

Slide 21

Slide 21 text

ࠓճLTΛ͢Δʹ͋ͨͬͯ ML Kitಋೖ·Ͱ ML Kitɺ৮ͬͯΈΑ͏☺

Slide 22

Slide 22 text

ML Kit ࢖ͬͯΈΑ͏ͱࢥͬͨΒ… ML Kitಋೖ·Ͱ

Slide 23

Slide 23 text

ML Kit ࢖ͬͯΈΑ͏ͱࢥͬͨΒ… ML Kitಋೖ·Ͱ Web͕ͳ͍…

Slide 24

Slide 24 text

ࠔͬͨ… ML Kitಋೖ·Ͱ Swift΋Kotlin΋ॻ͚ͳ͍͠ɺ ͦ΋ͦ΋FirebaseͰ؆୯ʹ࢖͍͍ͨΜ͚ͩͲͳ͋

Slide 25

Slide 25 text

ML Kitಋೖ·Ͱ NativeScriptͳΒ͍͚Δ͔΋…

Slide 26

Slide 26 text

ML Kitಋೖ·Ͱ

Slide 27

Slide 27 text

ͳΜ͔͍͚ͩͦ͏ʂ ML Kitಋೖ·Ͱ ͪΌΜͱML Kitʹ΋ରԠͯ͠Δ☺

Slide 28

Slide 28 text

ML KitΛ࢖ͬͯΈΔ͜ͱʹ ML Kitಋೖ·Ͱ NativeScript-Vue + FirebaseͰػցֶशʂ

Slide 29

Slide 29 text

ML KitΛ࣮ࡍʹ࢖༻͢Δ

Slide 30

Slide 30 text

ML KitΛ࣮ࡍʹ࢖༻͢Δ ॳظઃఆ NativeScript-VueͷϓϩδΣΫτ࡞੒

Slide 31

Slide 31 text

ML KitΛ࣮ࡍʹ࢖༻͢Δ ॳظઃఆ NativeScript-Plugin-FirebaseΛ௥Ճ $ tns plugin add nativescript-plugin-ﬁrebase

Slide 32

Slide 32 text

ML KitΛ࣮ࡍʹ࢖༻͢Δ ॳظઃఆ app.jsʹҎԼͷεΫϦϓτΛ௥Ճ

Slide 33

Slide 33 text

ML KitΛ࣮ࡍʹ࢖༻͢Δ ॳظઃఆ FirebaseͷϓϩδΣΫτΛ࡞੒ Firebase͕ൃߦͯ͘͠ΕΔϑΝΠϧΛઃஔ͢Δɻ ɾiOSɹGoogleService-Info.plistϑΝΠϧΛઃஔɻ ɾAndroidɹgoogle-services.jsonϑΝΠϧΛઃஔɻ ॳظઃఆ ※ैྔ՝ۚͷBlazeϓϥϯ΁ͷΞοϓάϨʔυ͕ඞཁ

Slide 34

Slide 34 text

ॳظઃఆऴྃ! ML KitΛ࣮ࡍʹ࢖༻͢Δ

Slide 35

Slide 35 text

ࠓճಈ͔͢ͷ͸ҎԼͷೋͭ ML KitΛ࣮ࡍʹ࢖༻͢Δ ɾText Recognition(จࣈೝࣝ) ɾFace Recognition(إೝࣝ)

Slide 36

Slide 36 text

Text Recognition(จࣈೝࣝ) ML KitΛ࣮ࡍʹ࢖༻͢Δ

Slide 37

Slide 37 text

ML KitΛ࣮ࡍʹ࢖༻͢Δ Text Recognition

Slide 38

Slide 38 text

ML KitΛ࣮ࡍʹ࢖༻͢Δ Text Recognition σϞ

Slide 39

Slide 39 text

Face Recognition(จࣈೝࣝ) ML KitΛ࣮ࡍʹ࢖༻͢Δ

Slide 40

Slide 40 text

ML KitΛ࣮ࡍʹ࢖༻͢Δ Face Recognition

Slide 41

Slide 41 text

ML KitΛ࣮ࡍʹ࢖༻͢Δ Face Recognition ฦ͖ͬͯͨ஋

Slide 42

Slide 42 text

ML KitΛ࣮ࡍʹ࢖༻͢Δ Face Recognition σϞ

Slide 43

Slide 43 text

·ͱΊ

Slide 44

Slide 44 text

·ͱΊ ɾNativeScriptΛ࢖͑͹JSͰ΋Firebaseͷ ɹML KitΛ࢖͏͜ͱ͕Ͱ͖Δ!!! ɾػցֶश׬શະܦݧͰ΋FirebaseΛ࢖͑͹ɺ ɹGoogleͷςΩετղੳ΍إղੳΛΞϓϦʹ૊ΈࠐΉ ɹ͜ͱ͕Ͱ͖Δɻ ɾͱ͸͍͑ɺNativeͷ։ൃ؀ڥΛ࡞Δͷ͸ඇৗʹେม…

Slide 45

Slide 45 text

͋Γ͕ͱ͏͍͟͝·ͨ͠!