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

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

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

Cdd3f102b5fd30e9ebcc4e01d58d43d5?s=128

100800

May 26, 2019
Tweet

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