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="description" content="データを動的にダウンロードし、テンプレートを使用してリスト項目を作成します。"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:description" content="データを動的にダウンロードし、テンプレートを使用してリスト項目を作成します。"><meta name="twitter:title" content="ドキュメント：amp-list"><meta name="twitter:creator" content="@ampproject"><meta name="twitter:site" content="@ampproject"><meta name="twitter:image" content="https://amp.dev/static/img/sharing/docs-component-600x314.png"><meta property="og:title" content="ドキュメント：<amp-list>"><meta property="og:url" content="https://amp.dev/ja/documentation/components/amp-list/"><meta property="og:image" content="https://amp.dev/static/img/sharing/docs-component-600x314.png"><meta property="og:image:width" content="600"><meta property="og:image:height" content="314"><meta name="supported-amp-formats" content="websites,stories,email"><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 src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" custom-element="amp-analytics" 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 src="https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" custom-element="amp-bind" 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 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 custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.mjs" async type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" crossorigin="anonymous" custom-element="amp-iframe"></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 custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.mjs" async 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 custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.mjs" async 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/components/amp-list/"><link rel="alternate" hreflang="x-default" href="https://amp.dev/documentation/components/amp-list/"><link rel="alternate" hreflang="fr" href="https://amp.dev/fr/documentation/components/amp-list/"><link rel="alternate" hreflang="ar" href="https://amp.dev/ar/documentation/components/amp-list/"><link rel="alternate" hreflang="es" href="https://amp.dev/es/documentation/components/amp-list/"><link rel="alternate" hreflang="id" href="https://amp.dev/id/documentation/components/amp-list/"><link rel="alternate" hreflang="ko" href="https://amp.dev/ko/documentation/components/amp-list/"><link rel="alternate" hreflang="pt_BR" href="https://amp.dev/pt_br/documentation/components/amp-list/"><link rel="alternate" hreflang="tr" href="https://amp.dev/tr/documentation/components/amp-list/"><link rel="alternate" hreflang="zh_CN" href="https://amp.dev/zh_cn/documentation/components/amp-list/"><title>ドキュメント：<amp-list> - amp.dev</title><script type="application/ld+json">{"@context":"http://schema.org","@type":"Webpage","url":"https://amp.dev/ja/documentation/components/amp-list/ ","name":"amp.dev","headline":"ドキュメント：\u0026lt;amp-list\u0026gt;","description":"データを動的にダウンロードし、テンプレートを使用してリスト項目を作成します。","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-component-600x314.png","width":600,"height":314}}</script><style amp-custom>@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}.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}}.-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--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-component{max-width:100%}@media(min-width:768px){.ap-o-sidebar-component .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-component .nav{margin:15px 0 0;padding-bottom:15px}.ap-o-sidebar-component .nav-list{max-width:300px;list-style:none;padding:0;margin:0}.ap-o-sidebar-component .nav-list.level-1{margin:0 15px}.ap-o-sidebar-component .nav-list .nav-list{padding-bottom:10px;margin-bottom:10px}.ap-o-sidebar-component .nav-item{position:relative;margin:0;padding:0}.ap-o-sidebar-component .nav-item.level-1{pointer-events:none}.ap-o-sidebar-component .nav-item.level-1 .nav-link{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1.8rem;padding:0;margin:0;line-height:1;word-break:break-all;pointer-events:auto;color:#e2e5e6}.ap-o-sidebar-component .nav-item.level-1 .nav-link:only-child:not(a){margin:-20px;font-size:0;pointer-events:none;z-index:-1}.ap-o-sidebar-component .nav-item.level-1>.nav-link{padding-top:10px;pointer-events:none;z-index:1;transition:color .15s ease}.ap-o-sidebar-component .nav-item.level-1.active>.nav-link,.ap-o-sidebar-component .nav-item.level-1:hover>.nav-link{color:#91979d}.ap-o-sidebar-component .nav-item.level-2 .nav-link{text-transform:unset;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Noto Sans,system;font-size:.875rem;line-height:1.4em;padding:3px 25px 3px 0;margin:0}.ap-o-sidebar-component .nav-item.active>.nav-link{font-weight:700;color:#005af0}.ap-o-sidebar-component .nav-item:hover>.nav-link{color:#005af0}.ap-o-sidebar-component .nav-link{position:relative;display:block;padding:0;margin:0;color:rgba(0,0,0,.75);border:none;background-color:transparent}.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-clip{position:relative}.ap-m-clip-expand{position:absolute;z-index:10;bottom:0;left:0;display:flex;justify-content:center;align-items:flex-end;height:65px;width:100%;border:none;background:#fff;background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff 40%);cursor:pointer}.ap-m-clip-expand-icon{max-height:21px;max-width:21px;margin-top:35px;fill:#48525c;transition:transform .3s}.ap-m-clip-expand:hover .ap-m-clip-expand-icon{fill:#005af0;transform:translate3d(0,-2px,0)}.ap-a-pill{display:inline-block;margin:5px;padding:5px 10px;border:none;border-radius:25px;background:var(--background-color,#fff);line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;box-shadow:0 10px 25px 0 rgba(0,0,0,.15);color:var(--color,#8c8f94);font-family:Noto Sans,system;transition:background-color .2s ease-in,color .2s ease-in,box-shadow .25s ease-in;cursor:pointer}@media(min-width:550px){.ap-a-pill{padding:5px 20px;margin:5px 10px}}@media(min-width:768px){.ap-a-pill{margin:5px;padding:5px 20px}}.ap-a-pill.filtered,.ap-a-pill:hover{box-shadow:0 2px 5px 0 rgba(0,0,0,.15);background:#005af0;color:#fff}.ap-a-pill-link{color:#005af0}.ap-a-pill-small{padding:2px 12px}.ap-a-pill-flat{box-shadow:none;background-color:#ebebf0}.ap-a-pill-meta{box-shadow:none;background-color:#48525c;color:#fff;pointer-events:none}.ap-a-pill-bento{background-color:#d45a5a;color:#fff}.ap-a-copy-script{display:flex;align-items:center;flex-basis:100%}.ap-a-copy-script pre{overflow-x:scroll;flex:1 0;margin:6px 8px 6px 0;padding:4px 6px;white-space:wrap;background:#e2e5e6;font-size:12.6px}.ap-a-copy-script pre::-webkit-scrollbar{width:6px;height:6px}.ap-a-copy-script pre::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap-a-copy-script pre::-webkit-scrollbar-corner{background-color:transparent}.ap-a-copy-script pre::-webkit-scrollbar{height:4px}.ap-a-copy-script pre::-webkit-scrollbar-thumb{border-radius:0}.ap-o-component-intro-row{padding:15px;background-color:#fff;border:1px solid #e2e5e6}.ap-o-component-intro-row+.ap-o-component-intro-row{margin-top:10px}@media(min-width:768px){.ap-o-component-intro-row-inline{display:flex;align-items:baseline;flex-wrap:wrap}}.ap-o-component-intro-headline{font-size:16px;margin:0 0 10px}.ap-o-component-intro-row-inline .ap-o-component-intro-headline{white-space:nowrap;margin-right:10px}.ap-o-component-intro-headline .active{color:#00f}.ap-o-component-intro-filter{margin-left:auto}.ap-o-component-intro-filter *{font-size:.875rem}.ap-o-component-intro-text{margin:5px 0}.ap-o-component-intro-list{max-height:142px;overflow:hidden}@media(min-width:768px){.ap-o-component-intro-list{display:flex;flex-wrap:wrap}}.ap-o-component-intro-list-item{display:block;margin-bottom:6px;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(min-width:768px){.ap-o-component-intro-list-item{width:50%;padding-right:12px}}.expanded .ap-o-component-intro-list{max-height:none}.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-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--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}body{background-color:#fafafc}.-ld .-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){.-ld .-tf{padding:0 15px}.-ld .-tf>div,.-ld .-tf section{min-width:0}}@media(min-width:768px){.-ld .-tf{display:grid;grid-gap:30px;grid-template-columns:repeat(24,minmax(0,1fr));padding:0 30px;grid-gap:0}}@media(min-width:1024px){.-ld .-tf{padding:0 15px}}.-ld .-t,.-ld .ap--help{grid-column:1;position:relative;width:100%;background:#fafafc;box-shadow:0 25px 40px 0 rgba(0,0,0,.05);padding-left:0;padding-right:0}@media(min-width:768px){.-ld .-t,.-ld .ap--help{grid-column:9/25}}@media(min-width:1024px){.-ld .-t,.-ld .ap--help{grid-column:7/25}.-ld .-t p.limit,.-ld .ap--help p.limit{max-width:70%}}@media(min-width:768px){.-ld .-t,.-ld .ap--help{grid-column:8/25}}@media(min-width:1024px){.-ld .-t,.-ld .ap--help{grid-column:6/25}}.-ld .-uc{grid-column:auto;padding:0}@media(min-width:768px){.-ld .-uc{grid-column:1/8;grid-row:span 6;margin-right:20px}}@media(min-width:1024px){.-ld .-uc{grid-column:1/6}}.-ld .ap--toc{box-shadow:20px 25px 40px 0 rgba(0,0,0,.05)}.-ld .ap--toc~.-t{box-shadow:-30px -5px 30px -20px rgba(0,0,0,.05)}@media(min-width:768px){.-ld .ap--toc{grid-column:8/25}.-ld .ap--toc~.-t{padding-top:0}}@media(min-width:768px)and (min-width:768px){.-ld .ap--toc~.-t{grid-column:8/25;padding-left:30px}}@media(min-width:768px)and (min-width:1024px){.-ld .ap--toc~.-t{grid-column:6/20;padding-left:30px;padding-right:30px}}@media(min-width:768px)and (min-width:768px){.-ld .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:768px)and (min-width:1024px){.-ld .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:1024px){.-ld .ap--toc{background:#fafafc;grid-column:20/25;grid-row:span 3;padding-top:93px;padding-bottom:25px}.-ld .ap--toc~.-t{padding-top:62px}}@media(min-width:1024px)and (max-width:767px){.-ld .ap--toc~.-t{padding-left:15px;padding-right:15px}}.-ld .-uc+.-t,.-ld .ap--toc+.-t{padding-top:62px}@media(max-width:767px){.-ld .-uc+.-t,.-ld .ap--toc+.-t{padding-left:15px;padding-right:15px}}@media(min-width:1024px){.-ld .-uc+.-t:nth-of-type(2),.-ld .-uc+.-t:nth-of-type(3),.-ld .ap--toc+.-t:nth-of-type(2),.-ld .ap--toc+.-t:nth-of-type(3){grid-row:1}}.-ld .ap--versions{position:relative;display:inline-flex;align-items:center;background:#fff;border:1px solid #e2e5e6;margin-top:5px}.-ld .ap--versions-toggle{border:0;padding:0 32px 0 8px;background:#fff;font-family:inherit;font-size:inherit;font-weight:inherit;-moz-appearance:none;-webkit-appearance:none;appearance:none}.-ld .ap--versions:after{content:"";position:absolute;right:8px;width:16px;height:35px;background:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%2320202A'%3E%3Cpath d='M59.863 17.14l4.137 5.488-32 24.232-32-24.232 4.137-5.488 27.863 21.108z'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;pointer-events:none}.-ld .ap--component-tags{margin-top:-1.5rem;margin-bottom:2rem}@media(min-width:768px){.-ld .-t,.-ld .ap--help{padding-left:30px;padding-right:30px}}.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-fab{display:flex;justify-content:center;width:56px;position:absolute;bottom:16px;right:16px;padding:0;font-size:24px;line-height:56px;user-select:none;cursor:pointer;z-index:14;color:#fff;background-color:#005af0;border:none;border-radius:50%;box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);pointer-events:auto}.ap-a-fab:active{box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12)}.ap-a-fab-show{transform:scale(0);animation:expand .25s ease-in-out .25s both}.ap-a-fab-hide{transform:scale(1);animation:collapse .25s ease-in-out both}@media(min-width:768px){.ap-a-fab{display:none}}.-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}table{table-layout:fixed;width:100%;position:relative;border-collapse:collapse;padding:0 0 0 20px;margin:1.5em -20px 2em;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem}@media(min-width:768px){table{padding:0;margin:1.5em 0 2em}}thead{font-weight:700}thead tr{text-align:left}thead tr th{padding:20px}tbody tr,thead tr th{border-bottom:1px solid #e2e5e6}tbody tr:nth-child(odd){background-color:hsla(0,0%,100%,.5)}tbody tr td:first-child{border-right:1px solid #e2e5e6}tbody td{padding:10px 20px;text-align:left;vertical-align:top;width:50%}@media(min-width:768px){tbody td{padding:20px}}@media(min-width:1024px){tbody td{width:25%}}tbody td 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}</style><link rel="manifest" href="/manifest.json"></head><body 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="warning-sign" viewBox="0 0 38 38"><g fill="none" fill-rule="evenodd"><path stroke="#F3C000" stroke-width="2" d="M19.843 2.29l16.643 33.671c.177.356.03.788-.326.964-.1.05-.208.075-.319.075H2.171c-.398 0-.72-.322-.72-.72 0-.113.026-.224.077-.325l17.028-33.67c.179-.355.612-.497.967-.318.139.07.251.184.32.324z"/><path fill="#F3C000" fill-rule="nonzero" d="M17.621 32.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 32.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="contentmenu" viewBox="0 0 64 64"> <path d="M1.351 46.865h36.036c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-36.036c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 14.432h40.541c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-40.541c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 38.757h31.532c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-31.532c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 30.649h37.838c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-37.838c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 22.541h34.234c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-34.234c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM52.249 29.371c-0.992 0-1.231-0.566-0.525-1.272l5.296-5.296c0.353-0.353 0.931-0.348 1.279 0l5.296 5.296c0.702 0.702 0.466 1.272-0.525 1.272h-10.822zM63.069 35.153c0.992 0 1.231 0.566 0.525 1.272l-5.296 5.296c-0.353 0.353-0.931 0.348-1.279 0l-5.296-5.296c-0.702-0.702-0.466-1.272 0.525-1.272h10.822z"/> </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><symbol id="orientation-toggle" viewBox="0 0 64 64"> <path d="M62.149 0h-30.149c-1.058 0-1.851 0.793-1.851 1.851v22.215c0 1.058 0.793 1.851 1.851 1.851s1.851-0.793 1.851-1.851v-20.364h26.446v42.843h-4.231c-1.058 0-1.851 0.793-1.851 1.851s0.793 1.851 1.851 1.851h6.083c1.058 0 1.851-0.793 1.851-1.851v-46.545c0-0.793-0.793-1.851-1.851-1.851z"/> <path d="M48.132 30.413h-46.281c-1.058 0-1.851 0.793-1.851 1.851v29.884c0 1.058 0.793 1.851 1.851 1.851h46.281c1.058 0 1.851-0.793 1.851-1.851v-29.884c0-1.058-0.793-1.851-1.851-1.851zM46.281 60.297h-42.578v-26.182h42.578v26.182z"/> <path d="M4.76 25.124c1.058 0 1.851-0.793 1.851-1.851 0-6.612 5.289-11.901 11.901-11.901h1.058l-0.529 0.529c-0.793 0.793-0.793 1.851 0 2.645 0.264 0.264 0.793 0.529 1.322 0.529s1.058-0.264 1.322-0.529l3.703-3.703c0.793-0.793 0.793-1.851 0-2.645l-3.703-3.703c-0.793-0.793-1.851-0.793-2.645 0s-0.793 1.851 0 2.645l0.529 0.529h-1.058c-8.727 0-15.603 7.141-15.603 15.603 0 1.058 0.793 1.851 1.851 1.851z"/> </symbol><symbol id="reload" viewBox="0 0 64 64"> <path d="M58.303 24.441c-4.535-10.583-14.614-17.386-25.953-17.638l2.772-2.772c1.008-1.008 1.008-2.268 0-3.276s-2.268-1.008-3.276 0l-7.055 7.307c-1.008 1.008-1.008 2.268 0 3.276l7.055 7.055c0.504 0.504 1.008 0.756 1.512 0.756s1.26-0.252 1.512-0.756c1.008-1.008 1.008-2.268 0-3.276l-3.779-3.78c9.827-0.252 18.898 5.543 22.929 14.614 4.535 10.583 0.756 22.929-9.071 29.48-9.575 6.299-22.425 4.787-30.488-3.528s-8.819-21.165-2.016-30.488c0.756-1.008 0.504-2.52-0.504-3.276s-2.52-0.504-3.024 0.504c-8.063 11.087-7.055 26.457 2.52 36.535 5.543 5.795 13.102 8.819 20.661 8.819 5.291 0 10.835-1.512 15.622-4.787 11.339-7.559 15.874-22.173 10.583-34.772z"/> </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/components/amp-list/" role="listitem">English</a> <a class="-tw" href="/de/documentation/components/amp-list/" role="listitem">Deutsch</a> <a class="-tw" href="/fr/documentation/components/amp-list/" role="listitem">Français</a> <a class="-tw" href="/ar/documentation/components/amp-list/" role="listitem">العربية</a> <a class="-tw" href="/es/documentation/components/amp-list/" role="listitem">Español</a> <a class="-tw" href="/it/documentation/components/amp-list/" role="listitem">Italiano</a> <a class="-tw" href="/id/documentation/components/amp-list/" role="listitem">Indonesia</a> <a class="-tw" href="/ko/documentation/components/amp-list/" role="listitem">한국어</a> <a class="-tw" href="/pt_br/documentation/components/amp-list/" role="listitem">Português</a> <a class="-tw" href="/ru/documentation/components/amp-list/" role="listitem">Русский</a> <a class="-tw" href="/tr/documentation/components/amp-list/" role="listitem">Türkçe</a> <a class="-tw" href="/zh_cn/documentation/components/amp-list/" role="listitem">中文</a> <a class="-tw" href="/pl/documentation/components/amp-list/" role="listitem">Polski</a> <a class="-tw" href="/vi/documentation/components/amp-list/" 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 -ld"> <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"> <span class="ap-o-toc-hl">目次</span> <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> </label> <input class="-us -un" type="checkbox" name="toc" id="toc" autocomplete="off"> <ul><li><a href="#使用方法">使用方法 </a></li> <li><a href="#動作">動作 </a><ul> <li><a href="#xhr-のバッチ処理">XHR のバッチ処理 </a></li> <li><a href="#オーバーフローの指定">オーバーフローの指定 </a></li> <li><a href="#プレースホルダとフォールバック">プレースホルダとフォールバック </a></li> <li><a href="#データの更新">データの更新 </a></li> <li><a href="#動的なサイズ変更">動的なサイズ変更 </a><ul> <li><a href="#試験運用版:-amp-list-resizable-children">試験運用版: amp-list-resizable-children </a></li> </ul> </li> </ul> </li> <li><a href="#属性">属性 </a><ul> <li><a href="#src（必須）">src（必須） </a></li> <li><a href="#credentials（オプション）">credentials（オプション） </a></li> <li><a href="#items（オプション）">items（オプション） </a></li> <li><a href="#max-items（オプション）">max-items（オプション） </a></li> <li><a href="#single-item（オプション）">single-item（オプション） </a></li> <li><a href="#reset-on-refresh（オプション）">reset-on-refresh（オプション） </a></li> <li><a href="#[is-layout-container]-（試験運用版、オプション）">[is-layout-container] （試験運用版、オプション） </a></li> <li><a href="#binding（オプション）">binding（オプション） </a></li> </ul> </li> <li><a href="#試験運用版:-追加の読み込みと無限スクロール（amp-list-load-more）">試験運用版: 追加の読み込みと無限スクロール（amp-list-load-more） </a><ul> <li><a href="#使用例">使用例 </a></li> <li><a href="#属性_1">属性 </a><ul> <li><a href="#load-more（必須）">load-more（必須） </a></li> <li><a href="#load-more-bookmark（オプション）">load-more-bookmark（オプション） </a></li> </ul> </li> <li><a href="#load-more-要素のカスタマイズ">load-more 要素のカスタマイズ </a><ul> <li><a href="#load-more-button">load-more-button </a><ul> <li><a href="#例:">例: </a></li> <li><a href="#例:_1">例: </a></li> </ul> </li> <li><a href="#load-more-loading">load-more-loading </a></li> <li><a href="#load-more-failed">load-more-failed </a></li> <li><a href="#load-more-end">load-more-end </a><ul> <li><a href="#共通の属性">共通の属性 </a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#置換">置換 </a></li> <li><a href="#検証">検証 </a></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> <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/components/">コンポーネント</a> </nav> <h1> amp-list <div class="ap--versions"> <select class="ap--versions-toggle" on="change:AMP.navigateTo(url=event.value)"> <option value="../amp-list-v1.0/?format=websites"> 1.0 </option> <option selected value="../amp-list/?format=websites"> 0.1 </option> </select> </div> </h1> <div class="ap-o-component-intro"> <div class="ap-o-component-intro-row"> <h4 class="ap-o-component-intro-headline">Description</h4> <p class="ap-o-component-intro-text">データを動的にダウンロードし、テンプレートを使用してリスト項目を作成します。</p> </div>   <div class="ap-o-component-intro-row ap-o-component-intro-row-inline"> <h4 class="ap-o-component-intro-headline">Required Scripts</h4> <div id="amp-script" class="ap-a-copy-script"> <pre><script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script></pre> <amp-iframe width="24" height="24" layout="fixed" sandbox="allow-scripts" src="https://amp.dev/shared/copy-script/#%3Cscript%20async%20custom-element%3D%22amp-list%22%20src%3D%22https%3A//cdn.ampproject.org/v0/amp-list-0.1.js%22%3E%3C/script%3E" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:24px;height:24px;" i-amphtml-layout="fixed"> <div placeholder></div> </amp-iframe> </div> </div> <div class="ap-o-component-intro-row ap-o-component-intro-row-inline"> <h4 class="ap-o-component-intro-headline">Supported Layouts</h4> <div> <a class='ap-a-pill ap-a-pill-flat ap-a-pill-small ap-a-pill-link' href='/documentation/guides-and-tutorials/learn/amp-html-layout/layouts_demonstrated#fill'>fill</a> <a class='ap-a-pill ap-a-pill-flat ap-a-pill-small ap-a-pill-link' href='/documentation/guides-and-tutorials/learn/amp-html-layout/layouts_demonstrated#fixed'>fixed</a> <a class='ap-a-pill ap-a-pill-flat ap-a-pill-small ap-a-pill-link' href='/documentation/guides-and-tutorials/learn/amp-html-layout/layouts_demonstrated#fixed-height'>fixed-height</a> <a class='ap-a-pill ap-a-pill-flat ap-a-pill-small ap-a-pill-link' href='/documentation/guides-and-tutorials/learn/amp-html-layout/layouts_demonstrated#flex-item'>flex-item</a> <a class='ap-a-pill ap-a-pill-flat ap-a-pill-small ap-a-pill-link' href='/documentation/guides-and-tutorials/learn/amp-html-layout/layouts_demonstrated#nodisplay'>nodisplay</a> <a class='ap-a-pill ap-a-pill-flat ap-a-pill-small ap-a-pill-link' href='/documentation/guides-and-tutorials/learn/amp-html-layout/layouts_demonstrated#responsive'>responsive</a> </div> </div> <div class="ap-o-component-intro-row"> <div id="examples" class="ap-m-clip"> <h4 class="ap-o-component-intro-headline">実例</h4> <div class="ap-o-component-intro-list"> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/amp_for_e-commerce_getting_started/'>AMP for E-Commerce Getting Started</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/product_browse_page/'>Product Browse Page</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/product_page/'>Product Page</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-bind/'>amp-bind</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-list/'>amp-list</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/components/amp-mustache/'>amp-mustache</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/client-side_filtering/'>Client-side filtering</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/dynamic_accordion/'>Dynamic Accordion</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/linked_dropdowns/'>Linked Dropdowns</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/mixing_dynamic_and_cached_data/'>Mixing Dynamic and Cached Data</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/restrict_duplicate_selection/'>Restrict Duplicate Selection</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/show_more_button/'>Show More Button</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/multimedia-animations/custom_loading_indicators/'>Custom Loading Indicators</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/news-publishing/news_article/'>News Article</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/news-publishing/recipe/'>Recipe</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/personalization/geolocation_with_amp-list/'>Geolocation with amp-list</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/user-consent/advanced_user_consent_flow/'>Advanced User Consent Flow</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/user-consent/client_side_user_consent_flow/'>Client Side User Consent Flow</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/checkout_flow/'>Checkout Flow</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/hotel/'>Hotel</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/housing/'>Housing</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/e-commerce/shopping_cart/'>Shopping Cart</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/comment_section/'>Comment Section</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/favorite_button/'>Favorite Button</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/paged_list/'>Paged List</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/seatmap/'>SeatMap</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/interactivity-dynamic-content/seatmap_multiple_selection/'>SeatMap Multiple Selection</a> </div> <button id="examples-expand" class="ap-m-clip-expand" on="tap:examples.toggleClass(class='expanded', force=true),examples-expand.hide()"> <svg class="ap-m-clip-expand-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </button> </div> </div> </div> <p>CORS JSON エンドポイントからコンテンツを動的に取得し、指定のテンプレートを使用してレンダリングします。</p> <table> <tbody><tr> <td width="40%"><strong>必要なスクリプト</strong></td> <td><code><script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script></code></td> </tr> <tr> <td class="col-fourty"><strong><a href="/ja/documentation/guides-and-tutorials/develop/style_and_layout/control_layout/">サポートされるレイアウト</a></strong></td> <td>fill、fixed、fixed-height、flex-item、nodisplay、responsive</td> </tr> <tr> <td width="40%"><strong>例</strong></td> <td>AMP By Example の <a href="https://ampbyexample.com/components/amp-list/">amp-list の例</a>をご覧ください。</td> </tr> </tbody></table> <h2 id="使用方法">使用方法 <a name="usage"></a></h2> <p><code><amp-list></code> コンポーネントは、CORS JSON エンドポイントから動的コンテンツを取得します。エンドポイントからのレスポンスには、指定したテンプレートでレンダリングされるデータが含まれます。</p> <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="#warning-sign"/></svg> </div> <div class="ap-m-tip-content"> エンドポイントは、<a href="/ja/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/">AMP の CORS リクエスト</a>の仕様で指定されている要件を満たしている必要があります。 </div> </div><p></p> <p>テンプレートは次の 2 種類の方法で指定できます。</p> <ul> <li>既存の <code>template</code> または <code>script</code> 要素の ID を参照する <code>template</code> 属性。</li> <li><code>amp-list</code> 要素内で直接ネストされた <code>template</code> または <code>script</code> 要素。</li> </ul> <p>テンプレートについて詳しくは、<a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-templates.md">AMP HTML テンプレート</a>をご覧ください。</p> <p><em>例: 動的リストの表示</em></p> <p>次の例では、URL とタイトルを含む JSON データを取得し、ネストされた <a href="/ja/documentation/components/amp-mustache/">amp-mustache テンプレート</a>でコンテンツをレンダリングします。</p><div class="ap-code-preview inline"> <div class="ap-code-preview-preview"> <amp-list width="auto" height="100" layout="fixed-height" src="/static/inline-examples/data/amp-list-urls.json" class="i-amphtml-layout-fixed-height i-amphtml-layout-size-defined" style="height:100px;" i-amphtml-layout="fixed-height"> <template type="amp-mustache"> <div class="url-entry"> <a href="{{url}}">{{title}}</a> </div> </template> </amp-list> </div> <div class="-ta"><pre><span></span><code><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">"100"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"fixed-height"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/inline-examples/data/amp-list-urls.json"</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">"url-entry"</span><span class="p">></span> <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"{{url}}"</span><span class="p">></span>{{title}}<span class="p"></</span><span class="nt">a</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> </code></pre></div> </div> <a href="https://playground.amp.dev/?url=https%3A//preview.amp.dev/ja/documentation/components/amp-list.example.1.html%3Fformat%3Dwebsites" class="-n ap--playground-link"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">このスニペットを Playground で開く</span> </a> <p>以下に、使用した JSON ファイルを示します。</p> <div class="-ta"><pre><span></span><code><span class="p">{</span> <span class="nt">"items"</span><span class="p">:</span> <span class="p">[</span> <span class="p">{</span> <span class="nt">"title"</span><span class="p">:</span> <span class="s2">"AMP YouTube Channel"</span><span class="p">,</span> <span class="nt">"url"</span><span class="p">:</span> <span class="s2">"https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw"</span> <span class="p">},</span> <span class="p">{</span> <span class="nt">"title"</span><span class="p">:</span> <span class="s2">"AMP.dev"</span><span class="p">,</span> <span class="nt">"url"</span><span class="p">:</span> <span class="s2">"https://amp.dev/"</span> <span class="p">},</span> <span class="p">{</span> <span class="nt">"title"</span><span class="p">:</span> <span class="s2">"AMP Validator"</span><span class="p">,</span> <span class="nt">"url"</span><span class="p">:</span> <span class="s2">"https://validator.amp.dev/"</span> <span class="p">},</span> <span class="p">{</span> <span class="nt">"title"</span><span class="p">:</span> <span class="s2">"AMP Playground"</span><span class="p">,</span> <span class="nt">"url"</span><span class="p">:</span> <span class="s2">"https://playground.amp.dev/"</span> <span class="p">}</span> <span class="p">]</span> <span class="p">}</span> </code></pre></div> <p>以下に、取得したコンテンツのスタイル設定を示します。</p> <div class="-ta"><pre><span></span><code><span class="nt">amp-list</span> <span class="nt">div</span><span class="o">[</span><span class="nt">role</span><span class="o">=</span><span class="s2">"list"</span><span class="o">]</span> <span class="p">{</span> <span class="k">display</span><span class="p">:</span> <span class="k">grid</span><span class="p">;</span> <span class="k">grid-gap</span><span class="p">:</span> <span class="mf">0.5</span><span class="kt">em</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <h2 id="動作">動作 <a name="behavior"></a></h2> <p>ドキュメントが AMP キャッシュから配信された場合でも、リクエストは常にクライアントで作成されます。読み込みは、要素が現在のビューポートからどれだけ離れているかに応じて、通常の AMP ルールを使用してトリガーされます。</p> <p><code><amp-list></code> は、読み込み後に追加のスペースが必要な場合、通常の AMP フローを使用して高さを更新するよう AMP ランタイムにリクエストします。AMP ランタイムは、新しい高さのリクエストに対応できない場合、<code>overflow</code> 要素を表示します（可能な場合）。ただし、<code><amp-list></code> 要素の通常の配置（ドキュメントの一番下）では、ほとんどの場合、AMP ランタイムによるサイズ変更が可能であることが保証されます。</p> <p><code><amp-list></code> はデフォルトで、リスト要素に <code>list</code> ARIA ロールを、テンプレートを介してレンダリングされるアイテム要素に <code>listitem</code> ロールを追加します。</p> <h3 id="xhr-のバッチ処理">XHR のバッチ処理 <a name="xhr-batching"></a></h3> <p>AMP では、JSON エンドポイントに対する XMLHttpRequest（XHR）をバッチ処理します。つまり、AMP ページでは、複数のコンシューマー（複数の <code><amp-list></code> 要素など）のデータソースとして単一の JSON データリクエストを使用できます。たとえば、<code><amp-list></code> によってエンドポイントへの XHR が作成された場合、XHR の送信中は、同じエンドポイントに対する後続の XHR はトリガーされず、代わりに 1 つ目の XHR の結果を返します。</p> <p><code><amp-list></code> では、<a href="#items-optional"><code>items</code></a> 属性を使用して JSON レスポンスのサブセットをレンダリングできます。これにより、さまざまなコンテンツをレンダリングする複数の <code><amp-list></code> 要素を指定できますが、1 つの XHR を共有します。</p> <h3 id="オーバーフローの指定">オーバーフローの指定 <a name="specifying-an-overflow"></a></h3> <p>必要に応じて、<code>overflow</code> 属性が設定された要素を <code><amp-list></code> 要素に含めることができます。AMP ランタイムが <code><amp-list></code> 要素のサイズを要求どおりに変更できない場合、この要素が表示されます。</p> <p><em>例: リストに追加のスペースが必要な場合のオーバーフローの表示</em></p> <p>次の例では、画像とタイトルのリストを表示します。<code><amp-list></code> のコンテンツで追加のスペースが必要なため、AMP ランタイムによってオーバーフロー要素が表示されます。</p><div class="ap-code-preview inline"> <div class="ap-code-preview-preview"> <amp-list width="auto" height="140" layout="fixed-height" src="/static/inline-examples/data/amp-list-data.json" class="i-amphtml-layout-fixed-height i-amphtml-layout-size-defined" style="height:140px;" i-amphtml-layout="fixed-height"> <template type="amp-mustache"> <div class="image-entry"> <amp-img src="{{imageUrl}}" width="100" height="75"></amp-img> <span class="image-title">{{title}}</span> </div> </template> <div overflow class="list-overflow"> See more </div> </amp-list> </div> <div class="-ta"><pre><span></span><code><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">"140"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"fixed-height"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/static/inline-examples/data/amp-list-data.json"</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">"image-entry"</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-img</span> <span class="na">src</span><span class="o">=</span><span class="s">"{{imageUrl}}"</span> <span class="na">width</span><span class="o">=</span><span class="s">"100"</span> <span class="na">height</span><span class="o">=</span><span class="s">"75"</span><span class="p">></</span><span class="nt">amp-img</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"image-title"</span><span class="p">></span>{{title}}<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> <span class="p"></</span><span class="nt">template</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">overflow</span> <span class="na">class</span><span class="o">=</span><span class="s">"list-overflow"</span><span class="p">></span> See more <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-list</span><span class="p">></span> </code></pre></div> </div> <a href="https://playground.amp.dev/?url=https%3A//preview.amp.dev/ja/documentation/components/amp-list.example.2.html%3Fformat%3Dwebsites" class="-n ap--playground-link"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">このスニペットを Playground で開く</span> </a> <p>以下に、<code>overflow</code> の CSS を示します。</p> <div class="-ta"><pre><span></span><code><span class="p">.</span><span class="nc">list-overflow</span><span class="o">[</span><span class="nt">overflow</span><span class="o">]</span> <span class="p">{</span> <span class="k">position</span><span class="p">:</span> <span class="kc">absolute</span><span class="p">;</span> <span class="k">bottom</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="k">left</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="k">right</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <h3 id="プレースホルダとフォールバック">プレースホルダとフォールバック <a name="placeholder-and-fallback"></a></h3> <p><code><amp-list></code> は必要に応じて、プレースホルダまたはフォールバック（あるいはその両方）をサポートします。</p> <ul> <li>プレースホルダ**は、<code>placeholder</code> 属性が設定された子要素です。この要素は、<code><amp-list></code> による読み込みが成功するまで表示されます。フォールバックも指定されている場合、<code><amp-list></code> が読み込みに失敗すると、プレースホルダが表示されなくなります。</li> <li>フォールバック**は、<code>fallback</code> 属性が設定された子要素です。この要素は、<code><amp-list></code> が読み込みに失敗すると表示されます。</li> </ul> <p>詳しくは、<a href="/ja/documentation/guides-and-tutorials/develop/style_and_layout/placeholders/">プレースホルダとフォールバック</a>をご覧ください。子要素にプレースホルダとフォールバックの両方を指定することはできません。</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-list</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://foo.com/list.json"</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">placeholder</span><span class="p">></span>Loading ...<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">fallback</span><span class="p">></span>Failed to load data.<span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-list</span><span class="p">></span> </code></pre></div> <h3 id="データの更新">データの更新 <a name="refreshing-data"></a></h3> <p><code><amp-list></code> 要素は、他の要素が <code>on="tap:..."</code> 属性で参照可能な <code>refresh</code> アクションを公開します。</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:myList.refresh"</span><span class="p">></span>Refresh List<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-list</span> <span class="na">id</span><span class="o">=</span><span class="s">"myList"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://foo.com/list.json"</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="p">></span>{{title}}<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> </code></pre></div> <h3 id="動的なサイズ変更">動的なサイズ変更 <a name="dynamic-resizing"></a></h3> <h5 id="試験運用版:-amp-list-resizable-children">試験運用版: amp-list-resizable-children <a name="experiment-amp-list-resizable-children"></a></h5> <p>ユーザー操作に基づいてサイズを変更する際に <code><amp-list></code> が必要になることがあります。たとえば、ユーザーがタップする可能性がある amp-accordion が <code><amp-list></code> に含まれている場合、バインドされた CSS クラスが原因で <code><amp-list></code> のコンテンツがサイズ変更する場合、バインドされた <code>[src]</code> 属性が原因で <code><amp-list></code> 内のアイテム数が変更される場合などです。<code>changeToLayoutContainer</code> アクションは動的なサイズ変更に対処するために、アクションがトリガーされたときに amp-list を <code>layout="CONTAINER"</code> に変更します。次の例をご覧ください。</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"list.changeToLayoutContainer()"</span><span class="p">></span>Show Grid<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-list</span> <span class="na">id</span><span class="o">=</span><span class="s">"list"</span> <span class="na">width</span><span class="o">=</span><span class="s">"396"</span> <span class="na">height</span><span class="o">=</span><span class="s">"80"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"responsive"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/test/manual/amp-list-data.json?RANDOM"</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> {{title}} <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> </code></pre></div> <p>このアクションは試験運用版として、<code>amp-list-resizable-children</code> で使用できます。</p> <h2 id="属性">属性 <a name="attributes"></a></h2> <h5 id="src（必須）">src（必須） <a name="src-required"></a></h5> <p><code><amp-list></code> 内でレンダリングされる JSON を返すリモートエンドポイントの URL。この属性には CORS HTTP サービスを指定する必要があります。また、URL のプロトコルは HTTPS である必要があります。</p> <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="#warning-sign"/></svg> </div> <div class="ap-m-tip-content"> エンドポイントは、<a href="/ja/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/">AMP の CORS リクエスト</a>の仕様で指定されている要件を満たしている必要があります。 </div> </div><p></p> <p><code>[src]</code> 属性が存在する場合、<code>src</code> 属性を省略できることがあります。この属性は、<a href="/ja/documentation/components/amp-bind/"><code>amp-bind</code></a> を使用している場合に、ページ読み込みではなくユーザー操作の結果としてコンテンツをレンダリングするのに便利です。</p> <h5 id="credentials（オプション）">credentials（オプション） <a name="credentials-optional"></a></h5> <p><a href="https://fetch.spec.whatwg.org/">Fetch API</a> で指定されているとおりに <code>credentials</code> オプションを定義します。</p> <ul> <li>サポートされている値: <code>omit</code>、<code>include</code></li> <li>デフォルト値: <code>omit</code></li> </ul> <p>認証情報を送信するには、<code>include</code> を渡します。この値が設定されている場合、レスポンスは <a href="/ja/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/#cors-security-in-amp">AMP CORS セキュリティガイドライン</a>に準拠する必要があります。</p> <p>以下の例では、カスタマイズされたコンテンツをリストで表示するための認証情報などが指定されています。</p> <div class="-ta"><pre><span></span><code> <span class="p"><</span><span class="nt">amp-list</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">"<%host%>/json/product.json?clientId=CLIENT_ID(myCookieId)"</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> Your personal offer: ${{price}} <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> </code></pre></div> <h5 id="items（オプション）">items（オプション） <a name="items-optional"></a></h5> <p>レスポンス内でレンダリングする配列を特定する式を定義します。これは、JSON レスポンスのフィールドを介してナビゲートするドット表記の式です。デフォルトでは、<code><amp-list></code> は配列を期待しますが、<code>single-item</code> 属性を使用してオブジェクトからデータを読み込むこともできます。</p> <ul> <li>デフォルト値は <code>"items"</code> です。期待されるレスポンスは <code>{items: [...]}</code> です。</li> <li>レスポンス自体が目的の配列の場合は、<code>"."</code> の値を使用します。期待されるレスポンスは <code>[...]</code> です。</li> <li>ネストされたナビゲーションは許容されます（<code>"field1.field2"</code> など）。期待されるレスポンスは <code>{field1: {field2: [...]}}</code> です。</li> </ul> <p><code>items="items"</code> が指定されている場合（デフォルト）、レスポンスは <code>"items"</code> と呼ばれる配列プロパティを含む JSON オブジェクトである必要があります。</p> <div class="-ta"><pre><span></span><code>{ "items": [...] } </code></pre></div> <h4 id="max-items（オプション）">max-items（オプション） <a name="max-items-optional"></a></h4> <p>レンダリングするアイテム配列の最大長を指定する整数値。戻り値が <code>max-items</code> を超えると、<code>items</code> 配列が <code>max-items</code> のエントリ数で切り捨てられます。</p> <h4 id="single-item（オプション）">single-item（オプション） <a name="single-item-optional"></a></h4> <p>この属性を指定すると、<code><amp-list></code> において返された結果が単一の要素配列のように扱われます。オブジェクトレスポンスは配列でラップされるため、<code>{items: {...}}</code> は <code>{items: [{...}]}</code> のように動作するようになります。</p> <h4 id="reset-on-refresh（オプション）">reset-on-refresh（オプション） <a name="reset-on-refresh-optional"></a></h4> <p>リストのソースが <code>amp-bind</code> アクションまたは <code>refresh()</code> アクションによって更新されたときに、読み込みインジケーターとプレースホルダを再表示します。</p> <p>デフォルトでは、ネットワークフェッチを開始させる更新時にのみトリガーされます。すべての更新時にリセットするには、<code>reset-on-refresh="always"</code> を使用します。</p> <h4 id="[is-layout-container]-（試験運用版、オプション）">[is-layout-container] （試験運用版、オプション） <a name="binding-optional"></a></h4> <p>これはバインド可能な属性です。デフォルトでは必ず false に指定されている必要があります。<code>bind</code> を介して true に設定すると、<code><amp-list></code> のレイアウトが <code>CONTAINER</code> に変更されます。この属性は、amp-list の動的なサイズ変更を処理する際に役立ちます。<code><amp-list></code> がレイアウト <code>CONTAINER</code> をサポートしていないのと同じ理由により（最初の読み込み時にコンテンツが移動される可能性があります）、デフォルトではこの属性を true に設定できません。この属性は試験運用版として、<code>amp-list-resizable-children</code> で使用できます。また、<code>changeToLayoutContainer</code> アクションを使用することも可能です。</p> <h4 id="binding（オプション）">binding（オプション） <a name="is-layout-container-optional"></a></h4> <p><code><amp-list></code> を使用しているページで <code>amp-bind</code> も使用する場合、レンダリング対象の子要素でのバインディング（<code>[text]</code> など）の評価に基づいてレンダリングをブロックするかどうかを制御します。</p> <p>パフォーマンスの強化のために、<code>binding="no"</code> または <code>binding="refresh"</code> を使用することをおすすめします。</p> <ul> <li><code>binding="no"</code>: レンダリングをブロックしません<strong>（最速）</strong>。</li> <li><code>binding="refresh"</code>: 最初の読み込み時にレンダリングをブロックしません<strong>（速い）</strong>。</li> <li><code>binding="always"</code>: 常にレンダリングをブロックします<strong>（遅い）</strong>。</li> </ul> <p><code>binding</code> 属性を指定しない場合のデフォルト値は <code>always</code> です。</p> <h2 id="試験運用版:-追加の読み込みと無限スクロール（amp-list-load-more）">試験運用版: 追加の読み込みと無限スクロール（amp-list-load-more） <a name="common-attributes"></a></h2> <p><code><amp-list></code> でのページ分けと無限スクロールの実装として <code>amp-list-load-more</code>（試験運用版）が導入されました。この機能を有効にするには、<a href="https://cdn.ampproject.org/experiments.html">テストページ</a>で「amp-list-load-more」（試験運用版）を有効にして、<code>load-more</code> 属性を <code><amp-list></code> に追加します。この機能は現在、初期試用版のため、最終的な API は変更される可能性があります。</p> <h4 id="使用例">使用例 <a name="load-more-and-infinite-scroll"></a></h4> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-list</span> <span class="na">height</span><span class="o">=</span><span class="s">"200"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://my.rest.endpoint/"</span> <span class="na">width</span><span class="o">=</span><span class="s">"100"</span> <span class="na">load-more</span><span class="o">=</span><span class="s">"auto"</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">template</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-list</span><span class="p">></span> </code></pre></div> <p>実際の例については、<a href="https://github.com/ampproject/amphtml/blob/main/test/manual/amp-list/infinite-scroll-1.amp.html">test/manual/amp-list/infinite-scroll-1.amp.html</a> と <a href="https://github.com/ampproject/amphtml/blob/main/test/manual/amp-list/infinite-scroll-1.amp.html">test/manual/amp-list/infinite-scroll-2.amp.html</a> をご覧ください。</p> <h3 id="属性_1">属性 <a name="sample-usage"></a></h3> <h4 id="load-more（必須）">load-more（必須） <a name="attributes-1"></a></h4> <p>この属性には「auto」または「manual」を設定できます。「manual」に設定すると、<code><amp-list></code> の最後に「load-more」ボタンが表示されます。「auto」に設定すると、<code><amp-list></code> が無限スクロール効果用の 3 つのビューポートを自動的に読み込み、下方向に追加します。</p> <h4 id="load-more-bookmark（オプション）">load-more-bookmark（オプション） <a name="load-more-mandatory"></a></h4> <p>この属性では、返されたデータのフィールド名を指定します。このフィールド名によって次に読み込むアイテムの URL が指定されます。この属性が指定されていない場合、<code><amp-list></code> は、次に読み込む URL に対応する <code>load-more-src</code> フィールドが JSON ペイロードに設定されることを期待します。このフィールドが他の名前で呼ばれている場合、<code>load-more-bookmark</code> フィールドでそのフィールドの名前を指定できます。たとえば次のサンプルペイロードでは、<code>load-more-bookmark="next"</code> を指定しています。</p> <div class="-ta"><pre><span></span><code><span class="p">{</span> <span class="s2">"items"</span><span class="p">:</span> <span class="p">[</span><span class="o">...</span><span class="p">],</span> <span class="s2">"next"</span><span class="p">:</span> <span class="s2">"https://url.to.load"</span> <span class="p">}</span> </code></pre></div> <h3 id="load-more-要素のカスタマイズ">load-more 要素のカスタマイズ <a name="load-more-bookmark-optional"></a></h3> <p><code>load-more</code> 属性が設定された <code><amp-list></code> には、UI 要素（load-more ボタン、ローダー、load-failed 要素）と、リストの最後を示すエンドキャップ（オプション）が含まれます。これらの要素をカスタマイズするには、以下の属性を使用して、<code><amp-list-load-more></code> 要素を <code><amp-list></code> の子として指定します。</p> <h4 id="load-more-button">load-more-button <a name="customizing-load-more-elements"></a></h4> <p><code>load-more-button</code> 属性が設定された <code><amp-list-load-more></code> 要素。読み込む要素が他にもある場合、（手動の load-more の）リストの最後に表示されます。この要素をクリックするとフェッチがトリガーされ、<code>load-more-src</code> フィールド、または <code>load-more-bookmark</code> 属性に対応して返されたデータのフィールドに含まれている URL からさらに要素が読み込まれます。この要素をカスタマイズするには、<code>load-more-button</code> 属性が設定された子要素を <code><amp-list></code> に指定します。</p> <h5 id="例:">例: <a name="load-more-button"></a></h5> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-list</span> <span class="na">load-more</span><span class="o">=</span><span class="s">"manual"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://www.load.more.example.com/"</span> <span class="na">width</span><span class="o">=</span><span class="s">"400"</span> <span class="na">height</span><span class="o">=</span><span class="s">"800"</span><span class="p">></span> ... <span class="p"><</span><span class="nt">amp-list-load-more</span> <span class="na">load-more-button</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span><span class="p">></span>See More<span class="p"></</span><span class="nt">button</span><span class="p">></span> /* My custom see more button */ <span class="p"></</span><span class="nt">amp-list-load-more</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-list</span><span class="p">></span> </code></pre></div> <p>テンプレート化するには <code>amp-mustache</code> を使用します。</p> <h5 id="例:_1">例: <a name="example"></a></h5> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-list</span> <span class="na">load-more</span><span class="o">=</span><span class="s">"auto"</span> <span class="na">width</span><span class="o">=</span><span class="s">"100"</span> <span class="na">height</span><span class="o">=</span><span class="s">"500"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://www.load.more.example.com/"</span><span class="p">></span> ... <span class="p"><</span><span class="nt">amp-list-load-more</span> <span class="na">load-more-button</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> Showing {{#count}} out of {{#total}} items <span class="p"><</span><span class="nt">button</span><span class="p">></span> Click here to see more! <span class="p"></</span><span class="nt">button</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-load-more</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-list</span><span class="p">></span> </code></pre></div> <h4 id="load-more-loading">load-more-loading <a name="example-1"></a></h4> <p>この要素は、ユーザーがリストの最後に到達したときにコンテンツがまだ読み込む中の場合に表示されるローダーです。また、（<code><amp-list></code> の新しい子要素の読み込み中に）<code>load-more-button</code> 要素をクリックした場合にも表示されます。この要素をカスタマイズするには、<code>load-more-loading</code> 属性が設定された子要素を <code><amp-list></code> に指定します。以下に例を示します。</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-list</span> <span class="na">load-more</span><span class="o">=</span><span class="s">auto</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://www.load.more.example.com/"</span> <span class="na">width</span><span class="o">=</span><span class="s">"400"</span> <span class="na">height</span><span class="o">=</span><span class="s">"800"</span><span class="p">></span> ... <span class="p"><</span><span class="nt">amp-list-load-more</span> <span class="na">load-more-loading</span><span class="p">></span> <span class="p"><</span><span class="nt">svg</span><span class="p">></span>...<span class="p"></</span><span class="nt">svg</span><span class="p">></span> /* My custom loader */ <span class="p"></</span><span class="nt">amp-list-load-more</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-list</span><span class="p">></span> </code></pre></div> <h4 id="load-more-failed">load-more-failed <a name="load-more-loading"></a></h4> <p><code>load-more-failed</code> 属性を含む <code><amp-list-load-more></code> 要素。読み込みが失敗した場合に <code><amp-list></code> の一番下に表示される、<code>load-more-clickable</code> 属性が設定されたボタンが含まれています。この要素をクリックすると、失敗した URL の読み込みが再度トリガーされます。この要素をカスタマイズするには、<code>load-more-failed</code> 属性が設定された子要素を <code><amp-list></code> に指定します。以下に例を示します。</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-list</span> <span class="na">load-more</span><span class="o">=</span><span class="s">"auto"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://www.load.more.example.com/"</span> <span class="na">width</span><span class="o">=</span><span class="s">"200"</span> <span class="na">height</span><span class="o">=</span><span class="s">"500"</span><span class="p">></span> ... <span class="p"><</span><span class="nt">amp-list-load-more</span> <span class="na">load-more-failed</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span><span class="p">></span>Unable to Load More<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-list-load-more</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-list</span><span class="p">></span> </code></pre></div> <p>上の例では <code>load-more-failed</code> 要素全体をクリックできますが、この要素は、クリック可能な「再読み込み」ボタンを含む、クリックできない「読み込み失敗」要素にするのが一般的です。この点を考慮して、クリックできない要素と、<code>load-more-clickable</code> 要素を含むボタンを指定することができます。以下に例を示します。</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-list</span> <span class="na">load-more</span><span class="o">=</span><span class="s">"auto"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://www.load.more.example.com/"</span> <span class="na">width</span><span class="o">=</span><span class="s">"200"</span> <span class="na">height</span><span class="o">=</span><span class="s">"500"</span><span class="p">></span> ... <span class="p"><</span><span class="nt">amp-list-load-more</span> <span class="na">load-more-failed</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span><span class="p">></span> Here is some unclickable text saying sorry loading failed. <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">load-more-clickable</span><span class="p">></span>Click me to reload!<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-list-load-more</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-list</span><span class="p">></span> </code></pre></div> <h4 id="load-more-end">load-more-end <a name="load-more-failed"></a></h4> <p>この要素はデフォルトでは指定されませんが、<code>load-more-end</code> 属性を含む <code><amp-list-load-more></code> 要素が子要素として <code><amp-list></code> に追加されると、読み込むアイテムがもうない場合、この要素が <code><amp-list></code> の一番下に表示されます。この要素をテンプレート化するには、<code>amp-mustache</code> を使用します。以下に例を示します。</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-list</span> <span class="na">load-more</span><span class="o">=</span><span class="s">"auto"</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://www.load.more.example.com/"</span> <span class="na">width</span><span class="o">=</span><span class="s">"200"</span> <span class="na">height</span><span class="o">=</span><span class="s">"500"</span><span class="p">></span> ... <span class="p"><</span><span class="nt">amp-list-load-more</span> <span class="na">load-more-end</span><span class="p">></span> Congratulations! You've reached the end. /* Custom load-end element */ <span class="p"></</span><span class="nt">amp-list-load-more</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-list</span><span class="p">></span> </code></pre></div> <h5 id="共通の属性">共通の属性 <a name="load-more-end"></a></h5> <p>この要素には、AMP コンポーネントに拡張された<a href="/ja/documentation/guides-and-tutorials/learn/common_attributes/">共通の属性</a>が含まれます。</p> <h2 id="置換">置換 <a name="substitutions"></a></h2> <p><code><amp-list></code> では、標準的な URL 変数の置換をすべて使用できます。詳しくは、<a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md">置換ガイド</a>をご覧ください。</p> <p>例:</p> <div class="-ta"><pre><span></span><code><span class="p"><</span><span class="nt">amp-list</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://foo.com/list.json?RANDOM"</span><span class="p">></</span><span class="nt">amp-list</span><span class="p">></span> </code></pre></div> <p>この例のリクエストの送信先は、<code>https://foo.com/list.json?0.8390278471201</code> のようになります。RANDOM の値は各インプレッションに基づいてランダムに生成されます。</p> <h2 id="検証">検証 <a name="validation"></a></h2> <p>AMP 検証ツールの仕様で <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-list/validator-amp-list.protoascii">amp-list のルール</a>をご確認ください。</p> </section> <section class="ap--help"> <div class="-li"> <span class="-ls">さらに支援が必要ですか？</span> <p class="-lu">このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか？他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。</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/amphtml" 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> </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/components/stories/amp-list/"> <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/components/ads/amp-list/"> <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/components/email/amp-list/"> <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-component"> <div class="ap-o-sidebar"> <div class="nav"> <ul class="nav-list level-1"> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">3</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-3d-gltf/">amp-3d-gltf</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-3q-player/">amp-3q-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">A</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-access-fewcents/">amp-access-fewcents</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-access-laterpay/">amp-access-laterpay</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-access-poool/">amp-access-poool</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-access-scroll/">amp-access-scroll</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-access/">amp-access</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-accordion/">amp-accordion</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-action-macro/">amp-action-macro</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-ad-exit/">amp-ad-exit</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-ad/">amp-ad</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-addthis/">amp-addthis</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-analytics/">amp-analytics</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-anim/">amp-anim</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-animation/">amp-animation</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-apester-media/">amp-apester-media</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-app-banner/">amp-app-banner</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-audio/">amp-audio</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-auto-ads/">amp-auto-ads</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-autocomplete/">amp-autocomplete</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">B</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-base-carousel/">amp-base-carousel</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-beopinion/">amp-beopinion</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-bind/">amp-bind</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-bodymovin-animation/">amp-bodymovin-animation</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-brid-player/">amp-brid-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-brightcove/">amp-brightcove</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-byside-content/">amp-byside-content</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">C</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-call-tracking/">amp-call-tracking</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-carousel/">amp-carousel</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-connatix-player/">amp-connatix-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-consent/">amp-consent</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">D</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-dailymotion/">amp-dailymotion</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-date-countdown/">amp-date-countdown</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-date-display/">amp-date-display</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-date-picker/">amp-date-picker</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-delight-player/">amp-delight-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-dynamic-css-classes/">amp-dynamic-css-classes</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">E</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-embedly-card/">amp-embedly-card</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-experiment/">amp-experiment</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">F</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-facebook-comments/">amp-facebook-comments</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-facebook-like/">amp-facebook-like</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-facebook-page/">amp-facebook-page</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-facebook/">amp-facebook</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-fit-text/">amp-fit-text</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-font/">amp-font</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-form/">amp-form</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-fx-collection/">amp-fx-collection</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-fx-flying-carpet/">amp-fx-flying-carpet</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">G</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-geo/">amp-geo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-gfycat/">amp-gfycat</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-gist/">amp-gist</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-google-document-embed/">amp-google-document-embed</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-google-read-aloud-player/">amp-google-read-aloud-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">H</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-hulu/">amp-hulu</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">I</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-iframe/">amp-iframe</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-iframely/">amp-iframely</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-ima-video/">amp-ima-video</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-image-lightbox/">amp-image-lightbox</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-image-slider/">amp-image-slider</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-img/">amp-img</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-imgur/">amp-imgur</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-inline-gallery/">amp-inline-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-inputmask/">amp-inputmask</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-instagram/">amp-instagram</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-install-serviceworker/">amp-install-serviceworker</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-izlesene/">amp-izlesene</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">J</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-jwplayer/">amp-jwplayer</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">K</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-kaltura-player/">amp-kaltura-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">L</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-layout/">amp-layout</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-lightbox-gallery/">amp-lightbox-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-lightbox/">amp-lightbox</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-link-rewriter/">amp-link-rewriter</a> </li> <li class="nav-item level-2 active" autoscroll> <a class="nav-link" href="/ja/documentation/components/websites/amp-list/">amp-list</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-live-list/">amp-live-list</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">M</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-mathml/">amp-mathml</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-mega-menu/">amp-mega-menu</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-megaphone/">amp-megaphone</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-minute-media-player/">amp-minute-media-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-mowplayer/">amp-mowplayer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-mustache/">amp-mustache</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">N</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-nested-menu/">amp-nested-menu</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-next-page/">amp-next-page</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-nexxtv-player/">amp-nexxtv-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">O</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-o2-player/">amp-o2-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-onetap-google/">amp-onetap-google</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-ooyala-player/">amp-ooyala-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-orientation-observer/">amp-orientation-observer</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">P</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-pan-zoom/">amp-pan-zoom</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-pinterest/">amp-pinterest</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-pixel/">amp-pixel</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-playbuzz/">amp-playbuzz</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-position-observer/">amp-position-observer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-powr-player/">amp-powr-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">R</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-reach-player/">amp-reach-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-recaptcha-input/">amp-recaptcha-input</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-reddit/">amp-reddit</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-render/">amp-render</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-riddle-quiz/">amp-riddle-quiz</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">S</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-script/">amp-script</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-selector/">amp-selector</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-sidebar/">amp-sidebar</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-skimlinks/">amp-skimlinks</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-slikeplayer/">amp-slikeplayer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-smartlinks/">amp-smartlinks</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-social-share/">amp-social-share</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-soundcloud/">amp-soundcloud</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-springboard-player/">amp-springboard-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-sticky-ad/">amp-sticky-ad</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-stream-gallery/">amp-stream-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-subscriptions-google/">amp-subscriptions-google</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-subscriptions/">amp-subscriptions</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">T</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-tiktok/">amp-tiktok</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-timeago/">amp-timeago</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-truncate-text/">amp-truncate-text</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-twitter/">amp-twitter</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">U</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-user-notification/">amp-user-notification</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">V</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-video-docking/">amp-video-docking</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-video-iframe/">amp-video-iframe</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-video/">amp-video</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-vimeo/">amp-vimeo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-vine/">amp-vine</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-viqeo-player/">amp-viqeo-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-vk/">amp-vk</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">W</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-web-push/">amp-web-push</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-wistia-player/">amp-wistia-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-wordpress-embed/">amp-wordpress-embed</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">Y</li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-yotpo/">amp-yotpo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/ja/documentation/components/websites/amp-youtube/">amp-youtube</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> <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":"components","event_label":"banner","event_name":"banner"}},"breadcrumbLink":{"on":"click","selector":".ap-m-breadcrumbs-crumb","vars":{"event_action":"link","event_category":"components","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":"components","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":"components","event_label":"navigation","event_name":"navigation"}},"scrolledEnd":{"on":"scroll","scrollSpec":{"verticalBoundaries":[90]},"vars":{"event_action":"end","event_category":"components","event_label":"scroll","event_name":"scroll"}},"scrolledHalf":{"on":"scroll","scrollSpec":{"verticalBoundaries":[50]},"vars":{"event_action":"half","event_category":"components","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":"components","event_label":"sidebar","event_name":"sidebar"}},"sidebarToggle":{"on":"click","selector":"label[for=\"sidebar-desktop\"], label[for=\"sidebar\"]","vars":{"event_action":"toggle","event_category":"components","event_label":"sidebar","event_name":"sidebar"}},"tocLink":{"on":"click","selector":".ap-o-toc a","vars":{"event_action":"link","event_category":"components","event_label":"toc","event_name":"toc"}},"tocToggle":{"on":"click","selector":".ap-o-toc label","vars":{"event_action":"toggle","event_category":"components","event_label":"toc","event_name":"toc"}}},"vars":{"config":{"G-TYM9BH1XCX":{"groups":"default"}},"gtag_id":"G-TYM9BH1XCX"}}</script> </amp-analytics><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-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%))}}@keyframes collapse{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes expand{0%{transform:scale(0)}to{transform:scale(1)}}</style></body></html>