コマースサービスのAMP活用

コマースサービスでの AMP活用 2019年9月3日 内藤 秀彦 YAHOO! JAPAN Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

自己紹介 内藤 秀彦 / Naito Hidehiko @innovate_7110 ヤフー株式会社 ショッピング統括本部 フロントエンドエンジニア / デザイナー 2 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

PayPayモール 厳選ストアが並ぶプレミアムな オンライン ショッピングモール Web版ではAMPコンポーネントを最大 限活用している 「PayPayモール」の 掲載商品は 両方に表示 * 画像はイメージです。 写真: アフロ YAHOO! ショッピング JAPAN 2019年 秋リリース source: https://s.yimg.jp/i/docs/ir/archives/present/2019q1/jp2019q1_presentation.pdf 3 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

AMP logo: https://amp.dev/

アジェンダ 1. AMPコンポーネント × デザインシステム Nuxt.jsを拡張してエコシステムを実現 2. amp-listを活用した例 amp-list, amp-mustache, amp-carouselで 非同期でJSONからcarouselを生成 5 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

AMPコンポーネント × デザインシステム YAHOO! JAPAN Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

PayPayモール デザインシステム 7 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

PayPayモール カラーコード カラーコードを定めて 統一性のあるビジュアルを実現 8 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

PayPayモール UIサンプル 要素間の余白を原則4pxの倍数とする ルールを定め統一性のあるUIを実現 レスポンシブなコンポーネントとするため、 マテリアルデザインの8pxの倍数の半分にあ たる4pxを採用 9 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

デザインシステムの要件 - コンポーネントを組み合わせて実装したい - AMPコンポーネントをベースにしたい - カラーコードや基底余白を変数管理したい など 10 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

Nuxt.jsの活用 - デザインシステムをVueコンポーネ ントで実現できる - generateで静的なページを生成可能 - hooksでビルドを拡張できる logo: https://github.com/nuxt/nuxt.js 11 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

AMPを取り込んだコンポーネント Atoms Molecules Organisms Image (amp-img) Item CarouselList (amp-list) propsでsrcなどを受け取れる Button BasicLabel Carousel (amp-carousel, slot) 12 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

ビルドの拡張 - 不要なタグ、属性の削除 - AMPページに必要な要素のインサート - CSSを1つにまとめ圧縮 → <style amp-custom> - ページ内で使用されているAMPコンポーネントに合わせ、 必要なスクリプトをインサート など、hooksにて拡張し AMP validatable なページを生成 13 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

amp-listを活用した例 YAHOO! JAPAN Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

amp-listとは Fetches content dynamically from a CORS JSON endpoint and renders it using a supplied template JSONのエンドポイントからコンテンツを取得し、 テンプレートからクライアントサイドでDOMを生 成できるコンポーネント source: https://amp.dev/documentation/components/amp-list/ 15 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

amp-listの特徴 - JSONから非同期にデータを取得してDOMを生成できる - mustache構文のtemplateベース - placeholder の付与だけでJSON取得中に表示する要素を指定できる - skeletonも簡単に実現できる - fallback の付与だけでJSON取得失敗時に表示する要素を指定できる - レスポンスのJSONで次のエンドポイントも指定することで、無限ス クロールも実現可能 16 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

amp-listの問題 amp-listは、 事前に高さを指定しなければならない そのため高さが可変になるUIの実現が難しい ※ ユーザーアクションをトリガーに高さを計算することは可能 17 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

amp-listの高さも可変に 「amp-listで高さを可変にする裏技」 https://qiita.com/7110/items/fe510f132289267513c1 18 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

JSONからDOMを生成 YAHOO! JAPAN Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

必要なコンポーネント <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js" ></script> amp-list <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" ></script> amp-mustache 20 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

JSONからDOMを生成 JSON amp-list amp-mustache DOM 21 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

JSONの構造
JSON
{
"list": [
{
"text": "Yahoo! JAPAN",
"href": "https://www.yahoo.co.jp/"
},
{
"text": "Yahoo!ショッピング",
"href": "https://shopping.yahoo.co.jp/"
},
{
"text": "ヤフオク!",
"href": "https://auctions.yahoo.co.jp/"
}
]
}
Tips
amp-listに以下の属性を付与すると
items="."
single-item
JSONのkeyをitemsから始めなくてもOK
22
Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

templateとamp-list
amp-mustache
<template id="yahoo-list" type="amp-mustache">
<ul>
{{#list}}
<li><a href="{{href}}">{{text}}</a></li>
{{/list}}
</ul>
</template>
amp-list
<amp-list
layout="fixed-height"
height="100"
items="."
single-item
template="yahoo-list"
src="/json/yahoo.json"
></amp-list>
templateのid と amp-listのtemplate で紐づける
23
Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

amp-listで生成されたDOM
• Yahoo! JAPAN
• Yahoo!ショッピング
• ヤフオク!
<template id="yahoo-list" type="amp-mustache">...</template>
<amp-list layout="fixed-height" height="100" items="." single-item
template="yahoo-list" src="/json/yahoo.json" class="i-amphtml-
element i-amphtml-layout-fixed-height i-amphtml-layout-size-defined
i-amphtml-layout" i-amphtml-layout="fixed-height" aria-live="polite"
style="height: 100px;">
<div role="list" class="i-amphtml-fill-content i-amphtml-
replaced-content">
<ul role="listitem">
<li>
<a target="_top" href="https://www.yahoo.co.jp/">Yahoo!
JAPAN</a> == $0
</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</amp-list>
24
Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

JSONから carouselを生成 YAHOO! JAPAN Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

必要なコンポーネント <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js" ></script> amp-list <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" ></script> amp-mustache <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" ></script> amp-carousel 26 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

JSONからcarouselを生成 JSON amp-list amp-mustache amp-carousel DOM 27 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

JSONの構造 JSON { "list": [ { "href": "#", "src": "https://dummyimage.com/300/eee/000", "title": "商品その1", "price": "7,110円" }, { "href": "#", "src": "https://dummyimage.com/300/eee/f00", "title": "商品その2", "price": "820円" }, { "href": "#", "src": "https://dummyimage.com/300/eee/0f0", "title": "商品その3", "price": "10,800円" }, ... ] } carouselに用いる href, src, title, priceを用意 28 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

template, amp-carouselとamp-list
amp-mustache
<template id="item-carousel" type="amp-mustache">
<amp-carousel type="carousel" layout="fixed-height" height="190" controls>
{{#list}}
<div>
<a href="{{href}}">
<div>
<amp-img
src="{{src}}"
layout="responsive"
width="150"
height="150"
noloading
></amp-img>
<p>{{title}}</p>
<p>{{price}}</p>
</div>
</a>
</div>
{{/list}}
</amp-carousel>
</template>
amp-list
<amp-list
layout="fixed-height"
height="190"
items="."
single-item
template="item-carousel"
src="/json/carousel.json"
></amp-list>
amp-carousel
29
Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

生成されたcarousel 300 x 300 商品その1 7,110円 300 x 300 商品その2 820円 300 x 300 商品その3 10,800円 300 x 300 商品その4 10,800円 300 x 300 商品その5 10,800円 商品 10,8 30 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

まとめ YAHOO! JAPAN Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

まとめ - amp-imgやamp-list, amp-carouselなど非常に便利なコン ポーネントがある - AMPキャッシュだけがAMPの醍醐味ではなく、チューニングさ れたコンポーネントで気軽にUIを実現できる点もメリットである - デザインシステムに乗せる上で、Nuxt.jsのgenerateをhooks でカスタムし、コンポーネントからテンプレを生成するのもあり - コマースサイトでも基本的な機能はAMPで十分実現できる！ 32 Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

ご清聴ありがとうございました。 YAHOO! JAPAN Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.