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

by oliver

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

https://oo.parts/

Slide 7

Slide 7 text

OOPartsͱPWAͷͱΓ͘Έ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Webͷ͜Ε·Ͱ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

@OOParts_JP / #OOPartsGame 11 ಉظ௨৴͕ओྲྀͷαΠτ ΫϥΠΞϯτ ᶃ https://example.com  ʹϦΫΤετ ᶄ Html, CSS, JavaScript ͳͲͷϑΝΠϧΛϨεϙϯε αʔόʔ 11

Slide 12

Slide 12 text

@OOParts_JP / #OOPartsGame 12 ಉظ௨৴͕ओྲྀͷαΠτ ΫϥΠΞϯτ ᶅ https://example.com/next  ͷϦϯΫΛΫϦοΫ ᶆ Html, CSS, JavaScript ͳͲͷϑΝΠϧΛϨεϙϯε αʔόʔ 12 ※Ұ୴Ωϟογϡ͸ແࢹ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

SPAͷొ৔

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ͦͯ͠ɺPWA

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

PWAʹΑΔมԽ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

͓ΘΓʹ

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

͋Γ͕ͱ͏͍͟͝·ͨ͠