Tweet
Tweet

Slide 1

Slide 1 text

ϞόΠϧωΠςΟϒΞϓϦʹ มΘΔଘࡏʂʁॳΊͯͷ18" גࣜձࣾιχοΫΨʔσϯ໺ຊ࢘

Slide 2

Slide 2 text

ײ૝࣭໰͸ͪ͜Β http://bit.ly/2J131L2

Slide 3

Slide 3 text

ࣗݾ঺հ • ໺ຊ ࢘ʢͷ΋ͱ ͔ͭ͞ʣ • גࣜձࣾιχοΫΨʔσϯ • ฌݿݝ໌ੴࢢग़਎ʢ໌ੴͰϦϞʔτۈ຿ʣ • ೥ؒ1/3ΛՈͰա͝͞ͳ͍ • 24ࡀ

Slide 4

Slide 4 text

ࠓ೔࿩͍ͨ͜͠ͱ • PWA͍͍Ͷʂ • ࡞Δͷ΋ͦΜͳʹ೉͘͠ͳ͍

Slide 5

Slide 5 text

ॳ৺ऀϨϕϧ

Slide 6

Slide 6 text

ϓϩάϥϛϯάܦݧ ̍೥ͪΐͬͱ

Slide 7

Slide 7 text

HTMLͬͯԿʁ Rubyͬͯ͋ͷๅੴͷʁ

Slide 8

Slide 8 text

̍೥ֶؒश

Slide 9

Slide 9 text

WebΞϓϦʢͬΆ͍΋ͷʣ Λ࡞ΕΔΑ͏ʹ

Slide 10

Slide 10 text

ࣅͨΑ͏ͳϊϦͰ ϞόΠϧΞϓϦ΋͍͚Δ΍Ζ ʢ҆௚ʣ

Slide 11

Slide 11 text

ίʔυผͳͷ…ʂʁ ( ƅЧƅʀ))ŜƄŦŜƄŦ

Slide 12

Slide 12 text

…͠͹Β͘໎૸ɻ

Slide 13

Slide 13 text

༑ୡʮ̏ͭͱ΋Ұؾʹ࡞ΕΔ ํ๏͕͋ΔͰʯ(ʉ㲆ʉ)v

Slide 14

Slide 14 text

PWAͳΒ…ʁ

Slide 15

Slide 15 text

PWAͱ͸ʁ

Slide 16

Slide 16 text

Progressive Web App ʢਐาతͳɺֵ৽తͳʣ

Slide 17

Slide 17 text

ωΠςΟϒΞϓϦͬΆ͍ ΢ΣϒΞϓϦ

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

৽͍ٕ͠ज़͕ͨ͘͞Μ ͱ͍͏Θ͚Ͱ͸ͳ͍

Slide 20

Slide 20 text

ΞϓϦͰͰ͖Δ͜ͱΛ WebͰ΋࣮ݱՄೳʹ

Slide 21

Slide 21 text

Կ͸ͱ΋͋Ε৮ͬͯΈΑ͏

Slide 22

Slide 22 text

Twitter Lite 1. εϚϗͷϒϥ΢βͰTwitterΛ։͘ 2. ʮϗʔϜը໘ʹ௥Ճʯ 3. ϗʔϜը໘͔ΒΞΫηεˠεϓϥογϡը໘

Slide 23

Slide 23 text

Twitter Lite • Push௨஌ • ΦϑϥΠϯͰͷ࢖༻ • ωΠςΟϒΞϓϦͷػೳͷ΄ͱΜͲΛΧόʔ • ʮϗʔϜʹ௥Ճʯόφʔ

Slide 24

Slide 24 text

ྑͦ͞͏

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

݁ՌʢҎલͷϞόΠϧ൛ͱൺֱʣ • ηογϣϯຖͷϖʔδӾཡ65%↑ • ௚ؼ཰20%↓ • ౤ߘ75%↑ ϗʔϜը໘͔ΒΞϓϦͬΆ͘࢖͏Α͏ʹͳͬͨ

Slide 27

Slide 27 text

ָఱϨγϐ 1Ϣʔβʔ͋ͨΓͷPV3.1ഒˢ

Slide 28

Slide 28 text

ͻΐͬͱ͢Δͱ…ʁ

Slide 29

Slide 29 text

PWA͍͍Ͷʂ

Slide 30

Slide 30 text

Ͱ΋… ৭ʑ໘౗ष͍Μ͡Όͳ͍ͷʁ

Slide 31

Slide 31 text

ࢲͰ΋Ͱ͖ͨ

Slide 32

Slide 32 text

ͲΕ͘Β͍؆୯͔ʁ

Slide 33

Slide 33 text

ࠓ͔ΒPWAΛ࡞Δ༷ࢠΛ ͓ݟͤ͠·͢ʂʂʂ

Slide 34

Slide 34 text

ͱࢥ͚ͬͨͲɺ ා͍ͷͰಈըͰɻ

Slide 35

Slide 35 text

Progressive Web App Checklist • Google͕ఏএ • PWAͱͯ͠ຬͨ͢΂͖߲໨ • BaselineͱExemplaryͷ̎ஈ֊

Slide 36

Slide 36 text

✔ αΠτ͕ HTTPS Ͱఏڙ͞Ε͍ͯΔ͜ͱ ✔ λϒϨοτɾϞόΠϧʹ࠷దԽ͞Ε͍ͯΔ͜ ͱ ✔ ։࢝஍఺ͷURL͸ΦϑϥΠϯͰ΋ϩʔυͰ͖ Δ͜ͱ ✔ ϗʔϜը໘ʹ௥Ճ͢ΔͨΊͷϝλσʔλ͕ఏ ڙ͞Ε͍ͯΔ͜ͱ

Slide 37

Slide 37 text

✔ 3G ճઢͰ΋ߴ଎ʹಡΈࠐΊΔ͜ͱ (10 ඵҎ ಺ʹૢ࡞Մೳ) ✔ Ϋϩεϒϥ΢βͰಈ͘͜ͱ ✔ ϖʔδભҠ͕ωοτϫʔΫʹΑͬͯϒϩοΫ ͞Ε͍ͯΔΑ͏ʹݟ͑ͳ͍͜ͱ ✔ ͦΕͧΕͷϖʔδ͕ URL Λ࣋ͭ͜ͱ

Slide 38

Slide 38 text

Lighthouse • Google͕ఏڙ • WebΞϓϦͷ඼࣭είΞΛࢉग़͢Δπʔϧ • Baselineͷ߲໨ΛνΣοΫ

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

ࠓճ࡞Δ΋ͷ

Slide 41

Slide 41 text

Service Worker • ϒϥ΢β͕WebΞϓϦͱ͸ผʹόοΫάϥ΢ ϯυͰ࣮ߦ͢ΔεΫϦϓτ • APIͱͷ૊Έ߹ΘͤͰΩϟογϡɺPush௨஌ͳ ͲΛ࣮ݱ

Slide 42

Slide 42 text

App Manifest • ΞϓϦࣗ਎ͷઃఆϑΝΠϧ • ΞϓϦͷ໊લ΍ΞΠίϯΛઃఆ • html಺ͰಡΈࠐΈ

Slide 43

Slide 43 text

࢖͏΋ͷ • Firebase - BaaSʢࠓճ͸HostingͷΈ࢖༻ʣ • Vue.js - JSϑϨʔϜϫʔΫ • Vuetify.js - ίϯϙʔωϯτϑϨʔϜϫʔΫʢࠓ ճ͸PWA༻ͷςϯϓϨʔτΛ࢖༻ʣ

Slide 44

Slide 44 text

'JSFCBTF )PTUJOH 4FSWJDF 8PSLFS 7VFUJGZ "QQ .BOJGFTU 0UIFST ᶃ ᶄ

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

PWA͕Ͱ͖ͨʂ ʢhttps://goo.gl/VhzC5mʣ

Slide 47

Slide 47 text

̍ʣεϓϥογϡ ̎ʣόφʔʢChromeʣ ̏ʣΦϑϥΠϯ

Slide 48

Slide 48 text

ͦΜͳʹ೉͘͠ͳͦ͞͏ ʢ̔෼Ͱ͜͜·ͰͰ͖ͨʣ

Slide 49

Slide 49 text

·ͱΊ

Slide 50

Slide 50 text

PWA͍͍Ͷʂ

Slide 51

Slide 51 text

ͦΜͳʹ೉͘͠ͳͦ͞͏

Slide 52

Slide 52 text

͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ