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

Angular + Ionicを使って iOSエンジニアにもやさしいPWA開発をした話

ikasoumen
January 19, 2018

Angular + Ionicを使って iOSエンジニアにもやさしいPWA開発をした話

ng-fukuoka Angular Meetup #2
https://ng-fukuoka.connpass.com/event/74438/

での発表内容です。

ikasoumen

January 19, 2018
Tweet

More Decks by ikasoumen

Other Decks in Technology

Transcript

  1. "OHVMBS*POJDΛ࢖ͬͯ
    J04ΤϯδχΞʹ΋΍͍͞͠
    18"։ൃΛͨ͠࿩
    ikasoumen

    View Slide

  2. w JLBTPVNFO
    w UXJUUFS!@JLBTPVNFO
    w ϐΫγϒ෱ԬΦϑΟε
    w +BWBTDSJQU೥໨
    w $P⒎FF&4SJPU54"OHVMBS
    ࣗݾ঺հ
    2

    View Slide

  3. View Slide

  4. J04
    /BUJWF

    View Slide

  5. 18"
    "OHVMBS*POJD

    View Slide

  6. ࠓ͙͢ࢼͦ͏ʂ
    https://chatstory.pixiv.net/
    6

    View Slide

  7. w J04൛͕ઌߦͯ͠ଘࡏ͢Δதɺ

    18"൛͸ͳͥ"OHVMBS*POJDʹ͔ͨ͠
    w ࣮ફ͍ͯ͠Δઃఆͱ͔ख๏ͱ͔
    w ΍ͬͯΈͯͲ͏ͩͬͨʁ
    ࠓ೔࿩͢͜ͱ
    7

    View Slide

  8. ͳͥ"OHVMBS*POJDʹ
    ͔ͨ͠

    View Slide

  9. ϐΫγϒͷϑϩϯτΤϯυࣄ৘
    w ࠾༻਺ͱن໛Ͱͬ͘͟Γ
    w 3FBDUʜѹ౗త
    w 7VFʜ·͋·͋
    w "OHVMBSʜ࠾༻ͳ͠
    9

    View Slide

  10. "OHVMBS͍͍ΑͶ
    w Ϋϥεϕʔεͷίϯϙʔωϯτఆٛ
    w .PEVMF 4FSWJDF %*͋ͨΓͷଥ౰͞
    w தن໛Ҏ্ͷ։ൃͰΑ͘೰ΉϙΠϯτʹ
    ެࣜճ౴͕͋Δ
    10

    View Slide

  11. *POJD͍͍ΑͶ
    w )5.-ͰJ04 "OESPJEΞϓϦΛ࡞ΕΔɺ
    "OHVMBS༻ϑϨʔϜϫʔΫ
    w ίϯϙʔωϯτͷ࣭΋ͱͯ΋ྑ͍
    w ٧·Γ͕ͪͳϙΠϯτΛࣄલʹ౿ΜͰ͋
    ΔɻԿ͔͋ͬͯ΋ԡ͠௨ΕΔࣗ਎
    w 18"ͷαϙʔτ͕ڧ·͍ͬͯΔ
    11

    View Slide

  12. νʔϜͱͷ߹ҙܗ੒
    w ͦ΋ͦ΋νʔϜͷΤϯδχΞશһJ04൛Λ։ൃͨ͜͠ͱ͕͋Δ
    w "OHVMBS*POJDͳΒJ04ͱࣅͨؾ࣋ͪͰ։ൃͰ͖Δ
    w ঢ়ଶ؅ཧ͕3Y+43Y4XJGUɻࠜຊ͕ಉ͡
    w /BWJHBUJPOͷ֓೦͕͋Δ
    w ϥΠϑαΠΫϧϝιου໊͕΄΅ಉ͡
    w NZBBLF͞ΜͷεϥΠυ΋ࢀߟʹ
    Angular, React, Vue, Svelte, Riotͷݸਓతͳબͼํ
    w IUUQTNZBBLFDPNTMJEFTIPXUPDIPPTFBOHVMBSSFBDUWVFTWFMUFSJPU
    12

    View Slide

  13. ࣮ફ͍ͯ͠Δઃఆͱ͔
    ख๏ͱ͔

    View Slide

  14. w 4XJGUMJLFʹ։ൃͰ͖ΔΑ͏ͳઃఆΛ͍ͯ͠Δ
    w UTDPOpH
    w lTUSJDU/VMM$IFDLTUSVF
    w OVMMBCMFΛOPOOVMMBCMFʹ୅ೖͰ͖ͳ͍Α͏ʹ
    w UTMJOU
    w USJQMFFRVBMT<USVF BMMPXOVMMDIFDL>
    w ݫີൺֱ ͨͩ͠OVMMͱVOEFpOFE͸΍΍͍͜͠ͷͰ

    جຊతʹJG IPHFOVMM
    \ʜ^Ͱ
    UTMJOU UTDPOpH
    14

    View Slide

  15. w 4XBHHFS
    w 3FTUGVM"1*ͷυΩϡϝϯτੜ੒πʔϧ
    w ࣾͷϒϩάهࣄ
    Swagger+JSON SchemaͰAPIͷܕΛςετͯ͠։ൃαΠΫϧΛεϐʔυΞοϓͤͨ͞࿩
    w IUUQTJOTJEFQJYJWCMPHFEWBLG
    w 4XBHHFSDPEFHFO͸TXBHHFSͷఆ͔ٛΒ

    ֤ݴޠ޲͚ʹίʔυΛੜ੒ͯ͘͠ΕΔ
    4XBHHFSDPEFHFO
    15

    View Slide

  16. 16

    View Slide

  17. 17

    View Slide

  18. w खͰJOUFSGBDFॻ͘ΑΓѹ౗తʹૣ͍ؒ͠ҧ͑ͳ͍
    w TXBHHFSΛॻ͘ͱ"1*ͷςετ΋Ͱ͖ͯίʔυ΋ੜ੒͞ΕΔ
    w 4XJGUଆͷίʔυ΋ੜ੒Ͱ͖Δ
    w ·ͩ΍Εͯͳ͍
    w "1*ʹϦΫΤετ͢Δϝιου΋ੜ੒Ͱ͖Δ
    w ࠷ۙ)UUQ$MJFOUʹରԠͨ͠
    w ·ͩ΍Εͯͳ͍
    4XBHHFSDPEFHFO
    18

    View Slide

  19. ࠾༻ͯ͠ΈͯͲ͏͔ͩͬͨ

    View Slide

  20. w "OHVMBS5ZQF4DSJQU͕ྑ͍
    w ܕνΣοΫ *OUFMMJTFOTFͷԸܙΛ
    74DPEFͰड͚ΒΕΔ
    w Ϋϥεϕʔεͷίϯϙʔωϯτఆٛ

    +4ʹৄ͘͠ͳͯ͘΋ҧ࿨ײͳ͘ॻ͚Δ
    8FCઐ໳ΤϯδχΞͰͳͯ͘΋։ൃʹࢀՃͰ͖Δ
    20

    View Slide

  21. w *POJD͕ྑ͍
    w ෳࡶͳίϯϙʔωϯτΛ҆৺ͯ͠࢖͑Δ
    w $44ͷࡉ͔͍τϦοΫΛ஌Βͳͯ͘΋ྑ
    ͍
    w 6*ͷΫΦϦςΟΛҡ࣋ͭͭ͠ϲ݄ͰϦ
    ϦʔεͰ͖ͨ
    8FCઐ໳ΤϯδχΞͰͳͯ͘΋։ൃʹࢀՃͰ͖Δ
    21

    View Slide

  22. w ΍ͬͺΓॳ৺ऀʹ$44͸َ໳
    w *POJDͷίϯϙʔωϯτΛ

    ΧελϜ͢Δͱ·͋೉͍͠ΑͶ
    w ঢ়گʹΑΓ$44PWFSSJEFͷඞཁ΋
    w બఆ࣌ʹ૝ఆͨ͠ൣғ಺Ͱ͸͋ΔͷͰ

    ৄ͍͠ਓ͕αϙʔτ͍ͯ͠Δ
    ҰํͰ
    22

    View Slide

  23. w "OHVMBSͷઃఆ΋࣌ʑ͸·Δ
    w BQQNPEVMFUTʹ؀ڥม਺౉ͦ͏ͱ͢Δ
    ͱ"05ίϯύΠϧʹࣦഊͨ͠Γ
    w ޮ཰తͳ։ൃʹ͸8FCQBDLͰ৭ʑ΍ͬ
    ͨ΄͏͕ྑ͍͜ͱ΋
    w ͜Ε΋ৄ͍͠ਓͨͪͰରॲͯ͠Δ
    ҰํͰ
    23

    View Slide

  24. w J04ʹඇৗʹ͍ۙߏ੒ɾײ֮Ͱ18"Λ

    ࡞ΔͨΊ"OHVMBS*POJDΛ࠾༻ͯ͠Έͨ
    w ஌ݟ͕ڞ༗Ͱ͖ͨΓɺJ04 18"Ͱಉ࣌ʹ
    ػೳΛ࣮૷͢Δͱ͖ʹಉ͡ϊϦͰॻ͚ͯɺ
    ͱͯ΋ྑ͍
    ·ͱΊ
    24

    View Slide

  25. ͓ΘΓ

    View Slide