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

Df739988f32c42e8c318ef844d6e902b?s=47 oliver
February 01, 2020

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

「PWA Night Conference 2020」のLTにて登壇した発表資料です。
https://conf2020.pwanight.jp/

Df739988f32c42e8c318ef844d6e902b?s=128

oliver

February 01, 2020
Tweet

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠