hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

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

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を使っています．