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

Google I/O 2021 Recap

Google I/O 2021 Recap

PWA Night vol.28 ~某大学でのPWA事例&Google I/O Recap〜での発表資料です。

https://pwanight.connpass.com/event/215682/

4cafe6a1c6287d64d7252279eeeffa94?s=128

Atsushi Nakatsugawa

June 16, 2021
Tweet

Transcript

  1. PAGE DAY 2017/11/01 # MOONGIFT / 12 Google I/O 2021

    Recap 1
  2. PAGE # MOONGIFT / 50 DAY 2019/02/14 自己紹介 2 @goofmint

    fb.me/goofmint 中津川 篤司 株式会社MOONGIFT代表取締役 エバンジェリスト コミュニティ 主催 https://www.moongift.jp
  3. PAGE # MOONGIFT / 50 DAY 2019/02/14 OYAKUSOKU •あくまでもセッション動画を見たまとめです •間違った認識があったらご連絡ください

    •細かな技術的な質問には答えられない可能性が あります 3
  4. PAGE DAY 2017/11/01 # MOONGIFT / 12 Google I/O? Googleが開催している年次開発者向けカンファレンス

    4 2021年は5月18〜20日、オンラインで開催 IUUQTFWFOUTHPPHMFDPNJP
  5. PAGE DAY 2017/11/01 # MOONGIFT / 12 テーマ 5

  6. PAGE DAY 2017/11/01 # MOONGIFT / 12 取り上げるセッション 1. PWA

    に関する 5 つのヒント 2. 読み込み後のパフォーマンス 3. Web Vitals の最新情報 4. Core Web Vitalsによるビジネスインパクト 5. Digital Goods APIを使用したPlay請求サービスによるPWAへの支払い 6. 効果的なパスワードの管理 7. Excalidraw と Fugu: コアユーザー ナビゲーションの改善 6
  7. PAGE DAY 2017/11/01 # MOONGIFT / 12 取り上げるセッション 1. PWA

    に関する 5 つのヒント 2. 読み込み後のパフォーマンス 3. Web Vitals の最新情報 4. Core Web Vitalsによるビジネスインパクト 5. Digital Goods APIを使用したPlay請求サービスによるPWAへの支払い 6. 効果的なパスワードの管理 7. Excalidraw と Fugu: コアユーザー ナビゲーションの改善 7
  8. PAGE DAY 2017/11/01 # MOONGIFT / 12 セッション紹介 8

  9. PAGE DAY 2017/11/01 # MOONGIFT / 12 PWA に関する 5

    つのヒント プログレッシブ ウェブアプリによって、ユーザーのパソ コンまたはモバイル デバイスにインストールされている 通常のアプリと同様の外観と動作を持つウェブアプリを 作成できます。ここでは PWA を活用して、ユーザーがよ り統合され自然と感じるエクスペリエンスを提供するた めの 5 つの簡単な改善点を説明します。投資の効果を測 定する方法も紹介します。 9
  10. PAGE DAY 2017/11/01 # MOONGIFT / 12 10

  11. PAGE DAY 2017/11/01 # MOONGIFT / 12 11

  12. PAGE DAY 2017/11/01 # MOONGIFT / 12 12

  13. PAGE DAY 2017/11/01 # MOONGIFT / 12 13

  14. PAGE DAY 2017/11/01 # MOONGIFT / 12 14

  15. PAGE DAY 2017/11/01 # MOONGIFT / 12 15

  16. PAGE DAY 2017/11/01 # MOONGIFT / 12 16

  17. PAGE DAY 2017/11/01 # MOONGIFT / 12 17

  18. PAGE DAY 2017/11/01 # MOONGIFT / 12 18

  19. PAGE DAY 2017/11/01 # MOONGIFT / 12 19

  20. PAGE DAY 2017/11/01 # MOONGIFT / 12 読み込み後のパフォーマンス ウェブ パフォーマンスの最適化では、最初のページ読み込みに

    焦点が当てられる傾向があります。これは、ページ読み込みが オーディエンスを失う可能性がある最初の主要なランドマーク であるためですが、高度にインタラクティブなページのユー ザー エクスペリエンスは、しばしば読み込み後の特性によって 左右されます。ここでは、読み込み後にページを速いと感じさ せるための要素は何であるのかを探り、ウェブ パフォーマンス における重要性が増しているこの側面について測定、最適化す る方法を説明します。 20
  21. PAGE DAY 2017/11/01 # MOONGIFT / 12 21

  22. PAGE DAY 2017/11/01 # MOONGIFT / 12 22

  23. PAGE DAY 2017/11/01 # MOONGIFT / 12 23

  24. PAGE DAY 2017/11/01 # MOONGIFT / 12 24

  25. PAGE DAY 2017/11/01 # MOONGIFT / 12 25

  26. PAGE DAY 2017/11/01 # MOONGIFT / 12 26

  27. PAGE DAY 2017/11/01 # MOONGIFT / 12 27

  28. PAGE DAY 2017/11/01 # MOONGIFT / 12 28

  29. PAGE DAY 2017/11/01 # MOONGIFT / 12 29

  30. PAGE DAY 2017/11/01 # MOONGIFT / 12 30

  31. PAGE DAY 2017/11/01 # MOONGIFT / 12 Web Vitals の最新情報

    Google では、Web Vitals に関するフィードバックの聞き取りを 懸命に進めています。このセッションでは、ウェブに関する主 な指標をツールによって測定、最適化する方法に関する最新の 調査結果を紹介します。 31
  32. PAGE DAY 2017/11/01 # MOONGIFT / 12 32

  33. PAGE DAY 2017/11/01 # MOONGIFT / 12 33

  34. PAGE DAY 2017/11/01 # MOONGIFT / 12 34

  35. PAGE DAY 2017/11/01 # MOONGIFT / 12 35

  36. PAGE DAY 2017/11/01 # MOONGIFT / 12 36

  37. PAGE DAY 2017/11/01 # MOONGIFT / 12 37

  38. PAGE DAY 2017/11/01 # MOONGIFT / 12 38

  39. PAGE DAY 2017/11/01 # MOONGIFT / 12 39

  40. PAGE DAY 2017/11/01 # MOONGIFT / 12 40

  41. PAGE DAY 2017/11/01 # MOONGIFT / 12 41

  42. PAGE DAY 2017/11/01 # MOONGIFT / 12 42

  43. PAGE DAY 2017/11/01 # MOONGIFT / 12 43

  44. PAGE DAY 2017/11/01 # MOONGIFT / 12 44

  45. PAGE DAY 2017/11/01 # MOONGIFT / 12 45

  46. PAGE DAY 2017/11/01 # MOONGIFT / 12 46

  47. PAGE DAY 2017/11/01 # MOONGIFT / 12 Core Web Vitalsによるビジネス

    インパクト Chrome 開発チームから、グローバル ブランドが Web Vitals へ の投資を決定した理由とそれがビジネスとユーザーにもたらし たメリットを紹介します。ぜひご参加ください。ウェブサイト の LCP、FID、CLS を調整することが企業の成功にどのように役 立つか、また、これがどうのように組織においてパフォーマン スを優先する動機付けとなるのかをデベロッパー向けに説明し ます。 47
  48. PAGE DAY 2017/11/01 # MOONGIFT / 12 48

  49. PAGE DAY 2017/11/01 # MOONGIFT / 12 49

  50. PAGE DAY 2017/11/01 # MOONGIFT / 12 50

  51. PAGE DAY 2017/11/01 # MOONGIFT / 12 51

  52. PAGE DAY 2017/11/01 # MOONGIFT / 12 52

  53. PAGE DAY 2017/11/01 # MOONGIFT / 12 53

  54. PAGE DAY 2017/11/01 # MOONGIFT / 12 54

  55. PAGE DAY 2017/11/01 # MOONGIFT / 12 55

  56. PAGE DAY 2017/11/01 # MOONGIFT / 12 56

  57. PAGE DAY 2017/11/01 # MOONGIFT / 12 57

  58. PAGE DAY 2017/11/01 # MOONGIFT / 12 58

  59. PAGE DAY 2017/11/01 # MOONGIFT / 12 59

  60. PAGE DAY 2017/11/01 # MOONGIFT / 12 60

  61. PAGE DAY 2017/11/01 # MOONGIFT / 12 61

  62. PAGE DAY 2017/11/01 # MOONGIFT / 12 62

  63. PAGE DAY 2017/11/01 # MOONGIFT / 12 63

  64. PAGE DAY 2017/11/01 # MOONGIFT / 12 64

  65. PAGE DAY 2017/11/01 # MOONGIFT / 12 65

  66. PAGE DAY 2017/11/01 # MOONGIFT / 12 66

  67. PAGE DAY 2017/11/01 # MOONGIFT / 12 Digital Goods APIを使用したPlay

    請求サービスによるPWAへの支払い Digital Goods API を使用して、Google Play ストアで PWA を収 益化できるようになりました。Google Play 側で決済プロセスを 処理するので、金銭的なトランザクションを直接処理する必要 は一切ありません。ユーザーによる支払いは、慣れ親しんだ一 貫性のある購入フローに沿って行われます。 このハンズオン セッションは、「Google Play ストアへプログレッシブ ウェブア プリを掲載する」の続編です。段階を追った例とデモを通し て、Play 請求サービスの Web Payments 標準との新しい統合の 使用方法を説明します。 67
  68. PAGE DAY 2017/11/01 # MOONGIFT / 12 68

  69. PAGE DAY 2017/11/01 # MOONGIFT / 12 69

  70. PAGE DAY 2017/11/01 # MOONGIFT / 12 70

  71. PAGE DAY 2017/11/01 # MOONGIFT / 12 71

  72. PAGE DAY 2017/11/01 # MOONGIFT / 12 72

  73. PAGE DAY 2017/11/01 # MOONGIFT / 12 73

  74. PAGE DAY 2017/11/01 # MOONGIFT / 12 74

  75. PAGE DAY 2017/11/01 # MOONGIFT / 12 75

  76. PAGE DAY 2017/11/01 # MOONGIFT / 12 76

  77. PAGE DAY 2017/11/01 # MOONGIFT / 12 77

  78. PAGE DAY 2017/11/01 # MOONGIFT / 12 効果的なパスワードの管理 毎年、膨大な数のパスワードが不正使用されています。ユー ザーは、自身とビジネスを守る、これまで以上に簡単で安全な

    パスワード管理を必要としています。 このセッションでは、プ ラットフォーム機能を最大限に活用して、組み込みまたはサー ドパーティ製のパスワード マネージャーを適切に扱う方法を説 明します。また、チームでテクノロジーの優先順位を付けるの に役立つベスト プラクティスと統計情報も示します。最後に Chrome の新しいツールと機能を紹介します。 78
  79. PAGE DAY 2017/11/01 # MOONGIFT / 12 79

  80. PAGE DAY 2017/11/01 # MOONGIFT / 12 80

  81. PAGE DAY 2017/11/01 # MOONGIFT / 12 81

  82. PAGE DAY 2017/11/01 # MOONGIFT / 12 82

  83. PAGE DAY 2017/11/01 # MOONGIFT / 12 Excalidraw と Fugu:

    コアユー ザー ナビゲーションの改善 高度なテクノロジーは、それを理解していない人の目には魔法 のように感じられます。ここでは、Excalidraw プログレッシブ ウェブアプリで使用される新しいウェブ API をいくつか紹介し ます。ご自身のアプリに応用できるアイデアを得られるよう、 ユーザー エクスペリエンスを素晴らしいものにする要素を順を 追って説明します。 83
  84. PAGE DAY 2017/11/01 # MOONGIFT / 12 84

  85. PAGE DAY 2017/11/01 # MOONGIFT / 12 85

  86. PAGE DAY 2017/11/01 # MOONGIFT / 12 86

  87. PAGE DAY 2017/11/01 # MOONGIFT / 12 87

  88. PAGE DAY 2017/11/01 # MOONGIFT / 12 88

  89. PAGE DAY 2017/11/01 # MOONGIFT / 12 89

  90. PAGE DAY 2017/11/01 # MOONGIFT / 12 この他のセッション 90

  91. PAGE DAY 2017/11/01 # MOONGIFT / 12 気になったセッション • 新しい

    Storage エミュレータを使用したローカル開発 • TensorFlow.js を使用した次世代ウェブアプリの機械学習 • バンドルサイズの縮小: ウェブ向けの新しい Firebase のプレ ビュー 91
  92. PAGE DAY 2017/11/01 # MOONGIFT / 12 まとめ 92

  93. PAGE DAY 2017/11/01 # MOONGIFT / 12 Core Web Vitalsのビジネス化

    • Webを収益源としている企業は取り組んだ方が良い • 高度なJavaScript APIはネイティブアプリと変わらない • 測定大事 • 髭格好良い 93
  94. PAGE # MOONGIFT / 50 DAY 2019/02/14 👋 Thanks! @goofmint

    fb.me/goofmint ご感想お待ちします!