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

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೥Ҏ߱Ϩϙʔτ͕ແ͍ • ͦΕ΄Ͳؔ৺͕௿͍(ͱ͍͏͜ͱ ͔?) • ଞ(ͷཁૉ)ʹϑΥʔΧε͍ͯ͠Δ ͔Β(͔?)
20. None

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࡞੒αʔϏε

52. None
53. None
54. None

55. Glide • σʔλιʔε͸Google Sheet • ࠓ΍ൈ܈ͷೝ஌౓(௿͍఍߅ײ)Λ ތΔEx΋ͱ͍εϓϨουγʔτ

56. εϓϨουγʔτͷେ͖ͳϝϦοτ • ଟ͘ͷਓ͕εϓϨουγʔτΛख࡞ۀͰ࡞੒ɺߋ৽ग़དྷΔ • ։ൃͷ͠΍͢͞ɺอकੑͷߴ͞ɺೝ஌౓ͷߴ͞ • εϓϨουγʔτʹσʔλΛ౤ೖ͢Δ࢓૊Έ͸ແ਺ʹ͋Δ • ೖྗͷࣗಈԽ͕ඇৗʹ༰қ

57. ηϯαʔ > IFTT > Google Sheets > Glide > PWA

    GlideͳΒࠇ͍ը໘Λ࢖Θͣʹ͜Μͳ͜ͱ΋ग़དྷ·͢
58. None

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͸༻๏༻ྔʹͩ͜ΘΓա͗ͣ ద੾ʹར༻͠·͠ΐ͏