Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
クラウドゲーミング時代のPWA
Search
oliver
February 01, 2020
Technology
0
9.9k
クラウドゲーミング時代のPWA
「PWA Night Conference 2020」のLTにて登壇した発表資料です。
https://conf2020.pwanight.jp/
oliver
February 01, 2020
Tweet
Share
More Decks by oliver
See All by oliver
Cacheable Presigned URL with Cloudflare Workers
oliver_diary
2
4.7k
テキストエディタのブラウザ実装 / tokyo_study
oliver_diary
0
220
迫り来る絶望的状況からの脱却物語 / #CEDEC2021
oliver_diary
6
14k
PWAとクラウドゲーミングの現状そしてPWAとOOParts
oliver_diary
3
9.6k
OOPartsによるPWA事例紹介
oliver_diary
2
7.7k
クラウドゲーミング最新開発事例 - #CEDEC2020
oliver_diary
6
14k
OOPartsが切り開く クラウドゲーミング ✖︎ PWA
oliver_diary
4
14k
今日から始めるFirestoreのテスト
oliver_diary
2
9.4k
やっていこう。PWA
oliver_diary
13
15k
Other Decks in Technology
See All in Technology
TiDBにおけるテーブル設計と最適化の事例
cygames
0
770
社内での継続的な機械学習勉強会の開催のコツ
yudai00
2
380
Taking Flight with Tailwind CSS
opdavies
0
4.3k
PhpStorm超絶技巧40分集中講義 #phpconkagawa
yusuke
4
720
AWS Observability 関連最新アップデート
o11yfes2023
0
100
iThome2024 Wailing Wall of Enterprise Security
notsurprised
0
280
AI JIMY - 登壇(インストール編)
hanacchi
0
150
OPENLOGI Company Profile
hr01
0
45k
テストコードを書きながらCompose Multiplatformを乗りこなす
subroh0508
0
140
B2C、B2B プロダクトマネジメントの違い(および思考の罠) / B2C, B2B PM and reduction fallacy
ykmc09
5
2.1k
NewSQL Landscape
oracle4engineer
PRO
5
3.2k
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
0
130
Featured
See All Featured
A better future with KSS
kneath
231
16k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
Statistics for Hackers
jakevdp
790
220k
Ruby is Unlike a Banana
tanoku
96
10k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
A Tale of Four Properties
chriscoyier
153
22k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
How STYLIGHT went responsive
nonsquared
92
4.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
Transcript
@OOParts_JP / #OOPartsGame 1 Ϋϥυήʔϛϯά࣌ͷPWA 2020.02.01 PWA Night Conference
@oliver_diary
ࣗݾհ
@OOParts_JP / #OOPartsGame 3 օ େथʢDaiki Minakawaʣ Twitter: @oliver_diary GitHub,
Qiita: minakawa-daiki Client-Side Developer at Black Inc.
OOPartsͱ͍͏ ΫϥυήʔϛϯάαʔϏεͷհ
@OOParts_JP / #OOPartsGame 5 • ඒগঁήʔϜʹಛԽͨ͠ɺΫϥυήʔϛϯάϓϥοτϑΥʔϜ • WindowͷนΛ͑ɺεϚϗΛ͡Ίͱ͠ϒϥβ͑͋͞ΕϓϨΠՄೳ • Webϒϥβ͔ΒΞϓϦͱͯ͠ΠϯετʔϧՄೳ
• 20202݄࣌ݱࡏɺΫϩʔζυϕʔλΛެ։த • ۙਖ਼ࣜϦϦʔε༧ఆ OOPartsͷհ
https://oo.parts/
OOPartsͱPWAͷͱΓ͘Έ
@OOParts_JP / #OOPartsGame 8 https://speakerdeck.com/oliver_diary/oopartsgaqie-rikai-ku-kuraudogemingu-pwa
Webͷ͜Ε·Ͱ
@OOParts_JP / #OOPartsGame 10 HTTPͷΈ ΫϥΠΞϯτ ᶃ ϦΫΤετ ᶄ Ϩεϙϯε
αʔόʔ
@OOParts_JP / #OOPartsGame 11 ಉظ௨৴͕ओྲྀͷαΠτ ΫϥΠΞϯτ ᶃ https://example.com ʹϦΫΤετ ᶄ
Html, CSS, JavaScript ͳͲͷϑΝΠϧΛϨεϙϯε αʔόʔ 11
@OOParts_JP / #OOPartsGame 12 ಉظ௨৴͕ओྲྀͷαΠτ ΫϥΠΞϯτ ᶅ https://example.com/next ͷϦϯΫΛΫϦοΫ ᶆ
Html, CSS, JavaScript ͳͲͷϑΝΠϧΛϨεϙϯε αʔόʔ 12 ※Ұ୴Ωϟογϡແࢹ
@OOParts_JP / #OOPartsGame 13 ϖʔδ୯ҐͰ ϦΫΤετͱϨεϙϯε͕݁͢Δ 13
@OOParts_JP / #OOPartsGame 14 Ajaxͷొ ΫϥΠΞϯτ σʔλΛඇಉظͰૹ৴ αʔόʔ ͜͜ΛΫϦοΫ FOO
/
@OOParts_JP / #OOPartsGame 15 Ajaxͷొ ΫϥΠΞϯτ αʔόʔ ͜͜ΛΫϦοΫ BAR /
Ϩεϙϯε ίϯςϯπ มΘ͍ͬͯΔ 63- มԽͳ͠
@OOParts_JP / #OOPartsGame 16 ඇಉظͰαʔόʔͱ௨৴͠ ཁૉΛߋ৽͍ͯ͘͠ 16
@OOParts_JP / #OOPartsGame 17 Ajaxͷొ ΫϥΠΞϯτ αʔόʔ OFYUҠಈ FOO /
/nextͷϦϯΫΛΫϦοΫ
@OOParts_JP / #OOPartsGame 18 Ajaxͷొ ΫϥΠΞϯτ αʔόʔ Next /next ίϯςϯπ
มΘ͍ͬͯΔ 63- มԽ Html, CSS, JavaScript ͳͲͷϑΝΠϧΛϨεϙϯε ※Ұ୴Ωϟογϡແࢹ
@OOParts_JP / #OOPartsGame 19 ϖʔδͷભҠʹؔͯ͠ ಉظతͳભҠ͕ଟ͔ͬͨ ʢpjaxͱ͔ɺTurbolinksͱ͔ଘࡏ͕ͯͨ͠ɺ͜͜Ͱলུʣ 19
SPAͷొ
@OOParts_JP / #OOPartsGame 21 SPAͷొ ΫϥΠΞϯτ αʔόʔ OFYUҠಈ FOO /
/nextͷϦϯΫΛΫϦοΫ
@OOParts_JP / #OOPartsGame 22 SPAͷొ ΫϥΠΞϯτ αʔόʔ Next /next ίϯςϯπ
มΘ͍ͬͯΔ 63-͕ มԽ ඞཁͳσʔλ͚ͩϨεϙϯε
@OOParts_JP / #OOPartsGame 23 ඇಉظతͳϖʔδભҠͷੈք ωΠςΟϒΞϓϦͷܗʹ͍ۙͮͨ 23
ͦͯ͠ɺPWA
@OOParts_JP / #OOPartsGame 25 SPAͷੈք؍ͱϚον ωΠςΟϒΞϓϦͷΑ͏ʹWebΞϓϦΛѻ͑Δ 25
@OOParts_JP / #OOPartsGame ϒϥβΛىಈ͢Δ URLΛೖྗ ػ ػ ػ OOPartsΛىಈ͢Δ ωΠςΟϒΞϓϦ
ͷΑ͏ʹىಈͰ͖Δ URLόʔ͕ଘࡏ͠ͳ͍ੈք PWAԽ
ͦͯ͠ɺΫϥυήʔϛϯάA
@OOParts_JP / #OOPartsGame ඇಉظత ήʔϜͷϩʔσΟϯά
@OOParts_JP / #OOPartsGame 29 ө૾ΛετϦʔϛϯά৴ ԋࢉॲཧ Ϣʔβ͔Βͷૢ࡞ ήʔϜϓϨΠத ඇಉظత
@OOParts_JP / #OOPartsGame 30 ήʔϜͷੈքɺඇಉظ͕ͨ͘͞Μ 30
@OOParts_JP / #OOPartsGame 31 Ϋϥυ্ͰɺήʔϜΛϓϨΠ͢Δٕज़͕͍͖ͭ ඇಉظతͳελΠϧ͕ओྲྀʹͳͬͨWebͱ PWAʹΑͬͯɺωΠςΟϒͱಉఔͷήʔϜମݧΛ Web্ͰಘΒΕΔΑ͏ʹͳ͖͍ͬͯͯΔ 31
@OOParts_JP / #OOPartsGame 32 32 ͦͯ͠ɺWebͷಛੑͰ͋Δ ৹͕ࠪଘࡏ͠ͳ͍ɺࣗ༝ͳੈք ϒϥβ͑͋͞ΕɺͲ͔͜ΒͰΞΫηεͰ͖Δ ैདྷͷWebͷԸܙΛɺͦͷ··ڗडͰ͖Δ
PWAʹΑΔมԽ
@OOParts_JP / #OOPartsGame 34 34 2.4ഒ 1ഒ ࠶๚͢ΔϢʔβʔ͕ଟ͍ʂ 8.1ਓʹ1ਓ Webܦ༝ʢඞͣ1ճܦ༝ʣ
ͷมԽ Google Analytics ΑΓ ूܭظؒ: 201911݄22 ʙ 20201݄31 ରਓ: ΫϩʔζυϕʔλϢʔβʔ 3500ਓ ΞϓϦܦ༝ AndroidͱiOSͰϑΟϧλ
@OOParts_JP / #OOPartsGame 35 35 ϢʔβʔͷมԽ PWAͷ՝ ͬͯΒ͑Δͱେධ ී௨ʹΒͳ͍ਓଟ͍
͓ΘΓʹ
@OOParts_JP / #OOPartsGame 37 37 Ϋϥυήʔϛϯά ͷεϖοΫͷนΛ͑ ͷछྨͷนΛ͑ ମݧͷนΛ͑ ࠓޙɺΑΓۙͳͷͱͳΔͰ͠ΐ͏
͋Γ͕ͱ͏͍͟͝·ͨ͠