ウェブサービスの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を使っています.