クラウドゲーミング時代のPWA

Transcript

1. @OOParts_JP / #OOPartsGame 1 Ϋϥ΢υήʔϛϯά࣌୅ͷPWA 2020.02.01 PWA Night Conference 


   @oliver_diary

2. ࣗݾ঺հ

3. @OOParts_JP / #OOPartsGame 3 օ઒ େथʢDaiki Minakawaʣ Twitter: @oliver_diary GitHub,

   Qiita: minakawa-daiki Client-Side Developer at Black Inc.

4. OOPartsͱ͍͏ Ϋϥ΢υήʔϛϯάαʔϏεͷ঺հ

5. @OOParts_JP / #OOPartsGame 5 • ඒগঁήʔϜʹಛԽͨ͠ɺΫϥ΢υήʔϛϯάϓϥοτϑΥʔϜ • WindowͷนΛ௒͑ɺεϚϗΛ͸͡Ίͱ͠ϒϥ΢β͑͋͞Ε͹ϓϨΠՄೳ • Webϒϥ΢β͔ΒΞϓϦͱͯ͠ΠϯετʔϧՄೳ

   • 2020೥2݄࣌఺ݱࡏɺΫϩʔζυϕʔλΛެ։த • ۙ೔ਖ਼ࣜϦϦʔε༧ఆ OOPartsͷ঺հ

6. https://oo.parts/

7. OOPartsͱPWAͷͱΓ͘Έ

8. @OOParts_JP / #OOPartsGame 8 https://speakerdeck.com/oliver_diary/oopartsgaqie-rikai-ku-kuraudogemingu-pwa

9. Webͷ͜Ε·Ͱ

10. @OOParts_JP / #OOPartsGame 10 HTTPͷ࢓૊Έ ΫϥΠΞϯτ ᶃ ϦΫΤετ ᶄ Ϩεϙϯε

    αʔόʔ

11. @OOParts_JP / #OOPartsGame 11 ಉظ௨৴͕ओྲྀͷαΠτ ΫϥΠΞϯτ ᶃ https://example.com
 ʹϦΫΤετ ᶄ

    Html, CSS, JavaScript ͳͲͷϑΝΠϧΛϨεϙϯε αʔόʔ 11

12. @OOParts_JP / #OOPartsGame 12 ಉظ௨৴͕ओྲྀͷαΠτ ΫϥΠΞϯτ ᶅ https://example.com/next
 ͷϦϯΫΛΫϦοΫ ᶆ

    Html, CSS, JavaScript ͳͲͷϑΝΠϧΛϨεϙϯε αʔόʔ 12 ※Ұ୴Ωϟογϡ͸ແࢹ

13. @OOParts_JP / #OOPartsGame 13 ϖʔδ୯ҐͰ ϦΫΤετͱϨεϙϯε͕׬݁͢Δ 13

14. @OOParts_JP / #OOPartsGame 14 Ajaxͷొ৔ ΫϥΠΞϯτ σʔλΛඇಉظͰૹ৴ αʔόʔ ͜͜ΛΫϦοΫ FOO

    /

15. @OOParts_JP / #OOPartsGame 15 Ajaxͷొ৔ ΫϥΠΞϯτ αʔόʔ ͜͜ΛΫϦοΫ BAR /

    Ϩεϙϯε ίϯςϯπ͸
    มΘ͍ͬͯΔ 63-͸
    มԽͳ͠

16. @OOParts_JP / #OOPartsGame 16 ඇಉظͰαʔόʔͱ௨৴͠
 ཁૉΛߋ৽͍ͯ͘͠ 16

17. @OOParts_JP / #OOPartsGame 17 Ajaxͷొ৔ ΫϥΠΞϯτ αʔόʔ OFYU
    ΁Ҡಈ FOO /

    /next΁ͷϦϯΫΛΫϦοΫ

18. @OOParts_JP / #OOPartsGame 18 Ajaxͷొ৔ ΫϥΠΞϯτ αʔόʔ Next /next ίϯςϯπ΋
    

    มΘ͍ͬͯΔ 63-͸
    มԽ Html, CSS, JavaScript ͳͲͷϑΝΠϧΛϨεϙϯε ※Ұ୴Ωϟογϡ͸ແࢹ

19. @OOParts_JP / #OOPartsGame 19 ϖʔδͷભҠʹؔͯ͠͸
 ಉظతͳભҠ͕ଟ͔ͬͨ ʢpjaxͱ͔ɺTurbolinksͱ͔͸ଘࡏ͕ͯͨ͠ɺ͜͜Ͱ͸লུʣ 19

20. SPAͷొ৔

21. @OOParts_JP / #OOPartsGame 21 SPAͷొ৔ ΫϥΠΞϯτ αʔόʔ OFYU
    ΁Ҡಈ FOO /

    /next΁ͷϦϯΫΛΫϦοΫ

22. @OOParts_JP / #OOPartsGame 22 SPAͷొ৔ ΫϥΠΞϯτ αʔόʔ Next /next ίϯςϯπ΋
    

    มΘ͍ͬͯΔ 63-͕
    มԽ ඞཁͳσʔλ͚ͩϨεϙϯε

23. @OOParts_JP / #OOPartsGame 23 ඇಉظతͳϖʔδભҠͷੈք
 ωΠςΟϒΞϓϦͷܗʹ͍ۙͮͨ 23

24. ͦͯ͠ɺPWA

25. @OOParts_JP / #OOPartsGame 25 SPAͷੈք؍ͱϚον
 ωΠςΟϒΞϓϦͷΑ͏ʹWebΞϓϦΛѻ͑Δ 25

26. @OOParts_JP / #OOPartsGame ϒϥ΢βΛىಈ͢Δ URLΛೖྗ ଴ػ ଴ػ ଴ػ OOPartsΛىಈ͢Δ ωΠςΟϒΞϓϦ

    ͷΑ͏ʹىಈͰ͖Δ URLόʔ͕ଘࡏ͠ͳ͍ੈք PWAԽ

27. ͦͯ͠ɺΫϥ΢υήʔϛϯάA

28. @OOParts_JP / #OOPartsGame ඇಉظత ήʔϜͷϩʔσΟϯά

29. @OOParts_JP / #OOPartsGame 29 ө૾ΛετϦʔϛϯά഑৴ ԋࢉॲཧ Ϣʔβ͔Βͷૢ࡞ ήʔϜϓϨΠத ඇಉظత

30. @OOParts_JP / #OOPartsGame 30 ήʔϜͷੈք͸ɺඇಉظ͕ͨ͘͞Μ 30

31. @OOParts_JP / #OOPartsGame 31 Ϋϥ΢υ্ͰɺήʔϜΛϓϨΠ͢Δٕज़͕௥͍͖ͭ ඇಉظతͳελΠϧ͕ओྲྀʹͳͬͨWebͱ
 PWAʹΑͬͯɺωΠςΟϒͱಉఔ౓ͷήʔϜମݧΛ Web্Ͱ΋ಘΒΕΔΑ͏ʹͳ͖͍ͬͯͯΔ 31

32. @OOParts_JP / #OOPartsGame 32 32 ͦͯ͠ɺWebͷಛੑͰ΋͋Δ
 ৹͕ࠪଘࡏ͠ͳ͍ɺࣗ༝ͳੈք ϒϥ΢β͑͋͞Ε͹ɺͲ͔͜ΒͰ΋ΞΫηεͰ͖Δ ैདྷͷWebͷԸܙΛɺͦͷ··ڗडͰ͖Δ

33. PWAʹΑΔมԽ

34. @OOParts_JP / #OOPartsGame 34 34 ໿2.4ഒ ໿1ഒ ࠶๚໰͢ΔϢʔβʔ཰͕ଟ͍ʂ ໿8.1ਓʹ1ਓ Webܦ༝ʢඞͣ1ճ͸ܦ༝ʣ

    ਺஋ͷมԽ Google Analytics ΑΓ ूܭظؒ: 2019೥11݄22೔ ʙ 2020೥1݄31೔ ର৅ਓ਺: ΫϩʔζυϕʔλϢʔβʔ ໿3500ਓ ΞϓϦܦ༝ AndroidͱiOSͰϑΟϧλ

35. @OOParts_JP / #OOPartsGame 35 35 ϢʔβʔͷมԽ PWAͷ՝୊ ஌ͬͯ΋Β͑Δͱେ޷ධ ී௨ʹ஌Βͳ͍ਓ΋ଟ͍

36. ͓ΘΓʹ

37. @OOParts_JP / #OOPartsGame 37 37 Ϋϥ΢υήʔϛϯά͸ ୺຤ͷεϖοΫͷนΛ௒͑ ୺຤ͷछྨͷนΛ௒͑ ମݧͷนΛ΋௒͑ ࠓޙɺΑΓ਎ۙͳ΋ͷͱͳΔͰ͠ΐ͏

38. ͋Γ͕ͱ͏͍͟͝·ͨ͠