サイゼリヤガチャで PWA開発に入門した話

PWA Night Conference 2021 LT Session

サイゼリヤガチャで PWA開発に入門した話
https://saizeriya-1000yen.marusho.io/

marusho
https://twitter.com/marusho_summers

Transcript

1. αΠθϦϠΨνϟͰ
   
   
   PWA։ൃʹೖ໳ͨ͠࿩
   PWA Night Conference 2021 LT Session
   @marusho_summers
   

   View Slide

2. ࣗݾ঺հ
   • marusho 🦊 (@marusho_summers)
   
   
   • ௨৴ձࣾ → ෆಈ࢈ܥελʔτΞοϓ → ϑϦʔ&Webษڧத
   
   
   • Ұൠٕज़৬ → σʔλΤϯδχΞ → WebΤϯδχΞ(ʹͳΓ͍ͨ)
   
   
   • Python, AWS
   
   
   • झຯ: ݸਓ։ൃɺ⛰ొࢁɺα΢φ🧖
   

   View Slide

3. αΠθϦϠΨνϟͬͯԿʁ
   

   View Slide

4. αΠθϦϠ1000ԁΨνϟ
   1000ԁҎ಺Ͱ஫จͰ͖Δ
   
   
   αΠθϦϠϝχϡʔΛϥϯμϜදࣔ
   Ҏ্ɻ
   

   View Slide

5. 2019/05/09
   

   View Slide

6. ಥવ όζΔ
   ΊͬͪΌϏϏΔɻ
   ↓ TwitterτϨϯυ 1Ґ
   ↓ωοτχϡʔεʹͳΔ
   ↓ ৭Μͳ1000ԁΨνϟ͏·ΕΔ
   ↓ ಈతܭը๏Ͱ࠷ߴΧϩϦʔΛܭࢉ͢Δਓʑ
   ↓ ࣾ௕ʹೝ஌͞Εͯͨ
   

   View Slide

7. خ͍͠ 🤗
   

   View Slide

8. ͱ͋Δίϝϯτ
   

   View Slide

9. 🤔 PWA?
   

   View Slide

10. ͚ͨͯ͢ʂΠϯλʔωοτʂ
    

    View Slide

11. ౰࣌ͷPWAͷೝࣝ
    • WebαΠτΛωΠςΟϒΞϓϦͬΆ͘Ͱ͖Δ
    
    
    • ϒϥ΢βͷΞυϨεόʔফͤΔΒ͍͠
    ͔͚ͬ͐ʂ
    

    View Slide

12. 😊 PWA΍Δͧ
    

    View Slide

13. ߏ੒Λมߋ
    ΦϑϥΠϯಈ࡞Λ࣮ݱ͢ΔͨΊ
    
    
    ϑϩϯτΤϯυͰ׬݁
    
    
    

    View Slide

14. PWAԽ͸3εςοϓͰ͓खܰʂ
    
    
    1. HTTPSରԠ
    
    
    2. ϚχϑΣετϑΝΠϧͷ࡞੒
    
    
    3. Service Workerͷ࡞੒
    😅 Ұ൪ۤ࿑ͨ͠ͷ͸ϑϩϯτͷ஌ࣝෆ଍
    (ϑϨʔϜϫʔΫΛ࢖͑͹΋ͬͱ؆୯)
    

    View Slide

15. ·ͱΊ
    • PWAͰ͓खܰΞϓϦԽ͕Ͱ͖ͨʂ
    
    
    • PWA͖͔͚ͬͰϑϩϯτΤϯυֶशΛ࢝ΊΒΕͨ
    
    
    • ݸਓ։ൃͩͱɺ(޷͖উखʹ)खΛಈ͔ͯ͠ཧղͰ͖Δ
    

    View Slide

16. ·ͱΊ
    • ֶशͷաఔͱͯ͠ɺϞϊΛ࢒͢͜ͱ
    
    
    • ͱΓ͋͑ͣɺ࡞ͬͯΈΔʂ
    
    
    • ͱΓ͋͑ͣɺެ։ͯ͠ΈΔʂ
    
    
    • ͢Δͱɺੈք͕มΘΔ͔΋ʂʂ
    

    View Slide

17. 🔥 ݸਓ։ൃ͸͍͍ͧ
    

    View Slide

18. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ૉఢͳPWA&ݸਓ։ൃϥΠϑΛ🎉
    

    View Slide