CINXE.COM

<!doctype html><html amp lang="ja" i-amphtml-binding i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="preload" href="/static/fonts/poppins-v5-latin-700.woff2" as="font" crossorigin><link rel="preload" href="/static/fonts/noto-sans-v7-latin-700.woff2" as="font" crossorigin><meta name="theme-color" content="#005af0"><meta name="robots" content="noindex,follow"><meta name="description" content="This sample demonstrates how you can implement a simple checkout page in AMP."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:description" content="This sample demonstrates how you can implement a simple checkout page in AMP."><meta name="twitter:title" content="実例：Checkout Flow"><meta name="twitter:creator" content="@ampproject"><meta name="twitter:site" content="@ampproject"><meta name="twitter:image" content="https://amp.dev/static/img/sharing/docs-example-600x314.png"><meta property="og:title" content="実例：Checkout Flow"><meta property="og:url" content="https://amp.dev/ja/documentation/examples/e-commerce/checkout_flow/"><meta property="og:image" content="https://amp.dev/static/img/sharing/docs-example-600x314.png"><meta property="og:image:width" content="600"><meta property="og:image:height" content="314"><meta name="supported-amp-formats" content="websites"><meta name="page-locale" content="ja"><meta http-equiv="origin-trial" content="AviuuiVhVdQ3GpVtxSpyMT+XsL/qGGYmyiyLvYSKPL3rRDLipe/ard5x+DXVlrATtolwX75VtpSKc9IEzLDd4AkAAABmeyJvcmlnaW4iOiJodHRwczovL2FtcC5kZXY6NDQzIiwiZmVhdHVyZSI6IkV4cGVyaW1lbnRhbEF1dG9wbGF5RHluYW1pY0RlbGVnYXRpb24iLCJleHBpcnkiOjE1NzA1Nzg0NDF9"><style amp-runtime i-amphtml-version="012406131415000">html{overflow-x:hidden!important}html.i-amphtml-fie{height:100%!important;width:100%!important}html:not([amp4ads]),html:not([amp4ads]) body{height:auto!important}html:not([amp4ads]) body{margin:0!important}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y pinch-zoom;touch-action:pan-y pinch-zoom}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}#i-amphtml-wrapper+body{visibility:visible}#i-amphtml-wrapper+body .i-amphtml-lightbox-element,#i-amphtml-wrapper+body[i-amphtml-lightbox]{visibility:hidden}#i-amphtml-wrapper+body[i-amphtml-lightbox] .i-amphtml-lightbox-element{visibility:visible}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}amp-instagram{padding:54px 0px 0px!important;background-color:#fff}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}amp-experiment,amp-live-list>[update]{display:none}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list [fetch-error],amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-list[diffable] div[role=list]{display:block}amp-story-page,amp-story[standalone]{min-height:1px!important;display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#000!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .amp-active>div,amp-story .i-amphtml-loader-background{display:none!important}amp-story-page:not(:first-of-type):not([distance]):not([active]){transform:translateY(1000vh)!important}amp-autocomplete{position:relative!important;display:inline-block!important}amp-autocomplete>input,amp-autocomplete>textarea{padding:0.5rem;border:1px solid rgba(0,0,0,.33)}.i-amphtml-autocomplete-results,amp-autocomplete>input,amp-autocomplete>textarea{font-size:1rem;line-height:1.5rem}[amp-fx^=fly-in]{visibility:hidden}amp-script[nodom],amp-script[sandboxed]{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden} /*# sourceURL=/css/ampdoc.css*/[hidden]{display:none!important}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;pointer-events:none}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][heights]:not([layout]):not(.i-amphtml-layout-responsive),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic,[layout=intrinsic][width][height]:not(.i-amphtml-layout-intrinsic){display:inline-block;position:relative;max-width:100%}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]:not(.i-amphtml-layout-fixed-height){display:block;position:relative}.i-amphtml-layout-fill,.i-amphtml-layout-fill.i-amphtml-notbuilt,[layout=fill]:not(.i-amphtml-layout-fill),body noscript>*{display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}body noscript>*{position:absolute!important;width:100%;height:100%;z-index:2}body noscript{display:inline!important}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}@supports (aspect-ratio:1/1){i-amphtml-sizer.i-amphtml-disable-ar{display:none!important}}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*,[width][height][heights]:not([layout]):not(.i-amphtml-element)>*,[width][height][sizes]:not([layout]):not(.i-amphtml-element)>*{display:none}amp-img:not(.i-amphtml-element)[i-amphtml-ssr]>img.i-amphtml-fill-content{display:block}.i-amphtml-notbuilt:not(.i-amphtml-layout-container),[layout]:not([layout=container]):not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){color:transparent!important;line-height:0!important}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder],[width][height][heights]:not([layout]):not(.i-amphtml-element)>[placeholder],[width][height][sizes]:not([layout]):not(.i-amphtml-element)>[placeholder]{display:block;line-height:normal}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}amp-img[i-amphtml-ssr]:not(.i-amphtml-element)>[placeholder]{z-index:auto}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden;display:initial;line-height:normal}.i-amphtml-layout-size-defined>[overflow]{position:absolute}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-analytics,amp-auto-ads,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}amp-story{visibility:hidden!important}html.i-amphtml-fie>amp-analytics{position:initial!important}[visible-when-invalid]:not(.visible),form [submit-error],form [submit-success],form [submitting]{display:none}amp-accordion{display:block!important}@media (min-width:1px){:where(amp-accordion>section)>:first-child{margin:0;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}:where(amp-accordion>section)>:last-child{margin:0}}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}amp-accordion,amp-accordion>section{margin:0}amp-accordion:not(.i-amphtml-built)>section>:last-child{display:none!important}amp-accordion:not(.i-amphtml-built)>section[expanded]>:last-child{display:block!important} /*# sourceURL=/css/ampshared.css*/</style><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-access-0.1.js" crossorigin="anonymous" custom-element="amp-access"></script><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async src="https://cdn.ampproject.org/v0/amp-animation-0.1.mjs" custom-element="amp-animation" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" crossorigin="anonymous" custom-element="amp-animation"></script><script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" crossorigin="anonymous" custom-element="amp-bind"></script><script async src="https://cdn.ampproject.org/v0/amp-consent-0.1.mjs" custom-element="amp-consent" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-consent-0.1.js" crossorigin="anonymous" custom-element="amp-consent"></script><script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-form-0.1.js" crossorigin="anonymous" custom-element="amp-form"></script><script async src="https://cdn.ampproject.org/v0/amp-geo-0.1.mjs" custom-element="amp-geo" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-geo-0.1.js" crossorigin="anonymous" custom-element="amp-geo"></script><script async src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.mjs" custom-element="amp-install-serviceworker" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js" crossorigin="anonymous" custom-element="amp-install-serviceworker"></script><script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-list-0.1.js" crossorigin="anonymous" custom-element="amp-list"></script><script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" crossorigin="anonymous" custom-template="amp-mustache"></script><script async src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.mjs" custom-element="amp-position-observer" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js" crossorigin="anonymous" custom-element="amp-position-observer"></script><script async src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.mjs" custom-element="amp-sidebar" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" crossorigin="anonymous" custom-element="amp-sidebar"></script><script async src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.mjs" custom-element="amp-user-notification" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js" crossorigin="anonymous" custom-element="amp-user-notification"></script><link rel="shortcut icon" href="/static/img/favicon.png"><link rel="canonical" href="https://amp.dev/ja/documentation/examples/e-commerce/checkout_flow/"><link rel="alternate" hreflang="x-default" href="https://amp.dev/documentation/examples/e-commerce/checkout_flow/"><title>実例：Checkout Flow - amp.dev</title><script type="application/ld+json">{"@context":"http://schema.org","@type":"Webpage","url":"https://amp.dev/ja/documentation/examples/e-commerce/checkout_flow/ ","name":"amp.dev","headline":"実例：Checkout Flow","description":"This sample demonstrates how you can implement a simple checkout page in AMP.","mainEntityOfPage":{"@type":"WebPage","@id":"https://amp.dev"},"publisher":{"@type":"Organization","name":"AMP Project","logo":{"url":"https://amp.dev/static/img/icons/icon-512x512.png","width":512,"height":512,"@type":"ImageObject"}},"image":{"@type":"ImageObject","url":"https://amp.dev/static/img/sharing/docs-example-600x314.png","width":600,"height":314}}</script><title>Checkout Flow</title><script id="amp-access" type="application/json">{"authorization":"/documentation/examples/api/amp-access/authorization?rid=READER_ID\u0026url=CANONICAL_URL\u0026ref=DOCUMENT_REFERRER\u0026_=RANDOM","noPingback":"true","login":{"sign-in":"/documentation/examples/api/amp-access/login?rid=READER_ID","sign-out":"/documentation/examples/api/amp-access/logout?rid=READER_ID"},"authorizationFallbackResponse":{"error":true,"loggedIn":false}}</script><style amp-custom>:root{--color-primary:#005af0;--color-secondary:#00dcc0;--color-text-light:#fff;--color-text-dark:#000;--color-error:#b00020;--color-bg-light:#fafafc;--space-1:.5rem;--space-2:1rem;--space-3:1.5rem;--space-4:2rem;--box-shadow-1:0 1px 1px 0 rgba(0,0,0,0.14),0 1px 1px -1px rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12)}.checkout-flow-sample{width:100vw;max-width:700px;padding:var(--space-2);box-sizing:border-box}#checkout-form>*+*,.checkout-flow-sample>*+*{margin-top:var(--space-2)}.checkout-section{min-width:300px;background:#fff;box-shadow:var(--box-shadow-1);padding:0 var(--space-2)}.checkout-section>*,.sub-section>*{display:block;width:calc(50% - var(--space-2));padding:0;margin:var(--space-2) 0;align-self:center}.checkout-section,.sub-section{display:flex;flex-wrap:wrap;background:var(--color-bg-light)}.checkout-section input{padding:var(--space-1)}.checkout-section>amp-list,.checkout-section>div,.checkout-section>form,.checkout-section>h3,.sub-section{width:100%}.checkout-section>h3{font-size:18px;font-weight:500;text-transform:uppercase;padding:0;margin:var(--space-2) 0}.shopping-cart .item:first-child{margin-bottom:var(--space-1)}.shopping-cart .item:last-child{margin-top:var(--space-1)}.shopping-cart .item{display:flex;justify-content:space-between}.shopping-cart .name{width:60%}.shopping-cart .price,.shopping-cart .quantity{display:block;text-align:right;min-width:72px;margin-left:var(--space-1)}.shopping-cart .summary .price,.shopping-cart .summary .quantity{margin:var(--space-1) 0 0 var(--space-1)}.list-reset{list-style:none;padding-left:0}@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Ubuntu Light"),local("Segoe UI Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Light Italic"),local("Segoe UI Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Italic"),local("Segoe UI Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium"),local("Segoe UI Semibold"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium Italic"),local("Segoe UI Semibold Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Segoe UI Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Segoe UI Bold Italic"),local("Tahoma Bold")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:400;font-display:optional;src:local("Noto Sans"),local("NotoSans"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff) format("woff")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:700;font-display:optional;src:local("Noto Sans Bold"),local("NotoSans-Bold"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff) format("woff")}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:optional;src:local("Poppins Bold"),local("Poppins-Bold"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff) format("woff")}@font-face{font-family:Fira Mono;font-style:normal;font-weight:400;font-display:optional;src:local("Fira Mono"),local("FiraMono"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff2) format("woff2"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff) format("woff")}*{box-sizing:border-box}body,html{padding:0;margin:0;min-width:240px;color:#48525c;background-color:#fff;font-size:16px;font-family:Noto Sans,system;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}@media(max-width:240px){body,html{font-size:14px}}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button{width:3em;height:3em;border-radius:50%;box-shadow:0 10px 15px 0 rgba(0,0,0,.4);transition:.4s;background-color:#fff;position:relative;box-sizing:border-box;margin:1em;border-style:none;background-position:50% 50%;background-repeat:no-repeat;z-index:10;pointer-events:all}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0' %3E%3Cpath d='M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button:hover{cursor:pointer;box-shadow:0 20px 30px 0 rgba(0,0,0,.2);background-color:#fff}:target:before{content:"";display:block;visibility:hidden;height:120px;margin-top:-120px}@media(min-width:1024px){h1:target:before{height:75px;margin-top:-75px}h2:target:before{height:81px;margin-top:-81px}h3:target:before{height:87px;margin-top:-87px}h4:target:before{height:90px;margin-top:-90px}h5:target:before{height:93px;margin-top:-93px}h6:target:before{height:97px;margin-top:-97px}}h1,h2,h3,h4,h5{margin-top:1.5rem;margin-bottom:.75em;font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}h1{font-size:2.2rem;margin-top:3rem}section.-t h1:first-of-type{margin-top:0}@media(min-width:768px){section.-t h1:first-of-type{margin-bottom:2rem}}h2{font-size:1.8rem;margin-top:2rem}h3{font-size:1.414rem;margin-top:1.8rem}h4{font-size:1.2rem}h5{font-size:1rem}.-t .intro,.ap--section .intro{font-size:1rem;padding:0}.-t .intro *,.ap--section .intro *{font-size:inherit}.-t p,.ap--section p{line-height:1.6rem;font-weight:400;color:#48525c;display:block;margin-top:1.1em;margin-bottom:0;font-size:1rem}.-t p small,.ap--section p small{font-size:.875rem}.-t code,.ap--section code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em}.-t code,.-t p,.ap--section code,.ap--section p{overflow-wrap:break-word}.-t a,.ap--section a{position:relative;z-index:10}.-t a code,.ap--section a code{color:#005af0;z-index:-1}.-t pre,.ap--section pre{font-family:Fira Mono,monospace;font-weight:500;font-size:1rem;white-space:pre-wrap}.-t>ol,.-t>ul,.ap--section>ol,.ap--section>ul{line-height:1.6rem;font-weight:400;color:#48525c;display:block;padding-left:2em;margin:1.5em 0}.-t>ol ol,.-t>ol ul,.-t>ul ol,.-t>ul ul,.ap--section>ol ol,.ap--section>ol ul,.ap--section>ul ol,.ap--section>ul ul{padding-left:2em;margin:0}.-t>ol li,.-t>ul li,.ap--section>ol li,.ap--section>ul li{padding-left:.5em}.-t>ol li p,.-t>ul li p,.ap--section>ol li p,.ap--section>ul li p{font-size:1em}.-t figure figcaption,.ap--section figure figcaption{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;margin-top:.3em}.-t hr,.ap--section hr{height:1px;margin:.75em 0;background-color:#ebebf0;border:none}.-n{display:flex;align-items:center;text-decoration:none;padding:0 0 1.5em;margin:0}.-r{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;color:#005af0;line-height:1.3;transition:transform .3s ease}.-i{fill:#005af0;padding:.438em 0;margin-bottom:auto;margin-right:.625em;box-sizing:initial;transition:transform .3s ease}.-n:hover .-i,.-n:hover .-r{transform:translateX(10px)}.-s{border-bottom:1px solid #ebebf0}.-s .-r{font-size:1rem;font-family:Poppins,system;font-weight:700;color:#000;padding-left:10px}.-s .-i{width:1.375em;height:1.375em;fill:#fff;background-color:#005af0;overflow:hidden;padding:.563em}.-s .-i,.-s:hover .-i{box-shadow:0 10px 20px 0 rgba(0,0,0,.25)}.-s:hover .-i svg{animation:duepduep .3s ease}a{font-weight:700;text-decoration:none;color:#005af0}a code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}.ap-a-ico{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:1em;height:1em}.-o{right:20px;left:auto;bottom:20px;width:calc(100% - 40px);padding:15px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;background-color:#fff;box-shadow:0 15px 30px 0 rgba(0,0,0,.15);border-radius:8px}@media(min-width:768px){.-o{max-width:500px}}.-u{position:absolute;right:15px;top:15px;-webkit-appearance:none;background-color:transparent;border:none;padding:0}.-u svg{width:10px;height:10px}.-o button{cursor:pointer}.ap-o-translation-hint{position:fixed;z-index:100;width:100%;left:0;bottom:0}@media(max-width:767px){.ap-o-translation-hint{display:none}}.ap-o-translation-hint-wrapper{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;max-width:1440px;margin:0 auto;padding:1em 30px;background-color:#fff;border-top:5px solid #ffdc00;box-shadow:0 -2px 10px 0 rgba(0,0,0,.07)}.ap-o-translation-hint-link{display:inline-block}.-av+.ap-o-translation-hint{bottom:25px}.ap--footer{position:relative;z-index:15;padding:3em 0 2em;line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem;color:#fff;background:linear-gradient(45deg,#48525c,#20202a)}.-a{width:100%;max-width:1440px;padding:0 20px;margin:0 auto}.-f{padding-bottom:4em}@media(min-width:768px){.-f{display:flex;align-items:center}}.-l{display:flex;flex-direction:column;margin-left:auto}@media(min-width:1024px){.-l{flex-direction:row}}.-c{margin:3em 2em 1em 0;color:#fff}@media(min-width:768px){.-c{margin:auto 2em auto 1em}}.-h{display:flex;list-style:none;padding:0;margin:0}.-p{flex:1 0 auto}@media(min-width:768px){.-p{margin:16px}}.-d{width:2.5em;height:2.5em;fill:#fff}@media(max-width:240px){.-d{font-size:14px}}@media(min-width:768px){.-v{display:grid;grid-gap:30px;grid-template-columns:repeat(12,1fr)}}.-m{flex:1 1 100%}.-m:nth-child(odd){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(odd){grid-column:span 6}}.-m:nth-child(2n+2){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(2n+2){grid-column:span 6}}.-g{color:#fff}.-y{list-style:none;padding:0}@media(min-width:768px){.-y+.-g{margin-top:2.5em}}.-b{position:relative}.-w{padding-left:35px;font-size:.8125rem;color:#fff}.-x{position:absolute;left:10px;top:8px;width:12px;height:12px;fill:#fff}.-k{display:flex;flex-direction:column;padding-top:4em}@media(min-width:768px){.-k{flex-direction:row;align-items:flex-end}}.-_{width:50%;max-width:200px;margin-bottom:40px;margin-right:auto}@media(min-width:768px){.-_{margin-bottom:0}}.-j{list-style:none;padding:0;margin:0}.-q{display:inline-block;margin-right:1em}.-z{font-size:.8125rem;font-weight:400;color:#fff}.-te{display:block;font-size:.875rem;margin-top:2em;color:#e2e5e6}.-te a{color:#fafafc}.ap-m-format-toggle{position:-webkit-sticky;position:sticky;top:0;margin:0 10px;padding:10px 0 0;width:100%;max-width:85%;z-index:12}@media(min-width:768px){.ap-m-format-toggle{padding:0;margin:0 15px 0 0;max-width:100%}}.ap-m-format-toggle-selected{border:0}.amp-mode-touch .ap-m-format-toggle-selected{position:relative}.ap-m-format-toggle-selected:focus:after,.ap-m-format-toggle-selected:hover:after{position:absolute;top:0;left:0;content:"";display:block;height:300%;width:100%}.ap-m-format-toggle-link,.ap-m-format-toggle-selected{z-index:3;display:flex;align-items:center;width:100%;margin:0 0 2px;padding:5px 8px;overflow:hidden;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Poppins,system;font-weight:700;font-size:12px;text-align:left;border-radius:4px;color:#000;background:#ebebf0;transition:opacity .2s ease;box-shadow:0 5px 15px -5px rgba(0,0,0,.25)}.ap-m-format-toggle-link .ap-a-ico,.ap-m-format-toggle-selected .ap-a-ico{width:14px;height:14px;margin-right:8px;fill:#000}.ap-m-format-toggle-link{color:#000;background:#ebebf0}.ap-m-format-toggle-link .ap-a-ico{fill:#000}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected,.ap-m-format-toggle-link-websites:hover{background:linear-gradient(225deg,#00dcc0,#005af0 75%);color:#fff}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-websites:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected,.ap-m-format-toggle-link-stories:hover{background:linear-gradient(225deg,#ec6600,#ffdc00 75%);color:#20202a}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-stories:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected,.ap-m-format-toggle-link-ads:hover{background:linear-gradient(225deg,#eb49e1,#5500d7 75%);color:#fff}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-ads:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected,.ap-m-format-toggle-link-email:hover{background:linear-gradient(225deg,#09a600,#e1eb64 75%);color:#20202a}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-email:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-angle{margin-right:0;margin-left:auto}.ap-m-format-toggle-formats{position:absolute;width:100%;z-index:2;pointer-events:none;opacity:0;transform:translateY(-20px);transition:all .2s ease;transition-delay:.05s}.ap-m-format-toggle-formats:focus-within,.ap-m-format-toggle-formats:hover,.ap-m-format-toggle-selected:focus+.ap-m-format-toggle-formats,.ap-m-format-toggle-selected:hover+.ap-m-format-toggle-formats{pointer-events:auto;opacity:1;transform:translateY(0)}body{top:0;left:0;background-repeat:no-repeat;background-size:100% auto;background-position:100% 0;background-attachment:fixed}body.ap--websites{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' y1='855.23' x2='606.28' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d5e6f2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--ads{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ddd3eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--stories{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ebdfd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--email{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d7ebd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}.ap--ampsidebar{width:100%;max-width:90vw;background:#fafafc}.ap--ampsidebar-toolbar{top:86px;height:100vh;max-height:calc(100vh - 86px)}@media(min-width:768px){.ap--ampsidebar-toolbar{position:-webkit-sticky;position:sticky;overflow:auto}}.ap--ampsidebar-toolbar>ul{-webkit-overflow-scrolling:touch;margin:0;padding:0}@media(min-width:768px){.ap--ampsidebar-toolbar>ul{overflow:auto;max-height:100%}}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar{width:6px;height:6px}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-corner{background-color:transparent}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}.ap-o-sidebar-default{max-width:100%}@media(min-width:768px){.ap-o-sidebar-default .ap-o-sidebar{width:auto;min-height:400px;padding-bottom:0;margin-right:0;margin-left:-10px;background:0 0;box-shadow:none}}.ap-o-sidebar-default .nav{margin:15px 0 0;padding-bottom:15px}.ap-o-sidebar-default .nav-list{max-width:300px;list-style:none;padding:0;margin:0}.ap-o-sidebar-default .nav-list.level-1{margin:0 15px}.ap-o-sidebar-default .nav-list .nav-list{display:none;margin-bottom:20px}.ap-o-sidebar-default .nav-item{position:relative;margin:0;padding:0}.ap-o-sidebar-default .nav-item.level-1{border-bottom:1px solid rgba(0,0,0,.15)}.ap-o-sidebar-default .nav-item.level-1:last-child{border-bottom:none}.ap-o-sidebar-default .nav-item.level-1 .nav-link{padding:10px 25px 10px 20px;text-transform:uppercase;font-size:1.125rem;font-family:Poppins,system;font-weight:700;color:#000}.ap-o-sidebar-default .nav-item.level-1 .nav-icon,.ap-o-sidebar-default .nav-item.level-1 .nav-trigger{height:46px}.ap-o-sidebar-default .nav-item.level-1 .nav-icon .ap-a-ico{margin-top:16px}.ap-o-sidebar-default .nav-item.level-2 .nav-link{padding:7px 25px 8px 20px;text-transform:unset;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Noto Sans,system;font-size:.875rem;line-height:1.4em}.ap-o-sidebar-default .nav-item.level-2 .nav-icon,.ap-o-sidebar-default .nav-item.level-2 .nav-trigger{height:33px}.ap-o-sidebar-default .nav-item.level-2 .nav-icon .ap-a-ico{width:10px;height:10px;margin-top:10px}.ap-o-sidebar-default .nav-item.level-3{margin-left:24px}.ap-o-sidebar-default .nav-item.level-3 .nav-link{padding:7px 25px 8px 20px;font-size:.8125rem}.ap-o-sidebar-default .nav-item.level-3.active{background:rgba(51,61,71,.1);border-radius:4px}.ap-o-sidebar-default .nav-item.active>.nav-link{font-weight:700;color:#005af0}.ap-o-sidebar-default .nav-item:hover>.nav-link{color:#005af0}.ap-o-sidebar-default .nav-item-tutorial-divider{border-bottom:1px dashed rgba(0,0,0,.15)}.ap-o-sidebar-default .nav-item-tutorial-divider:first-child,.ap-o-sidebar-default .nav-item-tutorial-divider:last-child{display:none}.ap-o-sidebar-default .nav-link{position:relative;display:block;padding:0;margin:0;color:rgba(0,0,0,.75);border:none;background-color:transparent}.ap-o-sidebar-default .nav-link-lastword{white-space:nowrap}.ap-o-sidebar-default .nav-icon,.ap-o-sidebar-default .nav-trigger{position:absolute;top:0;width:20px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer}.ap-o-sidebar-default .nav-trigger{-webkit-appearance:none;z-index:1}.ap-o-sidebar-default .nav-trigger:checked~ul{display:block}.ap-o-sidebar-default .nav-trigger:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.ap-o-sidebar-default .nav-trigger:focus{outline:1px dotted #212121;outline:5px auto -webkit-focus-ring-color}.ap-o-sidebar-default .nav-icon .ap-a-ico{width:12px;height:12px;transform:rotate(-90deg)}.ap-o-sidebar-default .nav-type-icon{display:inline-block;vertical-align:top;width:20px;height:20px;margin-left:6px}.ap-o-sidebar-default .nav span.nav-link+.nav-trigger{width:calc(100% + 15px)}ul.ap-o-mini-card-list{display:flex;flex-wrap:wrap;justify-content:space-between;list-style:none;margin:0;max-width:1440px;padding:0;position:relative;width:100%}.ap-o-mini-card-list-item{margin-bottom:1.25rem;padding-left:0;transition:transform .3s ease}.ap-o-mini-card-list-item:hover{transform:translateY(-.125em)}.ap-o-mini-card-list-item:hover>.ap-m-mini-card{box-shadow:0 15px 25px 0 rgba(0,0,0,.05)}.ap-m-mini-card{line-height:1.6rem;font-weight:400;color:#48525c;position:relative;display:flex;align-items:center;flex-direction:row;padding:8px 16px 8px 8px;margin:0 0 10px;box-shadow:0 5px 15px -3px rgba(0,0,0,.07);transition:box-shadow .3s ease;background:#fff}.ap-m-mini-card amp-img{width:35px;display:inline-block;border:1px solid #ebebf0;border-radius:100%}.ap-m-mini-card amp-img.large{width:38px;flex-shrink:0}.ap-m-mini-card span{padding-left:10px;line-height:1.3em}.ap-m-mini-card strong{font-weight:700}@media(max-width:374px){.ap-m-mini-card{font-size:.75em}}.ap-a-img{position:relative}.image-preview-1 .ap-a-img{overflow:hidden;border-radius:50%}.image-preview-2 .ap-a-img{margin-right:-30px;filter:drop-shadow(0 30px 30px -15px rgba(0,0,0,.25))}@media(min-width:768px){.image-preview-2 .ap-a-img{margin-right:0}}.-so{display:block;width:100%;height:1px;margin-bottom:.813em;background-color:#fafafc}@media(min-width:768px){.-so{display:none}.-su{display:block}}.-li{padding:84px 15px 0}@media(min-width:768px){.-li{padding-left:0;padding-right:0}}.-ls{margin-bottom:.75em;font-size:1.8rem;margin-top:2rem;padding:20px 0}.-ls,.-lo{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}.-lo{margin-top:1.5rem;font-size:1.2rem;padding-left:20px;margin-bottom:0}.-lu{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}.-la{display:block;background-color:#ebebf0;height:1px;margin:30px 20px 30px 0}.ap-m-tip{display:flex;padding:15px;margin-bottom:20px;border-radius:4px;background-color:#ebebf0;border:1px solid #e2e5e6}@media(min-width:768px){.ap-m-tip{padding:30px}}.ap-m-tip code{white-space:normal}.ap-m-tip-icon{width:36px;height:36px;margin-top:5px;margin-right:14px}@media(min-width:768px){.ap-m-tip-icon{margin-right:26px}}.ap-m-tip-content{font-size:.875rem;min-width:0}.ap-m-tip-content h4{font-size:1rem;margin:0 0 .75em}.ap-m-tip-content ol,.ap-m-tip-content p,.ap-m-tip-content ul{font-size:.875rem}.ap-m-tip-content ol:first-child,.ap-m-tip-content p:first-child,.ap-m-tip-content ul:first-child{margin-top:0}.ap-code-preview,.ap-o-code-preview{position:relative;margin:1rem 0;background:#20202a}.ap-code-preview-controls,.ap-o-code-preview-controls{width:100%;display:flex;justify-content:center;align-items:center;margin:0 auto;padding:9px 0}.ap-code-preview-controls-button,.ap-o-code-preview-controls-button{-webkit-appearance:none;background-color:transparent;border:none;position:relative;padding:6px;cursor:pointer}.ap-code-preview-controls-icon,.ap-o-code-preview-controls-icon{width:22px;height:22px;fill:#fff;opacity:.6;transition:opacity .25s ease-out}.ap-code-preview-controls-button:focus .ap-code-preview-controls-icon,.ap-code-preview-controls-button:focus .ap-o-code-preview-controls-icon,.ap-code-preview-controls-button:hover .ap-code-preview-controls-icon,.ap-code-preview-controls-button:hover .ap-o-code-preview-controls-icon,.ap-o-code-preview-controls-button:focus .ap-code-preview-controls-icon,.ap-o-code-preview-controls-button:focus .ap-o-code-preview-controls-icon,.ap-o-code-preview-controls-button:hover .ap-code-preview-controls-icon,.ap-o-code-preview-controls-button:hover .ap-o-code-preview-controls-icon{opacity:1}.ap-code-preview-preview,.ap-o-code-preview-preview{position:relative;top:1em;margin:1em;background:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}@media(min-height:768px){.ap-code-preview-preview+div.-ta,.ap-o-code-preview-preview+div.-ta{min-height:0}}.ap-code-preview-preview-iframe,.ap-o-code-preview-preview-iframe{display:flex;justify-content:center;position:relative;margin:0 1em}@media screen and (max-width:412px){.ap-code-preview-preview-iframe amp-iframe,.ap-o-code-preview-preview-iframe amp-iframe{width:240px;height:427px}}@media screen and (min-width:413px){.ap-code-preview-preview-iframe amp-iframe,.ap-o-code-preview-preview-iframe amp-iframe{width:320px;height:569px}}.ap-code-preview-top-preview,.ap-o-code-preview-top-preview{position:relative;padding:0 1em;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:start}@media(min-width:1024px){.ap-code-preview-top-preview,.ap-o-code-preview-top-preview{padding:0 15%}}.ap-code-preview-top-preview+div.-ta,.ap-o-code-preview-top-preview+div.-ta{position:relative;width:100%;min-height:0;padding:1em 1em 0;margin-top:0}.ap-code-preview-top-preview amp-iframe,.ap-o-code-preview-top-preview amp-iframe{align-self:center}.ap-code-preview-side-preview,.ap-o-code-preview-side-preview{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;padding:0;margin:0}@media(min-width:768px){.ap-code-preview-side-preview,.ap-o-code-preview-side-preview{width:auto;left:60%;background-color:#1c1c24}}@media(max-width:767px){.ap-code-preview-side-preview,.ap-o-code-preview-side-preview{overflow:hidden;pointer-events:none}.ap-code-preview-side-preview-active,.ap-o-code-preview-side-preview-active{pointer-events:auto}}.ap-code-preview-side-preview-frame,.ap-o-code-preview-side-preview-frame{position:absolute;max-height:100%;right:15px;top:auto;background-color:#fff}@media(max-width:767px){.ap-code-preview-side-preview-frame,.ap-o-code-preview-side-preview-frame{position:static;background:#fff;pointer-events:none;transform:translateY(100%);transition:transform .2s cubic-bezier(0,0,.3,1)}.ap-code-preview-side-preview-frame.show,.ap-o-code-preview-side-preview-frame.show{transform:translateY(0);pointer-events:auto;height:100%}}.ap-code-preview-iframe,.ap-o-code-preview-iframe{background:#fff;margin-bottom:1em}.ap-code-preview.side-frame .-ta,.ap-code-preview.top-frame .-ta,.ap-o-code-preview.side-frame .-ta,.ap-o-code-preview.top-frame .-ta{min-height:150px;max-height:450px}.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{width:100%;margin:0;background:0 0}@media(min-width:768px){.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{width:60%;min-height:580px}}@media(min-width:1024px){.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{min-height:738px}}@media(min-width:1280px){.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{min-height:842px}}@media(min-width:1441px){.ap-code-preview.side-frame .-ta,.ap-o-code-preview.side-frame .-ta{min-height:746px}}.ap-a-btn{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1em;color:#fff;display:inline-block;max-width:100%;width:auto;height:auto;padding:.75em 1.75em;margin:0;text-decoration:none;text-align:center;border-radius:3px;background-color:#005af0;border:none;cursor:pointer;box-shadow:0 15px 35px -5px rgba(0,0,0,.25);transition:transform .3s ease,box-shadow .3s ease}.ap-a-btn:hover{transform:translateY(-.125em);box-shadow:0 25px 20px -15px rgba(0,0,0,.15)}@media(min-width:768px){.ap-a-btn{padding:1em 2em}}.ap-breadcrumbs,.-ue{display:flex;align-items:center;font-family:Poppins,system;font-weight:700;font-size:.8125rem}.ap-breadcrumbs-angle,.-ut{width:10px;height:10px;margin:0 6px;transform:rotate(-90deg)}.ap-a-format-tag{display:inline-block;padding:0 12px;border-radius:14px;font-family:Poppins,system;font-weight:700;color:#fff}.ap-a-format-tag-websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.ap-a-format-tag-stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%);color:#20202a}.ap-a-format-tag-ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.ap-a-format-tag-email{background:linear-gradient(225deg,#09a600,#e1eb64 75%);color:#20202a}.ap--toc{width:100%}@media(min-width:1024px){.ap--toc{background:0 0;box-shadow:none;padding-right:10px}}.ap-o-toc{--spacing-top:90px;position:relative;z-index:1;top:0;right:0;width:calc(100% - 20px);overflow-y:auto;-webkit-overflow-scrolling:touch;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07);border-radius:8px;padding:15px;margin-bottom:10px}.ap-o-toc::-webkit-scrollbar{width:6px;height:6px}.ap-o-toc::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap-o-toc::-webkit-scrollbar-corner{background-color:transparent}.ap-o-toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}@media(min-width:768px){.ap-o-toc{width:100%}}@media(min-width:1024px){.ap-o-toc{position:-webkit-sticky;position:sticky;z-index:1;padding:0 10px 0 0;margin:0;height:auto;top:var(--spacing-top);right:auto;padding-bottom:var(--spacing-top);background:0 0;box-shadow:none;overflow-y:scroll;max-height:calc(100vh - var(--spacing-top))}}.ap-o-toc-hl{font-family:Poppins,system;font-weight:700;cursor:pointer;width:100%;margin-bottom:0}@media(min-width:1024px){.ap-o-toc-hl{margin-bottom:10px}}.ap-o-toc-toggle{display:flex;align-items:center;justify-content:space-between;outline:0}@media(min-width:1024px){.ap-o-toc-toggle{position:-webkit-sticky;position:sticky;top:0;background:#fafafc}}.ap-o-toc ul{list-style:none;margin:0;padding:0;transition:.4s}.ap-o-toc ul>li a{display:block;padding-bottom:20px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;font-weight:700;line-height:1rem}.ap-o-toc ul>li>ul{padding-left:10px;text-transform:none}.ap-o-toc ul>li>ul li a{font-weight:400}@media(max-width:1023px){.ap-o-toc .-un:not(:checked)+ul{display:none;transition:.2s}.ap-o-toc .-un:checked+ul{margin-top:15px}}.ap-o-toc .nav-icon svg{width:15px;height:15px}@media(min-width:1024px){.ap-o-toc .nav-icon{display:none}}.ap-o-toc .nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.ap-o-toc.contentmenuopen .nav-icon .ap-a-ico{transform:rotate(0)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur{animation:moveSidebarToggleBackwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur .label-icon svg{transform:rotate(180deg)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur .label-title{transform:translateX(0) scaleX(1);transform-origin:left center}#sidebar-left[open]~.ap--main .-ur{left:0;margin-left:0;animation:moveSidebarToggleForwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[open]~.ap--main .-ur .label-icon svg{transform:rotate(0)}#sidebar-left[open]~.ap--main .-ur .label-title{transform:translateX(-150vw) scaleX(0);transform-origin:left center}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ur,#sidebar-left[open]~.ap--main .-ur{z-index:9999999999}.-ui{position:absolute;top:50px}.-us{position:fixed;top:-99px}.-uo{position:fixed;z-index:15;font-size:12px;font-family:Poppins,system;font-weight:700;color:#fff;fill:#fff;cursor:pointer;display:flex;align-items:center}.-uo .label-icon{border-radius:4px;background:#005af0;height:35px;width:32px;padding-left:2px;display:flex;justify-content:center;align-items:center;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);z-index:1}.-uo .label-icon svg{height:14px;width:14px;transition:transform .233s cubic-bezier(0,0,.21,1)}.-uo .label-title{left:32px;display:flex;align-items:center;height:35px;margin-left:-5px;padding:5px 10px 5px 5px;white-space:nowrap;border-radius:0 4px 4px 0;background:#005af0;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);transform:scaleX(0);transform-origin:left;transition:transform .233s cubic-bezier(0,0,.21,1)}.-uu{position:fixed;top:-99px}.-ur{margin-top:-52px;margin-left:-25px}@media(min-width:768px){.-ur{display:none}}.-ur .label-icon svg{transform:rotate(180deg)}.-ua{display:none}.-uf{position:fixed;top:-99px}.-ul{display:none}@media(min-width:768px)and (max-width:1440px){.-ua{display:inline-block}.-ul{position:-webkit-sticky;position:sticky;top:138px;display:inline-flex;transform:translate(-40px,-52px)}.-uf:checked~.-uc{grid-column:1/2}.-uf:checked~.-uc nav{display:none}.-uf:checked~.-uc svg{transform:rotate(180deg)}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-uf:checked~.ap--toc{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-uf:checked~.ap--toc~.-t{padding-left:80px;padding-right:80px;grid-column:2/20}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-uf:checked~.ap--toc~.-t{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-uf:checked~.-t,.-uf:checked~.ap--help{grid-column-start:2;padding-left:80px;padding-right:80px}.-uf:checked~.-t .-ul,.-uf:checked~.ap--help .-ul{margin-left:-88px}.-uf:checked~.-t .-ul .label-icon svg,.-uf:checked~.ap--help .-ul .label-icon svg{transform:rotate(180deg)}}.-lf{display:none}.-ll.amp-active~.-lf{height:42px;max-width:2020px;margin:0 auto;color:#fff;background-color:#20202a;font-size:.875rem;z-index:100;position:absolute;width:100%;left:0;right:0}@media(min-width:768px){.-ll.amp-active~.-lf{display:block}}.-ll.amp-active~.-lf .-lc{position:relative;display:flex;align-items:center;width:100%;height:100%;max-width:1440px;padding:0 30px;margin:0 auto}@media(min-width:1024px){.-ll.amp-active~.-lf .-lc{padding:0 15px}}.-ll.amp-active~.-lf .-lc:after{position:absolute;content:"";top:42px;left:50px;width:0;height:0;border-color:#20202a transparent transparent;border-style:solid;border-width:8px 10px 0}.-ll.amp-active~.-lf .-lh{flex:1 0;padding-right:10px}.-ll.amp-active~.-lf .-lp{height:20px;width:20px;background-color:transparent;border:0;cursor:pointer;padding:3px}.-ll.amp-active~.-lf .-lp svg{fill:#fff;width:100%;height:100%}.ap-o-burger-menu{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;padding:110px 20px 80px;z-index:16;background-color:#fff}@media(max-width:240px){.ap-o-burger-menu{padding:37px 20px 0}.has-banner~.ap-o-burger-menu{padding:calc(37px + 31px) 0 0 20px}}.ap-o-burger-menu-label{position:fixed;z-index:1001;top:12px;right:20px;cursor:pointer}.ap-o-burger-menu-label.mainmenuopen{z-index:1004}.has-banner+.ap-o-burger-menu-label{top:calc(12px + 31px)}.amp-hidden+.has-banner+.ap-o-burger-menu-label,amp-user-notification[hidden]+.has-banner+.ap-o-burger-menu-label{top:12px}@media(min-width:768px){.ap-o-burger-menu-label{right:30px}}@media(min-width:1024px){.ap-o-burger-menu-label{display:none}}.ap-o-burger-menu-icon{width:30px;height:30px}@media(min-width:1024px){.ap-o-burger-menu{display:none}}.ap-o-burger-menu.mainmenuopen{display:block;z-index:1003}.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px)}.has-banner+.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px - 31px)}.ap-o-burger-menu.mainmenuopen~.ap--footer{display:none}.-th{list-style:none;display:flex;flex-direction:column;height:100%;margin:1rem 0 0;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(max-width:240px){.-th{padding:1rem 0}}.-th .-th{margin-top:1rem}.-th .-th .-tp:last-child{margin-bottom:0}.-tp{margin-bottom:1rem;position:relative}.-tp:last-child{margin-top:auto}.-tp ul{display:none}.-td{position:absolute;left:0;top:0;width:100%;height:36px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer;-webkit-appearance:none}.-td:focus{outline:5px auto -webkit-focus-ring-color}.-td:checked~ul{display:block}.-td:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.-td+.nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.-tp .ap-a-ico{height:.6em;margin-bottom:.3em;margin-left:.3em;width:.6em}.-tv{position:relative;margin-right:20px;padding-bottom:10px;display:none}@media(max-width:240px){.-tv{margin-right:0}}@media(min-width:1024px){.-tv{margin-right:0;padding-right:30px;display:block}}.-tm{display:flex;align-items:center;font-size:11px;border:none;background:0 0}.-tm:hover{color:#005af0}.-tg{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;border:0;-webkit-appearance:none}@media(min-width:1024px){.-tg{width:calc(100% - 30px)}}.-ty{width:10px;height:10px;margin-left:5px}.-tb{list-style:none;display:none;position:absolute;right:15%;margin:0;padding:2px 8px;background:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}@media(max-width:240px){.-tb{overflow:auto;max-height:calc(100vh - 55px - 31px)}}.-tb:hover,.-tg:checked~.-tb,.-tg:hover~.-tb,.-tv .-tw{display:block}.-tb:focus-within{display:block}.mainmenuopen .-tv{display:block}.-tw{font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#000}@media(min-width:1024px){.-tw{font-size:1rem}}.-tx{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}@media(min-width:1024px){.-tx{font-size:.875rem}}.-tx.active{text-decoration:underline}.-tw:hover{color:#005af0}.-tw.active{font-weight:700;color:#005af0}.ap--header{width:100%;max-width:2020px;margin:0 auto;position:-webkit-sticky;position:sticky;top:0;z-index:1001;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}.ap--header.mainmenuopen{z-index:1004}.ap--header.mainmenuopen~.ap--main{max-width:100vw;overflow-x:hidden}@media(min-width:1024px){.ap--header{top:0}.ap--header.has-banner{top:-31px}}.ap-o-header{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;max-width:1460px;padding:10px 0 0 20px;margin:0 auto}@media(min-width:1024px){.ap-o-header{display:flex;padding-left:30px}}.ap-o-header-home{position:-webkit-sticky;position:sticky;top:10px;display:flex;align-items:center;margin-right:auto;padding-bottom:10px;overflow:hidden}.ap-o-header-home-logo{height:30px;margin-right:6px;width:30px}.ap-o-header-home-sub-title,.ap-o-header-home-title{margin-left:4px;font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#005af0}@media(min-width:1024px){.ap-o-header-home-sub-title,.ap-o-header-home-title{font-size:1.125rem}}.ap-o-header-home-sub-title{color:#000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ap-o-header-main{display:none;flex:1 1 auto;padding:0 30px}@media(min-width:1024px){.ap-o-header-main{display:flex}}.ap-o-header-main-item{position:relative;display:flex;align-items:center;margin:0 18px -5px}.ap-o-header-main-link{display:flex;align-items:center;padding:0 0 14px;border:0;background:0 0}.ap-o-header-main-link-icon{font-size:8px;margin-left:5px;transform:rotate(0);transition:transform .2s ease}.ap-o-header-flyout:hover,.ap-o-header-main-link:focus~.ap-o-header-flyout,.ap-o-header-main-link:hover~.ap-o-header-flyout{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout:focus-within{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);position:absolute;top:95%;left:0;margin:0;padding:0 0 10px;pointer-events:none;opacity:0;list-style:none;background:#fff;border-radius:0 0 4px 4px;transition:opacity .2s ease}.ap-o-header-flyout:before{content:"";display:block;background:linear-gradient(180deg,rgba(0,0,0,.07) 0,hsla(0,0%,100%,.07));height:8px;margin-bottom:10px}.ap-o-header-flyout-item-secondary{margin:20px 0;white-space:nowrap;min-width:200px}.ap-o-header-flyout-item-secondary a:hover{color:#005af0}.ap-o-header-flyout-item-title{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-family:Poppins,system;font-weight:700;color:#000;line-height:1.4em}.ap-o-header-flyout-item-title.secondary{padding:0 15px}.ap-o-header-flyout-item-description{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;opacity:.75;line-height:1.25em}.ap-o-header-flyout-primary-item{position:relative;width:300px}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);background-color:#005af0}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info>*{color:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon{fill:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.email,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.stories{fill:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.email{background:linear-gradient(225deg,#09a600,#e1eb64 75%)}.ap-o-header-flyout-primary-item-link{display:flex;align-items:center;border-radius:4px;padding:10px;margin:0 5px}.ap-o-header-flyout-primary-item-link-info{margin:0 20px 0 15px}.ap-o-header-flyout-primary-item-link-icon{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:2em;height:2em}.ap-o-header-flyout-primary-item-link-icon.websites{fill:url(#gradient-websites) #000}.ap-o-header-flyout-primary-item-link-icon.stories{fill:url(#gradient-stories) #000}.ap-o-header-flyout-primary-item-link-icon.ads{fill:url(#gradient-ads) #000}.ap-o-header-flyout-primary-item-link-icon.email{fill:url(#gradient-email) #000}#blm-banner{background:#111;color:#eee;display:block;text-align:center;padding:.5em}.ap--main>.-tf:first-child{padding-top:54px;padding-bottom:3rem}.-ce .-tf{position:relative;display:flex;flex-wrap:wrap;width:100%;max-width:1440px;padding:0 20px;margin-left:auto;margin-right:auto}@media(max-width:767px){.-ce .-tf{padding:0 15px}.-ce .-tf>div,.-ce .-tf section{min-width:0}}@media(min-width:768px){.-ce .-tf{display:grid;grid-gap:30px;grid-template-columns:repeat(24,minmax(0,1fr));padding:0 30px;grid-gap:0}}@media(min-width:1024px){.-ce .-tf{padding:0 15px}}.-ce .-t,.-ce .ap--help{grid-column:1;position:relative;width:100%;background:#fafafc}@media(min-width:768px){.-ce .-t,.-ce .ap--help{grid-column:9/25}}@media(min-width:1024px){.-ce .-t,.-ce .ap--help{grid-column:7/25}.-ce .-t p.limit,.-ce .ap--help p.limit{max-width:70%}}@media(min-width:768px){.-ce .-t,.-ce .ap--help{grid-column:8/25;padding-left:30px;padding-right:30px}}@media(min-width:1024px){.-ce .-t,.-ce .ap--help{grid-column:6/25;padding-left:30px;padding-right:30px}}.-ce .-ct{display:flex;flex-wrap:wrap;margin-bottom:60px}@media(min-width:768px){.-ce .-ct{flex-wrap:nowrap}}.-ce .-ct .ap-a-btn{flex:1 0 auto;margin-right:10px;margin-bottom:10px}@media(min-width:768px){.-ce .-ct .ap-a-btn{flex:1 0 50%;max-width:250px}}@media(max-width:767px){.-ce .-cn{display:none}}.-ce .-cr{color:#005af0;box-shadow:none;background:transparent}.-ce .-uc{grid-column:auto;padding:0}@media(min-width:768px){.-ce .-uc{grid-column:1/8;grid-row:span 6;margin-right:20px}}@media(min-width:1024px){.-ce .-uc{grid-column:1/6}}.-ce .ap--toc{box-shadow:20px 25px 40px 0 rgba(0,0,0,.05)}.-ce .ap--toc~.-t{box-shadow:-30px -5px 30px -20px rgba(0,0,0,.05)}@media(min-width:768px){.-ce .ap--toc{grid-column:8/25}.-ce .ap--toc~.-t{padding-top:0}}@media(min-width:768px)and (min-width:768px){.-ce .ap--toc~.-t{grid-column:8/25;padding-left:30px}}@media(min-width:768px)and (min-width:1024px){.-ce .ap--toc~.-t{grid-column:6/20;padding-left:30px;padding-right:30px}}@media(min-width:768px)and (min-width:768px){.-ce .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:768px)and (min-width:1024px){.-ce .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:1024px){.-ce .ap--toc{background:#fafafc;grid-column:20/25;grid-row:span 3;padding-top:93px;padding-bottom:25px}.-ce .ap--toc~.-t{padding-top:62px}}@media(min-width:1024px)and (max-width:767px){.-ce .ap--toc~.-t{padding-left:15px;padding-right:15px}}.-ce .-uc+.-t,.-ce .ap--toc+.-t{padding-top:62px}@media(max-width:767px){.-ce .-uc+.-t,.-ce .ap--toc+.-t{padding-left:15px;padding-right:15px}}@media(min-width:1024px){.-ce .-uc+.-t:nth-of-type(2),.-ce .-uc+.-t:nth-of-type(3),.-ce .ap--toc+.-t:nth-of-type(2),.-ce .ap--toc+.-t:nth-of-type(3){grid-row:1}}.-ce .-t h1{font-size:1.8rem;margin-top:2rem}.-ce .-t h2{font-size:1.414rem;margin-top:1.8rem}.-ce .-t h3{font-size:1.2rem}.-ce .-t h4{font-size:1rem}.-ce .ap--title{margin-top:20px}.-ce .ap--format-tags{list-style:none;margin:0;padding:0}.-ce .-ta{max-height:500px}.-ta{display:flex;overflow-x:auto;margin:1.1rem 0 0;padding:0 1em;color:#fff;line-height:1.3em;background:#20202a;font-size:.9em}.-ta:after{content:" ";-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.-ta::-webkit-scrollbar{width:6px;height:6px}.-ta::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.-ta::-webkit-scrollbar-corner{background-color:transparent}.-ta::-webkit-scrollbar-thumb{border-radius:0}@media(min-width:768px){.-ta{max-width:100%;margin-right:-30px}}.-ta code,.-ta pre{font-family:Fira Mono,monospace;font-weight:500;white-space:pre;font-size:.9rem;padding:unset;word-break:normal;color:inherit;background:0 0}.-ta .hll{background-color:#49483e}.-ta .c{color:#75715e}.-ta .k{color:#66d9ef}.-ta .l{color:#ae81ff}.-ta .n{color:#f8f8f2}.-ta .o{color:#f15a5a}.-ta .p{color:#f8f8f2}.-ta .c1,.-ta .ch,.-ta .cm,.-ta .cp,.-ta .cpf,.-ta .cs{color:#75715e}.-ta .gd{color:#f15a5a}.-ta .ge{font-style:italic}.-ta .gi{color:#a6e22e}.-ta .gs{font-weight:700}.-ta .gu{color:#75715e}.-ta .kc,.-ta .kd{color:#66d9ef}.-ta .kn{color:#f15a5a}.-ta .kp,.-ta .kr,.-ta .kt{color:#66d9ef}.-ta .ld{color:#e6db74}.-ta .m{color:#ae81ff}.-ta .s{color:#e6db74}.-ta .na{color:#a6e22e}.-ta .nb{color:#f8f8f2}.-ta .nc{color:#a6e22e}.-ta .no{color:#66d9ef}.-ta .nd{color:#a6e22e}.-ta .ni{color:#f8f8f2}.-ta .ne,.-ta .nf{color:#a6e22e}.-ta .nl,.-ta .nn{color:#f8f8f2}.-ta .nx{color:#fff}.-ta .py{color:#f8f8f2}.-ta .nt{color:#f15a5a}.-ta .nv{color:#f8f8f2}.-ta .ow{color:#f15a5a}.-ta .w{color:#f8f8f2}.-ta .mb,.-ta .mf,.-ta .mh,.-ta .mi,.-ta .mo{color:#ae81ff}.-ta .dl,.-ta .s2,.-ta .sa,.-ta .sb,.-ta .sc,.-ta .sd{color:#e6db74}.-ta .se{color:#ae81ff}.-ta .s1,.-ta .sh,.-ta .si,.-ta .sr,.-ta .ss,.-ta .sx{color:#e6db74}.-ta .bp{color:#f8f8f2}.-ta .fm{color:#a6e22e}.-ta .vc,.-ta .vg,.-ta .vi,.-ta .vm{color:#f8f8f2}.-ta .il{color:#ae81ff}</style><link rel="manifest" href="/manifest.json"></head><body data-available-formats="websites" class="ap--websites"> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="stackoverflow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 25"><path d="M14.2 14.7h1.6V25H0V14.7h1.6v8.6h12.5c.1-2.8.1-5.7.1-8.6zM9.5 3.2c1.8 2.7 3.6 5.4 5.4 8.2.6-.4 1.1-.8 1.7-1.2C14.8 7.5 13 4.8 11.2 2c-.5.5-1.1.8-1.7 1.2zm5.1 8.5c-2.8-1.7-5.5-3.3-8.2-5-.4.6-.7 1.2-1.1 1.8 2.7 1.7 5.5 3.3 8.2 5 .4-.6.8-1.2 1.1-1.8zM17.4 0c-.7.1-1.3.2-2 .4.5 3.2 1.1 6.5 1.6 9.7.7-.1 1.3-.2 2-.4-.5-3.2-1.1-6.5-1.6-9.7zm-4 14.1c-3.1-.9-6.2-1.7-9.2-2.6-.2.7-.4 1.4-.5 2 3.1.9 6.2 1.7 9.2 2.6.1-.6.3-1.3.5-2zm-.9 5.5H3v2.1h9.5v-2.1zm.3-2.7c-3.2-.3-6.3-.6-9.5-.9-.1.7-.1 1.4-.2 2.1 3.2.3 6.3.6 9.5.9 0-.8.1-1.4.2-2.1z"/></symbol><symbol id="github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M32 0.792c-17.68 0-32 14.328-32 32 0 14.141 9.168 26.133 21.88 30.36 1.6 0.301 2.187-0.688 2.187-1.539 0-0.76-0.027-2.773-0.040-5.44-8.901 1.931-10.779-4.293-10.779-4.293-1.456-3.693-3.56-4.68-3.56-4.68-2.899-1.984 0.224-1.944 0.224-1.944 3.213 0.224 4.901 3.296 4.901 3.296 2.853 4.893 7.491 3.48 9.32 2.661 0.288-2.069 1.112-3.48 2.027-4.28-7.107-0.8-14.576-3.552-14.576-15.813 0-3.493 1.24-6.347 3.293-8.587-0.36-0.808-1.44-4.061 0.28-8.469 0 0 2.68-0.859 8.8 3.28 2.56-0.712 5.28-1.064 8-1.080 2.72 0.016 5.44 0.368 8 1.080 6.080-4.139 8.76-3.28 8.76-3.28 1.72 4.408 0.64 7.661 0.32 8.469 2.040 2.24 3.28 5.093 3.28 8.587 0 12.293-7.48 15-14.6 15.787 1.12 0.96 2.16 2.923 2.16 5.92 0 4.283-0.040 7.723-0.040 8.763 0 0.84 0.56 1.84 2.2 1.52 12.803-4.197 21.963-16.197 21.963-30.317 0-17.672-14.328-32-32-32z"/> </symbol><symbol id="wordpress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M57.251 18.2A28.688 28.688 0 0 1 60.766 32c0 10.611-5.749 19.883-14.301 24.867l8.787-25.405c1.64-4.107 2.187-7.389 2.187-10.304 0-1.08-.069-2.08-.187-2.96zm-21.283.277c1.725-.08 3.285-.28 3.285-.28 1.552-.2 1.371-2.48-.179-2.397 0 0-4.68.36-7.68.36-2.837 0-7.6-.4-7.6-.4-1.56-.08-1.763 2.28-.2 2.36 0 0 1.44.163 3 .24l4.48 12.28-6.32 18.88L14.277 18.4c1.731-.08 3.291-.267 3.291-.267 1.56-.2 1.376-2.48-.173-2.389 0 0-4.656.368-7.664.368-.533 0-1.168-.021-1.84-.04C13.096 8.4 21.96 3.24 32 3.24a28.642 28.642 0 0 1 19.429 7.555c-.123-.008-.243-.024-.376-.024-2.827 0-4.832 2.461-4.832 5.104 0 2.373 1.368 4.381 2.827 6.749 1.096 1.92 2.373 4.381 2.373 7.939 0 2.44-.944 5.317-2.189 9.277l-2.867 9.56-10.4-30.96.003.037zM32 60.757c-2.824 0-5.549-.408-8.128-1.165l8.632-25.083 8.84 24.232c.064.141.133.269.208.397A28.794 28.794 0 0 1 32 60.762zM3.229 32c0-4.171.896-8.133 2.493-11.707L19.439 57.89C9.85 53.226 3.231 43.389 3.228 31.999zM32 0C14.36 0 0 14.36 0 32s14.36 32 32 32 32-14.36 32-32S49.64 0 32 0z"/></symbol><symbol id="youtube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M62.664 16.542c-.773-2.708-2.862-4.797-5.514-5.556l-.057-.014c-4.989-1.336-25.065-1.336-25.065-1.336s-20.026-.027-25.065 1.337c-2.708.773-4.797 2.862-5.556 5.514l-.014.057C.507 21.107 0 26.354 0 31.72l.001.327v-.017.252a83.84 83.84 0 0 0 1.475 15.695l-.083-.521c.773 2.708 2.862 4.797 5.513 5.556l.057.014c4.983 1.339 25.065 1.339 25.065 1.339s20.023 0 25.065-1.339c2.708-.773 4.797-2.862 5.556-5.514l.014-.057c.85-4.469 1.336-9.609 1.336-14.863l-.002-.595v.03c.002-.184.002-.403.002-.621 0-5.255-.486-10.396-1.416-15.38l.08.515zM25.621 41.608V22.42l16.71 9.609z"/></symbol><symbol id="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M63.875 12.186c-2.36 1.037-4.88 1.744-7.533 2.067 2.704-1.629 4.784-4.197 5.768-7.261-2.536 1.48-5.346 2.557-8.338 3.157-2.389-2.557-5.794-4.157-9.576-4.157-7.245 0-13.119 5.874-13.119 13.111 0 1.040 0.12 2.040 0.339 2.997-10.906-0.515-20.572-5.752-27.042-13.669-1.139 1.925-1.776 4.162-1.776 6.6 0 4.56 2.32 8.568 5.834 10.922-2.152-0.069-4.176-0.661-5.941-1.643v0.163c0 6.36 4.514 11.663 10.522 12.871-1.101 0.296-2.264 0.456-3.456 0.456-0.837 0-1.64-0.080-2.443-0.229 1.683 5.208 6.52 9.005 12.277 9.112-4.48 3.517-10.157 5.613-16.271 5.613-1.040 0-2.077-0.061-3.12-0.179 5.837 3.717 12.714 5.89 20.151 5.89 24.143 0 37.329-19.989 37.329-37.294 0-0.557 0-1.12-0.040-1.68 2.563-1.837 4.8-4.16 6.56-6.794l-0.125-0.053z"/> </symbol><symbol id="download" viewBox="0 0 64 64"> <path d="M8.8 62.32c0-0.88 0.72-1.68 1.68-1.68 10.8 0 32.32 0 43.040 0 0.88 0 1.68 0.72 1.68 1.68 0 0.88-0.72 1.68-1.68 1.68-10.8 0-32.32 0-43.040 0-0.96 0-1.68-0.72-1.68-1.68z"/> <path d="M49.44 34.56c0.72-0.72 0.72-1.84 0-2.56s-1.84-0.72-2.56 0l-13.040 13.040v-43.28c0-0.96-0.88-1.76-1.84-1.76-1.040 0-1.84 0.8-1.84 1.76v43.28l-13.040-13.12c-0.72-0.72-1.84-0.72-2.56 0s-0.72 1.84 0 2.56l16.24 16.24c0.72 0.72 1.84 0.72 2.56 0l16.080-16.16z"/> </symbol><symbol id="internal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M43.16 10.18c-0.881-0.881-2.322-0.881-3.203 0s-0.881 2.322 0 3.203l16.335 16.335h-54.051c-1.281 0-2.242 1.041-2.242 2.242 0 1.281 0.961 2.322 2.242 2.322h54.051l-16.415 16.335c-0.881 0.881-0.881 2.322 0 3.203s2.322 0.881 3.203 0l20.259-20.259c0.881-0.881 0.881-2.322 0-3.203l-20.179-20.179z"/></symbol><symbol id="external" viewBox="0 0 64 64"> <path d="M28.879 11.24c-0.841-0.841-2.206-0.841-3.048 0s-0.841 2.207 0 3.048l15.543 15.543h-39.241c-1.219 0-2.133 0.987-2.133 2.133 0 1.219 0.914 2.207 2.133 2.207h39.241l-15.616 15.543c-0.841 0.841-0.841 2.206 0 3.048 0.835 0.841 2.206 0.841 3.048 0l19.273-19.279c0.841-0.841 0.841-2.206 0-3.048l-19.2-19.194zM59.429 27.392c2.511 0 4.571 2.060 4.571 4.571s-2.060 4.571-4.571 4.571-4.571-2.060-4.571-4.571 2.060-4.571 4.571-4.571z"/> </symbol><symbol id="speech-bubble" viewBox="0 0 38 38"><g fill="none" fill-rule="evenodd"><path stroke="#005AF0" stroke-width="1.94" d="M1.544 19.002c0 9.64 7.816 17.457 17.457 17.457 3.707 0 6.783-.838 9.61-2.809.936-.653 7.057 3.628 7.848 2.809.71-.737-3.264-7.394-2.69-8.247 1.868-2.78 2.69-5.61 2.69-9.21C36.459 9.36 28.642 1.544 19 1.544c-9.639 0-17.456 7.817-17.456 17.458z"/><path fill="#005AF0" fill-rule="nonzero" d="M17.621 28.71h-1.14l1.127-6.824-3.49.005-.049.001c-.314 0-.569-.255-.569-.57 0-.134.126-.362.126-.362l6.272-10.46 1.159.005-1.156 6.834 3.509-.004.055-.001c.315 0 .57.254.57.569 0 .127-.05.24-.122.335L17.621 28.71z"/></g></symbol><symbol id="sidebar-toggle" viewBox="0 0 64 64"> <path d="M36.032 7.9c0.985-0.996 2.624-0.996 3.643 0 0.985 0.963 0.985 2.565 0 3.526l-18.471 18.060h40.246c1.421 0.002 2.55 1.107 2.55 2.496s-1.129 2.529-2.55 2.529h-40.246l18.471 18.026c0.985 0.996 0.985 2.601 0 3.562-1.019 0.996-2.66 0.996-3.643 0l-22.844-22.336c-1.019-0.963-1.019-2.565 0-3.526l22.844-22.338z"/> <path d="M2.071 3.012c1.144 0 2.071 0.927 2.071 2.071v53.835c0 1.144-0.927 2.071-2.071 2.071s-2.071-0.927-2.071-2.071v-53.835c0-1.144 0.927-2.071 2.071-2.071z"/> </symbol><symbol id="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M39.503 32l22.963-22.963c2.046-2.046 2.046-5.457 0-7.503s-5.456-2.046-7.503 0l-22.963 22.963-22.963-22.963c-2.046-2.046-5.457-2.046-7.503 0s-2.046 5.457 0 7.503l22.963 22.963-22.963 22.963c-2.046 2.046-2.046 5.456 0 7.503s5.457 2.046 7.503 0l22.963-22.963 22.963 22.963c2.046 2.046 5.456 2.046 7.503 0s2.046-5.456 0-7.503l-22.963-22.963z"/> </symbol><symbol id="menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M2.133 13.867h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 28.8h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 43.733h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> </symbol><symbol id="wrench" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M64 18.267c0 1.608-0.214 3.21-0.636 4.767l0.008 0.169c0.028 0.598-0.186 1.18-0.592 1.619-2.713 7.035-9.527 11.712-17.107 11.712-1.852 0-3.671-0.275-5.427-0.819l-25.943 25.854c-1.573 1.567-3.667 2.431-5.889 2.431s-4.318-0.864-5.89-2.431l-0.087-0.087c-3.25-3.238-3.25-8.508 0-11.747l23.75-23.669c0.66-0.657 1.046-1.529 1.090-2.456l0.173-3.404c-0.070-0.657-0.105-1.308-0.105-1.939 0-10.074 8.221-18.267 18.327-18.267 3.298 0 6.532 0.883 9.353 2.555 0.602 0.357 1.005 0.979 1.083 1.675 0.011 0.098 0.017 0.161 0.020 0.237 0.044 1.158-0.297 1.536-9.858 10.586l3.847 3.921c1.149-1.058 3.185-2.929 8.997-8.27 0.542-0.497 1.293-0.697 2.010-0.534 0.719 0.163 1.311 0.668 1.583 1.351 0.856 2.147 1.291 4.418 1.292 6.745zM59.819 22.4c0.395-1.346 0.595-2.737 0.594-4.132 0-1.194-0.141-2.367-0.422-3.507-2.922 2.685-8.959 8.231-9.040 8.307-0.536 0.494-1.37 0.474-1.88-0.046l-6.953-7.087c-0.252-0.258-0.39-0.605-0.384-0.965s0.158-0.702 0.42-0.95c2.985-2.825 7.47-7.107 9.54-9.166-1.884-0.84-3.936-1.278-6.022-1.278-8.129 0-14.742 6.59-14.742 14.691 0 0.533 0.032 1.090 0.096 1.654 0.007 0.071 0.010 0.142 0.007 0.214l-0.174 3.646c-0.087 1.818-0.847 3.528-2.138 4.816l-23.75 23.668c-1.85 1.844-1.85 4.844 0 6.688l0.087 0.087c0.897 0.893 2.088 1.385 3.356 1.385s2.46-0.492 3.355-1.385l26.429-26.338c0.2-0.199 0.419-0.39 0.693-0.601 0.377-0.292 0.882-0.363 1.326-0.187 1.743 0.692 3.578 1.044 5.456 1.044 6.243 0 11.831-3.943 13.905-9.811 0.044-0.126 0.107-0.244 0.187-0.351-0.002-0.134 0.016-0.268 0.054-0.396z"/> </symbol><symbol id="template" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M1.44 0h62.56v64h-64v-64h1.44zM20.64 60.88v-39.52h-17.76v39.6h17.76zM23.44 21.36v39.6h37.44v-39.6h-37.44zM2.88 18.24h58.080v-15.36h-58.080v15.36z"/></symbol><symbol id="learn" viewBox="0 0 64 64"> <path d="M57.674 35.257c0 1.779 1.416 3.221 3.163 3.221s3.163-1.442 3.163-3.221c0-1.155-0.602-2.16-1.498-2.728v-8.973c0-0.682-0.401-1.297-1.018-1.563l-29.585-12.716c-0.413-0.178-0.881-0.178-1.295 0l-29.586 12.716c-0.617 0.265-1.018 0.881-1.018 1.563s0.401 1.297 1.018 1.562l6.662 2.863v17.587c0 4.624 7.288 9.29 23.571 9.29s23.571-4.666 23.571-9.29v-17.587l4.349-1.869v6.417c-0.896 0.569-1.497 1.573-1.497 2.728zM51.491 45.567c0 1.575-4.797 5.898-20.24 5.898s-20.24-4.323-20.24-5.898v-16.155l19.593 8.421c0.207 0.089 0.427 0.134 0.647 0.134s0.441-0.045 0.647-0.134l19.593-8.421v16.155zM31.251 34.43l-25.303-10.875 25.303-10.875 25.302 10.875-25.302 10.875z"/> </symbol><symbol id="examples-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 20"><g><path d="M20 19.3a.9.9 0 1 1 0-1.7 1.9 1.9 0 0 0 1.9-1.9v-3a3.6 3.6 0 0 1 1.3-2.7 3.6 3.6 0 0 1-1.3-2.8v-3A1.9 1.9 0 0 0 20 2.3a.9.9 0 1 1 0-1.7 3.6 3.6 0 0 1 3.6 3.6v3a1.9 1.9 0 0 0 2 2v1.6a1.9 1.9 0 0 0-2 2v3a3.6 3.6 0 0 1-3.6 3.5zm-14 0a3.6 3.6 0 0 1-3.6-3.6v-3a1.9 1.9 0 0 0-2-1.9V9.1a1.9 1.9 0 0 0 2-1.9v-3A3.6 3.6 0 0 1 6 .6a.9.9 0 1 1 0 1.8A1.9 1.9 0 0 0 4 4.2v3A3.6 3.6 0 0 1 2.8 10a3.6 3.6 0 0 1 1.3 2.7v3A1.9 1.9 0 0 0 6 17.6a.9.9 0 1 1 0 1.7z"/><g transform="translate(5.8 8.5)"><circle cx="12.3" cy="1.4" r="1.4"/><circle cx="7.3" cy="1.4" r="1.4"/><circle cx="2.2" cy="1.4" r="1.4"/></g></g></symbol><symbol id="components-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 22"><path d="M8.7 17l-2.5-2.2-4-3.5-.9-.8v1l2.5-2.2 4-3.5 1-.8c.2-.3.2-.8 0-1a.8.8 0 0 0-1.2 0L5.1 6l-4 3.6-.8.8c-.3.2-.3.8 0 1l2.5 2.2 4 3.6.8.8c.3.2.8.3 1.1 0 .3-.3.3-.8 0-1.1zM19.3 5l2.5 2.2 4 3.5.9.8v-1l-2.5 2.2-4 3.5-.9.8c-.3.3-.3.8 0 1 .3.4.8.3 1 0L23 16l4-3.6.9-.8c.3-.2.3-.8 0-1l-2.5-2.3-4-3.5-1-.8c-.2-.3-.7-.3-1 0-.3.3-.3.8 0 1zm-8 16.4l.7-2 1.6-5a3563.7 3563.7 0 0 1 2-5.8l1.7-5.1.8-2.5c.2-.4-.1-.9-.5-1a.8.8 0 0 0-1 .6c-.1.7-.4 1.3-.6 2l-1.6 4.9-2 5.9-1.7 5-.8 2.6c-.2.4.1.8.5 1a.8.8 0 0 0 1-.6z"/></symbol><symbol id="guides-documents" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 32"><path d="M6.7 28H1.2c-.4 0-.6-.4-.6-.8L.5.7c0-.4.3-.7.7-.7h21.1c.5 0 .7.3.7.7V2c0 .5-.2.7-.7.7-.4 0-.6-.2-.6-.7v-.6H1.8L2 26.6h4.8c.4 0 .7.2.7.6 0 .4-.3.7-.7.7z"/><path d="M8 6.8H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 10.9H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 15H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 19H6c-.4 0-.7-.2-.7-.6 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7z"/><path d="M29.8 4H8.7c-.5 0-.7.4-.7.8v26.5c0 .4.3.7.7.7h21.1c.4 0 .7-.3.7-.7V4.8c0-.4-.3-.7-.7-.7zm-.6 26.6H9.4V5.4h19.8v25.2z"/><path d="M18.1 22.8h-.6l.6-3.8h-1.9c-.2 0-.3-.1-.3-.3v-.2l3.4-5.8h.7l-.7 3.8h2c.2 0 .3.1.3.3v.2L18 22.8z"/></symbol><symbol id="start" viewBox="0 0 64 64"> <path d="M63.195 1.874c-0.143-0.52-0.549-0.926-1.069-1.069-10.765-2.978-20.385 2.978-24.355 6.948l-11.452 11.452-5.421-1.756c-3.551-1.163-7.454-0.217-10.078 2.443l-3.359 3.359c-0.582 0.594-0.582 1.544 0 2.138l7.329 7.329-4.199 6.948c-0.343 0.593-0.25 1.342 0.229 1.832l11.681 11.605c0.471 0.504 1.223 0.63 1.832 0.305l6.948-4.123h0.076l7.329 7.329c0.594 0.582 1.544 0.582 2.138 0l3.359-3.359c2.66-2.624 3.606-6.527 2.443-10.078l-1.756-5.421 11.452-11.452c3.894-4.047 9.849-13.666 6.871-24.431zM23.799 50.126l-9.925-9.925 3.13-5.268 12.063 12.063-5.268 3.13zM54.109 24.015l-12.139 12.139c-0.4 0.399-0.547 0.987-0.382 1.527l2.061 6.337c0.783 2.448 0.136 5.128-1.68 6.948l-2.29 2.29-29.012-29.012 2.29-2.29c1.819-1.815 4.5-2.463 6.948-1.68l6.337 2.061c0.54 0.165 1.128 0.018 1.527-0.382l12.216-12.063c3.436-3.359 11.452-8.398 20.461-6.337 2.061 9.085-2.978 17.102-6.337 20.461z"/> <path d="M10.667 51.195l-9.009 9.009c-0.478 0.358-0.703 0.963-0.576 1.547s0.583 1.040 1.167 1.167c0.584 0.127 1.188-0.098 1.547-0.576l9.009-9.009c0.456-0.608 0.396-1.459-0.142-1.996s-1.388-0.598-1.996-0.142z"/> <path d="M11.66 63.563c0.594 0.582 1.544 0.582 2.138 0l4.581-4.581c0.456-0.608 0.395-1.459-0.142-1.996s-1.388-0.598-1.996-0.142l-4.581 4.581c-0.582 0.594-0.582 1.544 0 2.138z"/> <path d="M1.505 52.798c0.403-0.006 0.787-0.17 1.069-0.458l4.581-4.581c0.478-0.358 0.703-0.963 0.576-1.547s-0.583-1.040-1.167-1.167c-0.584-0.127-1.188 0.098-1.547 0.576l-4.581 4.581c-0.428 0.436-0.554 1.086-0.322 1.65s0.78 0.937 1.391 0.945z"/> <path d="M43.726 13.021c-2.003 2.003-2.003 5.25 0 7.253s5.25 2.003 7.253 0c2.003-2.003 2.003-5.25 0-7.253s-5.25-2.003-7.253 0zM48.841 18.136c-0.699 0.692-1.79 0.794-2.605 0.243s-1.127-1.601-0.745-2.508c0.382-0.907 1.351-1.417 2.315-1.219s1.653 1.050 1.646 2.033c-0.004 0.545-0.223 1.067-0.611 1.451z"/> </symbol><symbol id="amp-email" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-email" x1="76.2776137%" x2="20.8316146%" y1="-25.8400575%" y2="121.578822%"> <stop offset="0%" stop-color="#F1F068"/> <stop offset="46.2139774%" stop-color="#96D64F"/> <stop offset="100%" stop-color="#2DB932"/> </linearGradient> </defs> <path d="M64 14.080c0-3.291-2.56-5.851-5.851-5.851h-52.297c-3.291 0-5.851 2.56-5.851 5.851v35.84c0 3.291 2.56 5.851 5.851 5.851h52.297c3.291 0 5.851-2.56 5.851-5.851v-35.84zM5.851 11.154h52.297c0.183 0 0.366 0 0.549 0l-24.503 25.417c-0.549 0.549-1.28 0.914-2.194 0.914-0.731 0-1.646-0.366-2.194-0.914l-24.32-25.417c0 0 0.183 0 0.366 0zM2.926 14.080c0-0.366 0-0.731 0.183-1.097l15.36 16.091-15.543 19.2v-34.194zM58.149 52.846h-52.297c-0.731 0-1.646-0.366-2.194-0.914l16.823-20.663 7.131 7.497c1.097 1.097 2.56 1.829 4.206 1.829s3.109-0.731 4.206-1.829l6.583-6.949 17.371 20.114c-0.366 0.549-1.097 0.914-1.829 0.914v0zM61.074 48.274l-16.091-18.834 15.909-16.64c0.183 0.366 0.183 0.731 0.183 1.097v34.377z"/> </symbol><symbol id="amp-ads" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-ads" x1="100%" x2="14.5415777%" y1="0%" y2="123.368881%"> <stop offset="0%" stop-color="#FF52E1"/> <stop offset="100%" stop-color="#5500D7"/> </linearGradient> </defs> <path d="M56.399 14.68c3.654-3.846 9.616-10.963 6.924-13.847-2.885-2.885-10.001 3.269-13.847 6.731l-0.577-0.577c-0.385-0.385-0.962-0.577-1.539-0.385l-15.963 3.077c-0.385 0-0.577 0.192-0.769 0.385l-30.195 30.195c-0.577 0.577-0.577 1.731 0 2.308l20.963 20.963c0.385 0.385 0.769 0.385 1.154 0.385s0.769-0.192 1.154-0.385l30.003-30.003c0.192-0.192 0.385-0.577 0.385-0.769v0l3.077-15.963c0.192-0.577 0-1.154-0.385-1.539l-0.385-0.577zM53.899 16.988l-2.885 14.424-28.464 28.656-18.655-18.655 28.656-28.656 14.424-2.885c-1.539 1.731-4.039 4.423-5.962 7.116-1.923-0.192-3.654 0.385-5.193 1.923-2.5 2.5-2.5 6.731 0 9.232s6.731 2.5 9.232 0c1.346-1.346 2.116-3.27 1.923-5.193-0.192-1.154-0.577-2.308-1.154-3.077-0.192-0.385-0.385-0.577-0.769-0.769-0.192-0.192-0.577-0.577-0.769-0.769 1.154-1.731 2.885-3.654 5.193-5.962l2.5 2.5 1.923 2.116zM43.321 24.873c-0.192 0.385-0.385 0.577-0.577 0.962-1.346 1.346-3.27 1.346-4.616 0s-1.346-3.27 0-4.616c0.192-0.192 0.577-0.385 0.962-0.577 1.154-0.577 2.308-0.385 3.462 0.385 0.192 0 0.192 0.192 0.385 0.192 0 0 0.192 0.192 0.192 0.385 0.577 0.962 0.769 2.116 0.192 3.27zM54.091 12.372l-2.5-2.5c4.039-3.846 7.308-5.77 8.847-6.347-0.577 1.539-2.5 4.616-6.347 8.847z"/> </symbol><symbol id="amp-stories" viewBox="0 0 36 32"> <defs> <linearGradient id="gradient-stories" x1="81.726943%" x2="23.7165981%" y1="-28.3832685%" y2="119.978062%"> <stop offset="0%" stop-color="#FFF300"/> <stop offset="100%" stop-color="#FF8F00"/> </linearGradient> </defs> <path d="M7.111 0h21.333v32h-21.333v-32zM9.481 2.37v27.259h16.593v-27.259h-16.593zM0 4.741h2.37v22.519h-2.37v-22.519zM33.185 4.741h2.37v22.519h-2.37v-22.519z"/> </symbol><symbol id="amp-websites" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-websites" x1="81.8129399%" x2="33.8766928%" y1="0%" y2="94.4849088%"> <stop offset="0%" stop-color="#00DCC0"/> <stop offset="100%" stop-color="#005AF0"/> </linearGradient> </defs> <path d="M63.196 4.646h-62.253c-0.566 0-0.943 0.377-0.943 0.755v53.010c0 0.566 0.377 0.943 0.943 0.943h62.253c0.566 0 0.755-0.377 0.755-0.755v-53.198c0.189-0.377-0.189-0.755-0.755-0.755zM3.395 18.040h57.348v33.202h-57.348v-33.202zM60.744 7.853v6.98h-57.348v-6.98h57.348zM3.395 56.147v-1.509h57.348v1.509h-57.348zM9.055 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM12.828 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM18.487 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM51.123 39.734l-11.13-13.96c-0.189-0.189-0.377-0.377-0.755-0.377v0c-0.189 0-0.566 0-0.755 0.377l-8.3 9.621-4.716-6.225c-0.189-0.189-0.377-0.377-0.755-0.377s-0.566 0-0.755 0.377l-8.866 10.376c-0.377 0.377-0.189 0.943 0 1.132s0.377 0.189 0.566 0.189c0.189 0 0.566 0 0.754-0.377l8.3-9.621 4.528 5.471-2.452 3.018c-0.377 0.377-0.189 0.943 0 1.132 0.377 0.189 0.943 0.189 1.132 0l11.319-13.017 10.376 13.205c0.189 0.189 0.377 0.377 0.755 0.377 0.189 0 0.377 0 0.566-0.189 0.377-0.377 0.566-0.943 0.189-1.132zM27.165 26.718c1.509 0 2.641-1.132 2.641-2.641 0-1.321-1.132-2.641-2.641-2.641s-2.641 1.132-2.641 2.641c0 1.509 1.132 2.641 2.641 2.641zM27.165 23.322c0.566 0 0.943 0.377 0.943 0.943s-0.377 0.943-0.943 0.943-0.943-0.377-0.943-0.943c0-0.566 0.377-0.943 0.943-0.943z"/> </symbol><symbol id="angle-down-solid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M56.293 16.003c1.761-1.645 4.553-1.645 6.314 0 1.857 1.734 1.857 4.623 0 6.357l-27.45 25.638c-1.761 1.645-4.553 1.645-6.314 0l-27.45-25.638c-0.899-0.839-1.393-1.963-1.393-3.178s0.494-2.339 1.393-3.178c1.761-1.645 4.553-1.645 6.314 0l24.293 22.689 24.293-22.689z"/> </symbol><symbol id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15C6.716 0 0 6.716 0 15z"/><path fill="#005AF0" fill-rule="nonzero" d="M13.85 24.098h-1.14l1.128-6.823-3.49.005h-.05a.57.57 0 0 1-.568-.569c0-.135.125-.363.125-.363l6.272-10.46 1.16.005-1.156 6.834 3.508-.004h.056c.314 0 .569.254.569.568 0 .128-.05.24-.121.335L13.85 24.098zM15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15z"/></g></symbol> </defs> </svg> <header class="ap--header " [class]="'ap--header ' + (mainmenuopen ? 'mainmenuopen' : '')" i-amphtml-binding> <div class="ap-o-header"> <a class="ap-o-header-home" href="/ja/"> <svg class="ap-o-header-home-logo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"/></svg> <span class="ap-o-header-home-title">AMP</span> </a> <nav class="ap-o-header-main"> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> AMP について <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link websites" href="/ja/about/websites/"> <div class="ap-o-header-flyout-primary-item-link-icon websites"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-websites"> <div class="ap-o-header-flyout-item-title">AMP ウェブサイト</div> <div class="ap-o-header-flyout-item-description">完璧なウェブ体験をもたらします</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link stories" href="/ja/about/stories/"> <div class="ap-o-header-flyout-primary-item-link-icon stories"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-stories"> <div class="ap-o-header-flyout-item-title">Web Stories</div> <div class="ap-o-header-flyout-item-description">誰もが気軽に楽しめるストーリー</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link ads" href="/ja/about/ads/"> <div class="ap-o-header-flyout-primary-item-link-icon ads"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-ads"> <div class="ap-o-header-flyout-item-title">AMP 広告</div> <div class="ap-o-header-flyout-item-description">超高速なウェブ広告</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link email" href="/ja/about/email/"> <div class="ap-o-header-flyout-primary-item-link-icon email"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-email"> <div class="ap-o-header-flyout-item-title">AMP メール</div> <div class="ap-o-header-flyout-item-description">次世代型メール</div> </div> </a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/about/how-amp-works/">AMP の仕組み</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/about/mission-and-vision/">ビジョンとミッション</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/about/use-cases/">使用事例</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/success-stories/">成功事例</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> ドキュメント <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/documentation/">スタートガイド</a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ja/documentation/guides-and-tutorials/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guides-documents"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">ガイドとチュートリアル</div> <div class="ap-o-header-flyout-item-description">AMP を使い始める</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ja/documentation/components/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#components-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">コンポーネント</div> <div class="ap-o-header-flyout-item-description">AMP ライブラリ一式</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ja/documentation/examples/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#examples-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">実例</div> <div class="ap-o-header-flyout-item-description">Hands-on introduction to AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ja/documentation/courses/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#learn"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">コース</div> <div class="ap-o-header-flyout-item-description">無料の AMP 学習コース</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ja/documentation/templates/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#template"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">テンプレート</div> <div class="ap-o-header-flyout-item-description">すぐに使えます</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/ja/documentation/tools/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wrench"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">ツール</div> <div class="ap-o-header-flyout-item-description">構築を始めましょう</div> </div> </a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> コミュニティ <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/documentation/guides-and-tutorials/contribute/">貢献</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/community/roadmap/">ロードマップ</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/community/governance/">ガバナンス</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/community/working-groups/access-subscriptions/">ワーキンググループ</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> イベント <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/events/amp-fest-2020/">AMP Fest 2020</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/events/amp-roadshow/">AMP ロードショー</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <a class="ap-o-header-main-link -tw" href="https://blog.amp.dev">ブログ</a> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> サポート <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/support/">ヘルプ</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/ja/support/faq/">よくある質問</a> </li> </ul> </div> </nav> <div class="-tv"> <span class="-tm" aria-label="言語を選択してください" tabindex="-1"> <span class="-tw">JA</span> <div class="ap-a-ico -ty"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </span> <input class="-tg" type="checkbox" name="language-selector"> <div class="-tb" role="list"> <a class="-tw" href="/documentation/examples/e-commerce/checkout_flow/" role="listitem">English</a> <a class="-tw" href="/de/documentation/examples/e-commerce/checkout_flow/" role="listitem">Deutsch</a> <a class="-tw" href="/fr/documentation/examples/e-commerce/checkout_flow/" role="listitem">Français</a> <a class="-tw" href="/ar/documentation/examples/e-commerce/checkout_flow/" role="listitem">العربية</a> <a class="-tw" href="/es/documentation/examples/e-commerce/checkout_flow/" role="listitem">Español</a> <a class="-tw" href="/it/documentation/examples/e-commerce/checkout_flow/" role="listitem">Italiano</a> <a class="-tw" href="/id/documentation/examples/e-commerce/checkout_flow/" role="listitem">Indonesia</a> <a class="-tw" href="/ko/documentation/examples/e-commerce/checkout_flow/" role="listitem">한국어</a> <a class="-tw" href="/pt_br/documentation/examples/e-commerce/checkout_flow/" role="listitem">Português</a> <a class="-tw" href="/ru/documentation/examples/e-commerce/checkout_flow/" role="listitem">Русский</a> <a class="-tw" href="/tr/documentation/examples/e-commerce/checkout_flow/" role="listitem">Türkçe</a> <a class="-tw" href="/zh_cn/documentation/examples/e-commerce/checkout_flow/" role="listitem">中文</a> <a class="-tw" href="/pl/documentation/examples/e-commerce/checkout_flow/" role="listitem">Polski</a> <a class="-tw" href="/vi/documentation/examples/e-commerce/checkout_flow/" role="listitem">Tiếng việt</a> </div> </div> </div> </header> <label class="ap-o-burger-menu-label" on="tap:AMP.setState({mainmenuopen: !mainmenuopen, noScrollState: !noScrollState})" [class]="'ap-o-burger-menu-label ' + (mainmenuopen ? 'mainmenuopen ' : '')" for="burger-menu" tabindex="0" role="button" aria-label="ハンバーガーメニュー" i-amphtml-binding> <div class="ap-a-ico ap-o-burger-menu-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu"/></svg> </div> </label> <nav class="ap-o-burger-menu" [class]="mainmenuopen ? 'ap-o-burger-menu mainmenuopen' : 'ap-o-burger-menu'" i-amphtml-binding> <ul class="-th"> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> AMP について </label> <input class="-td" type="checkbox" aria-label="About"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/about/websites/"> AMP ウェブサイト </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/about/stories/"> Web Stories </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/about/ads/"> AMP 広告 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/about/email/"> AMP メール </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/about/how-amp-works/"> AMP の仕組み </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/about/mission-and-vision/"> ビジョンとミッション </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/about/use-cases/"> 使用事例 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/success-stories/"> 成功事例 </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> ドキュメント </label> <input class="-td" type="checkbox" aria-label="Documentation"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/documentation/"> スタートガイド </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/documentation/guides-and-tutorials/"> ガイドとチュートリアル </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/documentation/components/"> コンポーネント </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/documentation/examples/"> 実例 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/documentation/courses/"> コース </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/documentation/templates/"> テンプレート </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/documentation/tools/"> ツール </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> コミュニティ </label> <input class="-td" type="checkbox" aria-label="Community"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/documentation/guides-and-tutorials/contribute/"> 貢献 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/community/roadmap/"> ロードマップ </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/community/governance/"> ガバナンス </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/community/working-groups/access-subscriptions/"> ワーキンググループ </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> イベント </label> <input class="-td" type="checkbox" aria-label="Events"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/events/amp-fest-2020/"> AMP Fest 2020 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/ja/events/amp-roadshow/"> AMP ロードショー </a> </li> </ul> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw" href="https://blog.amp.dev">ブログ</a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw " href="/ja/support/"> ヘルプ </a> </li> </ul> </nav> <div class="-ui"> <amp-position-observer on="enter:slideTransition.start; exit:slideTransition.start,slideTransition.reverse" intersection-ratios="1" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <amp-animation id="slideTransition" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":"150ms","fill":"both","easing":"ease-out","iterations":"1","animations":[{"selector":".label-title","keyframes":[{"transform":"scale3d(0, 1, 1)"},{"transform":"scale3d(1, 1, 1)"}]}]}</script> </amp-animation> </div> <amp-user-notification class="-ll i-amphtml-layout-nodisplay" id="format-filter-hint" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-user-notification> <div class="-lf" aria-hidden="true"> <div class="-lc"> <div class="-lh">より合理的な体験を実現する形式を選択してください</div> <button class="-lp" on="tap:format-filter-hint.dismiss"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> </div> </div> <main class="ap--main -ce"> <div class="-tf"> <input class="-uu ap-a-sidebar-mobile-toggle-input-sidebar" type="checkbox" name="sidebar" id="sidebar" autocomplete="off"> <input class="-uf ap-a-sidebar-desktop-toggle-input-sidebar" type="checkbox" name="sidebar-desktop" id="sidebar-desktop" autocomplete="off"> <span id="ap--sidebar-content" class="-uc"></span> <section class="ap--toc"> <div class="ap-o-toc" [class]="contentmenuopen ? 'ap-o-toc contentmenuopen' : 'ap-o-toc'" i-amphtml-binding> <label class="ap-o-toc-toggle" for="toc" on="tap:AMP.setState({contentmenuopen: !contentmenuopen})" role="contentmenutrigger" tabindex="0"> <p class="ap-o-toc-hl">目次</p> </label> <input class="-us -un" type="checkbox" name="toc" id="toc" autocomplete="off"> <ul> <li> <a href="#checkout-flow">Checkout Flow</a> <ul> <li> <a href="#introduction">Introduction</a> <a href="#setup">Setup</a> <a href="#sign-in-support">Sign-in Support</a> <a href="#review-order-(shopping-cart)">Review Order (Shopping Cart)</a> <a href="#promo/discount-code">Promo/discount code</a> <a href="#the-checkout-form">The Checkout Form</a> <a href="#contact-details">Contact Details</a> <a href="#shipping-&-billing-address">Shipping & Billing Address</a> <a href="#payment-details">Payment Details</a> <a href="#form-submission">Form Submission</a> </li> </ul> </li> </ul> </div> </section> <section class="-t"> <label class="-uo -ur ap-a-sidebar-mobile-toggle-label-sidebar" for="sidebar" on="tap:sidebar-left.toggle" role="categoriemenutrigger" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">サイドバーの切り替え</span> </label> <label class="-uo -ul ap-a-sidebar-desktop-toggle-label-sidebar" for="sidebar-desktop" role="categoriemenutrigger-desktop" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">サイドバーの切り替え</span> </label> <ul class="ap--format-tags"> <li class="ap--format-tag ap-a-format-tag ap-a-format-tag-websites">websites</li> </ul> <nav class="-ue"> <a class="ap-m-breadcrumbs-crumb" href="/ja/documentation/">ドキュメント</a> <span class="ap-m-breadcrumbs-divider"> <svg class="ap-a-ico -ut"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <a class="ap-m-breadcrumbs-crumb" href="/ja/documentation/examples/">実例</a> </nav> <h1 class="ap--title" id="checkout-flow">Checkout Flow</h1> <div class="-ct"> <a class="ap-a-btn" href="/ja/documentation/examples/e-commerce/checkout_flow//../preview/">デモを表示する</a> <a class="ap-a-btn -cn -cr" href="https://playground.amp.dev/?url=https://preview.amp.dev/documentation/examples/e-commerce/checkout_flow">Playground で開く</a> </div> <h2 id="introduction">Introduction</h2> <p>This sample demonstrates how you can implement a simple checkout page in AMP. The sample assumes that all payment processing is done server-side. The covered use cases are:</p> <ul> <li>How to dynamically render shopping card data.</li> <li>How to support user login with stored addresses and credit cards.</li> <li>How to let users auto-fill their contact, address and credit card details.</li> <li>How to handle promo/discount codes.</li> </ul> <h2 id="setup">Setup</h2> <p>We use quite a few components:</p> <p><code>amp-form</code> for collecting and submitting user input.</p> <div class="ap-o-code-preview"> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">script</span> <span class="na">async</span> <span class="na">custom-element</span><span class="o">=</span><span class="s">"amp-form"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.ampproject.org/v0/amp-form-0.1.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> </code></pre></div> </div> <p><code>amp-access</code> for user login.</p> <div class="ap-o-code-preview"> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">script</span> <span class="na">async</span> <span class="na">custom-element</span><span class="o">=</span><span class="s">"amp-access"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.ampproject.org/v0/amp-access-0.1.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> </code></pre></div> </div> <p><code>amp-analytics</code> is required by the <code>amp-access</code> extension.</p> <div class="ap-o-code-preview"> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">script</span> <span class="na">async</span> <span class="na">custom-element</span><span class="o">=</span><span class="s">"amp-analytics"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.ampproject.org/v0/amp-analytics-0.1.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> </code></pre></div> </div> <p><code>amp-list</code> for rendering personalized content, such as the shopping cart.</p> <div class="ap-o-code-preview"> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">script</span> <span class="na">async</span> <span class="na">custom-element</span><span class="o">=</span><span class="s">"amp-list"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.ampproject.org/v0/amp-list-0.1.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> </code></pre></div> </div> <p><code>amp-mustache</code> for rendering templates in combination with <code>amp-list</code>.</p> <div class="ap-o-code-preview"> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">script</span> <span class="na">async</span> <span class="na">custom-template</span><span class="o">=</span><span class="s">"amp-mustache"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.ampproject.org/v0/amp-mustache-0.2.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> </code></pre></div> </div> <p><code>amp-bind</code> for dynamically updating the page based on user input.</p> <div class="ap-o-code-preview"> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">script</span> <span class="na">async</span> <span class="na">custom-element</span><span class="o">=</span><span class="s">"amp-bind"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.ampproject.org/v0/amp-bind-0.1.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> </code></pre></div> </div> <h2 id="sign-in-support">Sign-in Support</h2> <p>We use <code>amp-access</code> to integrate login and to show and hide a login button depending on whether the user is logged in. <a href="/documentation/examples/components/amp-access/">amp-access</a> requires the definition of 3 endpoints as documented <a href="/documentation/components/amp-access">here</a>.</p> <p>This sample allows an user to login and logout using either email/password or <a href="https://developers.google.com/identity/sign-in/web/">Google sign in</a>. Logout is implemented by configuring a second endpoint in the login property <code>sign-out</code>, find more <a href="/ja/documentation/components/amp-access/#login-page">here</a>.</p> <div class="ap-o-code-preview"> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">script</span> <span class="na">id</span><span class="o">=</span><span class="s">"amp-access"</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"authorization"</span><span class="o">:</span> <span class="s2">"/documentation/examples/api/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM"</span><span class="p">,</span> <span class="s2">"noPingback"</span><span class="o">:</span> <span class="s2">"true"</span><span class="p">,</span> <span class="s2">"login"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"sign-in"</span><span class="o">:</span> <span class="s2">"/documentation/examples/api/amp-access/login?rid=READER_ID"</span><span class="p">,</span> <span class="s2">"sign-out"</span><span class="o">:</span> <span class="s2">"/documentation/examples/api/amp-access/logout?rid=READER_ID"</span> <span class="p">},</span> <span class="s2">"authorizationFallbackResponse"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"error"</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="s2">"loggedIn"</span><span class="o">:</span> <span class="kc">false</span> <span class="p">}</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> </code></pre></div> </div> <p><code>amp-access</code> enables us to show either a Login or Logout button depending on whether the user is already logged-in, e.g. elements marked with <code>amp-access="NOT loggedIn"</code> will only show for non-logged-in users. The button's on tap actions, e.g. <code>on="tap:amp-access.login-sign-in"</code>, specifies which action should be taken when clicking on the button: <code>login</code> defines the property inside the <code>amp-access</code> json configuration, while <code>sign-in</code> defines the endpoint.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <div [hidden]="checkoutSuccess" i-amphtml-binding> <button amp-access="NOT loggedIn" on="tap:amp-access.login-sign-in">Login</button> <button amp-access="loggedIn" tabindex="0" on="tap:amp-access.login-sign-out" amp-access-hide>Logout</button> <span amp-access="NOT loggedIn">...or continue as guest</span> </div> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">[hidden]</span><span class="o">=</span><span class="s">"checkoutSuccess"</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">amp-access</span><span class="o">=</span><span class="s">"NOT loggedIn"</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:amp-access.login-sign-in"</span><span class="p">></span>Login<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">amp-access</span><span class="o">=</span><span class="s">"loggedIn"</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">"0"</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:amp-access.login-sign-out"</span> <span class="na">amp-access-hide</span><span class="p">></span>Logout<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span> <span class="na">amp-access</span><span class="o">=</span><span class="s">"NOT loggedIn"</span><span class="p">></span>...or continue as guest<span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </code></pre></div> </div> <h2 id="review-order-(shopping-cart)">Review Order (Shopping Cart)</h2> <p>The review order section displays the current shopping cart content and the total price. We pull in the shopping cart content from a JSON endpoint and render it inside an <code>amp-list</code>. The user is identified based on the AMP CLIENT_ID which is passed as</p> <p>a request parameter. Another possibility would be to use cookies, which are included in the amp-list's source request, if the attribute <code>credentials="include"</code> is set. Additionally, we bind the amp-list's <code>src</code> attribute to an implicit state object <code>[src]="shoppingCart.src"</code>, which we use to refresh the content using <code>amp-bind</code>.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <section [hidden]="checkoutSuccess" class="checkout-section" i-amphtml-binding> <h3>Review Order</h3> <amp-list width="auto" height="180" items="." single-item layout="fixed-height" credentials="include" src="https://amp.dev/documentation/examples/e-commerce/checkout_flow/shoppingcart?clientId=CLIENT_ID(cart)" [src]="shoppingCart.src" binding="no" i-amphtml-binding class="i-amphtml-layout-fixed-height i-amphtml-layout-size-defined" style="height:180px;" i-amphtml-layout="fixed-height"> <template type="amp-mustache"> <div class="shopping-cart"> <div class="item header"> <div class="name"></div> <div class="price"><strong>Price</strong></div> <div class="quantity"><strong>Quantity</strong></div> </div> {{#items}} <div class="item"> <div class="name">{{name}}</div> <div class="price">${{price}}</div> <div class="quantity">{{quantity}}x</div> </div> {{/items}} {{#discount}} <div class="item summary"> <div class="name"></div> <div class="price"><strong>Discount:</strong></div> <div class="quantity"><strong>{{.}}</strong></div> </div> {{/discount}} <div class="item summary"> <div class="name"></div> <div class="price"><strong>Sum:</strong></div> <div class="quantity"><strong>${{total}}</strong></div> </div> </div> </template> </amp-list> </section> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">section</span> <span class="na">[hidden]</span><span class="o">=</span><span class="s">"checkoutSuccess"</span> <span class="na">class</span><span class="o">=</span><span class="s">"checkout-section"</span><span class="p">></span> <span class="p"><</span><span class="nt">h3</span><span class="p">></span>Review Order<span class="p"></</span><span class="nt">h3</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-list</span> <span class="na">width</span><span class="o">=</span><span class="s">"auto"</span> <span class="na">height</span><span class="o">=</span><span class="s">"180"</span> <span class="na">items</span><span class="o">=</span><span class="s">"."</span> <span class="na">single-item</span> <span class="na">layout</span><span class="o">=</span><span class="s">"fixed-height"</span> <span class="na">credentials</span><span class="o">=</span><span class="s">"include"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://amp.dev/documentation/examples/e-commerce/checkout_flow/shoppingcart?clientId=CLIENT_ID(cart)"</span> <span class="na">[src]</span><span class="o">=</span><span class="s">"shoppingCart.src"</span> <span class="na">binding</span><span class="o">=</span><span class="s">"no"</span><span class="p">></span> <span class="p"><</span><span class="nt">template</span> <span class="na">type</span><span class="o">=</span><span class="s">"amp-mustache"</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"shopping-cart"</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"item header"</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"name"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"price"</span><span class="p">><</span><span class="nt">strong</span><span class="p">></span>Price<span class="p"></</span><span class="nt">strong</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"quantity"</span><span class="p">><</span><span class="nt">strong</span><span class="p">></span>Quantity<span class="p"></</span><span class="nt">strong</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> {{#items}} <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"item"</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"name"</span><span class="p">></span>{{name}}<span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"price"</span><span class="p">></span>${{price}}<span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"quantity"</span><span class="p">></span>{{quantity}}x<span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> {{/items}} {{#discount}} <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"item summary"</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"name"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"price"</span><span class="p">><</span><span class="nt">strong</span><span class="p">></span>Discount:<span class="p"></</span><span class="nt">strong</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"quantity"</span><span class="p">><</span><span class="nt">strong</span><span class="p">></span>{{.}}<span class="p"></</span><span class="nt">strong</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> {{/discount}} <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"item summary"</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"name"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"price"</span><span class="p">><</span><span class="nt">strong</span><span class="p">></span>Sum:<span class="p"></</span><span class="nt">strong</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"quantity"</span><span class="p">><</span><span class="nt">strong</span><span class="p">></span>${{total}}<span class="p"></</span><span class="nt">strong</span><span class="p">></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">template</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-list</span><span class="p">></span> <span class="p"></</span><span class="nt">section</span><span class="p">></span> </code></pre></div> </div> <h2 id="promo/discount-code">Promo/discount code</h2> <p>This section makes it possible to enter promo or discount codes. It's a simple <code>amp-form</code> that posts the</p> <p>code to an XHR endpoint. If the form has been successfully submitted, we refresh the shopping carts</p> <p>contents by updating the <code>shoppingCart</code> object with an updated src URL. We append a random value to invalidate any caches and force</p> <p>the refresh.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <section [class]="checkoutSuccess ? 'hide' : 'checkout-section'" class="checkout-section" i-amphtml-binding> <h3> Add a promotional code </h3> <form method="post" action-xhr="https://amp.dev/documentation/examples/e-commerce/checkout_flow/apply-code" on="submit-success:AMP.setState({ shoppingCart: { src: 'https://amp.dev/documentation/examples/e-commerce/checkout_flow/shoppingcart?clientId=CLIENT_ID(cart)&' + random() } })" target="_top"> <input name="clientId" type="hidden" value="CLIENT_ID(cart)" data-amp-replace="CLIENT_ID"> <input name="code" placeholder="Code" aria-label="code" value="abc123"> <button value="Apply">Apply</button> </form> </section> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">section</span> <span class="na">[class]</span><span class="o">=</span><span class="s">"checkoutSuccess ? 'hide' : 'checkout-section'"</span> <span class="na">class</span><span class="o">=</span><span class="s">"checkout-section"</span><span class="p">></span> <span class="p"><</span><span class="nt">h3</span><span class="p">></span> Add a promotional code <span class="p"></</span><span class="nt">h3</span><span class="p">></span> <span class="p"><</span><span class="nt">form</span> <span class="na">method</span><span class="o">=</span><span class="s">"post"</span> <span class="na">action-xhr</span><span class="o">=</span><span class="s">"https://amp.dev/documentation/examples/e-commerce/checkout_flow/apply-code"</span> <span class="na">on</span><span class="o">=</span><span class="s">"submit-success:AMP.setState({</span> <span class="s"> shoppingCart: {</span> <span class="s"> src: 'https://amp.dev/documentation/examples/e-commerce/checkout_flow/shoppingcart?clientId=CLIENT_ID(cart)&' + random()</span> <span class="s"> }</span> <span class="s"> })"</span> <span class="na">target</span><span class="o">=</span><span class="s">"_top"</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"clientId"</span> <span class="na">type</span><span class="o">=</span><span class="s">"hidden"</span> <span class="na">value</span><span class="o">=</span><span class="s">"CLIENT_ID(cart)"</span> <span class="na">data-amp-replace</span><span class="o">=</span><span class="s">"CLIENT_ID"</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"code"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"Code"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"code"</span> <span class="na">value</span><span class="o">=</span><span class="s">"abc123"</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">value</span><span class="o">=</span><span class="s">"Apply"</span><span class="p">></span>Apply<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></</span><span class="nt">form</span><span class="p">></span> <span class="p"></</span><span class="nt">section</span><span class="p">></span> </code></pre></div> </div> <h2 id="the-checkout-form">The Checkout Form</h2> <p>This is the actual checkout form. Form submission takes place via XHR. Once the form has been successfully submitted, we set the</p> <p><code>checkoutSuccess</code> variable to <code>true</code>. This enables us to hide the forms once the checkout is done. Another option would have be to <a href="/ja/documentation/components/amp-form/#redirecting-after-a-submission">redirect</a> to a new page on successful checkout.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <form id="checkout-form" method="post" [hidden]="checkoutSuccess" action-xhr="https://amp.dev/documentation/examples/e-commerce/checkout_flow/apply-code" on="submit-success:AMP.setState({checkoutSuccess: true})" target="_top" i-amphtml-binding> </form></div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">form</span> <span class="na">id</span><span class="o">=</span><span class="s">"checkout-form"</span> <span class="na">method</span><span class="o">=</span><span class="s">"post"</span> <span class="na">[hidden]</span><span class="o">=</span><span class="s">"checkoutSuccess"</span> <span class="na">action-xhr</span><span class="o">=</span><span class="s">"https://amp.dev/documentation/examples/e-commerce/checkout_flow/apply-code"</span> <span class="na">on</span><span class="o">=</span><span class="s">"submit-success:AMP.setState({checkoutSuccess: true})"</span> <span class="na">target</span><span class="o">=</span><span class="s">"_top"</span><span class="p">></span> </code></pre></div> </div> <h2 id="contact-details">Contact Details</h2> <p>Not logged in users (<code>amp-access="NOT loggedIn"</code>) will see this section to enter their contact details.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <section class="checkout-section" amp-access="NOT loggedIn"> <h3>Contact</h3> <label for="frmNameA">Name</label> <input name="name" id="frmNameA" placeholder="Full name" autocomplete="name"> <label for="frmEmailA">Email</label> <input type="email" name="email" id="frmEmailA" placeholder="name@example.com" autocomplete="email"> </section> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">"checkout-section"</span> <span class="na">amp-access</span><span class="o">=</span><span class="s">"NOT loggedIn"</span><span class="p">></span> <span class="p"><</span><span class="nt">h3</span><span class="p">></span>Contact<span class="p"></</span><span class="nt">h3</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"frmNameA"</span><span class="p">></span>Name<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"name"</span> <span class="na">id</span><span class="o">=</span><span class="s">"frmNameA"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"Full name"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"name"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"frmEmailA"</span><span class="p">></span>Email<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"email"</span> <span class="na">name</span><span class="o">=</span><span class="s">"email"</span> <span class="na">id</span><span class="o">=</span><span class="s">"frmEmailA"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"name@example.com"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"email"</span><span class="p">></span> <span class="p"></</span><span class="nt">section</span><span class="p">></span> </code></pre></div> </div> <h2 id="shipping-&-billing-address">Shipping & Billing Address</h2> <p>Logged in users (<code>amp-access="loggedIn"</code>) can select an existing address which are pulled in using another amp-list. This section is initially hidden via the <code>amp-access-hide</code> attribute.</p> <p>We provide a third option for users to enter a new address. The radio button's [change action](/documentation/guides-and-tutorials/learn/amp-actions-and-events) triggers the visibilityof the address form `on="change:manualShippingAddress.toggleVisibility"`.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <section class="checkout-section" amp-access="loggedIn" amp-access-hide> <h3>Select Shipping Address</h3> <amp-list width="auto" height="96" layout="fixed-height" items="." single-item credentials="include" src="/static/samples/json/addresses.json" binding="no" class="i-amphtml-layout-fixed-height i-amphtml-layout-size-defined" style="height:96px;" i-amphtml-layout="fixed-height"> <template type="amp-mustache"> <ul class="list-reset"> {{#addresses}} <li> {{^default}} <input type="radio" id="address{{id}}" name="address" value="{{id}}" on="change:manualShippingAddress.hide"> <label for="address{{id}}">{{name}}, {{street}}, {{city}} </label> {{/default}} {{#default}} <input type="radio" checked id="defaultAddress{{id}}" name="address" value="{{id}}" on="change:manualShippingAddress.hide"> <label for="defaultAddress{{id}}">{{name}}, {{street}}, {{city}} {{#default}}<strong>[DEFAULT]</strong>{{/default}}</label> {{/default}} {{/addresses}} </li> {{#manual}} <li> <input type="radio" id="ship-separate" name="address" value="{{id}}" on="change:manualShippingAddress.toggleVisibility"> <label for="ship-separate">Enter new Shipping Address</label> </li> {{/manual}} </ul> </template> </amp-list> <section class="sub-section" id="manualShippingAddress" hidden> <label for="manualShipAddressS">Address</label> <input name="ship-address" id="manualShipAddressS" placeholder="123 Any Street" autocomplete="shipping street-address"> <label for="manualShipCityS">City</label> <input name="ship-city" id="manualShipCityS" placeholder="New York" autocomplete="shipping locality"> <label for="manualShipStateS">State</label> <input name="ship-state" id="manualShipStateS" placeholder="NY" autocomplete="shipping region"> <label for="manualShipZipS">Zip</label> <input name="ship-zip" id="manualShipZipS" placeholder="10011" autocomplete="shipping postal-code"> <label for="manualShipCountryS">Country</label> <input name="ship-country" id="manualShipCountryS" placeholder="USA" autocomplete="shipping country"> <label for="saveNewAddress1">Save Address</label> <input id="saveNewAddress1" type="checkbox" checked on="change:shippingAddress.toggleVisibility"> </section> <label for="shippingAddressCheck">Use Shipping as Billing Address</label> <input id="shippingAddressCheck" type="checkbox" checked on="change:shippingAddress.toggleVisibility"> </section> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">"checkout-section"</span> <span class="na">amp-access</span><span class="o">=</span><span class="s">"loggedIn"</span> <span class="na">amp-access-hide</span><span class="p">></span> <span class="p"><</span><span class="nt">h3</span><span class="p">></span>Select Shipping Address<span class="p"></</span><span class="nt">h3</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-list</span> <span class="na">width</span><span class="o">=</span><span class="s">"auto"</span> <span class="na">height</span><span class="o">=</span><span class="s">"96"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"fixed-height"</span> <span class="na">items</span><span class="o">=</span><span class="s">"."</span> <span class="na">single-item</span> <span class="na">credentials</span><span class="o">=</span><span class="s">"include"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/json/addresses.json"</span> <span class="na">binding</span><span class="o">=</span><span class="s">"no"</span><span class="p">></span> <span class="p"><</span><span class="nt">template</span> <span class="na">type</span><span class="o">=</span><span class="s">"amp-mustache"</span><span class="p">></span> <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-reset"</span><span class="p">></span> {{#addresses}} <span class="p"><</span><span class="nt">li</span><span class="p">></span> {{^default}} <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">id</span><span class="o">=</span><span class="s">"address{{id}}"</span> <span class="na">name</span><span class="o">=</span><span class="s">"address"</span> <span class="na">value</span><span class="o">=</span><span class="s">"{{id}}"</span> <span class="na">on</span><span class="o">=</span><span class="s">"change:manualShippingAddress.hide"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"address{{id}}"</span><span class="p">></span>{{name}}, {{street}}, {{city}} <span class="p"></</span><span class="nt">label</span><span class="p">></span> {{/default}} {{#default}} <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">checked</span> <span class="na">id</span><span class="o">=</span><span class="s">"defaultAddress{{id}}"</span> <span class="na">name</span><span class="o">=</span><span class="s">"address"</span> <span class="na">value</span><span class="o">=</span><span class="s">"{{id}}"</span> <span class="na">on</span><span class="o">=</span><span class="s">"change:manualShippingAddress.hide"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"defaultAddress{{id}}"</span><span class="p">></span>{{name}}, {{street}}, {{city}} {{#default}}<span class="p"><</span><span class="nt">strong</span><span class="p">></span>[DEFAULT]<span class="p"></</span><span class="nt">strong</span><span class="p">></span>{{/default}}<span class="p"></</span><span class="nt">label</span><span class="p">></span> {{/default}} {{/addresses}} <span class="p"></</span><span class="nt">li</span><span class="p">></span> {{#manual}} <span class="p"><</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">id</span><span class="o">=</span><span class="s">"ship-separate"</span> <span class="na">name</span><span class="o">=</span><span class="s">"address"</span> <span class="na">value</span><span class="o">=</span><span class="s">"{{id}}"</span> <span class="na">on</span><span class="o">=</span><span class="s">"change:manualShippingAddress.toggleVisibility"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"ship-separate"</span><span class="p">></span>Enter new Shipping Address<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> {{/manual}} <span class="p"></</span><span class="nt">ul</span><span class="p">></span> <span class="p"></</span><span class="nt">template</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-list</span><span class="p">></span> <span class="p"><</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">"sub-section"</span> <span class="na">id</span><span class="o">=</span><span class="s">"manualShippingAddress"</span> <span class="na">hidden</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"manualShipAddressS"</span><span class="p">></span>Address<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"ship-address"</span> <span class="na">id</span><span class="o">=</span><span class="s">"manualShipAddressS"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"123 Any Street"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"shipping street-address"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"manualShipCityS"</span><span class="p">></span>City<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"ship-city"</span> <span class="na">id</span><span class="o">=</span><span class="s">"manualShipCityS"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"New York"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"shipping locality"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"manualShipStateS"</span><span class="p">></span>State<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"ship-state"</span> <span class="na">id</span><span class="o">=</span><span class="s">"manualShipStateS"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"NY"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"shipping region"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"manualShipZipS"</span><span class="p">></span>Zip<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"ship-zip"</span> <span class="na">id</span><span class="o">=</span><span class="s">"manualShipZipS"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"10011"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"shipping postal-code"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"manualShipCountryS"</span><span class="p">></span>Country<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"ship-country"</span> <span class="na">id</span><span class="o">=</span><span class="s">"manualShipCountryS"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"USA"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"shipping country"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"saveNewAddress1"</span><span class="p">></span>Save Address<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">id</span><span class="o">=</span><span class="s">"saveNewAddress1"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">checked</span> <span class="na">on</span><span class="o">=</span><span class="s">"change:shippingAddress.toggleVisibility"</span><span class="p">></span> <span class="p"></</span><span class="nt">section</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"shippingAddressCheck"</span><span class="p">></span>Use Shipping as Billing Address<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">id</span><span class="o">=</span><span class="s">"shippingAddressCheck"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">checked</span> <span class="na">on</span><span class="o">=</span><span class="s">"change:shippingAddress.toggleVisibility"</span><span class="p">></span> <span class="p"></</span><span class="nt">section</span><span class="p">></span> </code></pre></div> </div> <p>Not logged in users see a simple form for entering the shipping address. We use the <code>autocomplete</code> attributes</p> <p>to enable <a href="https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill">auto fill for addresses</a> which greatly simplifies form fill-out for users.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <section class="checkout-section" amp-access="NOT loggedIn"> <h3>Enter Shipping Address</h3> <label for="shipAddressS">Address</label> <input name="ship-address" id="shipAddressS" placeholder="123 Any Street" autocomplete="shipping street-address"> <label for="shipCityS">City</label> <input name="ship-city" id="shipCityS" placeholder="New York" autocomplete="shipping locality"> <label for="shipStateS">State</label> <input name="ship-state" id="shipStateS" placeholder="NY" autocomplete="shipping region"> <label for="shipZipS">Zip</label> <input name="ship-zip" id="shipZipS" placeholder="10011" autocomplete="shipping postal-code"> <label for="shipCountryS">Country</label> <input name="ship-country" id="shipCountryS" placeholder="USA" autocomplete="shipping country"> <label for="shippingAddressCheck">Use Shipping as Billing Address</label> <input type="checkbox" checked on="change:shippingAddress.toggleVisibility"> </section> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">"checkout-section"</span> <span class="na">amp-access</span><span class="o">=</span><span class="s">"NOT loggedIn"</span><span class="p">></span> <span class="p"><</span><span class="nt">h3</span><span class="p">></span>Enter Shipping Address<span class="p"></</span><span class="nt">h3</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"shipAddressS"</span><span class="p">></span>Address<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"ship-address"</span> <span class="na">id</span><span class="o">=</span><span class="s">"shipAddressS"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"123 Any Street"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"shipping street-address"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"shipCityS"</span><span class="p">></span>City<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"ship-city"</span> <span class="na">id</span><span class="o">=</span><span class="s">"shipCityS"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"New York"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"shipping locality"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"shipStateS"</span><span class="p">></span>State<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"ship-state"</span> <span class="na">id</span><span class="o">=</span><span class="s">"shipStateS"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"NY"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"shipping region"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"shipZipS"</span><span class="p">></span>Zip<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"ship-zip"</span> <span class="na">id</span><span class="o">=</span><span class="s">"shipZipS"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"10011"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"shipping postal-code"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"shipCountryS"</span><span class="p">></span>Country<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"ship-country"</span> <span class="na">id</span><span class="o">=</span><span class="s">"shipCountryS"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"USA"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"shipping country"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"shippingAddressCheck"</span><span class="p">></span>Use Shipping as Billing Address<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">checked</span> <span class="na">on</span><span class="o">=</span><span class="s">"change:shippingAddress.toggleVisibility"</span><span class="p">></span> <span class="p"></</span><span class="nt">section</span><span class="p">></span> </code></pre></div> </div> <p>The shipping address form is optional. We hide it initially using the <code>hidden</code> attribute so that it can be toggled</p> <p>via the <code>toggleVisibility</code> action (<code>on="change:shippingAddress.toggleVisibility"</code>).</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <section class="checkout-section" hidden id="billingAddress"> <h3>Enter Billing Address</h3> <label for="billingAddressS">Address</label> <input name="billing-address" id="billingAddressS" placeholder="123 Any Street" autocomplete="billing street-address"> <label for="billingCityS">City</label> <input name="billing-city" id="billingCityS" placeholder="New York" autocomplete="billing locality"> <label for="billingStateS">State</label> <input name="billing-state" id="billingStateS" placeholder="NY" autocomplete="billing region"> <label for="billingZipS">Zip</label> <input name="billing-zip" id="billingZipS" placeholder="10011" autocomplete="billing postal-code"> <label for="billingCountryS">Country</label> <input name="billing-country" id="billingCountryS" placeholder="USA" autocomplete="billing country"> </section> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">"checkout-section"</span> <span class="na">hidden</span> <span class="na">id</span><span class="o">=</span><span class="s">"billingAddress"</span><span class="p">></span> <span class="p"><</span><span class="nt">h3</span><span class="p">></span>Enter Billing Address<span class="p"></</span><span class="nt">h3</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"billingAddressS"</span><span class="p">></span>Address<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"billing-address"</span> <span class="na">id</span><span class="o">=</span><span class="s">"billingAddressS"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"123 Any Street"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"billing street-address"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"billingCityS"</span><span class="p">></span>City<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"billing-city"</span> <span class="na">id</span><span class="o">=</span><span class="s">"billingCityS"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"New York"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"billing locality"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"billingStateS"</span><span class="p">></span>State<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"billing-state"</span> <span class="na">id</span><span class="o">=</span><span class="s">"billingStateS"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"NY"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"billing region"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"billingZipS"</span><span class="p">></span>Zip<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"billing-zip"</span> <span class="na">id</span><span class="o">=</span><span class="s">"billingZipS"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"10011"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"billing postal-code"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"billingCountryS"</span><span class="p">></span>Country<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"billing-country"</span> <span class="na">id</span><span class="o">=</span><span class="s">"billingCountryS"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"USA"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"billing country"</span><span class="p">></span> <span class="p"></</span><span class="nt">section</span><span class="p">></span> </code></pre></div> </div> <h2 id="payment-details">Payment Details</h2> <p>Logged in users (<code>amp-access="loggedIn"</code>) can select an existing credit card which is pulled in using <code>amp-list</code> similar to how the shipping addresses are rendered dynamically above. It's also possible to manually enter credit card details.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <section class="checkout-section" amp-access="loggedIn" amp-access-hide> <h3>Select Payment Details</h3> <amp-list width="auto" height="96" layout="fixed-height" items="." single-item credentials="include" src="/static/samples/json/credit-cards.json" binding="no" class="i-amphtml-layout-fixed-height i-amphtml-layout-size-defined" style="height:96px;" i-amphtml-layout="fixed-height"> <template type="amp-mustache"> <ul class="list-reset"> {{#cards}} <li> {{^default}} <input type="radio" id="cc{{id}}" name="cc" value="{{id}}" on="change:manualCC.hide"> {{/default}} {{#default}} <input type="radio" checked id="defaultCC{{id}}" name="cc" value="{{id}}" on="change:manualCC.hide"> {{/default}} <label for="defaultCC{{id}}">{{title}} {{#default}}<strong>[DEFAULT]</strong>{{/default}}</label> {{/cards}} </li> {{#manual}} <li> <input type="radio" id="new-cc" name="cc" value="{{id}}" on="change:manualCC.toggleVisibility"> <label for="new-cc">Enter new Credit Card</label> </li> {{/manual}} </ul> </template> </amp-list> <section class="sub-section" id="manualCC" hidden> <label for="manualCCNameCC">Name on card</label> <input name="ccname" id="manualCCNameCC" placeholder="Full Name" autocomplete="cc-name"> <label for="manualCCCCNum">Card Number</label> <input name="cardnumber" id="manualCCCCNum" autocomplete="cc-number"> <label for="manualCCCVC">CVC</label> <input name="cvc" id="manualCCCVC" autocomplete="cc-csc"> <label for="manualCCExp">Expiry</label> <input name="cc-exp" id="manualCCExp" placeholder="MM-YYYY" autocomplete="cc-exp"> <label for="saveNewAddress2">Save Credit Card</label> <input id="saveNewAddress2" type="checkbox" checked on="change:shippingAddress.toggleVisibility"> </section> </section> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">"checkout-section"</span> <span class="na">amp-access</span><span class="o">=</span><span class="s">"loggedIn"</span> <span class="na">amp-access-hide</span><span class="p">></span> <span class="p"><</span><span class="nt">h3</span><span class="p">></span>Select Payment Details<span class="p"></</span><span class="nt">h3</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-list</span> <span class="na">width</span><span class="o">=</span><span class="s">"auto"</span> <span class="na">height</span><span class="o">=</span><span class="s">"96"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"fixed-height"</span> <span class="na">items</span><span class="o">=</span><span class="s">"."</span> <span class="na">single-item</span> <span class="na">credentials</span><span class="o">=</span><span class="s">"include"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/samples/json/credit-cards.json"</span> <span class="na">binding</span><span class="o">=</span><span class="s">"no"</span><span class="p">></span> <span class="p"><</span><span class="nt">template</span> <span class="na">type</span><span class="o">=</span><span class="s">"amp-mustache"</span><span class="p">></span> <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-reset"</span><span class="p">></span> {{#cards}} <span class="p"><</span><span class="nt">li</span><span class="p">></span> {{^default}} <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">id</span><span class="o">=</span><span class="s">"cc{{id}}"</span> <span class="na">name</span><span class="o">=</span><span class="s">"cc"</span> <span class="na">value</span><span class="o">=</span><span class="s">"{{id}}"</span> <span class="na">on</span><span class="o">=</span><span class="s">"change:manualCC.hide"</span><span class="p">></span> {{/default}} {{#default}} <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">checked</span> <span class="na">id</span><span class="o">=</span><span class="s">"defaultCC{{id}}"</span> <span class="na">name</span><span class="o">=</span><span class="s">"cc"</span> <span class="na">value</span><span class="o">=</span><span class="s">"{{id}}"</span> <span class="na">on</span><span class="o">=</span><span class="s">"change:manualCC.hide"</span><span class="p">></span> {{/default}} <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"defaultCC{{id}}"</span><span class="p">></span>{{title}} {{#default}}<span class="p"><</span><span class="nt">strong</span><span class="p">></span>[DEFAULT]<span class="p"></</span><span class="nt">strong</span><span class="p">></span>{{/default}}<span class="p"></</span><span class="nt">label</span><span class="p">></span> {{/cards}} <span class="p"></</span><span class="nt">li</span><span class="p">></span> {{#manual}} <span class="p"><</span><span class="nt">li</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"radio"</span> <span class="na">id</span><span class="o">=</span><span class="s">"new-cc"</span> <span class="na">name</span><span class="o">=</span><span class="s">"cc"</span> <span class="na">value</span><span class="o">=</span><span class="s">"{{id}}"</span> <span class="na">on</span><span class="o">=</span><span class="s">"change:manualCC.toggleVisibility"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"new-cc"</span><span class="p">></span>Enter new Credit Card<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"></</span><span class="nt">li</span><span class="p">></span> {{/manual}} <span class="p"></</span><span class="nt">ul</span><span class="p">></span> <span class="p"></</span><span class="nt">template</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-list</span><span class="p">></span> <span class="p"><</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">"sub-section"</span> <span class="na">id</span><span class="o">=</span><span class="s">"manualCC"</span> <span class="na">hidden</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"manualCCNameCC"</span><span class="p">></span>Name on card<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"ccname"</span> <span class="na">id</span><span class="o">=</span><span class="s">"manualCCNameCC"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"Full Name"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"cc-name"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"manualCCCCNum"</span><span class="p">></span>Card Number<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"cardnumber"</span> <span class="na">id</span><span class="o">=</span><span class="s">"manualCCCCNum"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"cc-number"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"manualCCCVC"</span><span class="p">></span>CVC<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"cvc"</span> <span class="na">id</span><span class="o">=</span><span class="s">"manualCCCVC"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"cc-csc"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"manualCCExp"</span><span class="p">></span>Expiry<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"cc-exp"</span> <span class="na">id</span><span class="o">=</span><span class="s">"manualCCExp"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"MM-YYYY"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"cc-exp"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"saveNewAddress2"</span><span class="p">></span>Save Credit Card<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">id</span><span class="o">=</span><span class="s">"saveNewAddress2"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span> <span class="na">checked</span> <span class="na">on</span><span class="o">=</span><span class="s">"change:shippingAddress.toggleVisibility"</span><span class="p">></span> <span class="p"></</span><span class="nt">section</span><span class="p">></span> <span class="p"></</span><span class="nt">section</span><span class="p">></span> </code></pre></div> </div> <p>Not logged in users can enter their credit card details manually. Note that we're using the credit card auto-fill markup.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <section class="checkout-section" amp-access="NOT loggedIn" amp-access-hide> <h3>Enter Credit Card Details</h3> <label for="nameCC">Name on card</label> <input name="ccname" id="nameCC" placeholder="Full Name" autocomplete="cc-name"> <label for="ccNum">Card Number</label> <input name="cardnumber" id="ccNum" autocomplete="cc-number"> <label for="ccCVC">CVC</label> <input name="cvc" id="ccCVC" autocomplete="cc-csc"> <label for="ccExp">Expiry</label> <input name="cc-exp" id="ccExp" placeholder="MM-YYYY" autocomplete="cc-exp"> </section> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">"checkout-section"</span> <span class="na">amp-access</span><span class="o">=</span><span class="s">"NOT loggedIn"</span> <span class="na">amp-access-hide</span><span class="p">></span> <span class="p"><</span><span class="nt">h3</span><span class="p">></span>Enter Credit Card Details<span class="p"></</span><span class="nt">h3</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"nameCC"</span><span class="p">></span>Name on card<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"ccname"</span> <span class="na">id</span><span class="o">=</span><span class="s">"nameCC"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"Full Name"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"cc-name"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"ccNum"</span><span class="p">></span>Card Number<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"cardnumber"</span> <span class="na">id</span><span class="o">=</span><span class="s">"ccNum"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"cc-number"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"ccCVC"</span><span class="p">></span>CVC<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"cvc"</span> <span class="na">id</span><span class="o">=</span><span class="s">"ccCVC"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"cc-csc"</span><span class="p">></span> <span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"ccExp"</span><span class="p">></span>Expiry<span class="p"></</span><span class="nt">label</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">"cc-exp"</span> <span class="na">id</span><span class="o">=</span><span class="s">"ccExp"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"MM-YYYY"</span> <span class="na">autocomplete</span><span class="o">=</span><span class="s">"cc-exp"</span><span class="p">></span> <span class="p"></</span><span class="nt">section</span><span class="p">></span> </code></pre></div> </div> <h2 id="form-submission">Form Submission</h2> <p>The pay now button simply submits the form containting the different checkout form sections.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <div [hidden]="checkoutSuccess" i-amphtml-binding> <input type="submit" value="Pay Now"> <span>Not for real ...</span> </div> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">[hidden]</span><span class="o">=</span><span class="s">"checkoutSuccess"</span><span class="p">></span> <span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">value</span><span class="o">=</span><span class="s">"Pay Now"</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>Not for real ...<span class="p"></</span><span class="nt">span</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> </code></pre></div> </div> <p>This is the message that we will show after a successful checkout and the <code>checkoutSuccess</code> variable is set to <code>true</code>.</p> <div class="ap-o-code-preview"> <div class="ap-o-code-preview-preview"> <section hidden [hidden]="checkoutSuccess" class="checkout-section" i-amphtml-binding> <h3>Checkout success!</h3> </section> </div> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">section</span> <span class="na">hidden</span> <span class="na">[hidden]</span><span class="o">=</span><span class="s">"checkoutSuccess"</span> <span class="na">class</span><span class="o">=</span><span class="s">"checkout-section"</span><span class="p">></span> <span class="p"><</span><span class="nt">h3</span><span class="p">></span>Checkout success!<span class="p"></</span><span class="nt">h3</span><span class="p">></span> <span class="p"></</span><span class="nt">section</span><span class="p">></span> </code></pre></div> </div> <p> </p><div class="ap-m-tip"> <div class="ap-a-ico ap-m-tip-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speech-bubble"/></svg> </div> <div class="ap-m-tip-content"> This sample does not include any form validation. However, this can be easily added using AMP's support for <a href="https://amp.dev/documentation/examples/components/amp-form/#form-custom-validation">custom form validation</a>. </div> </div><p></p> </section> <section class="ap--help"> <div class="-li"> <span class="-ls">さらに説明が必要ですか？</span> <p class="-lu">このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。</p> <a href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" class="-n"> <svg class="ap-a-ico -i"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#external"/></svg> <span class="-r">Stack Overflow にアクセスする</span> </a> <div class="-la"></div> <span class="-ls">説明されていない機能ですか？</span> <p class="-lu">AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。</p> <a href="https://github.com/ampproject/docs/blob/future/examples/source/e-commerce/Checkout_Flow/index.html" rel="noopener" class="-n link-preview-1"> <svg class="ap-a-ico -i"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#external"/></svg> <span class="-r">GitHub でサンプルを編集する</span> </a> <div class="-la"></div> </div> </section> <section class="-t"> <hr> <ul class="ap-o-mini-card-list"> <li class="ap-o-mini-card-list-item"> <div class="ap-m-mini-card"> <amp-img alt="Author avatar" src="https://github.com/sebastianbenz.png?size=38" width="38" height="38" class="large i-amphtml-layout-responsive i-amphtml-layout-size-defined" style="max-width: 38px" layout="responsive" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:100%"></i-amphtml-sizer> </amp-img> <span> <strong>Written by <a href="https://github.com/sebastianbenz" rel="nofollow" target="_blank"> @sebastianbenz </a> </strong> </span> </div></li> </ul> </section> </div> </main> <amp-sidebar id="sidebar-left" class="ap--ampsidebar i-amphtml-layout-nodisplay" layout="nodisplay" side="left" hidden="hidden" i-amphtml-layout="nodisplay"> <nav class="ap--ampsidebar-toolbar" toolbar="(min-width: 768px)" toolbar-target="ap--sidebar-content"> <ul> <div class="ap-m-format-toggle"> <button class="ap-m-format-toggle-selected ap-m-format-toggle-link-websites"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </span> <span>websites</span> <span class="ap-a-ico ap-m-format-toggle-angle"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> </button> <div class="ap-m-format-toggle-formats"> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-stories" href="/ja/documentation/examples/stories/e-commerce/checkout_flow/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </span> <span>stories</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-ads" href="/ja/documentation/examples/ads/e-commerce/checkout_flow/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </span> <span>ads</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-email" href="/ja/documentation/examples/email/e-commerce/checkout_flow/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </span> <span>email</span> </a> </div> </div> <div class="ap-o-sidebar-default"> <div class="ap-o-sidebar"> <div class="nav"> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>introduction</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/introduction/hello_world/">Hello World</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>components</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-3d-gltf/">amp-3d-gltf</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-access-laterpay/">amp-access-laterpay</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-access/">amp-access</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-accordion/">amp-accordion</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-ad/">amp-ad</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-addthis/">amp-addthis</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-analytics/">amp-analytics</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-anim/">amp-anim</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-app-banner/">amp-app-banner</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-audio/">amp-audio</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-autocomplete/">amp-autocomplete</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-bind-macro/">amp-bind-macro</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-bind-recaptcha/">amp-bind-recaptcha</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-bind/">amp-bind</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-bodymovin-animation/">amp-bodymovin-animation</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-brid-player/">amp-brid-player</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-brightcove/">amp-brightcove</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-call-tracking/">amp-call-tracking</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-carousel/">amp-carousel</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-dailymotion/">amp-dailymotion</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-date-countdown/">amp-date-countdown</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-date-display/">amp-date-display</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-date-picker/">amp-date-picker</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-dynamic-css-classes/">amp-dynamic-css-classes</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-experiment/">amp-experiment</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-facebook-comments/">amp-facebook-comments</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-facebook-like/">amp-facebook-like</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-facebook-page/">amp-facebook-page</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-facebook/">amp-facebook</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-fit-text/">amp-fit-text</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-font/">amp-font</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-form/">amp-form</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-fx-collection/">amp-fx-collection</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-fx-flying-carpet/">amp-fx-flying-carpet</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-geo/">amp-geo</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-gfycat/">amp-gfycat</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-gist/">amp-gist</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-hulu/">amp-hulu</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-iframe/">amp-iframe</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-ima-video/">amp-ima-video</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-image-lightbox/">amp-image-lightbox</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-image-slider/">amp-image-slider</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-img/">amp-img</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-inputmask/">amp-inputmask</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-instagram/">amp-instagram</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-install-serviceworker/">amp-install-serviceworker</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-jwplayer/">amp-jwplayer</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-kaltura-player/">amp-kaltura-player</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-lightbox-gallery/">amp-lightbox-gallery</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-lightbox/">amp-lightbox</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-list/">amp-list</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-live-list/">amp-live-list</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-mustache/">amp-mustache</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-next-page/">amp-next-page</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-o2-player/">amp-o2-player</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-pinterest/">amp-pinterest</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-pixel/">amp-pixel</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-reach-player/">amp-reach-player</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-recaptcha-input/">amp-recaptcha-input</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-reddit/">amp-reddit</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-render/">amp-render</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-script/">amp-script</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-selector/">amp-selector</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-sidebar/">amp-sidebar</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-social-share/">amp-social-share</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-soundcloud/">amp-soundcloud</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-springboard-player/">amp-springboard-player</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-sticky-ad/">amp-sticky-ad</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-timeago/">amp-timeago</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-twitter/">amp-twitter</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-user-notification/">amp-user-notification</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-video-iframe/">amp-video-iframe</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-video/">amp-video</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-vimeo/">amp-vimeo</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-vine/">amp-vine</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-web-push/">amp-web-push</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/components/amp-youtube/">amp-youtube</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>guides</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/guides/internationalization/">Internationalization</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/guides/using_the_amp_url_api/">Using the AMP URL API</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/guides/using_the_google_amp_cache/">Using the Google AMP Cache</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>advertising-analytics</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/advertising-analytics/amphtml_ads_vs_non_amp_ads/">AMP Ads vs non-AMP Ads</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/advertising-analytics/joining_analytics_sessions/">Joining Analytics Sessions</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/advertising-analytics/tracking_core_web_vitals/">Tracking Core Web Vitals</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item active level-1"> <span class="nav-link"> <span>eコマース</span> </span> <input class="nav-trigger" type="checkbox" checked> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/e-commerce/amp_for_e-commerce_getting_started/">AMP for E-Commerce Getting Started</a> </li> <li class="nav-item active level-2" autoscroll> <a class="nav-link" href="/ja/documentation/examples/websites/e-commerce/checkout_flow/">Checkout Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/e-commerce/hotel/">Hotel</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/e-commerce/housing/">Housing</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/e-commerce/payments_in_amp/">Payments in AMP</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/e-commerce/product_browse_page/">Product Browse Page</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/e-commerce/product_page/">Product Page</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/e-commerce/shopping_cart/">Shopping Cart</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>interactivity-dynamic-content</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/client-side_filtering/">Client-side filtering</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/combobox/">ComboBox</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/comment_section/">Comment Section</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/conditional_state/">Conditional State</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/copy_button/">Copy Button</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/currency_conversion/">Currency Conversion</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/dynamic_accordion/">Dynamic Accordion</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/dynamic_content_after_user-interaction/">Dynamic Content After User-Interaction</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/favorite_button/">Favorite Button</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/linked_dropdowns/">Linked Dropdowns</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/mixing_dynamic_and_cached_data/">Mixing Dynamic and Cached Data</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/multi_page_flow/">Multi Page Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/paged_list/">Paged List</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/poll/">Poll</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/restrict_duplicate_selection/">Restrict Duplicate Selection</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/seatmap/">SeatMap</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/seatmap_multiple_selection/">SeatMap Multiple Selection</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/show_more_button/">Show More Button</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/star_rating/">Star Rating</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/interactivity-dynamic-content/tic_tac_toe/">Tic-Tac-Toe</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>multimedia-animations</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/multimedia-animations/advanced_video_docking/">Advanced Video Docking</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/multimedia-animations/animated_hamburger_menu/">Animated hamburger menu</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/multimedia-animations/click-to-play_overlay_for_amp-video/">Click-to-play overlay for amp-video</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/multimedia-animations/custom_loading_indicators/">Custom Loading Indicators</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/multimedia-animations/image_galleries_with_amp-carousel/">Image Galleries with amp-carousel</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/multimedia-animations/integrating_videos_in_amp_an_overview/">Integrating Videos in AMP an Overview</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/multimedia-animations/rich_media_notifications/">Rich Media Notifications</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/multimedia-animations/video_carousels_with_amp-carousel/">Video Carousels with amp-carousel</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/multimedia-animations/video_rotate_to_fullscreen_with_hint/">Video rotate to fullscreen with hint</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>news-publishing</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/news-publishing/live_blog/">Live Blog</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/news-publishing/news_article/">News Article</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/news-publishing/recipe/">Recipe</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>personalization</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/personalization/geolocation_with_amp-list/">Geolocation with amp-list</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>style-layout</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/style-layout/dark_mode_toggle/">Dark Mode</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/style-layout/how_to_support_images_with_unknown_dimensions/">How to support Images with unknown Dimensions</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/style-layout/tab_panels_with_amp-selector/">Tab Panels with amp-selector</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>user-consent</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/user-consent/advanced_user_consent_flow/">Advanced User Consent Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/user-consent/client_side_user_consent_flow/">Client Side User Consent Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/user-consent/external_user_consent_flow/">External User Consent Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/user-consent/geolocation-based_consent_flow/">Geolocation-based Consent Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/user-consent/granular_user_consent/">Granular User Consent</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/user-consent/server_side_user_consent_flow/">Server Side User Consent Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/user-consent/user_consent_modal_ui/">User Consent Modal UI</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>visual-effects</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/visual-effects/animated_snackbar/">Animated Snackbar</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/visual-effects/basics_of_orientation_effects/">Basics of orientation effects</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/visual-effects/basics_of_scrollbound_effects/">Basics of scrollbound effects</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/ja/documentation/examples/websites/visual-effects/scroll_to_top/">Scroll to top</a> </li> </ul> </li> </ul> </div> </div> </div> </ul> </nav> </amp-sidebar> <footer class="ap--footer"> <div class="-a"> <div class="-f"> <div class="ap-o-footer-hint">もちろん、このサイトはAMPで作成されています！</div> <div class="-l"> <h5 class="-c">最新情報をチェック</h5> <ul class="-h"> <li class="-p"> <a class="ap-a-ico -d" href="https://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wordpress" title="WordPress"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"/></svg> </a></li> <li class="-p"> <a class="ap-a-ico -d" href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stackoverflow"/></svg></a> </li> </ul> </div> </div> <div class="-v"> <div class="-m"> <h5 class="-g">概要</h5> <ul class="-y"> <li class="-b"><a href="/ja/about/websites/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP フレームワーク</a></li> <li class="-b"><a href="/ja/about/use-cases/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>使用事例</a></li> <li class="-b"><a href="/ja/success-stories/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>成功事例</a></li> <li class="-b"><a href="/ja/about/how-amp-works/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>機能</a></li> </ul> </div> <div class="-m"> <h5 class="-g">ドキュメント</h5> <ul class="-y"> <li class="-b"><a href="/ja/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>スタートガイド</a></li> <li class="-b"><a href="/ja/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>ガイドとチュートリアル</a></li> <li class="-b"><a href="/ja/documentation/components/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>コンポーネント</a></li> <li class="-b"><a href="/ja/documentation/examples/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>実例</a></li> <li class="-b"><a href="/ja/documentation/templates/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>デザインテンプレート</a></li> <li class="-b"><a href="/ja/documentation/tools/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>ツール</a></li> </ul> </div> <div class="-m"> <h5 class="-g">コミュニティ</h5> <ul class="-y"> <li class="-b"><a href="/ja/support/faq/platform-and-vendor-partners/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>プラットフォームとベンダーパートナー</a></li> <li class="-b"><a href="/ja/documentation/guides-and-tutorials/contribute/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>貢献</a></li> <li class="-b"><a href="/ja/community/roadmap/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>ロードマップ</a></li> </ul> <h5 class="-g">OpenJS Foundation</h5> <ul class="-y"> <li class="-b"><a class="-w" href="https://openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>The OpenJS Foundation</a></li> <li class="-b"><a class="-w" href="https://bylaws.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>OpenJS Foundation Bylaws</a></li> <li class="-b"><a class="-w" href="https://trademark-policy.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark Policy</a></li> <li class="-b"><a class="-w" href="https://trademark-list.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark List</a></li> </ul> </div> <div class="-m"> <h5 class="-g">イベント</h5> <ul class="-y"> <li class="-b"><a href="https://blog.amp.dev/2020/02/20/amp-conf-2020-return-to-nyc/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Conf 2020</a></li> <li class="-b"><a href="/ja/events/amp-cs-2019/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Contributor Summit 2019</a></li> </ul> <h5 class="-g">AMP のブランド素材</h5> <ul class="-y"> <li class="-b"><a href="/static/files/brand-material/AMP_Mini_Styleguide.pdf" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>スタイルガイド</a></li> <li class="-b"><a href="/static/files/brand-material/AMP_Logo_Rebrush.zip" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>ロゴ</a></li> </ul> </div> </div> <div class="-k"> <div class="-_"> <amp-img src="/static/img/logo-openjsf.svg" alt="Logo of the OpenJS Foundation" width="315" height="100" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:31.746%"></i-amphtml-sizer></amp-img> </div> <ul class="-j"> <li class="-q"><a class="-z" href="https://terms-of-use.openjsf.org" rel="noopener">Terms of Use</a></li> <li class="-q"><a class="-z" href="https://privacy-policy.openjsf.org" rel="noopener">プライバシーポリシー</a></li> <li class="-q"><a class="-z" href="https://www.linuxfoundation.org/cookies" rel="noopener">Cookie Policy</a></li> </ul> </div> <div class="-te"> © <a href="https://openjsf.org">OpenJS Foundation</a> and AMP Project contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. <br><br> The services available at <a href="https://cdn.ampproject.org">cdn.ampproject.org</a> are provided by Google and the respective <a href="https://policies.google.com/privacy?hl=en">privacy policy</a> applies. </div> </div> </footer> <aside class="ap-o-translation-hint"> <p class="ap-o-translation-hint-wrapper">Sadly this page isn't translated yet, but will be shortly - check back soon!</p> </aside> <amp-geo layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"ISOCountryGroups":{"eu":["preset-eea"],"doubleOptIn":["de","at","no","gr","lu"]}}</script> </amp-geo> <amp-consent id="consent" class="-o i-amphtml-layout-nodisplay" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"consentInstanceId":"consent","promptUI":"consent-popup","consentRequired":false,"geoOverride":{"eu":{"consentRequired":true}}}</script> <div id="consent-popup" class="consent-popup"> <button type="reset" class="-u" on="tap:consent.dismiss" role="button" tabindex="0" aria-label="同意を却下する"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> <p class="ap-o-consent-text"> We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://policies.google.com/technologies/cookies">use of cookies</a> and <a href="https://policies.google.com/privacy">privacy policy</a>. </p> <button on="tap:consent.accept" class="ap-a-btn" role="button" aria-label="Cookie の仕様を受け入れる">了解！</button> </div> </amp-consent> <amp-analytics type="gtag" data-credentials="include" data-block-on-consent class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:1px;height:1px;" i-amphtml-layout="fixed"> <script type="application/json">{"extraUrlParams":{"cd2":"${ampdocHost}"},"requests":{"CWV_EVENT":"${base}?v=1\u0026t=event\u0026tid=${gtag_id}\u0026cid=0\u0026ec=cwv","base":"https://google-analytics.com/collect/"},"triggers":{"banner":{"on":"click","selector":"#top-banner","vars":{"event_action":"click","event_category":"examples","event_label":"banner","event_name":"banner"}},"breadcrumbLink":{"on":"click","selector":".ap-m-breadcrumbs-crumb","vars":{"event_action":"link","event_category":"examples","event_label":"breadcrumbs","event_name":"breadcrumbs"}},"cls":{"extraUrlParams":{"cls":"${cumulativeLayoutShift}"},"on":"visible","request":"CWV_EVENT"},"defaultPageview":{"on":"visible","request":"pageview","vars":{"title":"{{title}}"}},"fid":{"extraUrlParams":{"fid":"${firstInputDelay}"},"on":"visible","request":"CWV_EVENT"},"formatToggle":{"on":"click","selector":".ap-m-format-toggle-link","vars":{"event_action":"link","event_category":"examples","event_label":"format-toggle","event_name":"format-toggle"}},"lcp":{"extraUrlParams":{"lcp":"${largestContentfulPaint}"},"on":"visible","request":"CWV_EVENT"},"navigation":{"on":"click","selector":".ap--header a, .ap-o-burger-menu-link","vars":{"event_action":"link","event_category":"examples","event_label":"navigation","event_name":"navigation"}},"scrolledEnd":{"on":"scroll","scrollSpec":{"verticalBoundaries":[90]},"vars":{"event_action":"end","event_category":"examples","event_label":"scroll","event_name":"scroll"}},"scrolledHalf":{"on":"scroll","scrollSpec":{"verticalBoundaries":[50]},"vars":{"event_action":"half","event_category":"examples","event_label":"scroll","event_name":"scroll"}},"searchButton":{"on":"click","selector":"#searchTriggerOpen","vars":{"event_action":"open","event_category":"search","event_label":"search","event_name":"search"}},"sidebarLink":{"on":"click","selector":".ap-o-sidebar a","vars":{"event_action":"link","event_category":"examples","event_label":"sidebar","event_name":"sidebar"}},"sidebarToggle":{"on":"click","selector":"label[for=\"sidebar-desktop\"], label[for=\"sidebar\"]","vars":{"event_action":"toggle","event_category":"examples","event_label":"sidebar","event_name":"sidebar"}}},"vars":{"config":{"G-TYM9BH1XCX":{"groups":"default"}},"gtag_id":"G-TYM9BH1XCX"}}</script> </amp-analytics> <amp-install-serviceworker src="/serviceworker.js" data-iframe-src="https://amp.dev/serviceworker.html" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"></amp-install-serviceworker> <style amp-keyframes>@keyframes duepduep{0%{transform:translate(0)}49%{transform:translate(40px)}50%{transform:translate(-40px)}to{transform:translate(0)}}@keyframes moveSidebarToggleBackwards{0%{transform:translateX(calc(90vw - 50%))}to{transform:translateX(0)}}@keyframes moveSidebarToggleForwards{0%{transform:translateX(0)}to{transform:translateX(calc(90vw - 50%))}}</style></body></html>