PayPayモールのAMP活用とデザインシステム / YJTC19 in Shibuya B-1 #yjtc

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

PayPayモール AMPとはユーザーファーストなサービス開発に適した Webコンポーネントなフレームワーク Accelerated Mobile Pages の略でありページの高速化で活用されるのはもちろんキャッシュ, ストーリー, メールと活用の幅が広い多様なコンポーネントが存在 logo: https://amp.dev/ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

https://amp.dev/

13.

14.

PayPayモール独自のデザインシステムとAMPの相性 AMPの活用とデザインシステムを考える - AMPには様々なルールがある - JavaScriptが自由に書けないなど制限が厳しい - AMPコンポーネント自身に既に粒度がある独自のデザインシステムとAMPは相性が悪い？ PayPayモールでの実現へのブレイクスルー Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

15.

16.

17.

18.

19.

20.

https://material.io/resources/icons/

21.

22.

23.

スタイルガイド / デザインシステム AMPの実現スタイルガイドまとめ使用例とセットで原則を定めることで統一性のあるデザインを効率的に作れる Sketchで作成したスタイルガイドをZeplinに載せデザイン・開発を行う上で守るべき原則を誰もが確認可能に実現に向けた実装面の課題感 ☑ カラーや余白などをSCSS変数で管理 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

24.

25.

26.

http://atomicdesign.bradfrost.com/

27.

28.

29.

30.

コンポーネント / デザインシステム AMPの実現コンポーネントまとめ propsでデータを受け取れ、再利用性も高くし ImageなどはAMPコンポーネントをベースに活用実現に向けた実装面の課題感 ☑ アトミックデザイン思考なコンポーネント ☑ AMPコンポーネントをベースに活用 ☑ propsによるJSONデータの受け取り Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

31.

32.

実現へのブレイクスルー / デザインシステム AMPの実現実現に向けた課題感の整理 ☑ カラーや余白などをSCSS変数で管理 ☑ アトミックデザイン思考なコンポーネント ☑ AMPコンポーネントをベースに活用 ☑ propsによるJSONデータの受け取り ☑ AMP Validated なページを生成 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

33.

実現へのブレイクスルー / デザインシステム AMPの実現実現に向けた課題感の整理 ☑ カラーや余白などをSCSS変数で管理 ☑ アトミックデザイン思考なコンポーネント実現へのブレイクスルー ☑ AMPコンポーネントをベースに活用 ☑ propsによるJSONデータの受け取り ☑ AMP Validated なページを生成 logo: https://nuxtjs.org/ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

https://nuxtjs.org/

34.

実現へのブレイクスルー / デザインシステム AMPの実現 Nuxt.jsの活用によるブレイクスルー ✅ カラーや余白などをSCSS変数で管理 ✅ アトミックデザイン思考なコンポーネント ✅ AMPコンポーネントをベースに活用 ✅ propsによるJSONデータの受け取り ☑ AMP Validated なページを生成 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. Nuxt.jsにより AMP Validated以外は標準機能と関連したNode パッケージ活用で実現可能

35.

実現へのブレイクスルー / デザインシステム AMP Validatedとは AMPの実現 AMPのルール検証にパスした状態 AMPキャッシュに対応させるためには必須必ずしもパスしなければいけない訳ではない（Bento AMP !） ※ 手元での検証も可能 Node package: amphtml-validator Chrome Extensions: AMP Validator Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

36.

実現へのブレイクスルー / デザインシステム AMP Validatedの実現 AMPの実現 Nuxt.js hooks (render:route) によるビルド拡張 Nuxt.jsのビルド処理をフックし AMPのルールに照らし合わせてHTMLを最適化 AMP Validatedなページを生成 reference: https://nuxtjs.org/api/conﬁguration-hooks/ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

https://nuxtjs.org/api/configuration-hooks/

37.

38.

実現へのブレイクスルー / デザインシステム AMPの実現 hooksで行なっている処理内容 AMP Validatedにするための処理 - HTMLから不要な属性などを削除 - JavaScriptの削除と必要なAMPコンポーネントJSの挿入 - スタイルを1つにまとめて圧縮し最適化レスポンシブ対応のための処理 - ページに応じてレスポンシブの制御などを modifyHtml 関数内で行なっている Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

39.

実現へのブレイクスルー / デザインシステム AMPの実現 Nuxt.jsの活用・拡張により実現 Nuxt.jsの活用で ✅ カラーや余白などをSCSS変数で管理 ✅ アトミックデザイン思考なコンポーネント ✅ AMPコンポーネントをベースに活用 ✅ propsによるJSONデータの受け取り hooksによる拡張で ✅ AMP Validated なページを生成 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

40.

41.

42.

43.

44.

AMPコンポーネントを活用した実装例 / AMPの活用と成果 CSR生成のカルーセルで活用しているAMPコンポーネント amp-img imgタグのAMP版 amp-carousel 要素をwrapしてcarouselが作れる amp-mustache amp-listと組み合わせて、 JSONからDOMを作れる amp-list 非同期でJSONを取得可能 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

45.

46.

47.

48.

49.

50.

51.

52.

53.

54.

パフォーマンスと表示速度 / AMPの活用と成果 placeholder属性によるスケルトン AMPコンポーネントの多くがplaceholder属性に対応し体感速度向上のためのスケルトンに活用可能 placeholder 子要素に属性として指定することで親要素のレンダリング準備中に表示する要素を指定 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

55.

56.

57.

AMPキャッシュ / AMPの活用と成果 AMPキャッシュ AMP Validatedなページをキャッシュサーバーから配信 AMP Validatedなページがクロールされ Yahoo!検索, Google検索の検索結果に⚡マーク付きでインデックスキャッシュサーバーからページコンテンツを配信キャッシュサーバーのドメインでの表示となるためクロスオリジンとなりCookieの利用が難しい Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

58.

59.

60.

SXGとamp-listで実現したパーソナライズ / AMPの活用と成果 SXG SXGとはSigned HTTP Exchangesの略 HTTP通信をSXG証明書で署名することでオリジンのURLでキャッシュされたAMPコンテンツを安全に表示可能サービスドメインでの表示となるためクロスオリジンの問題が解決しCookieの利用が可能 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

61.

62.

SXGとamp-listで実現したパーソナライズ / AMPの活用と成果 AMPキャッシュのパーソナライズを実現 SXGでAMPキャッシュをオリジンのURLで表示 Cookieの利用が可能 amp-listでCookieを利用してJSONを取得パーソナライズされたコンテンツの表示 AMPキャッシュのパーソナライズを実現！！ ※ SXG対応ブラウザは現状Android Chromeのみ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

63.

64.

AMPを使う際に気をつけること / AMPの活用と成果 AMPを使う際に気をつけること高速化・最適化への別の側面として、制限が厳しい - JavaScriptの実行が基本的に出来ない（AMP Validated時） amp-scriptは基本的にユーザーアクションが必要 - 自由度を奪うルールデザイン・実装における自由度を奪ってしまう無数のルール - AMPコンポーネントのJSアップデートがCDN上書きで行われるバグが混入した際のリスクヘッジが必要 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

65.

66.

まとめ PayPayモールの立ち上げを通して - スケジュール通りリリースできてよかった！！ - デザインシステムで統一性の高いUIを実現出来た - 高速化にも取り組むことが出来ている - AMPの活用からSXGでのパーソナライズまで実現出来た！ - Nuxtのhooks拡張によるアプローチもよかった - 優先順位を付けてマイルストーンを敷き、進捗にも意識を向けることで限られたリソースを最大化し、 AMPを活用した最適化にも挑戦出来たのでとても良い経験になった！！ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.

67.

68.

69.

70.

PayPayモールのAMP活用とデザインシステム / YJTC19 in Shibuya B-1 #yjtc

Yahoo!デベロッパーネットワーク

関連スライド

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで

ゼロから始める転移学習

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes

各ページのテキスト