Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

oliver
February 01, 2020

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

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

oliver

February 01, 2020
Tweet

More Decks by oliver

Other Decks in Technology

Transcript

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

    @oliver_diary

    View full-size slide

  2. @OOParts_JP / #OOPartsGame 3
    օ઒ େथʢDaiki Minakawaʣ
    Twitter: @oliver_diary
    GitHub, Qiita: minakawa-daiki
    Client-Side Developer at Black Inc.

    View full-size slide

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

    View full-size slide

  4. @OOParts_JP / #OOPartsGame 5
    • ඒগঁήʔϜʹಛԽͨ͠ɺΫϥ΢υήʔϛϯάϓϥοτϑΥʔϜ
    • WindowͷนΛ௒͑ɺεϚϗΛ͸͡Ίͱ͠ϒϥ΢β͑͋͞Ε͹ϓϨΠՄೳ
    • Webϒϥ΢β͔ΒΞϓϦͱͯ͠ΠϯετʔϧՄೳ
    • 2020೥2݄࣌఺ݱࡏɺΫϩʔζυϕʔλΛެ։த
    • ۙ೔ਖ਼ࣜϦϦʔε༧ఆ
    OOPartsͷ঺հ

    View full-size slide

  5. https://oo.parts/

    View full-size slide

  6. OOPartsͱPWAͷͱΓ͘Έ

    View full-size slide

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

    View full-size slide

  8. Webͷ͜Ε·Ͱ

    View full-size slide

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

    View full-size slide

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

    ʹϦΫΤετ
    ᶄ Html, CSS, JavaScript
    ͳͲͷϑΝΠϧΛϨεϙϯε
    αʔόʔ
    11

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. @OOParts_JP / #OOPartsGame 15
    Ajaxͷొ৔
    ΫϥΠΞϯτ αʔόʔ
    ͜͜ΛΫϦοΫ
    BAR
    /
    Ϩεϙϯε
    ίϯςϯπ͸
    มΘ͍ͬͯΔ
    63-͸
    มԽͳ͠

    View full-size slide

  15. @OOParts_JP / #OOPartsGame 16
    ඇಉظͰαʔόʔͱ௨৴͠

    ཁૉΛߋ৽͍ͯ͘͠
    16

    View full-size slide

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

    View full-size slide

  17. @OOParts_JP / #OOPartsGame 18
    Ajaxͷొ৔
    ΫϥΠΞϯτ αʔόʔ
    Next
    /next
    ίϯςϯπ΋
    มΘ͍ͬͯΔ
    63-͸
    มԽ
    Html, CSS, JavaScript
    ͳͲͷϑΝΠϧΛϨεϙϯε
    ※Ұ୴Ωϟογϡ͸ແࢹ

    View full-size slide

  18. @OOParts_JP / #OOPartsGame 19
    ϖʔδͷભҠʹؔͯ͠͸

    ಉظతͳભҠ͕ଟ͔ͬͨ
    ʢpjaxͱ͔ɺTurbolinksͱ͔͸ଘࡏ͕ͯͨ͠ɺ͜͜Ͱ͸লུʣ
    19

    View full-size slide

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

    View full-size slide

  20. @OOParts_JP / #OOPartsGame 22
    SPAͷొ৔
    ΫϥΠΞϯτ αʔόʔ
    Next
    /next
    ίϯςϯπ΋
    มΘ͍ͬͯΔ
    63-͕
    มԽ
    ඞཁͳσʔλ͚ͩϨεϙϯε

    View full-size slide

  21. @OOParts_JP / #OOPartsGame 23
    ඇಉظతͳϖʔδભҠͷੈք

    ωΠςΟϒΞϓϦͷܗʹ͍ۙͮͨ
    23

    View full-size slide

  22. @OOParts_JP / #OOPartsGame 25
    SPAͷੈք؍ͱϚον

    ωΠςΟϒΞϓϦͷΑ͏ʹWebΞϓϦΛѻ͑Δ
    25

    View full-size slide

  23. @OOParts_JP / #OOPartsGame
    ϒϥ΢βΛىಈ͢Δ
    URLΛೖྗ
    ଴ػ
    ଴ػ
    ଴ػ
    OOPartsΛىಈ͢Δ
    ωΠςΟϒΞϓϦ
    ͷΑ͏ʹىಈͰ͖Δ
    URLόʔ͕ଘࡏ͠ͳ͍ੈք
    PWAԽ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. @OOParts_JP / #OOPartsGame 31
    Ϋϥ΢υ্ͰɺήʔϜΛϓϨΠ͢Δٕज़͕௥͍͖ͭ
    ඇಉظతͳελΠϧ͕ओྲྀʹͳͬͨWebͱ

    PWAʹΑͬͯɺωΠςΟϒͱಉఔ౓ͷήʔϜମݧΛ
    Web্Ͱ΋ಘΒΕΔΑ͏ʹͳ͖͍ͬͯͯΔ
    31

    View full-size slide

  29. @OOParts_JP / #OOPartsGame 32
    32
    ͦͯ͠ɺWebͷಛੑͰ΋͋Δ

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

    View full-size slide

  30. PWAʹΑΔมԽ

    View full-size slide

  31. @OOParts_JP / #OOPartsGame 34
    34
    ໿2.4ഒ
    ໿1ഒ
    ࠶๚໰͢ΔϢʔβʔ཰͕ଟ͍ʂ
    ໿8.1ਓʹ1ਓ
    Webܦ༝ʢඞͣ1ճ͸ܦ༝ʣ
    ਺஋ͷมԽ
    Google Analytics ΑΓ
    ूܭظؒ: 2019೥11݄22೔ ʙ 2020೥1݄31೔
    ର৅ਓ਺: ΫϩʔζυϕʔλϢʔβʔ ໿3500ਓ
    ΞϓϦܦ༝
    AndroidͱiOSͰϑΟϧλ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide