hitode909の日記

趣味はマリンスポーツですの日記です

sitemap.xmlをクロールしてサイト内の全ページのAMPのバリデーションをしてくれるコマンドラインツールを作った

ウェブサービスのAMP対応するときに役立つ,sitemap.xmlをクロールしてサイト内の全ページのAMPのバリデーションをしてくれるコマンドラインツールを作った.
GitHubにも置いてあるのでご紹介します.

f:id:hitode909:20160623151922p:plain

はじめに:AMPのバリデーションについて

AMP(Accelerated Mobile Pages)はHTMLのサブセットなのだけど,ふつうのHTMLとちがって,バリデーションに通らないとAMPのページとは認めてもらえず,エラーが出てると検索結果などに出してもらえないので,がんばって直す必要がある.
バリデーションの主なやり方には,

  • クロールされるのを待ってSearch Consoleで見る
  • AMPバリデータを使う

の2つがある.順番に説明します.

クロールされるのを待ってSearch Consoleで見る

Search ConsoleからAMPのクロール状況を見れて,エラーが出てたら教えてくれる.

AMPのページがリリース済で,クロールも開始している場合は,インデックスされた進捗とあわせて見れるので良いけど,本番環境にデプロイしないとクロールされないので,開発中には使いにくい.

AMPバリデータを使う

AMPはバリデータが公式で提供されていて,エラーがあるか調べることができる.実行方法もいくつかある(実行方法がいろいろあるだけで,実体は同じ).

AMPのページのURLの末尾に#development=1をつけると,エラーがconsoleに出てくる.localhostで開発しているときなどは,ちょっと変えてはリロードしてエラーを見る,というスタイルで開発できる.

Adding "#development=1" to the URL of the page instructs the AMP Runtime to run a series of assertions confirming the page's markup meets the AMP HTML Specification.

GitHub - ampproject/amphtml: AMP HTML source code, samples, and documentation. See below for more info.

Chrome拡張もあって,このページにはAMP版がありますよ,とか,エラーがありますよ,とかボタンが出る.この拡張を入れて朝日新聞のサイトとか見ると,1クリックでAMP版に飛べたりする.
chrome.google.com

ブラウザから実行できるやつもあって,URLを入れるとバリデーションしてくれる.

バリデータを手元でビルドして,コマンドラインから実行することもできる.Protocol Buffersとか要るのでちょっとめんどう.
github.com

npmのamp-validator.Zombieというヘッドレスブラウザで#development=1つきでページを開いて,コンソールに出てきた結果を抜き出してくれる,という仕組み.ビルドしなくていいので 手軽に使える.
www.npmjs.com

ページがたくさんあると全部見るのはたいへん

対象のページを手打ちで作っている場合はバリデータを実行すればよいけど,対象のページがたくさんあると,全部見て回るのはたいへん.たとえば,ブログのシステムを作っていて,そのブログが新たにAMPを配信するときなどは,AMPを配信するページが一気に増えるので,全部手動で見て回るのは困難.
いろんなページを無秩序に順番に見ていくのは効率が悪いので,こういうことは自動化したほうがよい.
また,既存のAMPのエラーを直しました,というときに,別のページで別のエラーが出ている可能性もあるので,エラー出てないか監視したい,という話もあって,そう考えると自動でチェックできたほうが良い.

f:id:hitode909:20160623152230p:plain

機械的に全ページチェックしたい

amp-error-collectorというコマンドラインのツールを作った.sitemap.xmlのURLを渡すと,そこに書かれてるページを全部見て,AMPのバリデーションを通して,エラーがどれくらい出てるか教えてくれる.
github.com

こんな感じでセットアップして実行する.RubyとNodeが必要.つくりおきというブログがAMP対応していて,記事もたくさんあるので,バリデーションかけてみましょう.

% ./setup.sh
% bundle exec -- ruby collect-errors.rb http://tsukurioki.hatenablog.com/sitemap.xml | tee a.md

ログがばらばら出るので,標準出力をteeとかで別のファイルに向けるのがおすすめ.

% bundle exec -- ruby collect-errors.rb http://tsukurioki.hatenablog.com/sitemap.xml
Error Report of http://tsukurioki.hatenablog.com/sitemap.xml
I, [2016-06-23T15:10:27.721369 #79725]  INFO -- : validate http://tsukurioki.hatenablog.com/entry/2016/06/20/090000?amp=1
I, [2016-06-23T15:10:27.924578 #79725]  INFO -- : validate http://tsukurioki.hatenablog.com/entry/2016/06/20/033324?amp=1
I, [2016-06-23T15:10:27.934522 #79725]  INFO -- : validate http://tsukurioki.hatenablog.com/entry/2016/06/22/092016?amp=1
I, [2016-06-23T15:10:28.086394 #79725]  INFO -- : validate http://tsukurioki.hatenablog.com/entry/2016/06/19/095649?amp=1
I, [2016-06-23T15:10:30.955057 #79725]  INFO -- : success
I, [2016-06-23T15:10:31.060164 #79725]  INFO -- : validate http://tsukurioki.hatenablog.com/entry/2016/06/19/005512?amp=1
I, [2016-06-23T15:10:33.135304 #79725]  INFO -- : success
I, [2016-06-23T15:10:33.227255 #79725]  INFO -- : success
I, [2016-06-23T15:10:33.247395 #79725]  INFO -- : validate http://tsukurioki.hatenablog.com/entry/2016/06/18/213528?amp=1
I, [2016-06-23T15:10:33.287214 #79725]  INFO -- : success
I, [2016-06-23T15:10:33.352698 #79725]  INFO -- : validate http://tsukurioki.hatenablog.com/entry/2016/06/17/082458?amp=1
I, [2016-06-23T15:10:33.406264 #79725]  INFO -- : validate http://tsukurioki.hatenablog.com/entry/2016/06/13/234510?amp=1

しばらく待つとバリデーション結果の素朴なレポートができる.結果のmarkdownはこちら.


309記事中308記事(99%)はvalidで,1記事だけ変なのがある,というレポートが出ている.

http://tsukurioki.hatenablog.com/entry/2016/05/16/010134?amp=1
94:4 Invalid URL protocol 'chrome:' for attribute 'href' in tag 'a'.

該当のページを見ると,たしかに,記事中からなぜかGoogle Chromeの設定画面に誘導している.
AMPではaタグのhrefはhttpかhttpsに限られているので,たしかにinvalidである.
今回は,chrome://settingsへのリンクを消すかなにかして記事を編集して直せるけど,システムの不具合なら,システム側のコードを改修して直すことになる.
tsukurioki.hatenablog.com


このツールがやっていることは,

  • 指定されたsitemap.xmlを解析してHTMLのリストを抜き出す
  • HTMLに埋まってるlinkタグを見てAMP版のページを探す
  • 順番にnpmのamp-validatorを呼出してバリデーションする
  • バリデーション結果をJSONで取得して,エラーがあったらレポートに書き出す

ということで,特定のウェブサービスに特化した作りをしていない.
上の例ではつくりおきというはてなブログをクロールしているけど,一般的なsitemap.xmlが置いてあるウェブサービスなら同様にクロールすることができる.
注意すべきこととしては,開発中に使う用途のものなので,スリープとか入れず,気前よくクロールしまくるので,他社のサイトなどに対して使うと行儀の悪いことになると思う.開発中に使いたいときは,localhostで起動して,手元に向けて実行しましょう.

まとめ

ウェブサービスのAMP対応を実装するさいに役立つコマンドラインツールを作ったのでご紹介しました.
はてなブログのAMP対応(ベータ版)を進めるさいにも,開発中にこのツールを使ってエラー率を計測しながら作っていて,効率的に進めることができました.
staff.hatenablog.com


来週末のヤパチーでもAMPの話をします.30分くらいしゃべるので来てください.チケットはすでに倍率高めかもしれない.
yapcasia8oji-2016mid.hachiojipm.org

あと,今回作ったようなツールがないと不便だと思うのだけど,みんなどうやってやってるのか,知見あったら教えてください.



イラスト: 冬季オリンピックのイラスト「スピードスケート」 | かわいいフリー素材集 いらすとや, 忙しく仕事をしている女性会社員のイラスト | かわいいフリー素材集 いらすとや

追記

sitemap.xmlをクロールしてサイト内の全ページのAMPのバリデーションをしてくれるコマンドラインツールを作った - hitode909の日記

便利そう。これ RSS じゃだめかな?

2016/06/23 17:28
b.hatena.ne.jp
たしかにフィード読めてもよさそう.ページネーションに対応したAtomとかなら全記事たどっていけそう.








こういう話もあって,AMP本体のリポジトリに入ってるバリデータを使う版も作ろうとしています.

追記(2)

AMP本体のリポジトリに入ってるバリデータを使うようになりました.amphtml/validator/index.jsを使っています.