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

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

Avatar for oliver oliver
February 01, 2020
Technology
0
12k

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

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

Avatar for oliver

oliver

February 01, 2020
Tweet

More Decks by oliver

See All by oliver
comilioとCloudflare、そして未来へと向けて
Avatar for oliver oliver_diary
6
870
Cacheable Presigned URL with Cloudflare Workers
Avatar for oliver oliver_diary
2
7.7k
テキストエディタのブラウザ実装 / tokyo_study
Avatar for oliver oliver_diary
0
320
迫り来る絶望的状況からの脱却物語 / #CEDEC2021
Avatar for oliver oliver_diary
7
16k
PWAとクラウドゲーミングの現状そしてPWAとOOParts
Avatar for oliver oliver_diary
3
12k
OOPartsによるPWA事例紹介
Avatar for oliver oliver_diary
2
9.8k
クラウドゲーミング最新開発事例 - #CEDEC2020
Avatar for oliver oliver_diary
6
17k
OOPartsが切り開く クラウドゲーミング ✖︎ PWA
Avatar for oliver oliver_diary
4
17k
今日から始めるFirestoreのテスト
Avatar for oliver oliver_diary
2
11k

Other Decks in Technology

See All in Technology
.NET 10のBlazorの期待の新機能
Avatar for tkym htkym
0
110
GraphRAG グラフDBを使ったLLM生成（自作漫画DBを用いた具体例を用いて）
Avatar for sea-turt1e seaturt1e
1
150
Observability — Extending Into Incident Response
Avatar for Narimichi Takamura nari_ex
1
510
「タコピーの原罪」から学ぶ間違った”支援” / the bad support of Takopii
Avatar for piyonakajima piyonakajima
0
150
Biz職でもDifyでできる！ 「触らないAIワークフロー」を実現する方法
Avatar for kanacan igarashikana
7
3.5k
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
Avatar for 弁護士ドットコム bengo4com
0
350
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
Avatar for tenforward tenforward
1
130
生成AI時代のPythonセキュリティとガバナンス
Avatar for abenben abenben
0
140
QA業務を変える（！？）AIを併用した不具合分析の実践
Avatar for ma2ri__ ma2ri
0
150
re:Invent 2025の見どころと便利アイテムをご紹介 / Highlights and Useful Items for re:Invent 2025
Avatar for Yuji Oshima yuj1osm
0
130
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
Avatar for Hiro hiro8ma
2
330
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
Avatar for sayn0 sayn0
1
320

Featured

See All Featured
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
185
22k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
11k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
2.9k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
27
2.1k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.2k
Visualization
Avatar for Eitan Lees eitanlees
149
16k

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