AMPページに＃development=1を付けて開くブックマークレット

2016-10-31

AMP の HTML が間違っていないかをチェックするときに AMP ページの URLの末尾に #development=1 を付けてあげるとブラウザのデベロッパツールで確認をすることができます。

ただ「#development=1 って書くの長いし面倒くさい」と思ったので自動でハッシュをつけて AMP ページを開いてくれるブックマークレットを作りました。

amp-development

以下のような条件で3つに分岐させています。

AMP ページが存在する通常ページ
・・・AMP ページに #development=1 を付与してページを開く

開いているページがすでに AMP ページ
・・・URL 末尾に #development=1 を付与してページを開く

AMP ページがない
・・・その旨をアラート

#development=1 ブックマークレット

ブックマークレットの登録の仕方は割愛します。わからない方は「ブックマークレット登録」あたりで検索すればたくさん出てきます。

以下のコードをブックマークレットに登録すると使えます。

javascript:(function(){if(document.getElementsByTagName("html")[0].hasAttribute("⚡")||document.getElementsByTagName("html")[0].hasAttribute("amp")){window.open(location.href+"#development=1")}else{if(document.querySelectorAll("link[rel='amphtml']").length){window.open(document.querySelectorAll("link[rel='amphtml']")[0].href+"#development=1")}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")}}})()

現在このページも AMP ページが存在するので、ここでこのブックマークレットを使うと AMP ページが #development=1 付きで開きます。

AMPブックマークレット

「AMP#dev=1」などわかりやすい名前を付けて保存しておきましょう。

コードの解説

興味のある方だけ向け。ブックマークレットなのでコードの効率化は考えていません。

JavaScript

javascript:
(function() {

    //html に属性 ⚡ または amp が存在するかで場合分け
    if (document.getElementsByTagName("html")[0].hasAttribute("⚡") || document.getElementsByTagName("html")[0].hasAttribute("amp")) {

        //属性が存在しすでに AMP ページだった場合末尾に #development=1 を付与
        window.open(location.href+"#development=1")
    } else {

        //属性がなく通常のページだった場合、rel="amphtml" の link 要素があるかどうかで場合分け
        if (document.querySelectorAll("link[rel='amphtml']").length) {

            //rel="amphtml" があった場合、そのページを開き #development=1 を付与
            window.open(document.querySelectorAll("link[rel='amphtml']")[0].href+"#development=1")
        } 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")
        }
    }
})()

まとめ

AMP ページを開いてくれる chrome の拡張などもあるのですが、#development=1 までは付けてくれないので自分で作りました。これで URL バーの中に #development=1 を書く手間がなくなります。

モバイルでの AMP インデックスが始まったので、ますます AMP の重要性が高くなっています。エラーがあると AMP ではインデックスされないので頑張ってエラーをつぶしていきましょう。