Twitter で流れてきて拝見したのですが、q-Az さんで、「AMP ページに ＃development=1 を付けて開くブックマークレット」 という記事が上がっていました。便利だなと思ったわけですが、つい先日、AMP バリデータの Web 版が公開されていますので、補足として、閲覧中の URL をこの AMP バリデータ に投げるブックマークレットも作って共有しておきます。
単純に閲覧中の URL を AMP バリデータに投げるシンプル版
AMP ページをあらかじめ開いておいて、そのページ上で下記のブックマークレットを実行すると、URL をそのまま AMP バリデータに送信します。一番単純なやつ。もちろん、AMP ページ以外で実行すればバリデーションエラーが沢山帰ってくると思います。
上のリンクをブックマークバーなどにドラック & ドロップするか、右クリックしてコンテキストメニューから「お気に入りに追加 （IE の場合）」や「このリンクをブックマーク （Firefox の場合）」 などを選択して、ブックマークに追加してください。
もしくは下記のソースコードをコピーして、適当に作ったブックマークの URL 欄にペーストして書き換えても使えます。
javascript:(function(){var%20u=encodeURIComponent(document.location.href);window.open(%27https://validator.ampproject.org/#url=%27+u,%27_blank%27);})();
q-Az さんのブックマークレットを改造するなら版
q-Az さんが公開しているブックマークレットを、「#development=1 付きで開く」 ではなく、「AMP バリデータに投げる」 ようにするなら、下記のような感じになると思います。ソースコードの書き方は極力、オリジナルを尊重しています。
javascript:
(function() {
//html に属性 ⚡ または amp が存在するかで場合分け
if (document.getElementsByTagName("html")[0].hasAttribute("⚡") || document.getElementsByTagName("html")[0].hasAttribute("amp")) {
//属性が存在しすでに AMP ページだった場合、URL を AMP バリデータに送信
window.open("https://validator.ampproject.org/#url="+encodeURIComponent(location.href))
} else {
//属性がなく通常のページだった場合、rel="amphtml" の link 要素があるかどうかで場合分け
if (document.querySelectorAll("link[rel='amphtml']").length) {
//rel="amphtml" があった場合、見つけた AMP ページの URL を AMP バリデータに送信
window.open("https://validator.ampproject.org/#url="+encodeURIComponent(document.querySelectorAll("link[rel='amphtml']")[0].href))
} else {
//なかった場合はアラート
alert("AMP%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82")
}
}
})()
同じく、ブックマークレットとして使うなら下記のソースコードをコピーするか、その下のリンクをブックマークバーなどにドラック & ドロップするか、右クリックしてコンテキストメニューから「お気に入りに追加 （IE の場合）」や「このリンクをブックマーク （Firefox の場合）」 などを選択して、ブックマークに追加してください。
javascript:(function(){if(document.getElementsByTagName(%22html%22)[0].hasAttribute(%22%E2%9A%A1%22)||document.getElementsByTagName(%22html%22)[0].hasAttribute(%22amp%22)){window.open(%22https://validator.ampproject.org/#url=%22+encodeURIComponent(location.href))}else{if(document.querySelectorAll(%22link[rel=%27amphtml%27]%22).length){window.open(%22https://validator.ampproject.org/#url=%22+encodeURIComponent(document.querySelectorAll(%22link[rel=%27amphtml%27]%22)[0].href))}else{alert(%22AMP%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82%22)}}})()
関連エントリー
- AMP （Accelerated Mobile Pages） バリデータの Web 版が公開される
- AMP （Accelerated Mobile Pages） HTML を出力するようにしてみたけど面倒くさかった話
- AMP HTML でアコーディオンやカルーセル表示などを実装する拡張コンポーネントを使ってみる
- amp-analytics コンポーネントを使用した AMP HTML への Google Analytics 導入方法
- Google Search Console に AMP の項目が追加される
