JavaScript から デバイスの力を 100%引き出すための Capacitor と Angular でのはじめかた。

Transcript

1. +BWB4DSJQU
   ͔Β
   σόΠεͷྗΛ
   Ҿ͖ग़ͨ͢Ίͷ
   $BQBDJUPS
   ͱ
   "OHVMBS
   Ͱͷ͸͡Ί͔ͨɻ
   

   View Slide

2. *OUSPEVDF
   .BTBIJLP4BLBLJCBSB
   Ұൠࣾஂ๏ਓϦϨʔγϣϯσβΠϯ
   

   ݚڀॴɹ୅දཧࣄ
   Ұൠࣾஂ๏ਓΤϦΞɾΠϊϕʔγϣϯ
   

   ΞϥΠΞϯεɹ$50
   *POJD+BQBO6TFS(SPVQ
   

   ୅ද
   

   View Slide

3. ϞόΠϧσόΠεͰɺϒϥ΢β͸ػೳ੍ݶΛड͚͍ͯΔɻ
   

   View Slide

4. ΞϓϦ͕ར༻Ͱ͖Δ$BQBCJMJUJFT
   ϞόΠϧσόΠε͸ɺΞϓϦͰར༻Ͱ͖Δແ਺ͷ"1*Λఏڙɻ
   ྫʣ9DPEFͰ໌ࣔతʹڐՄ͕ඞཁͳ$BQBCJMJUJJFT
   

   View Slide

5. ΞϓϦ͕ར༻Ͱ͖Δ"1*
   NSCameraUsageDescription
   NSPhotoLibraryAddUsageDescription
   NSPhotoLibraryUsageDescription
   android:name="android.permissi
   on.READ_EXTERNAL_STORAGE"/>
   android:name="android.permissi
   on.WRITE_EXTERNAL_STORAGE" />
   Χϝϥ
   ৼಈ
   NSLocationAlwaysUsageDescription
   NSLocationWhenInUseUsageDescription
   android:name="android.permission
   .ACCESS_COARSE_LOCATION" />
   android:name="android.permission
   .ACCESS_FINE_LOCATION" />
   android:name="android.hardware.l
   ocation.gps" />
   ετϨʔδ ϑΝΠϧγεςϜ ϓογϡ௨஌
   Ґஔ৘ใ
   

   View Slide

6. ϞόΠϧσόΠεΛ௨ͯ͠֎෦σόΠεΛ੍ޚ͢Δ͜ͱ΋Մೳ
   

   View Slide

7. ϞόΠϧϒϥ΢β͸Ұ෦ػೳ͕ڐՄ͞ΕͨʮΞϓϦʯ
   ΞϓϦʹڐՄ͞ΕΔσόΠεͷػೳ܈
   ͦͷҰ෦͕ڐՄ͞Εͨϒϥ΢β
   8FCΞϓϦ͸ϒϥ΢β"1*Λ௨ͯ͠
   

   ͦͷҰ෦ͷػೳʹΞΫηε͍ͯ͠Δ
   ˣ
   Χϝϥ
   Ґஔ৘ใ
   ετϨʔδ
   

   View Slide

8. ͳͥɺҰ෦͔͠ڐՄ͞Εͳ͍ɹˠɹ8FCΞϓϦ͕৹ࠪΛड͚͍ͯͳ͍͔Β
   w ੍ݶ͞Ε͍ͯΔίϯςϯπ
   w ͳΓ͢·͠
   w ஌తࡒ࢈ݖ
   w ϓϥΠόγʔɺ࠮ٗɺෆਖ਼ར༻
   w ऩӹԽͱ޿ࠂ
   w ετΞͷܝࡌ৘ใͱϓϩϞʔγϣϯ
   w εύϜͱ࠷௿ݶͷػೳ
   w Ϛϧ΢ΣΞ
   w ϞόΠϧͷ๬·͘͠ͳ͍ιϑτ΢ΣΞ
   w ϑΝϛϦʔ
   IUUQTQMBZHPPHMFDPNBCPVU
   EFWFMPQFSDPOUFOUQPMJDZ
   

   View Slide

9. .E/8FC"1*௨஌"1*Ͱݴٴ͋ΔϨϕϧ
   

   View Slide

10. ͭ·Γ͸
    ʮϞόΠϧσόΠεͰϒϥ΢β͸ػೳ੍ݶΛड͚͍ͯΔʯ
    ϒϥ΢βͷػೳ੍ݶͰ͋ͬͯɺ
    

    8FCٕज़ͷػೳ੍ݶͰ͸ͳ͍ʂ
    

    View Slide

11. 8FCٕज़Ͱɺ"1*Λϑϧʹ࢖ͬͨʮΞϓϦʯΛͭ͘Δجૅ஌ࣝ
    

    View Slide

12. ΞϓϦͱͯ͠৹ࠪΛड͚ΔͨΊʹϒϥ΢βΛཧղ͢Δ
    εςʔλεόʔ
    8FC7JFX
    63-όʔ
    σόΠε04͕දࣔɻΞϓϦϨϕϧͰ͸
    ഑৭Λมߋͨ͠ΓɺඇදࣔʹͰ͖Δɻ
    ϒϥ΢βΞϓϦ͕දࣔɻ63-͔Βऔಘ͠
    ͨΞηοτΛϨϯμϦϯά͢Δɻ63-Λ
    ೖྗ͢Δ͜ͱͰͲΜͳαΠτ΋දࣔͰ͖
    ͯ͠·͏ɻ
    ϒϥ΢βΞϓϦ͕දࣔɻ
    

    View Slide

13. ΞϓϦʹ͢Δͱ͍͏͜ͱɻ
    8FC7JFXͷΞϓϦΛͭ͘Δɻ
    ʢ04ʹσϑΥϧτ౥ࡌʣΛ޿͛ͯɺ
    ϩʔΧϧʹ͋Δ8FCΞηοτΛදࣔɻ
    ˞֎෦ίϯςϯπͷ৔߹ɺ৹ࠪΛड͚ͯ
    ͍ͳ͍ୈࡾऀͷίϯςϯπ͕දࣔͰ͖ɺ
    ಉ༷ʹ"1*੍ݶ͕ೖΔͨΊɻ
    8FC7JFX
    

    View Slide

14. "1*ΞΫηεͷߟ͑ํ
    J04 "OESPJE
    J04"1*܈ "OESPJE"1*܈
    4XJGU0CKFDUJWF$$$ +BWB,PUMJO$$
    +4&YQPSU +BWB4DSJQU$PSF
    +BWB4DSJQU*OUFSGBDF
    +BWB4DSJQU +BWB4DSJQU
    

    View Slide

15. +BWB4DSJQU$PSF+BWB4DSJQU*OUFSGBDFͱ͸
    +4&YQPSU +BWB4DSJQU$PSF
    +BWB4DSJQU*OUFSGBDF
    +BWB4DSJQU +BWB4DSJQU
    8JOEPXؔ਺ 8JOEPXؔ਺
    8FC7JFX࡞੒࣌ʹ8JOEPXؔ਺ʹ௥Ճ
    

    View Slide

16. ͭ·Γ͸
    ͜ΕͰ৹ࠪ௨Ε͹ɺ"1*࢖͍͍ͨ์୊ɻ
    

    View Slide

17. 8FC7JFXΞϓϦ࡞੒ϥΠϒϥϦʮ$BQBDJUPSʯ
    

    View Slide

18. ͱ͸͍͑
    ࢲͨͪ͸ɺ+BWB4DSJQU͔Β"1*ʹΞΫηε͍ͨ͠Θ͚Ͱ͋ͬͯ
    8FC7JFXΛදࣔ͢ΔϑϨʔϜ·
    Ͱ։ൃ͍ͨ͠Θ͚͡Όͳ͍ɻ
    

    View Slide

19. ͱ͸͍͑
    ࢲͨͪ͸ɺ+BWB4DSJQU͔Β"1*ʹΞΫηε͍ͨ͠Θ͚Ͱ͋ͬͯ
    8FC7JFXΛදࣔ͢ΔϑϨʔϜ·
    Ͱ։ൃ͍ͨ͠Θ͚͡Όͳ͍ɻ
    ͋Γ·͢ɻOQN਺ߦͰ͜ΕΛ࣮ݱ͢Δ͜ͱ͕Ͱ͖ΔϥΠϒϥϦɻ
    

    View Slide

20. DBQBDJUPSKTKQ
    

    View Slide

21. ͜Ε͚ͩͰࠓղઆͨ͠΋ͷ͕͢΂ͯࣗಈߏஙɻ
    ͜ͷ͋ͱɺϏϧυϑΥϧμ໊ͳͲΛखಈͰ
    

    ͍Ζ͍Ζઃఆͯ͠
    

    View Slide

22. "OHVMBSͩͱ΋ͬͱ؆୯
    OHBEEͱ͍͏ࣗಈΠϯετʔϧػߏ͕͋ΔͷͰɺ͜Ε͚ͩɻ
    

    View Slide

23. *POJD'SBNFXPSLͰ؆୯ʹ6*։ൃ
    ϞόΠϧจԽʹԊͬͨ6*ઃܭ͕೉͍͠ͳΒɺ
    

    *POJD'SBNFXPSL͕͓͢͢Ίɻ
    ɹɹɹɹɹɹɹɹɹ΋*POJDΛ࠾༻͍ͯ͠·͢ɻ
    

    View Slide

24. ·ͱΊ
    

    View Slide

25. 8FCΞϓϦͱετΞΞϓϦͷಛੑΛ͏·͘࢖͍෼͚Α͏
    8FCΞϓϦ ετΞΞϓϦ
    w 63-ʹΞΫηε͢Δ͚ͩͰ࢖͑Δ
    w Ϣʔβ͸೔ʑ͍Ζ͍ΖͳαΠτʹ๚໰
    ͍ͯ͠Δ
    w ճ໨ͷར༻͸ൺֱత௿͍
    wσϓϩΠޙ͙͢ެ։
    w"1*͕ݶఆ͞Ε͓ͯΓɺJ04ʹ͓͚Δ
    1VTI௨஌Λ͸͡Ίͱ੍ͯ͠ݶ͕͋Δ
    w Πϯετʔϧ͠ͳ͍ͱ࢖͑ͳ͍
    w Ϣʔβ͸ຖ೔࢖͏ΞϓϦΛश׳ͱͯ͠
    ݻఆԽ͍ͯ͠Δ৔߹͕ଟ͍
    w 'JSTUPQFO͔ΒԿ౓΋ར༻͞Ε΍͍͢
    w৹͕ࠪऴΘΒͳ͍ͱެ։Ͱ͖ͳ͍
    w"1*Λࣗ༝ʹ࢖͑ɺΞϓϦʹߋʹՁ஋
    ͋ΔػೳΛ࣮૷Ͱ͖Δ
    

    View Slide

26. (PPHMFͰΞϓϦΛ୳͢ਓ͕͍ΔɻετΞͰΞϓϦΛ୳͢ਓ΋͍Δɻ
    5IFBOTXFS JOBOVUTIFMM JT
    CFDBVTFUIBU`TXIFSFUIFTBSF
    ౴͑͸؆୯ɻͦ͜ʹϢʔβ͕͍Δ
    ͔ΒͰ͢ɻ
    ͋ͳ͕ͨͭ͘Δ8FCΞϓϦ͸ɺ
    ϒϥ΢βͰ͔͠Ձ஋͕ͳ͍΋ͷͰ͔͢ʁ
    IUUQTXXXGSFFDPEFDBNQPSHOFXTJCVJMUBQXBBOEQVCMJTIFEJUJOBQQTUPSFTIFSFTXIBUJMFBSOFEDCGEBGC
    

    View Slide

27. 8FCΞϓϦͱετΞΞϓϦͷนΛͳͦ͘͏
    IUUQTXXXBGQCCDPNBSUJDMFT
    

    View Slide

28. *POJD.FFUVQ5PLZP
    ࠓ݄݄೔ɺ౦ژͰ*POJF.FFUVQʢٱʑͷର໘Πϕϯτʂʣ΍ΔͷͰɺ*POJD΍
    $BQBDJUPSɺຊ೔ͷ࿩Ͱڵຯ͋Ε͹ͥͻ͝ࢀՃ͍ͩ͘͞ʂ
    IUUQTJPOJDKQDPOOQBTTDPNFWFOU
    

    View Slide