ウェブサービスのAMP対応するときに役立つ，sitemap.xmlをクロールしてサイト内の全ページのAMPのバリデーションをしてくれるコマンドラインツールを作った．
GitHubにも置いてあるのでご紹介します．
はじめに：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のエラーを直しました，というときに，別のページで別のエラーが出ている可能性もあるので，エラー出てないか監視したい，という話もあって，そう考えると自動でチェックできたほうが良い．
機械的に全ページチェックしたい
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の日記b.hatena.ne.jp
- [amp]
便利そう。これ RSS じゃだめかな？
2016/06/23 17:28
たしかにフィード読めてもよさそう．ページネーションに対応したAtomとかなら全記事たどっていけそう．
ひとでくんさんのツール、古いバージョンのAMP validator (dorightdigital/amp-validator) 使ってるんで、ちょっとおすすめ出来ない可能性がある
— Yoshifumi YAMAGUCHI (@ymotongpoo) 2016年6月23日
@ymotongpoo nodeだけで動いて簡単だったのでそっちを使ってたのですが，ちゃんとセットアップできれば，ampproject/amphtmlに入ってるやつ使えたほうがよさそうですね 古いバージョンという関係なの知りませんでした
— 趣味はマリンスポーツです (@hitode909) 2016年6月23日
@hitode909 ampproject/amphtml内のやつを簡単に使えればいいんだけど、npm化されてないので、そこは本体側で変更の余地ありかなあとは思います。古いバージョン、というのは単にレポジトリの最終更新が3ヶ月前だったからです。
— Yoshifumi YAMAGUCHI (@ymotongpoo) 2016年6月23日
@ymotongpoo なるほど分かってきました．dorightdigital/amp-validator自体はバリデータを持ってなくて，#development=1をつけてアクセスしてコンソールの出力を拾ってきているだけなので，バリデーション結果は同じかなと思ってました
— 趣味はマリンスポーツです (@hitode909) 2016年6月23日
@hitode909 なるほど。そこまで見てませんでした。ありがとうございます。もうちょっと中身見たほうが良さそうですね。
— Yoshifumi YAMAGUCHI (@ymotongpoo) 2016年6月23日
@ymotongpoo いえいえありがとうございます，validator/index.jsで同じようなことできそうだったのでもうちょっと見てみます
— 趣味はマリンスポーツです (@hitode909) 2016年6月23日
こういう話もあって，AMP本体のリポジトリに入ってるバリデータを使う版も作ろうとしています．
追記(2)
AMP本体のリポジトリに入ってるバリデータを使うようになりました．amphtml/validator/index.jsを使っています．
