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

OOPartsが切り開く クラウドゲーミング ✖︎ PWA

oliver
November 20, 2019

OOPartsが切り開く クラウドゲーミング ✖︎ PWA

「PWA Night vol.10 ~PWA × 技術~」にて登壇した発表資料です。
https://pwanight.connpass.com/event/151546/

oliver

November 20, 2019
Tweet

More Decks by oliver

Other Decks in Technology

Transcript

  1. @OOParts_JP / #OOPartsGame 1
    OOParts͕੾Γ։͘
    Ϋϥ΢υήʔϛϯά ✖ PWA

    View Slide

  2. ࣗݾ঺հ

    View Slide

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

    View Slide

  4. Ϋϥ΢υήʔϛϯάʹ͍ͭͯ

    View Slide

  5. @OOParts_JP / #OOPartsGame 5
    Ϣʔβʔ͔Βͷૢ࡞Λड͚औΓ
    ήʔϜʹؔ͢ΔԋࢉΛΫϥ΢υ্Ͱߦ͍

    ԋࢉ݁ՌΛө૾ͱͯ͠

    Ϣʔβʔ΁ετϦʔϛϯά഑৴͞ΕΔٕज़
    Ϋϥ΢υήʔϛϯάʹ͍ͭͯ

    View Slide

  6. @OOParts_JP / #OOPartsGame 6

    View Slide

  7. @OOParts_JP / #OOPartsGame 7

    View Slide

  8. @OOParts_JP / #OOPartsGame 8
    Ϣʔβ͔Βͷૢ࡞

    View Slide

  9. @OOParts_JP / #OOPartsGame 9
    ԋࢉॲཧ
    Ϣʔβ͔Βͷૢ࡞

    View Slide

  10. @OOParts_JP / #OOPartsGame 10
    ө૾ΛετϦʔϛϯά഑৴
    ԋࢉॲཧ
    Ϣʔβ͔Βͷૢ࡞

    View Slide

  11. ༷ʑͳΫϥ΢υήʔϛϯά

    View Slide

  12. @OOParts_JP / #OOPartsGame 12
    PlayStation Now
    • ιχʔɾίϯϐϡʔλΤϯλςΠϯϝϯτͷΫϥ΢υήʔϜαʔϏε
    • ఆֹͰPS4ɾPS3λΠτϧ͕༡ͼ์୊
    • ʮPlaystation Now for PCʯʹΑΓPCͰ΋ϓϨΠՄೳ
    • 2019೥10݄2೔ʹϦχϡʔΞϧ
    • େ෯஋Լ͛΍CERO ZͷήʔϜ͕௥Ճ

    View Slide

  13. @OOParts_JP / #OOPartsGame 13
    Google Stadia
    • GoogleͷΫϥ΢υήʔϜαʔϏε
    • 2019೥11݄19೔ʹւ֎14ΧࠃͰαʔϏε։࢝
    • αʔϏε։࢝࣌͸22࡞඼ϓϨΠͰ͖Δ
    • σεΫτοϓ൛Chromeϒϥ΢β΍StadiaΞϓϦͰಈ࡞͢Δ
    • 4Kղ૾౓ʹ͓͍ͯ60fpsͷHDRͷήʔϜ഑৴ʹରԠ༧ఆ

    View Slide

  14. @OOParts_JP / #OOPartsGame 14
    Google Stadia
    https://japanese.engadget.com/2019/11/11/google-stadia/

    View Slide

  15. @OOParts_JP / #OOPartsGame 15
    Steam Cloud Gaming

    View Slide

  16. OOPartsͷ঺հ

    View Slide

  17. https://oo.parts/
    ۙ೔ϕʔλ൛ެ։༧ఆ

    View Slide

  18. OOPartsͷಛ௃

    View Slide

  19. @OOParts_JP / #OOPartsGame 19
    OOPartsͷಛ௃
    • ੲͷWindowsͰ͔͠ϓϨΠͰ͖ͳ͔ͬͨΞυϕϯνϟʔήʔϜ͕ϓϨΠՄೳ

    View Slide

  20. @OOParts_JP / #OOPartsGame 20
    OOPartsͷಛ௃
    • ੲͷWindowsͰ͔͠ϓϨΠͰ͖ͳ͔ͬͨΞυϕϯνϟʔήʔϜ͕ϓϨΠՄೳ
    • εϚϗΛ͸͡Ίͱ͢Δɺϒϥ΢β͑͋͞Ε͹ϓϨΠՄೳ

    View Slide

  21. @OOParts_JP / #OOPartsGame 21
    OOPartsͷಛ௃
    • ੲͷWindowsͰ͔͠ϓϨΠͰ͖ͳ͔ͬͨΞυϕϯνϟʔήʔϜ͕ϓϨΠՄೳ
    • εϚϗΛ͸͡Ίͱ͢Δɺϒϥ΢β͑͋͞Ε͹ϓϨΠՄೳ
    • ͲΜͳεϖοΫͷ୺຤Ͱ΋ϓϨΠʹӨڹͮ͠Β͍

    View Slide

  22. @OOParts_JP / #OOPartsGame 22
    OOPartsͷಛ௃
    • ੲͷWindowsͰ͔͠ϓϨΠͰ͖ͳ͔ͬͨΞυϕϯνϟʔήʔϜ͕ϓϨΠՄೳ
    • εϚϗΛ͸͡Ίͱ͢Δɺϒϥ΢β͑͋͞Ε͹ϓϨΠՄೳ
    • ͲΜͳεϖοΫͷ୺຤Ͱ΋ϓϨΠʹӨڹͮ͠Β͍
    • ୺຤ͷσΟεΫ༰ྔΛؾʹ͠ͳͯ͘ྑ͍

    View Slide

  23. @OOParts_JP / #OOPartsGame 23
    • ੲͷWindowsͰ͔͠ϓϨΠͰ͖ͳ͔ͬͨΞυϕϯνϟʔήʔϜ͕ϓϨΠՄೳ
    • εϚϗΛ͸͡Ίͱ͢Δɺϒϥ΢β͑͋͞Ε͹ϓϨΠՄೳ
    • ͲΜͳεϖοΫͷ୺຤Ͱ΋ϓϨΠʹӨڹͮ͠Β͍
    • ୺຤ͷσΟεΫ༰ྔΛؾʹ͠ͳͯ͘ྑ͍
    • Webϒϥ΢β͔ΒΞϓϦͱͯ͠ΠϯετʔϧՄೳ
    OOPartsͷಛ௃

    View Slide

  24. @OOParts_JP / #OOPartsGame 24
    • ੲͷWindowsͰ͔͠ϓϨΠͰ͖ͳ͔ͬͨΞυϕϯνϟʔήʔϜ͕ϓϨΠՄೳ
    • εϚϗΛ͸͡Ίͱ͢Δɺϒϥ΢β͑͋͞Ε͹ϓϨΠՄೳ
    • ͲΜͳεϖοΫͷ୺຤Ͱ΋ϓϨΠʹӨڹͮ͠Β͍
    • ୺຤ͷσΟεΫ༰ྔΛؾʹ͠ͳͯ͘ྑ͍
    • Webϒϥ΢β͔ΒΞϓϦͱͯ͠ΠϯετʔϧՄೳɹ→ɹPWA
    OOPartsͷಛ௃

    View Slide

  25. OOPartsͷߏ੒

    View Slide

  26. @OOParts_JP / #OOPartsGame 26
    όοΫΤϯυ
    ΫϥΠΞϯτ
    ήʔϛϯάαʔό

    View Slide

  27. @OOParts_JP / #OOPartsGame 27
    ᶃήʔϜىಈཁٻ
    όοΫΤϯυ
    ΫϥΠΞϯτ
    ήʔϛϯάαʔό

    View Slide

  28. @OOParts_JP / #OOPartsGame 28
    ᶄ଴ػதͷήʔϛϯάαʔόʹ
    ΫϥΠΞϯτΛׂΓ౰ͯΔ
    όοΫΤϯυ
    ΫϥΠΞϯτ
    ήʔϛϯάαʔό

    View Slide

  29. @OOParts_JP / #OOPartsGame 29
    ᶅήʔϜΛىಈ͢Δ
    όοΫΤϯυ
    ΫϥΠΞϯτ
    ήʔϛϯάαʔό

    View Slide

  30. @OOParts_JP / #OOPartsGame 30
    ᶆىಈͨ͜͠ͱΛ௨஌͢Δ
    όοΫΤϯυ
    ΫϥΠΞϯτ
    ήʔϛϯάαʔό

    View Slide

  31. @OOParts_JP / #OOPartsGame 31
    ᶇө૾഑৴ɾड৴͢ΔͨΊͷ
    τʔΫϯͷ഑෍
    όοΫΤϯυ
    ΫϥΠΞϯτ
    ήʔϛϯάαʔό

    View Slide

  32. @OOParts_JP / #OOPartsGame 32
    ᶈήʔϜϓϨΠ։࢝ʂ
    όοΫΤϯυ
    ΫϥΠΞϯτ
    ήʔϛϯάαʔό

    View Slide

  33. OOPartsͰͷPWA

    View Slide

  34. @OOParts_JP / #OOPartsGame 34
    OOPartsͰͷPWA
    • OOPartsΛεϚϗͷWebϒϥ΢βͰΞΫηε͢Δ৔߹ͷ࢒೦ͳͱ͜Ζ
    • ΞυϨεόʔ͕ը໘Λѹഭ͢Δ

    View Slide

  35. @OOParts_JP / #OOPartsGame 35
    ͜Ε

    View Slide

  36. @OOParts_JP / #OOPartsGame 36
    ͜Ε
    ͕͜͜

    ΋͍ͬͨͳ͍
    ͕͜͜

    ΋͍ͬͨͳ͍

    View Slide

  37. @OOParts_JP / #OOPartsGame 37
    PWAͩͱ

    View Slide

  38. @OOParts_JP / #OOPartsGame 38
    OOPartsͰͷPWA
    • OOPartsΛWebϒϥ΢βͰΞΫηε͢Δ৔߹ͷ࢒೦ͳͱ͜Ζ
    • ΞυϨεόʔ͕ը໘Λѹഭ͢Δ
    • ϓϨΠ͢Δ·Ͱͷಋઢ͕௕͍

    View Slide

  39. @OOParts_JP / #OOPartsGame 39
    ϒϥ΢βΛىಈ͢Δ
    URLΛೖྗ
    Webϒϥ΢βܦ༝Ͱͷىಈͷ৔߹
    ଴ػ ଴ػ

    View Slide

  40. @OOParts_JP / #OOPartsGame 40

    View Slide

  41. @OOParts_JP / #OOPartsGame 41
    OOPartsΛىಈ͢Δ
    PWAܦ༝Ͱͷىಈͷ৔߹
    ଴ػ

    View Slide

  42. @OOParts_JP / #OOPartsGame 42

    View Slide

  43. @OOParts_JP / #OOPartsGame 43
    OOPartsͰͷPWA
    • OOPartsΛWebϒϥ΢βͰΞΫηε͢Δ৔߹ͷ࢒೦ͳͱ͜Ζ
    • ΞυϨεόʔ͕ը໘Λѹഭ͢Δ
    • ϓϨΠ͢Δ·Ͱͷಋઢ͕௕͍
    • ϖʔδͷॳճಡΈࠐΈ࣌ʹWebײ͕ग़ͯ͠·͏

    View Slide

  44. @OOParts_JP / #OOPartsGame 44
    ॳظಡΈࠐΈͷࠩ
    PWA
    ϒϥ΢β

    View Slide

  45. @OOParts_JP / #OOPartsGame 45
    OOPartsͰͷPWA
    • OOParts͕PWAͱͯ͠औΓ૊ΜͰ͍Δ͜ͱ
    • ৹ࠪෆཁͰΞϓϦͱͯ͠Πϯετʔϧ & ܧଓϦϦʔε

    View Slide

  46. @OOParts_JP / #OOPartsGame 46
    OOPartsͰͷPWA
    • ৹ࠪෆཁͰΞϓϦͱͯ͠Πϯετʔϧ & ܧଓϦϦʔε
    • Apple App Store ΍ Google Play Store ͷӨڹΛड͚ͳ͍
    • GitHubͰλάΛଧͭ͜ͱͰϦϦʔε͞ΕΔ

    View Slide

  47. @OOParts_JP / #OOPartsGame 47
    OOPartsͰͷPWA
    • OOParts͕PWAͱͯ͠औΓ૊ΜͰ͍Δ͜ͱ
    • ৹ࠪෆཁͰΞϓϦͱͯ͠Πϯετʔϧ & ܧଓϦϦʔε
    • ϒϥ΢βΞΫηεͱΠϯετʔϧ࣌ͷΤϯυϙΠϯτมߋ

    View Slide

  48. @OOParts_JP / #OOPartsGame 48
    OOPartsͰͷPWA
    • ϒϥ΢βΞΫηεͱΠϯετʔϧ࣌ͷΤϯτϦϙΠϯτมߋ
    • ϒϥ΢β্Ͱ͸LP͕ΤϯτϦϙΠϯτʹͳ͍ͬͯΔ
    • LPʹ͸ϩάΠϯϘλϯΛઃஔ͍ͯ͠ͳ͍ʢϕʔλ൛ͷͨΊʣ
    • PWAͱͯ͠Πϯετʔϧ͢ΔͱϩάΠϯը໘͕ΤϯτϦϙΠϯτʹͳΔ
    • ϩάΠϯ͍ͯͨ͠ΒήʔϜҰཡʹϦμΠϨΫτ͞ΕΔ

    View Slide

  49. @OOParts_JP / #OOPartsGame 49
    OOPartsͰͷPWA
    • OOParts͕PWAͱͯ͠औΓ૊ΜͰ͍Δ͜ͱ
    • ৹ࠪෆཁͰΞϓϦͱͯ͠Πϯετʔϧ & ܧଓϦϦʔε
    • ϒϥ΢βΞΫηεͱΠϯετʔϧ࣌ͷΤϯυϙΠϯτมߋ
    • ωΠςΟϒΞϓϦʹدͬͨૢ࡞ମݧͷ௥ٻ

    View Slide

  50. @OOParts_JP / #OOPartsGame 50
    OOPartsͰͷPWA
    • ωΠςΟϒΞϓϦʹدͬͨૢ࡞ମݧͷ௥ٻ
    ήʔϜىಈը໘ͳͲͷ

    ϩʔσΟϯάͷମݧ

    View Slide

  51. @OOParts_JP / #OOPartsGame 51
    OOPartsͰͷPWA
    • ωΠςΟϒΞϓϦʹدͬͨૢ࡞ମݧͷ௥ٻ
    τϥοΫύουϞʔυͱ

    λοϓϞʔυ
    ͜͜Ͱૢ࡞
    ήʔϜ಺Λλοϓ

    View Slide

  52. @OOParts_JP / #OOPartsGame 52
    OOPartsͰͷPWA
    • ωΠςΟϒΞϓϦʹدͬͨૢ࡞ମݧͷ௥ٻ
    εϚϗͱPCͰͷ

    ૢ࡞ํ๏ͷҧ͍
    PCͷΧʔιϧ͕

    ͦͷ··ήʔϜ্ͷΧʔιϧʹ
    εϚϗ্ʹٖࣅతͳ

    ΧʔιϧΛઃஔ

    View Slide

  53. @OOParts_JP / #OOPartsGame 53
    OOParts͸͜ΕΒͷഎܠ͔Β

    View Slide

  54. @OOParts_JP / #OOPartsGame 54
    Ϋϥ΢υήʔϛϯάͱ
    ΞυϕϯνϟʔήʔϜͷಛੑ্

    PWAʹ੒Β͟ΔΛಘͳ͔ͬͨ

    View Slide

  55. @OOParts_JP / #OOPartsGame 55
    ͦͯ͠

    View Slide

  56. @OOParts_JP / #OOPartsGame 56
    PWAʹΑΓ
    ࠷େݶͷύϑΥʔϚϯε͕ൃشͰ͖Δ

    View Slide

  57. OOPartsͷࠓޙ

    View Slide

  58. @OOParts_JP / #OOPartsGame 58
    OOPartsͷࠓޙ
    • ࠓౙʹਖ਼ࣜϦϦʔεΛ༧ఆͯ͠·͢
    • ՝ۚܗଶ͸αϒεΫϦϓγϣϯͰ͢
    • ήʔϜλΠτϧΛͨ͘͞Μ༻ҙɺ௥Ճ͍͖ͯ͠·͢
    • Ϋϥ΢υήʔϛϯάΛҾͬு͍͖ͬͯ·͢
    • PWAΛϝΠϯʹఴ͑ͯɺΑΓωΠςΟϒʹ͍ۙදݱΛ͍͖ͯ͠·͢

    View Slide

  59. @OOParts_JP / #OOPartsGame 59
    ؔ࿈ϦϯΫ
    • https://oo.parts/
    • ʮOOPartsʯެࣜϖʔδ
    • https://note.mu/byblack/n/n86721921f04a
    • ʮOOPartsʯΞϧϑΝ൛ϓϨεϦϦʔε
    • https://nlab.itmedia.co.jp/nl/articles/1908/30/news055.html
    • ʮOOPartsʯΞϧϑΝ൛ʮͶͱΒ΅ʯܝࡌهࣄ

    View Slide

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

    View Slide