PWAのつかいどころ 社会実装に向けて

昨今エンジニアのみならず自発的な社会貢献が盛んです。今回はPWAの価値を再考し、社会実装への適用可能性を探ると共に、手軽にPWAを実装出来るGlideについて紹介致します。

Transcript

1. PWAͷ͔͍ͭͲ͜Ζ ࣾձ࣮૷ʹ޲͚ͯ Fukuda Seiji ϞόΠϧWebτϥοΫ
2. ࣗݾ঺հ • ;ͩ͘Ͱ͢ • Type: “ث༻ශ๡” • ׆ಈྖҬ • PWA Night • Civic Tech • ଞ
3. PWA΍΍͍͜͠
4. PWA Progressive Web App
5. PWA ͱ͸ (೉୊) • ॾઆ͋Γ • ΋ͱ͍ɺղऍ͕೉͍͠(͔΋)
6. Progressive Web Apps | Web | Google Developers https://developers.google.com/web/progressive-web-apps/ Progressive Web Apps are user experiences that have the reach of the web, and are: • Reliable - Load instantly and never show the downasaur, even in uncertain network conditions. • Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. • Engaging - Feel like a natural app on the device, with an immersive user experience. This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.
7. Downasaur ࢀߟ
8. PWA ؔ࿈ٕज़ • Manifest • Service workers • WebAssembly • Indexed Database • Web Storage • ΄͔ଟ਺ • Ή͠Ζແ਺
9. PWA େมͦ͏͚ͩͲ ͳʹ͔Β࢝ΊΔͱྑ͍ͷ?
10. PWA ಛ௃ • Progressive • Responsive • Connectivity independent • App-like • Fresh • Safe • Discoverable • Re-engageable • Installable • Linkable • etc.
11. Ͳ͏Έͯ΋ PWA͸΍΍͍͜͠
12. (தུ) શ෦΍ΔඞཁͳΜͯͳ͍
13. PWAʹؔΘΔ্Ͱ Ұ൪େࣄʹ͍ͨ͜͠ͱ
14. ޷ح৺
15. – ࠢͷڣͼ “޷ح৺͕͋Ε͹ͳΜͰ΋ग़དྷΔ”
16. PWAͷ͔͍ͭͲ͜Ζ ྫ͑͹ͦΕ͸Ͳ͏࢖͏?
17. Α͘ొ৔͢Δ୯ޠ
 㱠 ཁૉٕज़(ػೳ) • ௿଎ճઢ΁ͷରԠ • Ωϟογϡ • ωΠςΟϒΞϓϦͷΑ͏ͳৼΔ෣͍ • ϚʔέοτϓϨΠεΛᷖճग़དྷΔ • ଞ
18. ௿଎ճઢ΁ͷରԠ ͳͷ͔ͳ?
19. SOTI (The State of the Internet) • Πϯλʔωοτͷ͜ͱ͸ͱΓ͋͑ͣ SOTIΛࢀরͯ͠ΈΔ(͕… • 2018೥Ҏ߱Ϩϙʔτ͕ແ͍ • ͦΕ΄Ͳؔ৺͕௿͍(ͱ͍͏͜ͱ ͔?) • ଞ(ͷཁૉ)ʹϑΥʔΧε͍ͯ͠Δ ͔Β(͔?)
21. ௨৴ੑೳ (ॲཧੑೳ) • (PWAӠʑͱ͍͏ΑΓ͸)ଞͷཁૉʹΑΔӨڹͷํ͕͸Δ͔ʹେ͖ ͍ͷͰ͸? • CDN༗ແ • ֤૷ஔͷॲཧੑೳ • ଞ
22. ΩϟογϡͰ͠ΐ΍͸Γ ͳͷ͔ͳ?
23. Ωϟογϡ • ϓϦϑΣον͍ͨ͠? • αΫαΫಈ͘(ؾ͕͢Δ?) • ඞཁੑ͸? • Ωϟογϡ • γεςϜશମͷΩϟγϡઓུ • CDN౳ͱͷ݉Ͷ߹͍େৎ෉? • ԿͷͨΊͷΩϟογϡ?
24. ΦϑϥΠϯͰ΋࢖͑Δ͜ͱ͕େࣄ? ͳͷ͔ͳ?
25. ΦϑϥΠϯ • ೔ຊ • (ಓ࿏/మಓ) τϯωϧ಺෦ • 10೥΄Ͳલ·Ͱ͸஍ԼమͷӺؒ ͰΠϯλʔωοτʹ઀ଓग़དྷͳ ͍Α͏ͳ͜ͱ͸͋ͬͨ • େମͭͳ͕Δ೔ຊ
26. ϗʔϜεΫϦʔϯʹΞΠίϯ (ωΠςΟϒΞϓϦಉ౳ͷར఺) ͳͷ͔ͳ?
27. ϗʔϜը໘ (·ͨ͸PC)ʹฒͿ • Ҏ֎ͱར఺͕ଟ͍ͱࢥΘΕΔ͕ • ݁ہ͸ਓ(࢖͍ํ)ʹΑΔ(ͱࢥΘΕΔ) • ݸਓతʹ͸࠷ۙʹͳͬͯΑ͏΍͘Ձ஋Λײ࢝͡Ίͨ… • ࣗ෼͕࢖͏͜ͱΛߟ͑Δͱਖ਼௚ແͯ͘΋ྑ͍
28. ϚʔέοτϓϨΠεʹඇґଘ? ͳͷ͔ͳ?
29. Ϛʔέοτඇґଘ • ར఺΋͋ΕͲ • ྑ͍͜ͱ͹͔ΓͰ͸ແ͍ • ͷͰ͸?
30. PWAͷ͔͍ͭͲ͜Ζ ൥ࡶ͞ʹ·ͲΘ͞Εͣʹ
31. PWAͷ͔͍ͭͲ͜Ζ • ར༻ऀ ͸? • ΞϓϦέʔγϣϯͷ༻్ ͸? • ໨త ͸? • ίϯςΩετ ͸? • ֤छ੍໿ ͸?
32. PWAͷ͔͍ͭͲ͜Ζ • ར༻ऀ ͸? • ΞϓϦέʔγϣϯͷ༻్ ͸? • ໨త ͸? • ίϯςΩετ ͸? • ֤छ੍໿ ͸? • ݁ہ͸ • ΞϓϦέʔγϣϯʹͱͬ ͯదͨ͠΋ͷ/ඞཁͳ΋ ͷΛબ୒͢΂͖
33. PWAͷ͔͍ͭͲ͜Ζ • ໨తʹԠٕͨ͡ज़ɺػೳΛ • PWA͕ProgressiveͰ͋Δͷͱಉ༷ʹ • (͖ͪΜͱߟ্͑ͨͰ)গͣͭ͠ରԠͯ͠ߦ͚͹ྑ͍(ͩΖ͏)
34. PWAͷ͔͍ͭͲ͜Ζ ΞϓϦέʔγϣϯผ ߟ࡯
35. PWA͔͍ͭͲ͜Ζ (ΞϓϦέʔγϣϯछྨผ) • ෺ൢ • ϝσΟΞ • CRM • ۀ຿ܥ • ڭҭ༻్ • ଞ
36. ҧ͏ɺͦ͏͡Όͳ͍ PWA := Progressive Web App
37. PWA := Progressive Web App • PWA͸Web ApplicationͳͷͰΞϓϦέʔγϣϯͷछྨ(͚ͩ) ʹΑͬͯʮPWAରԠ͢΂͖͔Ͳ͏͔ʯʮPWA޲͖͔Ͳ͏͔ʯ ͳͲΛߟ͑Δ΂͖΋ͷͰ͸ͳ͍
38. PWAͷ͔͍ͭͲ͜Ζ খ͞ͳΞϓϦέʔγϣϯ͔Β͸͡ΊΑ͏
39. PWA͔͍ͭͲ͜Ζ (খ͞ͳΞϓϦέʔγϣϯ) • ͳΜ͔ͭ͘Ζ͏ • σʔλͷՄࢹԽ • ؀ڥඇґଘ • ͓खܰʹͭ͘Γ͍ͨ • దٕͨ͠ज़ཁૉ • A2HS (Add to Home screen) • ଞ • ༷ʑͳٕज़ɺ੡඼Λదٓ બ୒(ద੾ͳ૊Έ߹Θͤ)
40. খ͞ͳΞϓϦέʔγϣϯ • ໨త͕໌֬Ͱ͋Γ΍͍͢ • ૝ఆར༻ऀΛఆٛ͠΍͍͢ • PWAͷಛ௃Λ্ख͘׆͔͠΍͍͢
41. PWA͔͍ͭͲ͜Ζ (໨తಛԽܕΞϓϦ͔Β࢝ΊͯΈΑ͏) • Πϕϯτઐ༻ • ࢀՃऀ޲͚ΞϓϦ • ӡӦଆ޲͚ΞϓϦ • దٕͨ͠ज़ཁૉ (ྫ) • A2HS (Add to Home screen) • PUSH௨஌
42. PWA x ࣾձ࣮૷
43. ౜ಥͰ͕͢
44. զʑʹग़དྷΔࣾձ΁ͷߩݙͱ͸? • OSS • OSS։ൃɺଞ • ڭҭ • CoderDojo Japan - ࢠͲ΋ͷ ͨΊͷϓϩάϥϛϯάಓ৔ • γϏοΫςοΫ • ࢢຽͱͯ͠ITΛ׆༻ࣾ͠ ձΛม͑ͯߦ͜͏ • ଞʹ΋ແ਺ʹ͋Γ·͢ΑͶ
45. զʑ͸஌͍ͬͯΔ (Ͱ͠ΐ?) • ΋ͷͮ͘Γͷָ͠͞ • ͭͬͨ͘΋ͷ͕໾ʹཱͭ ͜ͱͷخ͠͞ • ศརͳπʔϧ΍ख๏ • ଟ͘ͷ༗ޮͳπʔϧ͸େ ମR&D΍ITͷݱ৔͔Βੜ ·Εɺ࣮૷͞ΕɺҰൠԽ ͢Δ
46. ͭ͘Δָ͠͞ΛΈΜͳʹ ੈ୅ؔ܎ͳ͘ΈΜͳʹ • ୭Ͱ΋ͳΜΒ͔ͷํ๏Ͱ ߩݙग़དྷΔՄೳੑ͕͋Δ • ϓϩάϥϛϯάग़དྷͳ͘ ͯ΋ΞϓϦέʔγϣϯΛ ͭ͘Δ͜ͱ͕ग़དྷΔ • ͕͔ͩ͠͠ΞϓϦέʔ γϣϯΛͭͬͯ͘อक͢ Δͷ͸Ҏ֎ͱେม • σʔλͷߋ৽ͳͲͷӡ༻ ໘ͷରԠ΋͋Δ (ॏཁ)
47. ࣾձ࣮૷ • ʮࣾձ࣮૷ʯ • ͏͞Μ͍͘͞Πϝʔδ΋͋Δ • ߟ͑͗͢ • ٕज़ɺݚڀ੒ՌɺͳͲΛ༷ʑͳ׆ಈΛࣾձʹؐݩ͠Α͏
48. ͦ͜ʹPWAͷग़൪͸? • ࣮ߦ؀ڥґଘੑͷ௿͞ • ߴ͍൚༻ੑ • ෑډ͕௿͍ (΋ͷʹΑΔ) • औΓ૊Έ΍͍͢ • ΞϓϦϚʔέοτͳͲΛඞཁͱ͠ͳ ͍ෑډͷ௿͞ • ΞϓϦετΞ͔ΒΠϯετʔϧ͢ Δ͜ͱ΁ͷ఍߅ײΛഉআ • A2HS • ΞΠίϯ͋Δ͚ͩͰҹ৅ͱ࢖͍ ΍͕͔͢͞ͳΓ޲্͢Δ(Α͏ͩ)
49. ͦ͜ʹPWAͷग़൪͸? • PWAʹରԠ͢Δ֤छαʔϏεɺπʔϧͷొ৔ • ศརπʔϧͷPWAԽ͕ਐΉ (ΠϚίί)
50. ͦ͜ʹPWAͷग़൪͸? • PWAʹରԠ͢Δ֤छαʔϏεɺπʔϧͷొ৔ • Data Studio (by Google), Tableau, Elastic Stack, … ลΓͰ΋·ͩ·ͩ ෑډ͕ߴ͔ͬͨ • ΍͸ΓεϓϨουγʔτ͕ඞཁͩ (ൈ܈ͷೝ஌౓) • ͦ͜ͰGlideͱ͔Glideͱ͔
51. Glide ௒ઈ͓खܰPWA࡞੒αʔϏε
55. Glide • σʔλιʔε͸Google Sheet • ࠓ΍ൈ܈ͷೝ஌౓(௿͍఍߅ײ)Λ ތΔEx΋ͱ͍εϓϨουγʔτ
56. εϓϨουγʔτͷେ͖ͳϝϦοτ • ଟ͘ͷਓ͕εϓϨουγʔτΛख࡞ۀͰ࡞੒ɺߋ৽ग़དྷΔ • ։ൃͷ͠΍͢͞ɺอकੑͷߴ͞ɺೝ஌౓ͷߴ͞ • εϓϨουγʔτʹσʔλΛ౤ೖ͢Δ࢓૊Έ͸ແ਺ʹ͋Δ • ೖྗͷࣗಈԽ͕ඇৗʹ༰қ
57. ηϯαʔ > IFTT > Google Sheets > Glide > PWA GlideͳΒࠇ͍ը໘Λ࢖Θͣʹ͜Μͳ͜ͱ΋ग़དྷ·͢
59. গ͠લ͔ΒҰ෦Ͱ੝Γ্͕Γ͍ͬͯΔGlide PWAʹ৮ΕΔ͖͔͚ͬͱ͓ͯ͠નΊͰ͢
60. Glideʹ͍ͭͯ͸… ϞόΠϧWebτϥοΫɺ͜ͷޙͷηογϣϯͰ΋ొ৔
61. γϏοΫςοΫ Civic Tech
62. ݟ͔͚ͨ͜ͱ͋Δ͔΋? • ๭ॻ੶ͷ࿈ࡌίϥϜ
63. – SD “͋ͳͨͷεΩϧ͸ࣾձʹ໾ཱͭ”
64. Civic Tech ؔ࿈Πϕϯτ (Ұ෦Ͱ͢) • CIVIC TECH FORUM 2019 • Jun 29 (-30) @ Tokyo • Code for Japan Summit 2019 • Sep 28-29 @ Chiba • GovTechαϛοτ • Feb 10 @ Tokyo (2019)
65. PWA Night
66. PWA Night • PWAΛςʔϚͱͨ͠ίϛϡχςΟ • ຖ݄ୈ3ਫ༵೔໷ʹΠϕϯτ։࠵ • ͜Ε·Ͱ౦ژ։࠵ͷΈɺࠓޙ͸ ଞ஍ҬͰ΋։࠵Λݕ౼தɺΦϯ ϥΠϯ഑৴౳΋ݕ౼த
67. PWA͸༻๏༻ྔʹͩ͜ΘΓա͗ͣ ద੾ʹར༻͠·͠ΐ͏