Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

1.6k

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

Masahiko Sakakibara

May 14, 2022
Tweet

More Decks by Masahiko Sakakibara

Transcript

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

    View full-size slide

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

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

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

    ୅ද

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. DBQBDJUPSKTKQ

    View full-size slide

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

    ͍Ζ͍Ζઃఆͯ͠

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide