Google I/O 2021 Recap

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

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

Transcript

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

   View Slide

2. PAGE
   # MOONGIFT / 50
   DAY 2019/02/14
   自己紹介
   2
   @goofmint
   fb.me/goofmint
   中津川 篤司
   株式会社MOONGIFT代表取締役
   エバンジェリスト
   コミュニティ
   主催
   https://www.moongift.jp
   

   View Slide

3. PAGE
   # MOONGIFT / 50
   DAY 2019/02/14
   OYAKUSOKU
   •あくまでもセッション動画を見たまとめです
   
   
   •間違った認識があったらご連絡ください
   
   
   •細かな技術的な質問には答えられない可能性が
   あります
   3
   

   View Slide

4. PAGE
   DAY 2017/11/01
   # MOONGIFT / 12
   Google I/O?
   Googleが開催している年次開発者向けカンファレンス
   4
   2021年は5月18〜20日、オンラインで開催
   IUUQTFWFOUTHPPHMFDPNJP
   

   View Slide

5. PAGE
   DAY 2017/11/01
   # MOONGIFT / 12
   テーマ
   5
   

   View Slide

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
   

   View Slide

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
   

   View Slide

8. PAGE
   DAY 2017/11/01
   # MOONGIFT / 12
   セッション紹介
   8
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

78. PAGE
    DAY 2017/11/01
    # MOONGIFT / 12
    効果的なパスワードの管理
    毎年、膨大な数のパスワードが不正使用されています。ユー
    ザーは、自身とビジネスを守る、これまで以上に簡単で安全な
    パスワード管理を必要としています。 このセッションでは、プ
    ラットフォーム機能を最大限に活用して、組み込みまたはサー
    ドパーティ製のパスワード マネージャーを適切に扱う方法を説
    明します。また、チームでテクノロジーの優先順位を付けるの
    に役立つベスト プラクティスと統計情報も示します。最後に
    Chrome の新しいツールと機能を紹介します。
    78
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

92. PAGE
    DAY 2017/11/01
    # MOONGIFT / 12
    まとめ
    92
    

    View Slide

93. PAGE
    DAY 2017/11/01
    # MOONGIFT / 12
    Core Web Vitalsのビジネス化
    • Webを収益源としている企業は取り組んだ方が良い
    
    
    • 高度なJavaScript APIはネイティブアプリと変わらない
    
    
    • 測定大事
    
    
    • 髭格好良い
    93
    

    View Slide

94. PAGE
    # MOONGIFT / 50
    DAY 2019/02/14
    👋 Thanks!
    @goofmint
    
    
    fb.me/goofmint
    ご感想お待ちします！
    

    View Slide