$30 off During Our Annual Pro Sale. View Details »

Firestoreを利用したMAPアプリの開発について

DaikiOKA
August 22, 2019

 Firestoreを利用したMAPアプリの開発について

DaikiOKA

August 22, 2019
Tweet

More Decks by DaikiOKA

Other Decks in Programming

Transcript

  1. Caraquri Tech Night #4
    FirestoreΛར༻ͨ͠MAPΞϓϦͷ։ൃʹ͍ͭͯ
    גࣜձࣾZERO TO ONE
    Ԭ େو

    View Slide

  2. 5XJUUFS*%
    !OPSJOPSJ@PLB
    Ԭେو
    • ৽ଔͰZERO TO ONEʹೖࣾ͠ɺ
    nori-naʹδϣΠϯ͢Δɻ
    • ࣾձਓ̏೥໨ࣾ಺།ҰͷΞϓϦΤ
    ϯδχΞ
    • iOS(Objective-CɺSwift)ɺ
    Android(JavaɺKotlin)ɺWebͱ
    αʔόʔ(CakePHPɺTypeScript)
    Ͱ։ൃ
    ࣗݾ঺հ
    DBSBRVSJ5FDI/JHIU

    View Slide

  3. OPSJOBͱ͸ʁ
    ۭ੮ͷ͋ΔυϥΠόʔͱಉ͡ํ޲ʹҠಈ͍ͨ͠ਓΛ
    Ϛονϯάͤ͞Δ૬৐ΓʢϥΠυγΣΞʣαʔϏε
    DBSBRVSJ5FDI/JHIU

    View Slide

  4. ϏδωεϞσϧ
    ૬৐Γ୅
    ۭ੮
    Ҡಈ͍ͨ͠ υϥΠόʔ
    ख਺ྉ
    DBSBRVSJ5FDI/JHIU

    View Slide

  5. ΞϓϦͷྲྀΕ
    ໨త஍
    ஍ਤɾ501 Ϛονϯά ϝοηʔδ
    DBSBRVSJ5FDI/JHIU

    View Slide

  6. ஍ਤը໘ͷઆ໌
    ৽ண৘ใ
    ϥΠϒνϟοτ
    ৽ن࡞੒
    ืूͷݕࡧ
    ۙ͘ͷϩάΠϯϢʔβʔΛ
    දࣔ
    ૬৐ΓͷϦΫΤετΛૹ৴
    DBSBRVSJ5FDI/JHIU

    View Slide



  7. OPSJOB
    'JSFTUPSF $MPVEGVODUJPOT
    GPSpSFCBTF
    όοΫΤϯυ
    'JSFCBTF
    nori-naͷγεςϜߏ੒
    ໰͍߹Θͤ
    DBSBRVSJ5FDI/JHIU

    View Slide

  8. ࠓ೔ͷ͓࿩


    DBSBRVSJ5FDI/JHIU

    View Slide

  9. Ґஔ৘ใΛར༻ͨ͠ΞϓϦ͕
    ૿Ճ܏޲


    DBSBRVSJ5FDI/JHIU

    View Slide

  10. Ґஔ৘ใΛڞ༗͢Δ͜ͱʹ
    ఍߅ײ͕ͳ͘ͳ͖ͬͯͨ


    ஍ਤར༻࣮ଶௐࠪcגࣜձࣾθϯϦϯ DBSBRVSJ5FDI/JHIU

    View Slide

  11. ●έϞϯGO
    Z●nly
    Twit●er


    DBSBRVSJ5FDI/JHIU

    View Slide

  12. چόʔδϣϯ ৽όʔδϣϯ
    ςΩετϕʔε
    Πϕϯτॏࢹ
    Ϛοϓϕʔε
    ϦΞϧλΠϜॏࢹ
    DBSBRVSJ5FDI/JHIU

    View Slide

  13. ͳͥม͑ͨͷ͔


    DBSBRVSJ5FDI/JHIU

    View Slide

  14. چόʔδϣϯ ৽όʔδϣϯ
    ςΩετϕʔε
    Πϕϯτॏࢹ
    Ϛοϓϕʔε
    ϦΞϧλΠϜॏࢹ
    DBSBRVSJ5FDI/JHIU

    View Slide

  15. ωΠςΟϒͷҙຯͳ͍


    DBSBRVSJ5FDI/JHIU

    View Slide

  16. MAPͰϦΞϧλΠϜʹ૬৐Γ


    DBSBRVSJ5FDI/JHIU

    View Slide

  17. MAPϝΠϯͰؾ͍ͮͨ͜ͱ


    DBSBRVSJ5FDI/JHIU

    View Slide

  18. Ϣʔβʔͷ཭୤཰͕௿͍


    DBSBRVSJ5FDI/JHIU

    View Slide

  19. Ұिؒޙͷ཭୤཰
    چόʔδϣϯ
    10~15%
    ৽όʔδϣϯ
    20~35% ଟ͍࣌50%


    DBSBRVSJ5FDI/JHIU

    View Slide

  20. ͳͥ


    DBSBRVSJ5FDI/JHIU

    View Slide

  21. ϢʔβʔͷϦΞϧλΠϜͳಈ͖͕
    ݟΕΔ͔Β


    DBSBRVSJ5FDI/JHIU

    View Slide

  22. ஌Βͳ͍ਓͰ΋࣮ࡍʹډΔͱ
    ҆৺͢Δ


    DBSBRVSJ5FDI/JHIU

    View Slide

  23. FirebaseͷϦΞϧλΠϜੑΛ׆༻
    • FirestoreΛར༻
    • ΞΫςΟϒͳϢʔβʔҎ֎Λ
    ൒ಁ໌
    • දࣔͯ͠ಈ͍͍ͯΔϢʔβʔ
    ͷಈ͖Λ௥͏
    • Ͳͷ͘Β͍લʹىಈͨ͠ͷ͔
    Θ͔Δ

    View Slide

  24. • FirestoreΛར༻
    • ΞΫςΟϒͳϢʔβʔҎ֎Λ
    ൒ಁ໌
    • දࣔͯ͠ಈ͍͍ͯΔϢʔβʔ
    ͷಈ͖Λ௥͏
    • Ͳͷ͘Β͍લʹىಈͨ͠ͷ͔
    Θ͔Δ
    FirebaseͷϦΞϧλΠϜੑΛ׆༻

    View Slide

  25. ࢖༻ͨ͠MAP
    .BQ,JU (PPHMF.BQ
    ਌࿨ੑ σϑΥϧτ αʔυύʔςΟʔ
    ྉۚ ແྉ ैྔ੍
    ܦ࿏දࣔ ͋Γ ͳ͠
    ϝϞϦ গͳ͍ ଟ͍
    MapKitͷศརͳ఺
    ɾٯGeocodingɿҢ౓ܦ౓͔ΒॅॴΛऔಘՄೳ
    GoogleMapͷศརͳ఺
    ɾετϦʔτϏϡʔ
    ɾ༗໊ͳ؍ޫ஍ͷ৘ใΛදࣔՄೳ
    DBSBRVSJ5FDI/JHIU

    View Slide

  26. ϢʔβʔͷҐஔ৘ใ
    Firestore্ͷҰͭͷҐஔ৘ใΛߋ৽͠ଓ͚Δ
    →উखʹߋ৽
    →ϦΞϧλΠϜͰϢʔβʔ͕ಈ͘
    DBSBRVSJ5FDI/JHIU

    View Slide

  27. ໰୊఺


    DBSBRVSJ5FDI/JHIU

    View Slide

  28. ಈ࡞͕ॏ͘ͳΔ


    DBSBRVSJ5FDI/JHIU

    View Slide

  29. ಈ࡞͕ॏ͘ͳΔݪҼ
    ঢ়گ
    දࣔ͢ΔϢʔβʔ͕ଟ͗͢Δʢ͓Αͦ300
    ϢʔβʔΛ௒͑Δʣͱը໘͕ఀࢭ͍ͯ͠
    ͨɻ
    ݪҼ
    ΞΠίϯը૾ͷαΠζ੍ݶΛ͔͚͍ͯͳ
    ͔ͬͨͨΊɺը૾ʹΑͬͯ͸ಡΈࠐΈʹ࣌
    ͕͔͔ؒͬͨ

    View Slide

  30. ຖճϢʔβʔΛಡΈࠐΉ
    JGMFUMBTU$FOUFS-PDBUJPOTFMGMBTU$FOUFS-PDBUJPO
    MBTU$FOUFS-PDBUJPOEJTUBODF UBSHFUMPDBUJPO
    TFMGNPWJOH5ISFTIPVME
    SPVUF%JTQMBZGBMTF\
    NҎ্Ҡಈͨ͠Βɺߋ৽
    TFMGSFMPBE"OOPUBUJPO MPDBUJPOMPDBUJPO SBEJVTNBQ6TFS*O

    ^FMTFJGTFMGMBTU$FOUFS-PDBUJPOOJMSPVUF%JTQMBZGBMTF\
    ࠷ॳͷϩʔυ
    TFMGSFMPBE"OOPUBUJPO MPDBUJPOMPDBUJPO SBEJVTNBQ6TFS*O

    ^FMTFJGTFMGNBQ7JFXBOOPUBUJPOTDPNQBDU.BQ \BT 6TFS"OOPUBUJPO^
    JT&NQUZ\
    TFMGSFMPBE"OOPUBUJPO MPDBUJPOMPDBUJPO SBEJVTNBQ6TFS*O

    ^
    DBSBRVSJ5FDI/JHIU

    View Slide

  31. දࣔ͢ΔϢʔβʔΛ·ͱΊΔ
    JGNBQ7JFX[PPN-FWFMTFMGNBQ;PPN-FWFM5ISFTIPVME\
    NBQ7JFXBOOPUBUJPOTGPS&BDI\BOOPUBUJPOJO
    JGMFUDMVTUFSBOOPUBUJPOBT .,$MVTUFS"OOPUBUJPO\
    NBQ7JFXSFNPWF"OOPUBUJPO DMVTUFS

    DMVTUFSNFNCFS"OOPUBUJPOTGPS&BDI\ BOOPUBUJPO
    JO
    JGMFUBOOPUBUJPOBOOPUBUJPOBT %SJWFS"OOPUBUJPO\
    NBQ7JFXSFNPWF"OOPUBUJPO BOOPUBUJPO

    ^
    ^
    NBQ7JFXBEE"OOPUBUJPOT DMVTUFSNFNCFS"OOPUBUJPOT

    ^
    ^
    ^
    DBSBRVSJ5FDI/JHIU

    View Slide

  32. ࠷ޙʹ
    nori-na͸Hosting࢝Ί·ͨ͠ɻ
    DBSBRVSJ5FDI/JHIU

    View Slide

  33. Hostingͱ͸
    WebϖʔδΛެ։͢Δ࢓૊Έ
    ɾJavaScriptͷϑϨʔϜϫʔΫͰ͋Ε͹ͳΜͰ΋ྑ͍
    ɾCloud Functionಉ༷πʔϧ͸npmܦ༝ͰΠϯετʔϧ
    ɾΞοϓϩʔυ΋Cloud Functionͱಉ༷
    ɾ΋ͪΖΜFirestoreͷ৘ใΛදࣔՄೳ
    ɾnori-naͰ͸Vue.jsͰ࡞੒
    DBSBRVSJ5FDI/JHIU

    View Slide

  34. IUUQTTFBSDIOPSJOBKQ
    DBSBRVSJ5FDI/JHIU

    View Slide

  35. IUUQTTFBSDIOPSJOBKQ
    DBSBRVSJ5FDI/JHIU

    View Slide

  36. ͥͻ࢖ͬͯཉ͍͠
    Cloud functions for Firebase

    View Slide

  37. Cloud functions for firebaseͱ͸
    'JSFCBTFͷϢʔβೝূɺσʔλϕʔεͷ௥ՃͳͲͷΠϕϯτ
    Λड͚औͬͯॲཧΛߦ͏αʔϏε
    ݴޠɿ+BWB4DSJQUPS5ZQF4DSJQU
    'JSFTUPSFτϦΨʔ
    w PO$SFBUF
    w PO6QEBUF
    w PO%FMFUF
    w PO8SJUF
    DBSBRVSJ5FDI/JHIU

    View Slide

  38. nori-naͰͷར༻ํ๏
    • ϓογϡ௨஌
    • σʔλͷूܭ
    • ֎෦αʔϏεͱͷ࿈ܞ(ܾࡁɺݕࡧ)
    DBSBRVSJ5FDI/JHIU

    View Slide

  39. ϓογϡ௨஌
    onCreate
    export const pushRideshareRequest = functions.firestore
    .document(commonUtil.makePath('ridesharerequest/{requestId}'))
    .onCreate((snap, context) => {
    const newValue = new firestoreModels.RideShareRequest(snap.data());
    const to = newValue.to;
    console.log(`push start ridesharerequest : ${context.params.requestId}`);
    return pushMessageByUserId(to, '૬৐Γґཔ͕ಧ͖·ͨ͠ɻ಺༰Λ֬ೝͯ͠ڐՄ͠·͠ΐ͏ɻ');
    });
    DBSBRVSJ5FDI/JHIU

    View Slide

  40. ϓογϡ௨஌
    onUpdate
    export const pushLikeComment = functions.firestore
    .document(commonUtil.makePath('mapcomment/{mapcommentId}'))
    .onUpdate((change, context) => {
    const afterData = new firestoreModels.MapComment(change.after.data());
    const afterLike = afterData.likeMembers.length;
    const beforeData = new firestoreModels.MapComment(change.before.data());
    const beforeLike = beforeData.likeMembers.length;
    const toUserId = afterData.user;
    if (!toUserId) return null;
    if (beforeLike < afterLike) {
    return pushMessageByUserId(toUserId, '͍͍Ͷ͕ԡ͞Ε·ͨ͠ʂ');
    }
    return null;
    });
    DBSBRVSJ5FDI/JHIU

    View Slide

  41. ϩʔΧϧͰςετՄೳ
    $npm run shell
    DBSBRVSJ5FDI/JHIU

    View Slide

  42. ςετίʔυ QVTI%FTUJOBUJPO6QEBUF
    \
    CFGPSF\
    TDSFFO/BNFVTF
    MPDBUJPO\
    MBUJUVEF
    MPOHJUVEF
    ^
    EFTUJOBUJPO\
    OBNF5
    HFP-PDBUJPO\
    MBUJUVEF
    MPOHJUVEF
    ^
    ^
    ^
    BGUFS\
    TDSFFO/BNFVTFS
    MPDBUJPO\
    MBUJUVEF
    MPOHJUVEF
    ^
    EFTUJOBUJPO\
    OBNF5PLZP5PXFS
    HFP-PDBUJPO\
    MBUJUVEF
    MPOHJUVEF
    ^
    ^
    ^
    ^
    \
    QBSBNT\
    VTFS*EVTFS
    ^
    ^


    DBSBRVSJ5FDI/JHIU
    • beforeͱafterʹͦΕͧ
    ΕσʔλΛهड़
    • params͸ඞཁͳ࣌ͷ
    Έ

    View Slide

  43. Cloud Functionͷ৽ػೳ
    Scheduler
    export const cronRemindShare = functions.pubsub
    //.schedule("0 18 * * *")//ຖ೔18࣌ʹ࣮ߦ
    .schedule("every 5 minutes")//̑෼͓͖
    .timeZone("Asia/Tokyo")
    .onRun(async context => {
    console.log("͜͜Ͱఆظ࣮ߦ")
    });

    View Slide

  44. ·ͱΊ
    Firebase+Map͸਌࿨ੑ͕ඇৗʹߴ͍
    ϢʔβʔҐஔ৘ใΛϚοϓʹϦΞϧλΠϜදࣔ͢Δͱ݁ߏ໘ന͍
    ͔ͦ͠͠ͷ··Ͱ͸ॲཧʹ໰୊
    ରࡦ
    • දࣔ͢ΔൣғΛݶఆ
    • ଟ਺ͷϢʔβʔΛҰͭʹ·ͱΊΔ
    Webϖʔδ͸HostingͰ։ൃ͠Α͏
    DBSBRVSJ5FDI/JHIU

    View Slide

  45. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide