PWA素人のPWA素人の為のライトニングトーク #okamoba

PWA素人のPWA素人の為のライトニングトーク #okamoba

2018年4月28に開催された 岡山モバイルアプリ開発もくもく会でのLT資料です。

https://okmoku.connpass.com/event/80432/

PWAとは何か、PWAを作るにはどうすればよいかについて調べて実際にコードを書いて実行してみました。

F891bc57aad1b6bdbf344358e7fec3cc?s=128

Takahashi Ikki

April 29, 2018
Tweet

Transcript

  1. 18"ૉਓͷ18"ૉਓͷҝͷ ϥΠτχϯάτʔΫ  ୈճԬࢁϞόΠϧΞϓϦ։ൃ΋͘΋͘ձ

  2. ͓͠ͳ͕͖  

  3. ຊ೔ͷ͓඼ॻ͖ ̍ɽ͋͹͏ͱΈʔ ̎ɽ18"ͬͯԿʁ ̏ɽ18"ͷ࡞Γํ ̐ɽ·ͱΊ  

  4. ̍ɽ͋͹͏ͱΈʔ  

  5. ̍ɽ͋͹͏ͱΈʔ ߴڮҰٍ ɾԬࢁͰ8FCΤϯδχΞΛͯ͠·͢ɻ ɾ1)1FSɺ ΅ͪ΅ͪ1ZUIPOJTUB  ɹ4XJGU͕޷͖ͳਓ ɾ+16(தࠃࢧ෦௕ ɾϋϦωζϛࣂͬͯ·͢ 

    
  6. ߴڮɺస৬͢ΔͬͯΑ IUUQJLLJUBOHIBUFOBCMPHKQFOUSZ ̍ɽ͋͹͏ͱΈʔ  

  7. 2଎ͬͯΞϓϦΛ࡞ͬͯ·͢ IUUQTJUVOFTBQQMFDPNKQBQQR&'&"""%&#'&'&"&'&"&#$&#&$&&&#&' RS&#&#$&&""&#$&&#$JE NU ̍ɽ͋͹͏ͱΈʔ  

  8. աڈ̍ϲ݄ͷ%-਺  Ṗͷόζ མͪண͍͖ͯͨײ ̍ɽ͋͹͏ͱΈʔ  

  9. ॾ஫ҙ  

  10. ࠓ೔࿩͞ͳ͍ࣄ ɾ4XJGUͷ࿩ ɾ+BWB GPS"OESPJE ͷ࿩  

  11. ͢·Μ΍Ͱ  

  12. ̎ɽ18"ͬͯԿʁ  

  13. ̎ɽ18"ͬͯԿʁ  

  14. ̎ɽ18"ͬͯԿʁ   ͍͖ͬͯͨͬʂ

  15. ̎ɽ18"ͬͯԿʁɹ 1SPHSFTTJWF8FC"QQͱ͸ʁ 8FCͱΞϓϦͷ྆ํͷར఺Λ݉Ͷඋ͑ͨΞϓϦɻ ϞόΠϧͷϒϥ΢βͰද͙ࣔͯ͢͠ʹར༻ग़དྷɺ ΞϓϦΛΠϯετʔϧ͠ͳͯ͘΋ར༻ग़དྷΔɻ ϗʔϜը໘ʹΞΠίϯΛ௥Ճ͢ΔࣄͰ ΦϑϥΠϯͰಈ࡞ͤ͞Δࣄ͕Ͱ͖ͨΓ ϓογϡ௨஌Λड͚ͨΓͰ͖Δɻ  

  16. ̎ɽ18"ͬͯԿʁɹ ɹɹ18"ͷಛ௃ ɾஈ֊త ɾϨεϙϯγϒ ɾωοτϫʔΫʹґଘ͠ͳ͍ ɾΞϓϦײ֮ ɾৗʹ࠷৽ ɾ҆શ ɾൃݟ͠΍͍͢ ɾ࠶ΤϯήʔδϝϯτՄೳ

    ɾΠϯετʔϧՄೳ ɾϦϯΫՄೳ  
  17. ̎ɽ18"ͬͯԿʁɹ ɹɹ18"ͷಛ௃ ɾஈ֊త ɾϨεϙϯγϒ ɾωοτϫʔΫʹґଘ͠ͳ͍ ɾΞϓϦײ֮ ɾৗʹ࠷৽ ɾ҆શ ɾൃݟ͠΍͍͢ ɾ࠶ΤϯήʔδϝϯτՄೳ

    ɾΠϯετʔϧՄೳ ɾϦϯΫՄೳ   4FSWJDF8PSLFSͷ׆༻Ͱ ΦϑϥΠϯͰ΋ಈ͘
  18. ̎ɽ18"ͬͯԿʁɹ ɹɹ18"ͷಛ௃ ɾஈ֊త ɾϨεϙϯγϒ ɾωοτϫʔΫʹґଘ͠ͳ͍ ɾΞϓϦײ֮ ɾৗʹ࠷৽ ɾ҆શ ɾൃݟ͠΍͍͢ ɾ࠶ΤϯήʔδϝϯτՄೳ

    ɾΠϯετʔϧՄೳ ɾϦϯΫՄೳ   IUUQTରԠ͕ඞਢ
  19. ̎ɽ18"ͬͯԿʁɹ ɹɹ18"ͷಛ௃ ɾஈ֊త ɾϨεϙϯγϒ ɾωοτϫʔΫʹґଘ͠ͳ͍ ɾΞϓϦײ֮ ɾৗʹ࠷৽ ɾ҆શ ɾൃݟ͠΍͍͢ ɾ࠶ΤϯήʔδϝϯτՄೳ

    ɾΠϯετʔϧՄೳ ɾϦϯΫՄೳ   ϓογϡ௨஌౳Ͱ ΤϯήʔδϝϯτΛଅͤΔ
  20. ̎ɽ18"ͬͯԿʁɹ ɹɹ18"ͷಛ௃ ɾஈ֊త ɾϨεϙϯγϒ ɾωοτϫʔΫʹґଘ͠ͳ͍ ɾΞϓϦײ֮ ɾৗʹ࠷৽ ɾ҆શ ɾൃݟ͠΍͍͢ ɾ࠶ΤϯήʔδϝϯτՄೳ

    ɾΠϯετʔϧՄೳ ɾϦϯΫՄೳ   ϗʔϜʹ௥Ճ͢ΔࣄͰ ʮΠϯετʔϧʯঢ়ଶʹग़དྷΔ
  21. ̏ɽ18"ͷ࡞Γํ  

  22. ̏ɽ18"ͷ࡞Γํ ௒ઈɺ؆୯ʹɻ  

  23. ̏ɽ18"ͷ࡞Γํ -JHIU)PVTF (PPHMF੡ͷ18"؂ࠪʹॏ఺Λஔ͍ͨ044ͷ ɹ؂ࠪπʔϧɻ ɹɹ$ISPNF֦ு͕͋Δɻ IUUQTDISPNFHPPHMFDPNXFCTUPSFEFUBJMMJHIUIPVTF CMJQNEDPOMLQJOFGFIONKBNNGKQNQCKL IMKB  

    
  24. ̏ɽ18"ͷ࡞Γํ ̍ɽ$ISPNF֦ுʰ-JHIUIPVTFʱΛΠϯετʔϧ ̎ɽ؂ࠪΛ࣮ߦ ̏ɽରԠग़དྷ͍ͯͳ͍ՕॴͷϨϙʔτΛ֬ೝͯ͠ ɹɹ(PPHMF༷ͷڼͤͷ··ʹରԠ͢Δɻ  

  25. ̏ɽ18"ͷ࡞Γํ ͪΐͬͱৄ͘͢͠Δͱɻ  

  26. ̏ɽ18"ͷ࡞Γํ ̍ɽJOEFYIUNMΛIUUQT؀ڥʹσϓϩΠ ̎ɽNBOJGFTUKTPOΛ࡞੒ ̏ɽ4FSWJDF8PSLFSΛJOTUBMM͢Δ+4Λఆٛɻ  

  27. ̏ɽ18"ͷ࡞Γํ ̍ɽJOEFYIUNMΛIUUQT؀ڥʹσϓϩΠ ̎ɽNBOJGFTUKTPOΛ࡞੒ ̏ɽ4FSWJDF8PSLFSΛJOTUBMM͢Δ+4Λఆٛɻ   (JUIVC1BHFTΛ࢖͏

  28. ̏ɽ18"ͷ࡞Γํ ̍ɽJOEFYIUNMΛIUUQT؀ڥʹσϓϩΠ ̎ɽNBOJGFTUKTPOΛ࡞੒ ̏ɽ4FSWJDF8PSLFSΛJOTUBMM͢Δ+4Λఆٛɻ   8FC"QQ.BOJHFTU(FOFSBUPS Λ࢖͏

  29. ̏ɽ18"ͷ࡞Γํ  

  30. ̏ɽ18"ͷ࡞Γํ   ͜ͷลೖྗ͢Ε͹͓̺

  31. ̏ɽ18"ͷ࡞Γํ ̍ɽJOEFYIUNMΛIUUQT؀ڥʹσϓϩΠ ̎ɽNBOJGFTUKTPOΛ࡞੒ ̏ɽ4FSWJDF8PSLFSΛJOTUBMM͢Δ+4Λఆٛɻ   ͜͜͸(FOFSBUPSແ͍ͷͰؤுΔ

  32. ̏ɽ18"ͷ࡞Γํ   4FSWJDF8PSLFSͷΠϕϯτΛఆٛͨ͠ KTΛఆٛ͠ొ࿥

  33. ̏ɽ18"ͷ࡞Γํ   ͱΓ͋͑ͣɾɾ ̎ͭͷΠϕϯτͷDBMMCBDLΛఆٛ

  34. ̏ɽ18"ͷ࡞Γํ   طʹ$BDIF͕͋Ε͹ ͦͷ··ฦ͢

  35. ̏ɽ18"ͷ࡞Γํ   Ωϟογϡ͞Ε͍ͯͳ͚Ε͹ 63-ʹΞΫηεͯ͠औಘ

  36. ̏ɽ18"ͷ࡞Γํ 0,ɻ  

  37. ̏ɽ18"ͷ࡞Γํ   ΩϟογϡͰ͖ΕͯΕ͹ $BDIF4UPSBHFʹೖΔɻ

  38. ̏ɽ18"ͷ࡞Γํ  

  39. ̏ɽ18"ͷ࡞Γํ  

  40. ̏ɽ18"ͷ࡞Γํ  

  41. ̏ɽ18"ͷ࡞Γํ   4BGBSJͱ͸ผΞϓϦͱͯ͠։͘

  42. ̏ɽ18"ͷ࡞Γํ   ػ಺Ϟʔυ ΦϑϥΠϯ Ͱ΋ JOEFYIUNM͕ݟ͑Δ

  43. ·ͱΊ  

  44. ̐ɽ·ͱΊ ྑ͞ؾͳॴ ɹɾରԠ޻਺͕গͳ͍☺ ɹɾ-JHIUIPVTFͷࢦఠ΋۩ମతɻ ɹɾΠϯετʔϧͷखؒ΋গͳΊײ͕͋Δɻ ɹɾϓογϡ͕ඞཁɺͬͯҝ͚ͩʹ ɹɹωΠςΟϒ࢖͏ͳΒผʹ࢖ͬͯ΋ྑ͍ͷͰ͸  

  45. ̐ɽ·ͱΊ ஫ҙ͢΂͖ʁॴ ɹɾJ04ͷαϙʔτ͕࠷৽04 J04 ͔Β ɹɹͳΜͳΒαϙʔτ͞Ε͍ͯΔࣄ΋গͳ͍ɻ ɹɹJ04ɿϓογϡૹ৴ෆՄɺͱ͔ɻ  

  46. ̐ɽ·ͱΊ ݁࿦ ɹͭʔ͔ɺ͜Ε͔Βͬ͠ΐʂ  

  47.   ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ