この記事は Sebastian Benz による The AMP Blog の記事 "Announcing AMP Toolbox 1.0" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

少し前から存在していた AMP Toolbox が 1.0 のマイルストーンに到達しています。これを期に、きちんと紹介しておきましょう。一言で言えば、AMP Toolbox は AMP ページを簡単に公開するためのコマンドライン ツールと JS API の集合体です。それぞれのツールは個別にダウンロードして使用できます。
1.0 リリースには、2 つの大きなアップデートが含まれています。
  1. 1. AMP ドキュメント用の lint ツール: AMP Linter は、イメージの欠落や正しくないサイズのイメージ、CORS ヘッダーの欠落、無効なメタデータなどのエラーや疑わしい構造を報告します。
  2. 最適化された有効な AMP のサポート: AMP Optimizer が有効な AMP を生成するようになります。これにより、最適化された AMP ページをホストするのがとても簡単になります。詳細については、先日のブログ投稿をご覧ください。
しかし、もっとすばらしいことがあります！AMP Toolbox のその他の機能について、詳しく紹介しましょう。

AMP CLI

何より、AMP Toolbox に含まれているほとんどの機能はコマンドライン インターフェースから使うことができます。NPM からグローバルにインストールできます。
$ npm install @ampproject/toolbox-cli
$ amp help
または、NPM のビルトイン `npx` ツールを使って、都度コマンドを実行することもできます。
$ npx @ampproject/toolbox-cli help

AMP Linter

最新の toolbox-linter は、AMP ドキュメントのよくある間違いやベスト プラクティスをチェックしてくれます。
$ amp lint https://amp.dev

PASS 1x1 images are specified by <amp-pixel>
WARN All <amp-img> have reasonable width and height
> [https://blog.amp.dev/wp-content/uploads/2019/06/cf_hero.png]: actual ratio [1999/1140 = 1.75] does not match specified [16/9 = 1.77]
> [https://blog.amp.dev/wp-content/uploads/2018/10/img_20180926_163001-01.jpeg]: actual ratio [3680/2314 = 1.59] does not match specified [16/9 = 1.77]
PASS Videos are under 4MB
PASS <amp-video><source/></amp-video> syntax is used for video
PASS Endpoints are accessible from cache
PASS Endpoints are accessible from origin
FAIL <meta charset> is the first <meta> tag
> <meta charset> not the first <meta> tag
PASS Runtime is preloaded
次のようにすると、インストールせずに実行することもできます。
$ npx @ampproject/toolbox-cli lint https://amp.dev
サイトに SXG サポートを追加する場合、AMP Linter の SXG モードが非常に重宝します。
$ amp lint -f sxg https://amp.dev

PASS /amppkg/ is forwarded correctly
PASS application/signed-exchange content negotiation is correct
PASS dump-signedexchange -verify does not report errors
PASS vary header is correct

AMP Optimizer

AMP Optimizer は、AMP ページのレンダリング パフォーマンスをサーバーサイドで向上させるツールです。AMP Optimizer は AMP パフォーマンスのベスト プラクティスを実装しており、AMP のサーバーサイド レンダリングをサポートします。これらの最適化により、FCP 時間を最大 50% 短縮できます。
これを使ってみるには、CLI で次のように入力します。
$ amp optimize https://amp.dev
$ amp optimize file.html
なお、本番環境では、ビルドまたはレンダリング チェーンの一部として toolbox-optimizer を組み込む方がよいでしょう。また、Express ミドルウェア amp-optimizer-express も利用できます。これは、AMP のサーバーサイド レンダリングをすぐに適用できるようにします。

AMP Cache URL

テストの際に、AMP ページがすべての AMP キャッシュで動作するかを確認しておくとよいでしょう。toolbox-cache-url を使うと、オリジン URL を AMP Cache URL 形式に変換できます。
$ amp curls https://amp.dev

https://amp-dev.cdn.ampproject.org/c/s/amp.dev
https://amp-dev.amp.cloudflare.com/c/s/amp.dev
https://amp-dev.bing-amp.com/c/s/amp.dev
特定のキャッシュに対して使うには、次のようにします。
$ amp curls --cache=google https://amp.dev

https://amp-dev.cdn.ampproject.org/c/s/amp.dev

AMP Cache List

すべての公式 AMP Cache のリストを取得する API もあります。これはバックエンドで CORS を実装する際に便利です。
const Caches = require('@ampproject/toolbox-cache-list');

Caches.list().then(console.log);
場合によっては、AMP Cache の AMP ドキュメントをすばやく更新または削除しなければならないこともあるでしょう。CLI 版の AMP Update Cache API を使うと、とても簡単に実現できます。
$ amp update-cache https://www.example.com/ --privateKey /path/to/private-key.pem
もちろん、toolbox-update-cache パッケージに含まれる API 版も利用することもできます。

AMP CORS

CORS と言えば、amp-list や amp-state などの多くの AMP コンポーネントが CORS リクエストを使ってリモート エンドポイントを活用しています。AMP Toolbox には、AMP ページに必要なすべての CORS ヘッダーを自動的に追加する connect/express ミドルウェアが含まれています。express アプリケーションに toolbox-cors ミドルウェアを追加しさえすれば、あとは CORS について何もしなくても AMP ページを提供できます。
const express = require('express');
const ampCors = require('@ampproject/toolbox-cors');

const app = express();

// That's it!
app.use(ampCors())

AMP 検証ルール

お気に入りのテキスト エディタで AMP 固有のコード補完を実現したい場合は、AMP の検証ルールを問い合わせる javascript ライブラリ amp-validator-rules を確認してみてください。amp-img 要素のすべての有効な属性をリストするサンプルを次に示します。
import validatorRules from '@ampproject/toolbox-validator-rules';
 
validatorRules.fetch().then(rules => {
  // Get all website specific tag rules ...
  const tags = rules.getTagsForFormat('AMP');
  // ...find the definition of the amp-img tag...
  const ampImg = tags.find(e => e.tagName === 'AMP-IMG');
 
  const ampImgAttrs = ampImg.attrs
    // ...filter global, layout and amp-bind attributes...
    .filter(e => !e.name.startsWith('[') && !e.global && !e.layout)
    // ...extract the name...
    .map(e => e.name)
    // ...sort alphabetically...
    .sort();
 
  // ...and display result in the console.
  console.log(ampImgAttrs);
});

まとめ

AMP Toolbox は、コマンドラインや API でよく行われるタスクを簡単にすることを目指しています。足りない機能があると感じた方は、ぜひお知らせください！

 投稿者: Google デベロッパー アドボケート、Sebastian Benz

Reviewed by Chiko Shimizu - Developer Relations Team