WWW Watch

閲覧中の URL を AMP (Accelerated Mobile Pages) バリデータに投げるブックマークレット

q-Az さんが公開した 「AMP ページに #development=1 を付けて開くブックマークレット」 に感化されて、閲覧中の URL を Web 版の AMP バリデータに送信するブックマークレットを作ったので共有します。私が作ったシンプル版と、q-Az さんのものを改造した版の 2バージョンを掲載。

Twitter で流れてきて拝見したのですが、q-Az さんで、「AMP ページに #development=1 を付けて開くブックマークレット」 という記事が上がっていました。便利だなと思ったわけですが、つい先日、AMP バリデータの Web 版が公開されていますので、補足として、閲覧中の URL をこの AMP バリデータ に投げるブックマークレットも作って共有しておきます。

単純に閲覧中の URL を AMP バリデータに投げるシンプル版

AMP ページをあらかじめ開いておいて、そのページ上で下記のブックマークレットを実行すると、URL をそのまま AMP バリデータに送信します。一番単純なやつ。もちろん、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 バリデーション

関連エントリー

ブックマークレットに関連するエントリー

Recent Entry

全ての記事一覧を見る

Hot Entry

逆引きおすすめエントリー