AMP：amp-scriptが実行されていません
Aug 28 2020
ウィンドウがスクロールし始めたときamp-scriptに、nav（トップメニューバー）のクラスを切り替えるために使用しようとしています。その効果は、固定ナビゲーションを半透明から白一色に変えることです。
これが私が試したものです...
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>My AMP Page</title>
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<style amp-custom>
nav {
position: fixed;
top: 0;
width: 100vw;
color: white;
background-color: rgba(0, 0, 0, 0.2);
z-index: 10;
text-align: center;
}
.opaque {
background-color: white;
color: black;
}
.hero {
height: max(25vh, 250px);
width: 100vw;
background: red;
}
.spacer {
height: 4em;
background: blue;
margin: 0.5em;
}
</style>
<meta name="amp-script-src" content="sha384-bpf6fazoofAb6S1aK0_hOIa1g6nDaC_SPbTuSJsMxEzAPc11oKjAnJZmeFAMKc2p ">
</head>
<body>
<script id="scroll-listener" type="text/plain" target="amp-script">
document.addEventListener("scroll", myFunction);
function myFunction() {
console.log('scrolled!!');
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("topnav").className = "opaque";
} else {
document.getElementById("topnav").className = "";
}
}
</script>
<nav id="topnav">
<h1>ACME Inc.</h1>
</nav>
<main>
<header class="hero"></header>
<article>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
</article>
</main>
</body>
</html>残念ながら、スクリプトはまったく効果がありません。またconsole.log、スクロールイベントがまったく報告されないかどうかを確認するステートメントを配置しましたが、コンソールに何も表示されません。
私がここで間違っていることについて何か考えはありますか？
更新：これが「非AMP」ページとして機能することを確認するために、上記の例の行を変更しました。
<script id="scroll-listener" type="text/plain" target="amp-script">...</script>
これに...
<script id="scroll-listener" type="text/javascript">...</script>
サイトは期待どおりに機能します。だから私は、書かれたJavaScriptが私がやりたいことをすることを確かに知っています。問題は、AMPがスクリプトを処理する方法に完全にあります。
回答
AlexandrKazakov Sep 02 2020 at 16:47
どうやら、公式ドキュメントに例があるので、amp-scriptがどのように機能するかを理解していないようです。これは奇妙なことです。
この例を試してください：
<!DOCTYPE html>
<html ⚡>
<head>
<meta charset="utf-8" />
<title>My AMP Page</title>
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
</style>
<noscript
><style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style></noscript
>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<meta name="amp-script-src" content="sha384-nPCFvs2yYOVX1DFcHvkEUY1aC6PdG8FAgPUG16rZwxfQJOPh_pM1rA-oUzDsg8pk" />
<style amp-custom>
nav {
position: fixed;
top: 0;
width: 100vw;
color: white;
background-color: rgba(0, 0, 0, 0.2);
z-index: 10;
text-align: center;
}
.opaque {
background-color: white;
color: black;
}
.hero {
height: max(25vh, 250px);
width: 100vw;
background: red;
}
.spacer {
height: 4em;
background: blue;
margin: 0.5em;
}
</style>
</head>
<body>
<amp-script script="scroll-listener">
<nav id="topnav">
<h1>ACME Inc.</h1>
</nav>
<main id="main">
<header class="hero"></header>
<article>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
</article>
</main>
</amp-script>
<script id="scroll-listener" type="text/plain" target="amp-script">
function myFunction(event) {
console.log('scrolled!!');
}
window.addEventListener("scroll", myFunction);
</script>
</body>
</html>上記の例はおそらくあなたが望むことをするのに役立たないでしょう、しかし少なくとも今あなたはamp-scriptがどのように働くかを理解するでしょう。
amp-scriptでは、多くの場合、カスタムイベントをトリガーする必要があり、ページが読み込まれた直後は機能しません。ここでそれについて読んでください：https://amp.dev/documentation/components/amp-script/?format=websites#user-gestures
このタスクを完了するには、amp-position-observerコンポーネントとamp-animationコンポーネントを使用することをお勧めします。次に例を示します。
<!DOCTYPE html>
<html ⚡>
<head>
<meta charset="utf-8" />
<title>My AMP Page</title>
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
</style>
<noscript
><style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style></noscript
>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
<style amp-custom>
nav {
position: fixed;
top: 0;
width: 100vw;
color: cyan;
background-color: rgba(0, 0, 0, 0.2);
z-index: 10;
text-align: center;
}
h1 {
position: relative;
z-index: 2;
}
.opaque {
background-color: white;
color: black;
}
.hero {
height: max(25vh, 250px);
width: 100vw;
background: red;
}
.spacer {
height: 4em;
background: blue;
margin: 0.5em;
}
.scroll-effect {
background-color: #fff;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
.top-anchor {
position: relative;
}
</style>
</head>
<body>
<div class="top-anchor">
<amp-position-observer on="enter:hideAnim.start; exit:showAnim.start" layout="nodisplay"></amp-position-observer>
</div>
<nav id="topnav">
<span class="scroll-effect" id="scroll-effect"></span>
<h1>ACME Inc.</h1>
</nav>
<main id="main">
<header class="hero"></header>
<article>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="spacer"></div>
</article>
</main>
<amp-animation id="showAnim" layout="nodisplay">
<script type="application/json">
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [
{
"selector": "#scroll-effect",
"keyframes": [
{
"opacity": "1",
"visibility": "visible"
}
]
}
]
}
</script>
</amp-animation>
<amp-animation id="hideAnim" layout="nodisplay">
<script type="application/json">
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [
{
"selector": "#scroll-effect",
"keyframes": [{ "opacity": "0", "visibility": "hidden" }]
}
]
}
</script>
</amp-animation>
</body>
</html>